@7365admin1/layer-common 4.146.0 → 4.147.0

package/components/VisitorManagement.vue

@@ -9,11 +9,10 @@
       three buttons, same handlers, same permission gates - moved, not changed.
     -->
     <v-col cols="12">
-      <PageHeader title="Visitor Mgmt">
+      <PageHeader title="Visitor Management">
         <template #actions>
           <AppButton
             v-if="canScanVisitorQRCode"
-            variant="ghost"
             @click="dialog.scanVisitorQRCode = true"
           >
             Scan QR Code
@@ -93,7 +92,9 @@
               append-inner-icon="mdi-magnify"
               hide-details
             />
+            <!-- iSecure: the Visitors tab only. -->
             <v-checkbox
+              v-if="activeTab === 'registered'"
               v-model="displayNotCheckedOut"
               class="text-subtitle-2"
               hide-details
@@ -108,13 +109,15 @@
               hide-details
             />
             <InputDatePicker v-model="dateTo" density="compact" hide-details />
+            <!-- iSecure: every tab but Unregistered; the Guests tab offers
+                 Guest / Contractor, the Visitors tab the eight types. -->
             <AppSelect
-              v-if="activeTab == 'registered'"
+              v-if="typeFilterOptions.length"
               v-model="filterTypes"
-              label="Filter by types"
+              label="Filter by type"
               item-title="label"
               item-value="value"
-              :items="visitorSelection"
+              :items="typeFilterOptions"
               class="visitor-type-filter"
               compact
               clearable
@@ -124,16 +127,66 @@
         </v-row>
       </template>
 
+      <!-- iSecure's first column: Name / Phone / NRIC (NRIC masked to the
+           last 4), "(+N members)" on a lead, "(+1 Lead)" on a member's own
+           row, and "Security Invite" on an invitation raised at the gate. -->
       <template v-slot:item.name="{ item }">
+        <v-chip
+          v-if="activeTab !== 'overnight-parking' && isGateInvitation(item)"
+          size="x-small"
+          color="primary"
+          variant="tonal"
+          class="mb-1"
+          >Security Invite</v-chip
+        >
         <span class="d-flex align-center ga-2">
           <span>
             <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
           </span>
-          <span class="text-capitalize">{{ item?.name }}</span>
+          <span class="text-capitalize">{{ item?.name || "N/A" }}</span>
         </span>
         <span class="text-grey text-caption" v-if="item?.members?.length > 0"
-          >( +{{ item?.members?.length }} members)</span
+          >(+{{ item?.members?.length }} members)</span
         >
+        <span class="text-grey text-caption" v-else-if="item?.leadId"
+          >(+1 Lead)</span
+        >
+        <template v-if="activeTab !== 'overnight-parking'">
+          <span class="d-flex align-center ga-2">
+            <v-icon icon="mdi-phone" size="15" />
+            <span>{{ item?.contact || "N/A" }}</span>
+          </span>
+          <span class="d-flex align-center ga-2">
+            <v-icon icon="mdi-card-account-details-outline" size="15" />
+            <span>{{ item?.nric ? maskNRIC(item.nric) : "N/A" }}</span>
+          </span>
+        </template>
+      </template>
+
+      <!-- Unregistered tab: the plate the camera read is all a row has. -->
+      <template v-slot:item.vehicle-number="{ item }">
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-car-back" size="15" />
+          <span>{{ item?.plateNumber || "N/A" }}</span>
+        </span>
+      </template>
+
+      <!-- iSecure's second column: Vehicle # / Type / Company. -->
+      <template v-slot:item.vehicle-type-company="{ item }">
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-car-back" size="15" />
+          <span>{{ item?.plateNumber ? String(item.plateNumber).toUpperCase() : "N/A" }}</span>
+        </span>
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-account" size="15" />
+          <v-chip v-if="item.type === 'contractor' && item.contractorType === 'managing-agent-staff'" size="x-small"
+            color="primary" variant="tonal">MA staff</v-chip>
+          <span v-else class="text-capitalize">{{ visitorTypeLabel(item) }}</span>
+        </span>
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-domain" size="15" />
+          <span class="text-capitalize">{{ item?.companyName || item?.company || "N/A" }}</span>
+        </span>
       </template>
 
       <template v-slot:item.email-vehicleNumber="{ item }">
@@ -159,22 +212,6 @@
         </span>
       </template>
 
-      <template v-slot:item.type-company="{ item }">
-        <span class="d-flex align-center ga-2">
-          <v-icon icon="mdi-user" size="15" />
-          <v-chip v-if="item.type === 'contractor' && item.contractorType === 'managing-agent-staff'" size="x-small"
-            color="primary" variant="tonal">MA staff</v-chip>
-          <span v-else-if="item.type === 'contractor'" class="text-capitalize">{{
-            formatCamelCaseToWords(item.contractorType)
-          }}</span>
-          <span v-else class="text-capitalize">{{ formatType(item) }}</span>
-        </span>
-        <span class="d-flex align-center ga-2">
-          <v-icon icon="mdi-domain" size="15" />
-          <span class="text-capitalize">{{ item?.company || "N/A" }}</span>
-        </span>
-      </template>
-
       <template v-slot:item.location="{ item }">
         <span class="d-flex align-center ga-2">
           <v-icon icon="mdi-storefront-outline" size="15" />
@@ -188,112 +225,176 @@
         </span>
       </template>
 
-      <template v-slot:item.contact-vehicleNumber="{ item }">
-        <span class="d-flex align-center ga-2">
-          <v-icon icon="mdi-phone" size="15" />
-          <span class="text-capitalize">{{ item?.contact || "N/A" }}</span>
-        </span>
-        <span class="d-flex align-center ga-2">
-          <v-icon icon="mdi-car-back" size="15" />
-          <span class="text-capitalize">{{ item?.plateNumber || "N/A" }}</span>
-        </span>
-      </template>
-
+      <!--
+        Check In / Check Out, as iSecure's row (`visitor-row.tsx`):
+        - no check-in yet: a "Check In" button that opens the visitor (the
+          preview has the check-in), else the time and its snapshot;
+        - Check Out only once checked in and not out, never on Guests, and
+          only with the Update right; a manual check-out shows the "Manual Checkout" info icon;
+        - the pass / key chips and "Assign" sit above Check In, on the
+          Visitors tab only.
+      -->
       <template v-slot:item.checkin-out="{ item }">
         <v-row no-gutters class="d-flex flex-column py-2">
+          <template v-if="activeTab === 'registered'">
+            <div
+              v-if="showPassKeyChips(item)"
+              class="d-flex flex-wrap ga-1 mb-1"
+            >
+              <!-- Keys: by name for a contractor (each opens the menu),
+                   a single count otherwise (straight to the return statuses). -->
+              <template v-if="item.type === 'contractor'">
+                <v-chip
+                  v-for="(key, ki) in activeKeys(item).filter((k) => k.keyId)"
+                  :key="key.keyId ?? ki"
+                  prepend-icon="mdi-key"
+                  variant="outlined"
+                  class="font-weight-bold visitor-pass-chip visitor-pass-chip--key"
+                  :disabled="!canUpdateVisitor"
+                  @click.stop="openPassChipMenu(item, $event)"
+                  >{{ key.prefixAndName || "Key" }}</v-chip
+                >
+              </template>
+              <v-chip
+                v-else-if="activeKeys(item).length"
+                prepend-icon="mdi-key"
+                variant="outlined"
+                class="font-weight-bold visitor-pass-chip visitor-pass-chip--key"
+                :disabled="!canUpdateVisitor"
+                @click.stop="openPassAction(item, 'return-pass-keys')"
+                >{{ activeKeys(item).length }}</v-chip
+              >
+              <v-chip
+                v-if="activePasses(item).length"
+                prepend-icon="mdi-card-bulleted-outline"
+                variant="outlined"
+                class="font-weight-bold visitor-pass-chip visitor-pass-chip--pass"
+                :disabled="!canUpdateVisitor"
+                @click.stop="openPassChipMenu(item, $event)"
+                >{{
+                  activePasses(item)
+                    .map((pass) => pass.prefixAndName || "Pass")
+                    .join(", ")
+                }}</v-chip
+              >
+              <v-chip
+                v-if="showAssignChip(item)"
+                prepend-icon="mdi-plus"
+                variant="outlined"
+                class="font-weight-bold visitor-pass-chip visitor-pass-chip--assign"
+                @click.stop="openAssign(item)"
+                >Assign</v-chip
+              >
+
+              <!-- A contractor's access cards: the NFC card number with
+                   "(+n)" (a menu of every card number), or "QR · (n)". -->
+              <template v-if="item.type === 'contractor'">
+                <v-menu
+                  v-if="item.accessCards?.type === 'NFC' && item.accessCards?.cardNo"
+                  :close-on-content-click="false"
+                  @update:model-value="(open: boolean) => open && loadNfcCardNos(item)"
+                >
+                  <template #activator="{ props: nfcMenuProps }">
+                    <v-chip
+                      v-bind="nfcMenuProps"
+                      variant="outlined"
+                      class="font-weight-bold visitor-pass-chip visitor-pass-chip--nfc"
+                      prepend-icon="mdi-credit-card-outline"
+                      @click.stop
+                    >
+                      {{ item.accessCards.cardNo }}
+                      <template v-if="allCards(item).length > 1">
+                        (+{{ allCards(item).length - 1 }})
+                      </template>
+                    </v-chip>
+                  </template>
+                  <v-list density="compact" min-width="200">
+                    <v-list-subheader>NFC Cards</v-list-subheader>
+                    <v-list-item
+                      v-for="card in nfcCardNumbers(item)"
+                      :key="card.id"
+                      prepend-icon="mdi-credit-card-outline"
+                      :title="card.label"
+                    />
+                  </v-list>
+                </v-menu>
+                <v-chip
+                  v-else-if="item.accessCards?.type === 'QRCODE' && item.accessCards?.cardNo"
+                  variant="outlined"
+                  class="font-weight-bold visitor-pass-chip visitor-pass-chip--qr"
+                  prepend-icon="mdi-qrcode"
+                  >QR · ({{ allCards(item).length || 1 }})</v-chip
+                >
+              </template>
+            </div>
+          </template>
+
           <span class="d-flex align-center ga-2">
             <v-icon
               icon="mdi-clock-time-four-outline"
               color="green"
               size="20"
             />
-            <span class="text-capitalize">{{
-              UTCToLocalTIme(item.checkIn) || "-"
-            }}</span>
-            <span>
-              <v-icon
-                v-if="item?.snapshotEntryImage"
-                size="17"
-                icon="mdi-image"
-                @click.stop="handleViewImage(item.snapshotEntryImage)"
-              />
-            </span>
-          </span>
-
-          <span
-            v-if="
-              !item.checkOut &&
-              (item?.status === 'registered' ||
-                item?.status === 'unregistered') &&
-              canCheckoutVisitor
-            "
-          >
-            <span
-              class="d-flex align-center ga-2"
-              v-bind="menuProps"
-              style="cursor: pointer"
-            >
-              <v-icon
-                icon="mdi-clock-time-eight-outline"
-                color="red"
-                size="20"
-              />
-              <v-btn
-                size="x-small"
-                class="text-capitalize"
-                color="red"
-                text="Checkout"
-                :loading="
-                  loading.checkingOut && item?._id === selectedVisitorId
-                "
-                @click.stop="handleCheckout(item._id)"
-              />
-            </span>
-          </span>
-          <span v-else class="d-flex align-center ga-2">
-            <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" />
-            <template v-if="item.checkOut">
-              <span class="text-capitalize">{{
-                UTCToLocalTIme(item.checkOut)
-              }}</span>
+            <v-btn
+              v-if="!item.checkIn && canOpenVisitorDetails && activeTab !== 'overnight-parking'"
+              size="small"
+              class="text-capitalize font-weight-bold"
+              color="success"
+              text="Check In"
+              @click.stop="openVisitorDetails(item)"
+            />
+            <template v-else>
+              <span>{{ item.checkIn ? formatDateTime(item.checkIn) : "—" }}</span>
               <span>
                 <v-icon
-                  v-if="item?.snapshotExitImage"
-                  size="17"
+                  v-if="item.checkIn && item?.snapshotEntryImage"
+                  size="20"
                   icon="mdi-image"
-                  @click.stop="handleViewImage(item.snapshotExitImage)"
-                />
-              </span>
-              <span v-if="item?.manualCheckout">
-                <TooltipInfo
-                  text="Manual Checkout"
-                  density="compact"
-                  size="x-small"
+                  class="cursor-pointer"
+                  @click.stop="handleViewImage(item.snapshotEntryImage, 'IN')"
                 />
               </span>
             </template>
-            <template v-else> <span class="mt-1"> N/A </span> </template>
           </span>
 
-          <div
-            v-if="showAddPassKeyButton(item)"
-            class="d-flex flex-wrap ga-1 mt-1"
-            v-bind="menuProps"
-            style="cursor: pointer"
-          >
-            <v-chip
-              size="x-small"
-              variant="tonal"
-              prepend-icon="mdi-key"
-              @click.stop="handleOpenAddPassKey(item)"
-              >Add Pass/Key</v-chip
-            >
-          </div>
+          <span v-if="showCheckOutButton(item)" class="d-flex align-center ga-2">
+            <v-icon
+              icon="mdi-clock-time-eight-outline"
+              color="red"
+              size="20"
+            />
+            <v-btn
+              size="small"
+              class="text-capitalize font-weight-bold"
+              color="red"
+              text="Check Out"
+              :loading="loading.checkingOut && item?._id === selectedVisitorId"
+              @click.stop="handleCheckout(item._id, item)"
+            />
+          </span>
+          <span v-else class="d-flex align-center ga-2">
+            <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" />
+            <span>
+              {{ item.checkOut ? formatDateTime(item.checkOut) : "—" }}
+            </span>
+            <span>
+              <v-icon
+                v-if="item.checkOut && item?.snapshotExitImage"
+                size="20"
+                icon="mdi-image"
+                class="cursor-pointer"
+                @click.stop="handleViewImage(item.snapshotExitImage, 'OUT')"
+              />
+            </span>
+            <span v-if="item.checkOut && isManualCheckout(item)">
+              <TooltipInfo text="Manual Checkout" density="compact" size="small" />
+            </span>
+          </span>
 
           <v-btn
             v-if="hidQrEnabled"
             icon="mdi-qrcode"
-            size="x-small"
+            size="small"
             variant="text"
             color="primary"
             title="View HID QR code"
@@ -301,124 +402,6 @@
             class="align-self-start mt-1"
             @click.stop="openVisitorHidQr(item)"
           />
-
-          <v-menu :close-on-content-click="true">
-            <template v-slot:activator="{ props: menuProps }">
-              <div
-                v-if="
-                  (item.visitorPass?.length ?? 0) > 0 ||
-                  (item.passKeys?.length ?? 0) > 0
-                "
-                class="d-flex flex-wrap ga-1 mt-1"
-                v-bind="menuProps"
-                style="cursor: pointer"
-              >
-                <v-chip
-                  v-for="pass in item.visitorPass.filter(
-                    (i) => i.status != 'Removed'
-                  )"
-                  :key="(pass as any)._id ?? (pass as any).keyId"
-                  prepend-icon="mdi-card-bulleted-outline"
-                  size="x-small"
-                  variant="tonal"
-                  color="blue"
-                >
-                  {{ (pass as any)?.prefixAndName }}
-                </v-chip>
-                <v-chip
-                  v-for="key in item.passKeys.filter(
-                    (i) => i.status != 'Removed'
-                  )"
-                  :key="(key as any)._id ?? (key as any).keyId"
-                  prepend-icon="mdi-key"
-                  size="x-small"
-                  variant="tonal"
-                  color="orange"
-                >
-                  {{ (key as any)?.prefixAndName }}
-                </v-chip>
-              </div>
-            </template>
-            <v-list density="compact">
-              <v-list-item
-                v-if="!item?.checkOut"
-                prepend-icon="mdi-logout"
-                title="Checkout"
-                @click.stop="handleCheckout(item._id)"
-              />
-              <v-list-item
-                v-if="
-                  (item.visitorPass?.length ?? 0) > 0 ||
-                  (item.passKeys?.length ?? 0) > 0
-                "
-                prepend-icon="mdi-card-bulleted-outline"
-                :title="item.checkOut ? 'View Pass/Key' : 'Edit Pass/Key'"
-                @click.stop="handleOpenEditPassKey(item)"
-              />
-              <v-list-item
-                v-if="showAddPassKeyButton(item)"
-                prepend-icon="mdi-plus"
-                title="Add Pass/Key"
-                @click.stop="handleOpenAddPassKey(item)"
-              />
-            </v-list>
-          </v-menu>
-
-          <!-- NFC Access Cards -->
-          <v-menu
-            v-if="item.accessCards?.type === 'NFC' && item.accessCards?.cardNo"
-            :close-on-content-click="false"
-            @update:model-value="(open: boolean) => open && loadNfcCardNos(item)"
-          >
-            <template #activator="{ props: nfcMenuProps }">
-              <div
-                class="d-flex align-center ga-1 mt-1"
-                style="cursor: pointer"
-                v-bind="nfcMenuProps"
-                @click.stop
-              >
-                <v-icon
-                  size="15"
-                  icon="mdi-credit-card-outline"
-                  color="purple"
-                />
-                <v-chip size="x-small" variant="tonal" color="purple">
-                  {{ item.accessCards.cardNo }}
-                  <template v-if="(item.cards?.flat().length ?? 0) > 1">
-                    (+{{ item.cards.flat().length - 1 }})
-                  </template>
-                </v-chip>
-              </div>
-            </template>
-            <v-list density="compact" min-width="200">
-              <v-list-subheader>NFC Cards</v-list-subheader>
-              <v-list-item
-                prepend-icon="mdi-credit-card-outline"
-                :title="item.accessCards.cardNo"
-              />
-              <template v-for="(cardGroup, gi) in item.cards" :key="gi">
-                <v-list-item
-                  v-for="card in cardGroup.filter((c: any) => c._id !== item.accessCards._id)"
-                  :key="card._id"
-                  prepend-icon="mdi-credit-card-outline"
-                  :title="nfcCardLabel(card, item)"
-                />
-              </template>
-            </v-list>
-          </v-menu>
-
-          <!-- QRCODE identifier -->
-          <div
-            v-if="
-              item.accessCards?.type === 'QRCODE' && item.accessCards?.cardNo
-            "
-            class="d-flex align-center ga-1 mt-1"
-          >
-            <v-icon size="15" icon="mdi-qrcode" color="teal" />
-            <v-chip size="x-small" variant="tonal" color="teal"
-              >QR · ({{ item.cards?.flat().length ?? 1 }})</v-chip
-            >
-          </div>
         </v-row>
       </template>
 
@@ -441,8 +424,8 @@
                 size="20"
               />
               <v-btn
-                size="x-small"
-                class="text-capitalize"
+                size="small"
+                class="text-capitalize font-weight-bold"
                 color="success"
                 text="Checkin"
                 @click.stop="handleCheckin(item)"
@@ -475,13 +458,28 @@
       </template>
 
       <template v-slot:item.action="{ item }">
-        <v-btn
-          v-if="activeTab === 'unregistered' && canAddVisitor"
-          size="small"
-          color="primary"
-          text="Register"
-          @click.stop="handleRegistrationUnregisteredVisitor(item)"
-        />
+        <!-- iSecure: Register only while the record is not checked out;
+             without the Update right it is greyed and says why. -->
+        <template v-if="activeTab === 'unregistered'">
+          <v-btn
+            v-if="!item?.checkOut && canUpdateVisitor"
+            size="small"
+            color="primary"
+            text="Register"
+            @click.stop="handleRegistrationUnregisteredVisitor(item)"
+          />
+          <v-tooltip
+            v-else-if="!item?.checkOut"
+            text="You do not have permission to update visitors."
+            location="top"
+          >
+            <template #activator="{ props: tipProps }">
+              <span v-bind="tipProps" @click.stop>
+                <v-btn size="small" color="primary" text="Register" disabled />
+              </span>
+            </template>
+          </v-tooltip>
+        </template>
         <v-menu v-else-if="activeTab === 'overnight-parking'">
           <template #activator="{ props }">
             <v-avatar v-bind="props" class="rounded-xl border-md">
@@ -492,7 +490,7 @@
           <v-card>
             <v-list-item
               v-if="
-                !overNightParkingListActions[0].disabled ||
+                !overNightParkingListActions[0].disabled &&
                 !['approved', 'rejected'].includes(
                   item?.overnightParking?.status
                 )
@@ -513,7 +511,7 @@
             <v-divider />
             <v-list-item
               v-if="
-                !overNightParkingListActions[1].disabled ||
+                !overNightParkingListActions[1].disabled &&
                 !['approved', 'rejected'].includes(
                   item?.overnightParking?.status
                 )
@@ -615,17 +613,62 @@
           >
         </span>
       </template>
+      <!-- iSecure: "No visitors" / "You don't have any visitor(s) yet.", or
+           the server's reason when the list was refused. A search keeps its
+           own "nothing matches" line. -->
       <template #no-data>
         <div class="table-card__empty">
-          <v-icon icon="mdi-magnify-close" size="32" />
-          <span>{{ visitorSearchEmptyText(searchQuery) }}</span>
+          <template v-if="visitorListError">
+            <v-icon icon="mdi-alert-circle-outline" size="32" />
+            <span>No visitors</span>
+            <span class="text-caption">{{ visitorListError }}</span>
+          </template>
+          <template v-else-if="searchQuery">
+            <v-icon icon="mdi-magnify-close" size="32" />
+            <span>{{ visitorSearchEmptyText(searchQuery) }}</span>
+          </template>
+          <template v-else>
+            <v-icon icon="mdi-account-search-outline" size="32" />
+            <span>No visitors</span>
+            <span class="text-caption">You don't have any visitor(s) yet.</span>
+          </template>
         </div>
       </template>
     </TableMain>
 
+    <!-- The pass / key chip menu (iSecure `PassKeyChips`): "Pass & Key"
+         (the return statuses), "Add Key" for a contractor and "Edit Pass". -->
+    <v-menu
+      v-model="passChipMenu.open"
+      :activator="passChipMenu.target ?? undefined"
+      location="bottom start"
+    >
+      <v-list v-if="passChipMenu.visitor" density="compact">
+        <v-list-subheader>{{ passChipMenu.visitor.name || "Pass & Key" }}</v-list-subheader>
+        <v-list-item
+          prepend-icon="mdi-card-bulleted-outline"
+          title="Pass & Key"
+          @click="choosePassAction('return-pass-keys')"
+        />
+        <v-list-item
+          v-if="passChipMenu.visitor.type === 'contractor'"
+          prepend-icon="mdi-key-plus"
+          :title="activeKeys(passChipMenu.visitor).length ? 'Add/Remove Key' : 'Add Key'"
+          @click="choosePassAction('add-keys')"
+        />
+        <v-list-item
+          v-if="activePasses(passChipMenu.visitor).length"
+          prepend-icon="mdi-swap-horizontal"
+          title="Edit Pass"
+          @click="choosePassAction('edit-pass')"
+        />
+      </v-list>
+    </v-menu>
+
     <v-dialog v-model="dialog.showSelection" width="450" persistent>
       <VisitorFormSelection
         :mode="mode"
+        :plate-number="mode === 'register' ? registerRecord?.plateNumber ?? '' : ''"
         @cancel="dialog.showSelection = false"
         @select="handleSelectVisitorType"
       />
@@ -638,13 +681,15 @@
       persistent
     >
       <VisitorForm
+        :key="visitorFormKey"
         :mode="mode"
         :org="orgId"
         :site="siteId"
-        :visitor-data="selectedVisitorDataObject"
+        :visitor-data="mode === 'register' ? registerRecord : selectedVisitorDataObject"
         :current-user="currentUser?._id"
         :type="activeVisitorFormType"
         :enable-unregistered="enableUnregistered"
+        :can-assign-pass-keys="canAssignPassKeys"
         @back="handleClickBack"
         @done="handleVisitorFormDone"
         @done:more="handleVisitorFormCreateMore"
@@ -652,6 +697,36 @@
       />
     </v-dialog>
 
+    <!-- The preview's photos or ANPR snapshots, full screen. -->
+    <v-dialog v-model="fullscreenOpen" fullscreen>
+      <v-card class="visitor-photos-full">
+        <div class="visitor-photos-full__head">
+          <span class="font-weight-bold">
+            {{ fullscreenImages[fullscreenIndex]?.title }}
+          </span>
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            aria-label="Close"
+            @click="fullscreenOpen = false"
+          />
+        </div>
+        <v-carousel
+          v-model="fullscreenIndex"
+          height="calc(100vh - 64px)"
+          hide-delimiters
+          :show-arrows="fullscreenImages.length > 1"
+        >
+          <v-carousel-item
+            v-for="image in fullscreenImages"
+            :key="image.src"
+          >
+            <v-img :src="image.src" contain height="100%" :alt="image.title" />
+          </v-carousel-item>
+        </v-carousel>
+      </v-card>
+    </v-dialog>
+
     <v-dialog v-model="dialog.viewVisitor" width="450" persistent>
       <VehicleUpdateMoreAction
         title="Preview"
@@ -808,44 +883,174 @@
                   key === 'attachments' &&
                   selectedVisitorObject?.[key]?.length > 0
                 "
-                class="visitor-preview__row visitor-preview__row--tall"
+                class="visitor-preview__row visitor-preview__row--block"
+              >
+                <!-- The photos in a carousel (as the visitor form takes them);
+                     a photo, or Full screen, opens them large. -->
+                <div class="visitor-preview__label">
+                  Photos ({{ selectedVisitorObject.attachments.length }})
+                </div>
+                <div class="w-100">
+                  <v-carousel
+                    v-model="previewPhotoIndex"
+                    height="220"
+                    hide-delimiters
+                    :show-arrows="selectedVisitorObject.attachments.length > 1 ? 'hover' : false"
+                    class="visitor-preview__photos"
+                  >
+                    <v-carousel-item
+                      v-for="(id, pi) in selectedVisitorObject.attachments"
+                      :key="id"
+                    >
+                      <v-img
+                        :src="getFileUrl(id)"
+                        cover
+                        height="100%"
+                        class="cursor-pointer"
+                        :alt="`Photo ${pi + 1}`"
+                        @click="openPreviewPhotos(pi)"
+                      />
+                    </v-carousel-item>
+                  </v-carousel>
+                  <div class="d-flex align-center justify-space-between mt-2">
+                    <span class="text-caption text-medium-emphasis">
+                      Photo {{ previewPhotoIndex + 1 }} of
+                      {{ selectedVisitorObject.attachments.length }}
+                    </span>
+                    <AppButton
+                      variant="ghost"
+                      icon="mdi-fullscreen"
+                      @click="openPreviewPhotos(previewPhotoIndex)"
+                    >
+                      Full screen
+                    </AppButton>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Type, first, as iSecure's visitor details: the type the
+                   list shows ("Drive-In", "contractor", "delivery (food)", a
+                   resident's invite type). -->
+              <div
+                v-else-if="key === 'type' && selectedVisitorDataObject?.type"
+                class="visitor-preview__row"
               >
                 <div class="visitor-preview__label">{{ label }}</div>
-                <div class="d-flex flex-wrap ga-2">
-                  <AttachmentsViewer
-                    :files="mappedAttachments(selectedVisitorObject.attachments)"
-                    title=""
-                    show-file-type-title
-                  />
+                <div class="visitor-preview__value text-capitalize">
+                  {{ visitorTypeLabel(selectedVisitorDataObject) }}
                 </div>
               </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".
-              -->
+              <!-- Pass and Keys, as iSecure's visitor details: the held
+                   pass(es) and keys drawn as the list's chips, read only;
+                   N/A when none. Pass for drive-in, walk-in and contractor,
+                   Keys for a contractor. -->
               <div
                 v-else-if="
-                  (key === 'snapshotEntryImage' ||
-                    key === 'snapshotExitImage') &&
-                  selectedVisitorObject[key]
+                  (key === 'visitorPass' && previewShowsPass) ||
+                  (key === 'passKeys' && previewShowsKeys)
                 "
                 class="visitor-preview__row visitor-preview__row--tall"
               >
                 <div class="visitor-preview__label">{{ label }}</div>
-                <div class="d-flex flex-wrap ga-2">
-                  <AttachmentsViewer
-                    :files="mappedSnapshots([selectedVisitorObject[key]])"
-                    anpr
-                    :site="siteId"
-                    title="Snapshot"
-                  />
+                <div v-if="previewPassKeyChips(key).length" class="visitor-preview__chips">
+                  <v-chip
+                    v-for="(chip, ci) in previewPassKeyChips(key)"
+                    :key="`${chip}-${ci}`"
+                    :prepend-icon="key === 'visitorPass' ? 'mdi-card-bulleted-outline' : 'mdi-key'"
+                    variant="outlined"
+                    :class="[
+                      'font-weight-bold visitor-pass-chip',
+                      key === 'visitorPass' ? 'visitor-pass-chip--pass' : 'visitor-pass-chip--key',
+                    ]"
+                    >{{ chip }}</v-chip
+                  >
+                </div>
+                <div v-else class="visitor-preview__value">N/A</div>
+              </div>
+
+              <!-- The entry and exit ANPR snapshots in one carousel, as
+                   iSecure's visitor details; a snapshot, or Full screen,
+                   opens them large. -->
+              <div
+                v-else-if="key === 'snapshotEntryImage' && previewSnapshots.length"
+                class="visitor-preview__row visitor-preview__row--block"
+              >
+                <div class="visitor-preview__label">{{ label }}</div>
+                <div class="w-100">
+                  <v-carousel
+                    v-model="previewSnapshotIndex"
+                    height="220"
+                    hide-delimiters
+                    :show-arrows="previewSnapshots.length > 1 ? 'hover' : false"
+                    class="visitor-preview__photos"
+                  >
+                    <v-carousel-item
+                      v-for="(snapshot, si) in previewSnapshots"
+                      :key="snapshot.side"
+                    >
+                      <v-img
+                        :src="snapshot.src"
+                        cover
+                        height="100%"
+                        class="cursor-pointer"
+                        :alt="`${snapshot.label} snapshot`"
+                        @click="openPreviewSnapshots(si)"
+                      />
+                    </v-carousel-item>
+                  </v-carousel>
+                  <div class="d-flex align-center justify-space-between mt-2">
+                    <span class="text-caption text-medium-emphasis">
+                      {{ previewSnapshots[previewSnapshotIndex]?.label }}
+                      <template v-if="previewSnapshots.length > 1">
+                        ({{ previewSnapshotIndex + 1 }} of {{ previewSnapshots.length }})
+                      </template>
+                    </span>
+                    <AppButton
+                      variant="ghost"
+                      icon="mdi-fullscreen"
+                      @click="openPreviewSnapshots(previewSnapshotIndex)"
+                    >
+                      Full screen
+                    </AppButton>
+                  </div>
+                </div>
+              </div>
+
+              <!-- A contractor member's own record: the lead they came with,
+                   the counterpart of a lead's Members (iSecure). Opens the
+                   lead's own preview. -->
+              <div
+                v-else-if="key === 'lead' && selectedVisitorLead"
+                class="visitor-preview__row visitor-preview__row--block"
+              >
+                <div class="visitor-preview__label">{{ label }}</div>
+                <div class="visitor-preview__members">
+                  <button
+                    type="button"
+                    class="visitor-preview__member visitor-preview__lead"
+                    aria-label="Open lead"
+                    @click="openLeadPreview"
+                  >
+                    <div class="d-flex align-center justify-space-between ga-2">
+                      <div class="visitor-preview__value">
+                        {{ selectedVisitorLead.name || "N/A" }}
+                      </div>
+                      <v-icon size="20" icon="mdi-chevron-right" />
+                    </div>
+                    <div class="visitor-preview__member-line">
+                      <span class="visitor-preview__member-key">Contact</span>
+                      <span>{{ selectedVisitorLead.contact || "N/A" }}</span>
+                    </div>
+                    <div class="visitor-preview__member-line">
+                      <span class="visitor-preview__member-key">NRIC</span>
+                      <span>{{ maskNRIC(selectedVisitorLead.nric) || "N/A" }}</span>
+                    </div>
+                    <div v-if="leadPassName" class="visitor-preview__member-line">
+                      <span class="visitor-preview__member-key">Pass</span>
+                      <span>{{ leadPassName }}</span>
+                    </div>
+                  </button>
                 </div>
               </div>
 
@@ -974,10 +1179,10 @@
                 <div class="visitor-preview__value d-flex align-center ga-2">
                   {{ formatValues(key, selectedVisitorObject[key]) }}
                   <TooltipInfo
-                    v-if="key === 'checkOut'"
+                    v-if="key === 'checkOut' && isManualCheckout(selectedVisitorObject)"
                     text="Manual Checkout"
                     density="compact"
-                    size="x-small"
+                    size="small"
                   />
                 </div>
               </div>
@@ -1008,7 +1213,7 @@
     <v-dialog v-model="dialog.snapshotImage" max-width="700">
       <v-card>
         <v-card-title class="d-flex justify-space-between align-center">
-          <span>Snapshot</span>
+          <span>{{ snapshotImageSide === "OUT" ? "Check Out" : "Check In" }}</span>
           <v-btn
             icon="mdi-close"
             variant="text"
@@ -1074,6 +1279,16 @@
       </v-card>
     </v-dialog>
 
+    <!--
+      "Update Pass or Key(s)" - iSecure `PassKeyReturnDialog` (Capacitor
+      PassKeyDialog.vue, return-pass-keys). Every pass with a key id and every
+      key the visit holds is marked Not Returned / Returned / Damaged / Lost (a
+      pass or key already "Removed" stays, locked, as history); remarks are
+      required for Damaged and Lost. Keys are listed for a contractor only, but
+      every key still counts towards Check Out. "Scan QR Code" marks the scanned
+      pass or key Returned. Update saves the statuses only (once something
+      changed) and closes; Check Out stays disabled while anything is still out.
+    -->
     <v-dialog v-model="dialog.returnPassesKeys" max-width="450" persistent>
       <v-card>
         <v-toolbar density="compact" color="">
@@ -1081,7 +1296,7 @@
             no-gutters
             class="d-flex fill-height justify-space-between align-center px-4"
           >
-            <span class="font-weight-bold">Return Passes &amp; Keys</span>
+            <span class="font-weight-bold">Update Pass or Key(s)</span>
             <v-btn
               icon="mdi-close"
               variant="text"
@@ -1090,53 +1305,60 @@
           </v-row>
         </v-toolbar>
         <v-card-text class="px-4 pb-2">
-          <p class="text-body-2 mb-3">
-            Please ensure all passes and keys are returned before checking out.
-          </p>
-
-          <div>
-            <InputLabel class="text-capitalize" title="Full Name" />
-            <v-text-field
-              v-model="selectedVisitorObject.name"
-              density="comfortable"
-              readonly
-            />
-          </div>
-
-          <div>
-            <InputLabel class="text-capitalize" title="Location" />
-            <v-text-field
-              v-model="selectedVisitorObject.location"
-              density="comfortable"
-              readonly
-            />
+          <div class="visitor-return__who">
+            <div class="visitor-return__who-line font-weight-bold">
+              <v-icon icon="mdi-account-outline" size="18" />
+              {{ returnVisitor?.name || "N/A" }}
+            </div>
+            <div class="visitor-return__who-line">
+              <v-icon icon="mdi-storefront-outline" size="18" />
+              {{
+                formatLocation({
+                  block: returnVisitor?.block,
+                  level: returnVisitor?.level,
+                  unit: returnVisitor?.unit,
+                })
+              }}
+            </div>
           </div>
 
-          <div v-if="passReturnStatuses.length > 0" class="mb-2">
-            <p class="text-caption text-medium-emphasis mb-1">Passes</p>
-            <v-row
-              no-gutters
+          <v-btn
+            block
+            variant="flat"
+            class="text-capitalize mb-3 screen-btn-primary"
+            prepend-icon="mdi-qrcode-scan"
+            @click="returnScan.open = true"
+          >
+            Scan QR Code
+          </v-btn>
+
+          <div class="mb-2">
+            <p class="visitor-return__label">Pass ({{ passReturnStatuses.length }})</p>
+            <p v-if="passReturnStatuses.length === 0" class="text-body-2 mb-2">
+              No current pass assigned.
+            </p>
+            <v-row
+              no-gutters
               v-for="pass in passReturnStatuses"
-              :key="(pass as any)._id ?? (pass as any).keyId"
+              :key="pass.keyId"
               class="d-flex flex-wrap justify-space-between align-center ga-5 mb-2"
             >
               <v-chip
                 prepend-icon="mdi-card-bulleted-outline"
-                size="small"
-                variant="tonal"
-                color="blue"
+                variant="outlined"
+                class="font-weight-bold visitor-pass-chip visitor-pass-chip--field visitor-pass-chip--pass"
               >
-                {{ (pass as any)?.prefixAndName }}
+                {{ pass.prefixAndName || returnKeyNames[pass.keyId] || "Pass" }}
               </v-chip>
               <v-select
                 hide-details
                 max-width="200px"
                 density="compact"
-                :items="passStatusOptions"
+                :items="returnStatusItems(pass)"
                 item-title="label"
                 item-value="value"
                 v-model="pass.status"
-                :disabled="pass.status == 'Removed'"
+                :disabled="pass.locked"
               />
               <v-textarea
                 v-if="pass.status === 'Lost' || pass.status === 'Damaged'"
@@ -1144,35 +1366,39 @@
                 rows="3"
                 class="w-100"
                 density="compact"
+                label="Remarks"
+                placeholder="Enter remarks"
                 v-model="pass.remarks"
               />
             </v-row>
           </div>
-          <div v-if="keyReturnStatuses.length > 0" class="mb-2">
-            <p class="text-caption text-medium-emphasis mb-1">Keys</p>
+          <div v-if="returnVisitor?.type === 'contractor'" class="mb-2">
+            <p class="visitor-return__label">Keys ({{ keyReturnStatuses.length }})</p>
+            <p v-if="keyReturnStatuses.length === 0" class="text-body-2 mb-2">
+              No current key(s) assigned.
+            </p>
             <v-row
               no-gutters
               v-for="key in keyReturnStatuses"
-              :key="(key as any)._id ?? (key as any).keyId"
+              :key="key.keyId"
               class="d-flex flex-wrap justify-space-between align-center ga-5 mb-2"
             >
               <v-chip
                 prepend-icon="mdi-key"
-                size="small"
-                variant="tonal"
-                color="orange"
+                variant="outlined"
+                class="font-weight-bold visitor-pass-chip visitor-pass-chip--field visitor-pass-chip--key"
               >
-                {{ (key as any)?.prefixAndName }}
+                {{ key.prefixAndName || returnKeyNames[key.keyId] || "Key" }}
               </v-chip>
               <v-select
                 hide-details
                 max-width="200px"
                 density="compact"
-                :items="passStatusOptions"
+                :items="returnStatusItems(key)"
                 item-title="label"
                 item-value="value"
                 v-model="key.status"
-                :disabled="key.status == 'Removed'"
+                :disabled="key.locked"
               />
               <v-textarea
                 v-if="key.status === 'Lost' || key.status === 'Damaged'"
@@ -1180,33 +1406,31 @@
                 rows="3"
                 class="w-100"
                 density="compact"
+                label="Remarks"
+                placeholder="Enter remarks"
                 v-model="key.remarks"
               />
             </v-row>
           </div>
 
-          <v-row no-gutters class="my-5">
-            <v-btn
-              variant="flat"
-              color="blue"
-              density="comfortable"
-              class="text-capitalize"
-              :loading="loading.updatingPassKeys"
-              @click.stop="handleUpdatePassKeys"
-            >
-              Update Pass/Keys
-            </v-btn>
-          </v-row>
+          <p v-if="returnDialogError" class="text-error text-body-2 mb-2">
+            {{ returnDialogError }}
+          </p>
         </v-card-text>
         <v-toolbar class="pa-0" density="compact">
           <v-row no-gutters>
             <v-col cols="6">
               <v-btn
-                variant="text"
+                color="blue"
+                variant="flat"
+                height="48"
+                rounded="0"
                 block
-                @click="dialog.returnPassesKeys = false"
+                :loading="loading.updatingPassKeys"
+                :disabled="!returnStatusesChanged || loading.checkingOut"
+                @click="handleUpdatePassKeys"
               >
-                Close
+                Update
               </v-btn>
             </v-col>
             <v-col cols="6">
@@ -1217,12 +1441,10 @@
                 rounded="0"
                 block
                 :loading="loading.checkingOut"
-                :disabled="
-                  !canConfirmCheckout || selectedVisitorObject.checkOut
-                "
-                @click="proceedCheckout"
+                :disabled="returnCheckOutBlocked || loading.updatingPassKeys"
+                @click="confirmReturnCheckout"
               >
-                Confirm Checkout
+                Check Out
               </v-btn>
             </v-col>
           </v-row>
@@ -1230,6 +1452,16 @@
       </v-card>
     </v-dialog>
 
+    <VisitorPassKeyQRScanner
+      v-if="returnScan.open"
+      :dialog="returnScan.open"
+      v-model:scanned-value="returnScan.value"
+      @close-dialog="returnScan.open = false"
+    />
+
+    <!-- "Return NFC Card(s)" - iSecure `CardReturnDialog`: every card set to
+         Returned, Lost or Damage (a reason for Lost / Damage) before checking
+         out. Stays open with the reason when the check-out fails. -->
     <v-dialog v-model="dialog.returnNfcCard" max-width="450" persistent>
       <v-card>
         <v-toolbar density="compact" color="">
@@ -1237,7 +1469,7 @@
             no-gutters
             class="d-flex fill-height justify-space-between align-center px-4"
           >
-            <span class="font-weight-bold">Return NFC Card</span>
+            <span class="font-weight-bold">Return NFC Card(s)</span>
             <v-btn
               icon="mdi-close"
               variant="text"
@@ -1246,41 +1478,29 @@
           </v-row>
         </v-toolbar>
         <v-card-text class="px-4 pb-2">
-          <p class="text-body-2 mb-3">
-            Please indicate the status of the NFC card before checking out.
+          <p v-if="nfcCardReturnStatuses.length === 0" class="text-body-2 mb-3">
+            No cards are recorded against this visitor.
+          </p>
+          <p v-else class="text-body-2 mb-3">
+            Set every card to Returned, Lost or Damage — and give a reason for a
+            lost or damaged card — before checking out.
           </p>
-          <div>
-            <InputLabel class="text-capitalize" title="Full Name" />
-            <v-text-field
-              v-model="selectedVisitorObject.name"
-              density="comfortable"
-              readonly
-            />
-          </div>
-          <div>
-            <InputLabel class="text-capitalize" title="Location" />
-            <v-text-field
-              v-model="selectedVisitorObject.location"
-              density="comfortable"
-              readonly
-            />
-          </div>
           <div
             v-for="(card, idx) in nfcCardReturnStatuses"
             :key="card.cardId"
             class="mb-4"
           >
             <div class="d-flex align-center ga-2 mb-2">
-              <v-icon size="18" icon="mdi-credit-card-outline" color="purple" />
-              <v-chip size="small" variant="tonal" color="purple">{{
-                nfcCardNos[card.cardId] || card.cardNo
-              }}</v-chip>
+              <v-chip
+                prepend-icon="mdi-credit-card-outline"
+                variant="outlined"
+                class="font-weight-bold visitor-pass-chip visitor-pass-chip--field visitor-pass-chip--nfc"
+                >{{ nfcCardNos[card.cardId] || card.cardNo }}</v-chip
+              >
             </div>
             <v-select
               v-model="nfcCardReturnStatuses[idx].status"
               :items="nfcPassStatusOptions"
-              item-title="label"
-              item-value="value"
               density="comfortable"
               hide-details
             />
@@ -1294,6 +1514,9 @@
               density="compact"
             />
           </div>
+          <p v-if="nfcDialogError" class="text-error text-body-2 mb-2">
+            {{ nfcDialogError }}
+          </p>
         </v-card-text>
         <v-toolbar class="pa-0" density="compact">
           <v-row no-gutters>
@@ -1312,7 +1535,7 @@
                 :loading="loading.checkingOut"
                 :disabled="!canConfirmNfcCheckout"
                 @click="handleNfcCheckout"
-                >Confirm Checkout</v-btn
+                >Confirm &amp; Check Out</v-btn
               >
             </v-col>
           </v-row>
@@ -1320,33 +1543,16 @@
       </v-card>
     </v-dialog>
 
+    <!-- Assign / Add Key / Edit Pass (iSecure: See All AND Update Passes And
+         Keys, plus the visitor Update right). -->
     <v-dialog v-model="dialog.addPassKey" width="450" persistent>
       <AddPassKeyToVisitor
-        mode="add"
-        :visitor="selectedVisitorDataObject"
+        v-if="dialog.addPassKey && passKeyDialogVisitor"
+        :mode="passKeyDialogMode"
+        :visitor="passKeyDialogVisitor"
         :site="siteId"
         @close="dialog.addPassKey = false"
-        @done="
-          () => {
-            dialog.addPassKey = false;
-            getVisitorRefresh();
-          }
-        "
-      />
-    </v-dialog>
-
-    <v-dialog v-model="dialog.editPassKey" width="450" persistent>
-      <AddPassKeyToVisitor
-        mode="edit"
-        :visitor="selectedVisitorDataObject"
-        :site="siteId"
-        @close="dialog.editPassKey = false"
-        @done="
-          () => {
-            // dialog.editPassKey = false;
-            getVisitorRefresh();
-          }
-        "
+        @done="handlePassKeyDialogDone"
       />
     </v-dialog>
 
@@ -1613,9 +1819,11 @@
 </template>
 
 <script setup lang="ts">
+import type { PropType } from "vue";
 import moment from "moment-timezone";
 import QRCode from "qrcode";
 import { isVisitorPassSmsOn } from "../composables/useVisitor";
+import usePassKey from "../composables/usePassKey";
 import {
   VISITOR_SEARCH_DEBOUNCE_MS,
   visitorSearchEmptyText,
@@ -1656,8 +1864,31 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * Visitor Management > See Visitor Details - opening a row (the preview) and
+   * the row's Check In, as iSecure's `visitors:details`. Left out, it follows
+   * `canViewVisitor` (what opened a row before).
+   */
+  canViewVisitorDetails: {
+    type: Boolean as PropType<boolean | null>,
+    default: null,
+  },
+  /**
+   * Passes And Keys Management > See All Passes And Keys AND Update Passes And
+   * Keys (iSecure `PASS_KEY_ASSIGN_GATES`, owner 2026-10-20). Either one
+   * unticked hides Assign / Add Key / Edit Pass here and the pass & key
+   * pickers on Add and Register; returning what a visitor holds is not affected.
+   */
+  canAssignPassKeys: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const canOpenVisitorDetails = computed(
+  () => props.canViewVisitorDetails ?? props.canViewVisitor
+);
+
 const { authenticate, currentUser } = useLocalAuth();
 authenticate();
 
@@ -1675,11 +1906,46 @@ const {
   loaded: anprSettingsLoaded,
   ensureANPRSettings,
 } = useANPRSettings(siteId);
-const enableUnregisteredTab = computed(() => enableUnregistered.value);
 ensureANPRSettings(true).catch(() => {
   // No settings = no Unregistered tab, same as before.
 });
 
+/*
+ * iSecure `useUnregisteredTab`: the Unregistered tab needs BOTH the site's
+ * Unregistered switch AND an ANPR camera facing an entrance (entry / both) -
+ * the same rule the plate notice (VisitorSocketPopUp) already applies.
+ */
+const { getAllSiteCameras } = useSiteSettings();
+const hasEntryFacingAnprCamera = ref(false);
+const anprCamerasLoaded = ref(false);
+
+async function loadEntryFacingAnprCamera() {
+  try {
+    const res: any = await getAllSiteCameras({ site: siteId, type: "anpr", page: 1, limit: 100 });
+    const cameras = Array.isArray(res?.items)
+      ? res.items
+      : Array.isArray(res?.data?.items)
+        ? res.data.items
+        : [];
+    hasEntryFacingAnprCamera.value = cameras.some(
+      (camera: any) => camera?.direction === "entry" || camera?.direction === "both"
+    );
+  } catch {
+    hasEntryFacingAnprCamera.value = false;
+  } finally {
+    anprCamerasLoaded.value = true;
+  }
+}
+void loadEntryFacingAnprCamera();
+
+const enableUnregisteredTab = computed(
+  () => enableUnregistered.value && hasEntryFacingAnprCamera.value
+);
+/** Both answers are in - only then is a hidden Unregistered tab really hidden. */
+const unregisteredTabKnown = computed(
+  () => anprSettingsLoaded.value && anprCamerasLoaded.value
+);
+
 const {
   getVisitors,
   visitorSelection,
@@ -1687,6 +1953,7 @@ const {
   updateVisitor,
   visitorDataFromScannedQRCodeCheckIn,
   sendPassSms,
+  contractorTypes,
 } = useVisitor();
 const { visitorCheckout, getCardDetails } = useAccessManagement();
 
@@ -1726,7 +1993,53 @@ const {
   maskNRIC,
 } = useUtils();
 const { formatLocation } = useSecurityUtils();
-const { getFileUrlAnpr } = useFile();
+const { getFileUrlAnpr, getFileUrl } = useFile();
+
+// The preview's photo and ANPR snapshot carousels, and their full-screen view.
+const previewPhotoIndex = ref(0);
+const previewSnapshotIndex = ref(0);
+const fullscreenOpen = ref(false);
+const fullscreenIndex = ref(0);
+const fullscreenImages = ref<{ src: string; title: string }[]>([]);
+
+/** The entry and exit snapshots (iSecure: "Entry" / "Exit", full screen "Check In" / "Check Out"). */
+const previewSnapshots = computed(() => {
+  const record = selectedVisitorObject.value ?? {};
+  return [
+    record.snapshotEntryImage
+      ? { side: "IN", label: "Entry", title: "Check In", id: record.snapshotEntryImage }
+      : null,
+    record.snapshotExitImage
+      ? { side: "OUT", label: "Exit", title: "Check Out", id: record.snapshotExitImage }
+      : null,
+  ]
+    .filter((snapshot) => snapshot !== null)
+    .map((snapshot) => ({
+      ...snapshot!,
+      src: getFileUrlAnpr(`${siteId}/${snapshot!.id}`),
+    }));
+});
+
+function openFullscreen(images: { src: string; title: string }[], index: number) {
+  fullscreenImages.value = images;
+  fullscreenIndex.value = index;
+  fullscreenOpen.value = true;
+}
+
+function openPreviewPhotos(index: number) {
+  const ids: string[] = selectedVisitorObject.value?.attachments ?? [];
+  openFullscreen(
+    ids.map((id, i) => ({ src: getFileUrl(id), title: `Photo ${i + 1} of ${ids.length}` })),
+    index
+  );
+}
+
+function openPreviewSnapshots(index: number) {
+  openFullscreen(
+    previewSnapshots.value.map(({ src, title }) => ({ src, title })),
+    index
+  );
+}
 const { getSiteById } = useSite();
 const { getIdentities, issueVisitorQr } = useHidAmico();
 // const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
@@ -1891,20 +2204,74 @@ watch(searchInput, (value) => {
   else applySearch();
 });
 
-const today = new Date();
-const oneMonthAgo = new Date();
-oneMonthAgo.setMonth(today.getMonth() - 1);
+/*
+ * iSecure: the last 30 days through today, and the dates cannot be cleared -
+ * a cleared date goes back to its default. Sent as Singapore day bounds
+ * (`toSgDayRange`: 00:00:00 to 23:59:59.999 at +08:00; SG has no DST).
+ */
+function daysAgo(days: number) {
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  return date;
+}
+const defaultDateTo = () => normalizeDateOnly(new Date().toISOString());
+const defaultDateFrom = () => normalizeDateOnly(daysAgo(30).toISOString());
+
+const dateTo = ref(defaultDateTo());
+const dateFrom = ref(defaultDateFrom());
 
-const dateTo = ref(normalizeDateOnly(today.toISOString()));
-const dateFrom = ref(normalizeDateOnly(oneMonthAgo.toISOString()));
+function sgDayStart(day: string) {
+  return day ? new Date(`${day}T00:00:00+08:00`).toISOString() : undefined;
+}
+function sgDayEnd(day: string) {
+  return day ? new Date(`${day}T23:59:59.999+08:00`).toISOString() : undefined;
+}
 
-const filterTypes = ref<TVisitorType[]>([]);
+// Stored type strings - the "Guest (…)" literals are not a TVisitorType.
+const filterTypes = ref<string[]>([]);
 const displayNotCheckedOut = ref<boolean>(false);
 const mode = ref<"add" | "edit" | "register">("add");
 
 const message = ref("");
 const messageColor = ref("");
 const messageSnackbar = ref(false);
+/** Why the list could not be loaded (shown in the empty table). */
+const visitorListError = ref("");
+
+/* ---- Visitor type filter (iSecure visitor.constants.ts) ----------------- */
+
+/** Visitors tab: the eight stored types, "Guest (…)" literals included. */
+const VISITOR_TYPE_FILTER_OPTIONS = [
+  { label: "Drive In", value: "guest" },
+  { label: "Contractor", value: "contractor" },
+  { label: "Delivery (Food & Parcel)", value: "delivery" },
+  { label: "Walk-In", value: "walk-in" },
+  { label: "Pick-Up", value: "pick-up" },
+  { label: "Drop-Off", value: "drop-off" },
+  { label: "Guest (Drive-In)", value: "Guest (Drive-In)" },
+  { label: "Guest (Walk-In)", value: "Guest (Walk-In)" },
+];
+/** Guests tab: the two kinds of invitation. */
+const GUEST_TYPE_FILTER_OPTIONS = [
+  { label: "Guest", value: "guest" },
+  { label: "Contractor", value: "contractor" },
+];
+const DEFAULT_VISITOR_TAB_TYPES = "contractor,delivery,walk-in,pick-up,drop-off,guest";
+const DEFAULT_GUEST_TAB_TYPES = "guest,contractor";
+
+const typeFilterOptions = computed(() => {
+  if (activeTab.value === "registered") return VISITOR_TYPE_FILTER_OPTIONS;
+  if (activeTab.value === "guests") return GUEST_TYPE_FILTER_OPTIONS;
+  return [];
+});
+
+/** The `type` the list (and the CSV report) is asked for on this tab. */
+function typeParamForTab(): string | undefined {
+  const picked = filterTypes.value.filter(Boolean).join(",");
+  if (activeTab.value === "registered") return picked || DEFAULT_VISITOR_TAB_TYPES;
+  if (activeTab.value === "guests") return picked || DEFAULT_GUEST_TAB_TYPES;
+  return undefined;
+}
 
 const loading = reactive({
   fetchingVisitors: false,
@@ -1922,7 +2289,6 @@ const dialog = reactive({
   remarks: false,
   returnPassesKeys: false,
   addPassKey: false,
-  editPassKey: false,
   scanVisitorQRCode: false,
   showVisitorDataFromScannedQRCode: false,
   approveRejectOvernightParkingRequestDialog: false,
@@ -2050,15 +2416,22 @@ const headers = computed(() => {
     ];
   }
 
-  // 2. Define logic for all other tabs
-  const list = [{ title: "Name", value: "name" }];
+  // 2. Unregistered (iSecure): the plate, Check In/Out and Register only.
+  if (tab === "unregistered") {
+    return [
+      { title: "Vehicle Number", value: "vehicle-number" },
+      { title: "Check In/Out", value: "checkin-out" },
+      { title: "Action", value: "action" },
+    ];
+  }
 
-  // Standard info for non-parking tabs
-  list.push(
-    { title: "Type/Company", value: "type-company" },
+  // 3. iSecure's columns: Name / Phone / NRIC, Vehicle # / Type / Company,
+  //    then Location and Check In/Out (or the arrival on Guests).
+  const list = [
+    { title: "Name / Phone / NRIC", value: "name" },
+    { title: "Vehicle # / Type / Company", value: "vehicle-type-company" },
     { title: "Location", value: "location" },
-    { title: "Contact/Vehicle No.", value: "contact-vehicleNumber" }
-  );
+  ];
 
   // Conditional logic for Guests vs Others
   if (tab === "guests") {
@@ -2075,10 +2448,6 @@ const headers = computed(() => {
     );
   }
 
-  if (tab === "unregistered") {
-    list.push({ title: "Action", value: "action" });
-  }
-
   // Guests is the only non-overnight-parking tab whose rows carry a
   // top-level status (approved/pending/rejected) and an Approve/Reject
   // action - without these two, the item.status/item.action template slots
@@ -2115,12 +2484,14 @@ function permissionDenied(error: any): string | null {
 }
 
 const tabOptions = computed(() => {
+  // iSecure's three tabs first, in its order and words; then the web's own.
+  // The values (and the `tab` query) are unchanged so links keep working.
   const baseTabs = [
-    { name: "Registered", value: "registered" },
+    { name: "Visitors", value: "registered" },
+    { name: "Guests", value: "guests" },
     ...(enableUnregisteredTab.value
-      ? [{ name: "Unregistered", value: "unregistered" }]
+      ? [{ name: "Unregistered Visitor", value: "unregistered" }]
       : []),
-    { name: "Guests", value: "guests" },
     // Its own right in the role editor; the server refuses the list without it
     // - and once it has, the tab is hidden for the rest of the visit.
     ...(showResidentTransactionsTab.value
@@ -2144,15 +2515,17 @@ function getOvernightParkingRequestStatusColor(status: string) {
 }
 
 const overNightParkingListActions = [
+  // Was `disabled: props.canUpdateVisitor` - inverted: a role WITHOUT the
+  // Update right always saw Approve / Reject, even on a decided request.
   {
     text: "Approve",
     status: "approved",
-    disabled: props.canUpdateVisitor,
+    disabled: !props.canUpdateVisitor,
   },
   {
     text: "Reject",
     status: "rejected",
-    disabled: props.canUpdateVisitor,
+    disabled: !props.canUpdateVisitor,
   },
   {
     text: "View Remarks",
@@ -2324,10 +2697,103 @@ function normalizeDateOnly(value: string) {
   return `${year}-${month}-${day}`;
 }
 
+// A record opened from the preview's Lead that is not on the loaded page.
+const previewRecord = ref<Record<string, any> | null>(null);
+
 const selectedVisitorDataObject = computed(() => {
-  return items.value.find((x: any) => x?._id === selectedVisitorId.value) || {};
+  return (
+    items.value.find((x: any) => x?._id === selectedVisitorId.value) ||
+    (previewRecord.value?._id === selectedVisitorId.value ? previewRecord.value : null) ||
+    {}
+  );
 });
 
+/**
+ * A contractor member's lead (iSecure `[id].tsx` Lead section): the record
+ * its `leadId` names, read after the preview opens (never holds it back). A
+ * lead, or an older member row without `leadId`, shows none.
+ */
+const selectedVisitorLead = ref<Record<string, any> | null>(null);
+
+watch(
+  () => [dialog.viewVisitor, (selectedVisitorDataObject.value as any)?.leadId] as const,
+  async ([open, leadId]) => {
+    selectedVisitorLead.value = null;
+    if (!open || !leadId) return;
+    try {
+      const res: any = await useNuxtApp().$api(
+        `/api/visitor-transactions/id/${leadId}`
+      );
+      const record = res?._id ? res : res?.data;
+      // Still the same member's preview when the answer comes back.
+      if (
+        dialog.viewVisitor &&
+        String((selectedVisitorDataObject.value as any)?.leadId ?? "") === String(leadId)
+      ) {
+        selectedVisitorLead.value = record?._id ? record : null;
+        // The lead's record carries its pass as an id only: its name is
+        // looked up, as iSecure's Lead card does.
+        void loadReturnKeyNames(passIdsOf(record));
+      }
+    } catch {
+      // No Lead section rather than an error over the preview.
+    }
+  }
+);
+
+/** The pass / key ids a record holds, a bare pass id string included. */
+function passIdsOf(record: Record<string, any> | null | undefined): string[] {
+  if (!record) return [];
+  const pass =
+    typeof record.visitorPass === "string"
+      ? [record.visitorPass]
+      : activePasses(record).map((entry) => String(entry.keyId ?? ""));
+  return [...pass, ...activeKeys(record).map((entry) => String(entry.keyId ?? ""))].filter(
+    Boolean
+  );
+}
+
+/**
+ * The lead's pass on its card (iSecure `[id].tsx` Lead): its own name, or the
+ * name looked up from its id; nothing when it holds none.
+ */
+const leadPassName = computed(() => {
+  const lead = selectedVisitorLead.value;
+  if (!lead) return "";
+  if (typeof lead.visitorPass === "string") return returnKeyNames[lead.visitorPass] ?? "";
+  const pass = activePasses(lead)[0];
+  if (!pass) return "";
+  return pass.prefixAndName || returnKeyNames[String(pass.keyId ?? "")] || "";
+});
+
+// The previewed record's own Pass / Keys chips: names looked up for entries
+// that carry an id only (a lead opened from its member's preview).
+watch(
+  () => [dialog.viewVisitor, (selectedVisitorDataObject.value as any)?._id] as const,
+  ([open]) => {
+    if (!open) return;
+    const record = selectedVisitorDataObject.value as Record<string, any>;
+    const unnamed = [
+      ...activePasses(record),
+      ...activeKeys(record),
+    ].filter((entry) => !entry.prefixAndName);
+    void loadReturnKeyNames([
+      ...unnamed.map((entry) => String(entry.keyId ?? "")),
+      ...(typeof record?.visitorPass === "string" ? [record.visitorPass] : []),
+    ]);
+  }
+);
+
+/** "Open lead": the lead's own preview, in the same dialog. */
+function openLeadPreview() {
+  const lead = selectedVisitorLead.value;
+  if (!lead?._id) return;
+  previewRecord.value = lead;
+  selectedVisitorId.value = lead._id;
+  showVisitorNric.value = false;
+  shownMemberNrics.value = [];
+}
+
 const selectedVisitorStatus = computed(
   () => (selectedVisitorDataObject.value?.status as string) ?? ""
 );
@@ -2386,6 +2852,9 @@ watch(
     if (open) return;
     showVisitorNric.value = false;
     shownMemberNrics.value = [];
+    previewRecord.value = null;
+    previewPhotoIndex.value = 0;
+    previewSnapshotIndex.value = 0;
   }
 );
 
@@ -2407,7 +2876,42 @@ const memberDetailFields = [
 const formatType = (item: any) =>
   (item.deliveryType ? item.deliveryType + "-" : "") + item.type;
 
+/**
+ * The type a row shows (iSecure `typeLabel`): a resident-created guest keeps
+ * its `residentGuestType`, `guest` reads "Drive-In", a delivery says which
+ * kind it is ("delivery (food)"), anything else its stored type.
+ */
+function visitorTypeLabel(item: Record<string, any>) {
+  if (item?.residentGuestType) return item.residentGuestType;
+  if (!item?.type) return "N/A";
+  if (item.type === "guest") return "Drive-In";
+  if (item.type === "delivery" && item.deliveryType) {
+    return `${item.type} (${item.deliveryType})`;
+  }
+  return item.type;
+}
+
+/** iSecure `isGateInvitation`: an invitation raised at the gate names no home. */
+function isGateInvitation(item: Record<string, any>) {
+  return Boolean(item?.inviterId) && !item?.unit;
+}
+
+/** The API's manual check-out flag (iSecure reads `isManualCheckout`). */
+function isManualCheckout(item: Record<string, any>) {
+  return Boolean(item?.isManualCheckout ?? item?.manualCheckout);
+}
+
+/** iSecure's list time: `DD/MM/YYYY h:mm AM/PM`, in this browser's zone. */
+function formatDateTime(value: string) {
+  if (!value) return "";
+  const parsed = moment(value);
+  return parsed.isValid() ? parsed.format("DD/MM/YYYY h:mm A") : "";
+}
+
 const formattedFields = {
+  type: "Type",
+  // A contractor's type, only when the record has one.
+  contractorType: "Contractor Type",
   name: "Name",
   nric: "NRIC",
   contact: "Phone Number",
@@ -2417,34 +2921,41 @@ const formattedFields = {
   level: "Level",
   unit: "Unit",
   purpose: "Purpose",
+  lead: "Lead",
   members: "Members",
+  visitorPass: "Pass",
+  passKeys: "Keys",
   checkIn: "Check In",
-  snapshotEntryImage: "Entry Image",
   checkOut: "Check Out",
-  snapshotExitImage: "Exit Image",
+  // Entry and exit snapshots together, one carousel.
+  snapshotEntryImage: "ANPR Snapshots",
   remarks: "Remarks",
   attachments: "Attachments",
 } as const;
 
-const passStatusOptions = [
-  { label: "Returned", value: "Returned" },
-  { label: "Not Returned", value: "In Use" },
-  { label: "Damaged", value: "Damaged" },
-  { label: "Lost", value: "Lost" },
-];
+/** iSecure `RETURN_STATUSES`; "Removed" only shows on an entry already removed. */
+const RETURN_STATUSES = ["Not Returned", "Returned", "Damaged", "Lost"] as const;
 
-const nfcPassStatusOptions = [
-  { label: "Returned", value: "Returned" },
-  { label: "Not Returned", value: "In Use" },
-  { label: "Damaged", value: "Damage" },
-  { label: "Lost", value: "Lost" },
-];
+function returnStatusItems(entry: { status: string }) {
+  const items = RETURN_STATUSES.map((value) => ({ label: value, value }));
+  return entry.status === "Removed"
+    ? [...items, { label: "Removed", value: "Removed" }]
+    : items;
+}
+
+/** iSecure `CardReturnDialog` statuses, shown as stored. */
+const nfcPassStatusOptions = ["In Use", "Returned", "Lost", "Damage"];
 
 function toRoute(tab: any) {
   items.value = [];
 
   const obj = tabOptions.value.find((x) => x.value === tab);
   if (!obj) return;
+  // iSecure `applyTab`: the type filter is per tab and the search is
+  // cleared - carried across they show an empty list.
+  filterTypes.value = [];
+  searchInput.value = "";
+  searchQuery.value = "";
   // Don't call getVisitorRefresh() here - activeTab is already in the
   // useLazyAsyncData `watch` array below, so changing it (which already
   // happened via v-model before this handler runs) already triggers a
@@ -2463,25 +2974,21 @@ const {
       page: page.value,
       site: siteId,
       search: searchQuery.value,
-      dateTo: dateTo.value
-        ? moment(dateTo.value).endOf("day").toISOString()
-        : undefined,
-      dateFrom: dateFrom.value
-        ? moment(dateFrom.value).startOf("day").toISOString()
-        : undefined,
-      type:
-        filterTypes.value.length === 0 && activeTab.value === "registered"
-          ? "contractor,delivery,walk-in,pick-up,drop-off,guest"
-          : filterTypes.value.filter(Boolean).join(","),
-      checkedOut: displayNotCheckedOut.value ? false : undefined,
+      dateTo: sgDayEnd(dateTo.value),
+      dateFrom: sgDayStart(dateFrom.value),
+      type: typeParamForTab() ?? "",
+      // iSecure: the Visitors tab only.
+      checkedOut:
+        displayNotCheckedOut.value && activeTab.value === "registered"
+          ? false
+          : undefined,
     };
 
     if (activeTab.value === "guests") {
-      // Self-service Contractor submissions land here too, not just Visitor
-      // (type: "guest") - the "Registered" tab hard-filters status="registered",
-      // which a pending/approved self-service contractor never has, so without
-      // this it had no tab that would ever show it.
-      params.type = "guest,contractor";
+      // iSecure: Guest and Contractor invitations, or the types the user
+      // picked (`typeParamForTab`). Self-service Contractor submissions land
+      // here too - the Visitors tab hard-filters status="registered", which a
+      // pending/approved self-service contractor never has.
       // A self-service submission awaiting Approve/Reject (Self-Service
       // Auto-Approvals off) lands here as "pending" alongside already
       // "approved" guests, rather than being hidden until someone acts on it.
@@ -2502,6 +3009,7 @@ const {
     //   delete params.checkedOut;
     // }
 
+    visitorListError.value = "";
     try {
       const res = await getVisitors(params);
       // Remember which search this answers, so a late reply is not shown.
@@ -2511,7 +3019,13 @@ const {
       // go back to Registered - no empty "No data available" table.
       const denied =
         activeTab.value === "resident-transactions" ? permissionDenied(error) : null;
-      if (!denied) throw error;
+      if (!denied) {
+        // iSecure: the server's reason in place of "no visitors yet".
+        items.value = [];
+        visitorListError.value =
+          errorConverter(error) || "Unable to load the visitors. Please try again.";
+        return null;
+      }
       residentTransactionsDenied.value = true;
       items.value = [];
       showMessage(denied, "error");
@@ -2558,8 +3072,13 @@ const selectedVisitorObject = computed<Record<string, any>>(() => {
     "plateNumber",
     "snapshotEntryImage",
     "snapshotExitImage",
+    "isManualCheckout",
+    "manualCheckout",
   ];
   includedKeys.unshift(...(typeFieldMap[type] ?? []));
+  // A delivery's company is saved as `company`, but the form's field map
+  // names it "delivery-company", so it was never picked up for the preview.
+  if (type === "delivery") includedKeys.push("company");
 
   /**
    * V-07: THE DETAIL DIALOG PRINTED `undefined / undefined / 12-34`.
@@ -2604,6 +3123,16 @@ function formatValues(key: string, value: any) {
       return formatDate(value);
     case "checkOut":
       return formatDate(value);
+    case "contractorType":
+      // "estate-contractor" -> "Estate Contractor" (the form's titles), and a
+      // type the form does not list (e.g. managing-agent-staff) worded the same way.
+      return (
+        contractorTypes.find((type) => type.value === value)?.title ??
+        String(value)
+          .split("-")
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(" ")
+      );
   }
 
   return value;
@@ -2616,12 +3145,12 @@ function handleShowVisitorDataFromScannedQRCodeDialog(
 ) {
   visitorDataFromScannedQRCode.value = scannedData;
 
-  const { checkIn, checkOut, _id, visitorPass } = scannedData;
-  const hasPasses = (visitorPass?.length ?? 0) > 0;
+  const { checkIn, checkOut, _id } = scannedData;
 
-  // 1. If they are checked in and HAVE passes/keys, go to the Return screen
-  if (checkIn && !checkOut && hasPasses) {
-    handleCheckout(_id);
+  // 1. Checked in and holding a pass or key: the return statuses first
+  //    (iSecure `holdsPassOrKeys`, "Removed" history not counted).
+  if (checkIn && !checkOut && holdsPassOrKeys(scannedData)) {
+    handleCheckout(_id, scannedData);
     return;
   }
 
@@ -2696,33 +3225,193 @@ function handleAddNew() {
   mode.value = "add";
 }
 
-function handleRowClick(data: any) {
-  selectedVisitorId.value = data?.item?._id;
+/**
+ * Opening a visitor (iSecure `openDetails`, "See Visitor Details"): the
+ * preview, which also holds Check In / Check Out.
+ */
+function openVisitorDetails(item: Record<string, any>) {
+  if (!canOpenVisitorDetails.value) {
+    showMessage("You do not have permission to view visitor details.", "error");
+    return;
+  }
+  selectedVisitorId.value = item?._id;
   dialog.viewVisitor = true;
 }
 
+function handleRowClick(data: any) {
+  const item = data?.item;
+  if (!item?._id) return;
+  openVisitorDetails(item);
+}
+
 function handleUpdatePage(newPageNum: number) {
   page.value = newPageNum;
 }
 
-function showAddPassKeyButton(item: any) {
-  const hasPasses = (item?.visitorPass?.length ?? 0) > 0;
-  const hasKeys = (item?.passKeys?.length ?? 0) > 0;
+/* ---- Pass & key (iSecure use-checkout-with-keys.ts / pass-keys.tsx) ------ */
 
-  const isTypeWithPassKey = ["contractor", "guest", "walk-in"].includes(
-    item?.type
+type TPassEntry = Record<string, any> & {
+  keyId?: string;
+  status?: string;
+  prefixAndName?: string;
+  remarks?: string;
+};
+
+function passEntries(value: unknown): TPassEntry[] {
+  return Array.isArray(value) ? (value.filter(Boolean) as TPassEntry[]) : [];
+}
+
+/** The passes a visit still holds: one swapped out stays as "Removed" history. */
+function activePasses(item: Record<string, any> | null | undefined) {
+  return passEntries(item?.visitorPass).filter((pass) => pass.status !== "Removed");
+}
+
+/** Keys still with the visitor ("Removed" ones are history). */
+function activeKeys(item: Record<string, any> | null | undefined) {
+  return passEntries(item?.passKeys).filter((key) => key.status !== "Removed");
+}
+
+/** Check Out goes through the return statuses first: an active pass, a pass id string, or any key. */
+function holdsPassOrKeys(item: Record<string, any> | null | undefined) {
+  return (
+    activePasses(item).length > 0 ||
+    (typeof item?.visitorPass === "string" && Boolean(item.visitorPass)) ||
+    activeKeys(item).length > 0
   );
+}
 
+/** NFC access cards go through the card return before a check-out. */
+function holdsNfcCards(item: Record<string, any> | null | undefined) {
+  return item?.accessCards?.type === "NFC" && Boolean(item?.accessCards?.cardNo);
+}
+
+/**
+ * "Assign": no active pass, not checked out, and not a pick-up, drop-off or
+ * delivery (a contractor always qualifies).
+ */
+function canAssignPass(item: Record<string, any>) {
+  if (activePasses(item).length > 0 || item?.checkOut) return false;
+  if (item?.type === "contractor") return true;
+  return !["pick-up", "drop-off", "delivery"].includes(String(item?.type ?? ""));
+}
+
+function showAssignChip(item: Record<string, any>) {
+  return props.canAssignPassKeys && props.canUpdateVisitor && canAssignPass(item);
+}
+
+function showPassKeyChips(item: Record<string, any>) {
   return (
-    !hasPasses &&
-    !hasKeys &&
-    isTypeWithPassKey &&
-    item?.status === "registered" &&
-    !item?.checkOut
+    activePasses(item).length > 0 ||
+    activeKeys(item).length > 0 ||
+    showAssignChip(item) ||
+    (item?.type === "contractor" && Boolean(item?.accessCards?.cardNo))
   );
 }
 
+function allCards(item: Record<string, any>): any[] {
+  const cards = item?.cards;
+  return Array.isArray(cards) ? cards.flat().filter(Boolean) : [];
+}
+
+/**
+ * The NFC menu: the primary card, then every other card once, each by its
+ * number - an extra card stored as an id only by the number read for it
+ * (`nfcCardLabel` / `loadNfcCardNos`).
+ */
+function nfcCardNumbers(item: Record<string, any>): { id: string; label: string }[] {
+  const primary = item?.accessCards;
+  const primaryId = primary?._id?.toString() ?? "";
+  const others = allCards(item)
+    .filter((card: any) => card?._id && card._id.toString() !== primaryId)
+    .map((card: any) => ({ id: String(card._id), label: nfcCardLabel(card, item) }));
+  return [
+    ...(primary?.cardNo ? [{ id: primaryId || "primary", label: String(primary.cardNo) }] : []),
+    ...others,
+  ];
+}
+
+type TPassAction = "return-pass-keys" | "add-keys" | "edit-pass";
+
+const passChipMenu = reactive<{
+  open: boolean;
+  target: Element | null;
+  visitor: Record<string, any> | null;
+}>({ open: false, target: null, visitor: null });
+
+const passKeyDialogVisitor = ref<Record<string, any> | null>(null);
+const passKeyDialogMode = ref<"add" | "add-keys" | "edit-pass">("add");
+
+/**
+ * A pass / key chip: checked out, or without the pass & key rights, it goes
+ * straight to the return statuses; otherwise the menu.
+ */
+function openPassChipMenu(item: Record<string, any>, event: Event) {
+  if (!props.canUpdateVisitor) {
+    showMessage("You do not have permission to update visitors.", "error");
+    return;
+  }
+  if (item?.checkOut || !props.canAssignPassKeys) {
+    openPassAction(item, "return-pass-keys");
+    return;
+  }
+  passChipMenu.visitor = item;
+  passChipMenu.target = (event?.currentTarget as Element) ?? null;
+  passChipMenu.open = true;
+}
+
+function choosePassAction(action: TPassAction) {
+  const visitor = passChipMenu.visitor;
+  passChipMenu.open = false;
+  if (visitor) openPassAction(visitor, action);
+}
+
+function openPassAction(item: Record<string, any>, action: TPassAction) {
+  if (!props.canUpdateVisitor) {
+    showMessage("You do not have permission to update visitors.", "error");
+    return;
+  }
+  // Checked out: only the return statuses can still change.
+  if (action === "return-pass-keys" || item?.checkOut) {
+    openReturnDialog(item);
+    return;
+  }
+  if (!props.canAssignPassKeys) return;
+  passKeyDialogVisitor.value = item;
+  passKeyDialogMode.value = action;
+  dialog.addPassKey = true;
+}
+
+/** "Assign": Assign Pass & Keys for a contractor, Add Pass otherwise. */
+function openAssign(item: Record<string, any>) {
+  if (!props.canUpdateVisitor || !props.canAssignPassKeys) return;
+  passKeyDialogVisitor.value = item;
+  passKeyDialogMode.value = "add";
+  dialog.addPassKey = true;
+}
+
+function handlePassKeyDialogDone() {
+  const mode = passKeyDialogMode.value;
+  const visitor = passKeyDialogVisitor.value;
+  dialog.addPassKey = false;
+  const done =
+    mode === "add-keys"
+      ? "Successfully added the new key(s)."
+      : mode === "edit-pass"
+        ? "Pass successfully updated."
+        : visitor?.type !== "contractor"
+          ? "Successfully added the new pass."
+          : "";
+  if (done) showMessage(done, "success");
+  getVisitorRefresh();
+}
+
+// Every time a type is picked the form starts afresh (a new instance), as the
+// security mobile app opens a new form: nothing typed for the last visitor or
+// type is carried over, and switching type never patches one form into another.
+const visitorFormKey = ref(0);
+
 function handleSelectVisitorType(type: TVisitorType) {
+  visitorFormKey.value++;
   dialog.showSelection = false;
   dialog.showForm = true;
   activeVisitorFormType.value = type;
@@ -2733,13 +3422,18 @@ function handleClickBack() {
   dialog.showForm = false;
 }
 
+/** iSecure's toast after an add, an update or a register. */
+const VISITOR_SAVED_MESSAGE = "Great! A new visitor has been successfully added.";
+
 function handleVisitorFormDone() {
+  showMessage(VISITOR_SAVED_MESSAGE, "success");
   getVisitorRefresh();
   dialog.showSelection = false;
   dialog.showForm = false;
 }
 
 function handleVisitorFormCreateMore() {
+  showMessage(VISITOR_SAVED_MESSAGE, "success");
   getVisitorRefresh();
   dialog.showSelection = true;
   dialog.showForm = false;
@@ -2756,36 +3450,35 @@ function handleCloseAll() {
   dialog.showForm = false;
 }
 
+/*
+ * Register an unregistered camera record (the row's Register, or the plate
+ * notice). Only its id and plate are needed and nothing is fetched first, so
+ * the form opens straight away (as the security mobile app): the plate the
+ * camera read is filled in and can be edited, the guard keys in the rest, and
+ * the save updates the record by its id. Not looked up in the loaded rows - a
+ * row not on this page used to give the form no id, and Submit did nothing.
+ */
+const registerRecord = ref<{ _id: string; plateNumber: string } | null>(null);
+
 function handleRegistrationUnregisteredVisitor(item: Partial<TVisitor>) {
   const id = item?._id || null;
   selectedVisitorId.value = id;
+  registerRecord.value = id
+    ? { _id: String(id), plateNumber: String(item?.plateNumber ?? "") }
+    : null;
   dialog.showSelection = true;
   mode.value = "register";
-
-  if (!selectedVisitorDataObject.value) {
-    getVisitorRefresh();
-  }
 }
 
-function handleViewImage(imageId: string) {
+const snapshotImageSide = ref<"IN" | "OUT">("IN");
+
+function handleViewImage(imageId: string, side: "IN" | "OUT" = "IN") {
   const imageEndpoint = `${siteId}/${imageId}`;
   snapshotImageUrl.value = getFileUrlAnpr(imageEndpoint);
+  snapshotImageSide.value = side;
   dialog.snapshotImage = true;
 }
 
-function handleOpenAddPassKey(item: any) {
-  selectedVisitorId.value = item?._id;
-  dialog.addPassKey = true;
-}
-
-function handleOpenEditPassKey(item: any) {
-  selectedVisitorId.value = item?._id;
-  if (selectedVisitorDataObject.value.checkOut) {
-    dialog.returnPassesKeys = true;
-    handleCheckout(selectedVisitorId.value as string);
-  } else dialog.editPassKey = true;
-}
-
 function handleOpenRemarks(item: any, type: "checkIn" | "checkOut") {
   selectedVisitorId.value = item?._id;
   remarksType.value = type;
@@ -2819,64 +3512,254 @@ async function handleSaveRemarks() {
   }
 }
 
+/* ---- Return statuses: "Update Pass or Key(s)" (iSecure) ------------------ */
+
+type TReturnEntry = TPassEntry & {
+  keyId: string;
+  status: string;
+  remarks: string;
+  locked: boolean;
+};
+
+const returnVisitor = ref<Record<string, any> | null>(null);
+const passReturnStatuses = ref<TReturnEntry[]>([]);
+const keyReturnStatuses = ref<TReturnEntry[]>([]);
+const returnInitialSignature = ref("");
+const returnDialogError = ref("");
+const returnScan = reactive({ open: false, value: "" });
+// Names of passes / keys whose entry carries none, looked up by id after the
+// dialog opens (never holds it back).
+const returnKeyNames = reactive<Record<string, string>>({});
+
+/** The preview's Pass row: drive-in, walk-in, contractor and a resident's invite (iSecure). */
+const previewShowsPass = computed(() => {
+  const record = selectedVisitorDataObject.value as Record<string, any>;
+  return (
+    Boolean(record?.residentGuestType) ||
+    ["guest", "walk-in", "contractor"].includes(record?.type)
+  );
+});
+
+/** The preview's Keys row: a contractor only (iSecure). */
+const previewShowsKeys = computed(
+  () => (selectedVisitorDataObject.value as Record<string, any>)?.type === "contractor"
+);
+
+/**
+ * The preview's Pass / Keys chips, as the list draws them: the held passes in
+ * one chip, each held key its own ("Removed" ones are history).
+ */
+function previewPassKeyChips(key: string): string[] {
+  const record = selectedVisitorDataObject.value as Record<string, any>;
+  if (key === "visitorPass") {
+    const passes = activePasses(record);
+    return passes.length
+      ? [
+          passes
+            .map((pass) => pass.prefixAndName || returnKeyNames[pass.keyId ?? ""] || "Pass")
+            .join(", "),
+        ]
+      : [];
+  }
+  return activeKeys(record)
+    .filter((entry) => entry.keyId)
+    .map((entry) => entry.prefixAndName || returnKeyNames[entry.keyId ?? ""] || "Key");
+}
+const { getPassKeysByPageSearch: searchPassKeysForNames } = usePassKey();
+
+async function loadReturnKeyNames(ids: string[]) {
+  const missing = ids.filter((id) => id && !returnKeyNames[id]);
+  if (!missing.length) return;
+  try {
+    const res: any = await searchPassKeysForNames({
+      _ids: missing,
+      page: 1,
+      limit: missing.length,
+      sites: [siteId],
+    });
+    const items: any[] = res?.items ?? res?.data?.items ?? [];
+    for (const item of items) {
+      if (item?._id && item?.prefixAndName) returnKeyNames[item._id] = item.prefixAndName;
+    }
+  } catch {
+    // The chip falls back to "Pass" / "Key".
+  }
+}
+
+/** "In Use" (or no status) reads as "Not Returned"; what was recorded stays. */
+function startReturnEntry(entry: TPassEntry): TReturnEntry {
+  const known: string[] = [...RETURN_STATUSES, "Removed"];
+  const status =
+    entry.status && entry.status !== "In Use" && known.includes(entry.status)
+      ? entry.status
+      : "Not Returned";
+  return {
+    ...entry,
+    keyId: String(entry.keyId ?? ""),
+    status,
+    remarks: entry.remarks ?? "",
+    locked: status === "Removed",
+  };
+}
+
+function returnSignature() {
+  const sig = (entries: TReturnEntry[]) =>
+    entries
+      .map((entry) => `${entry.keyId}|${entry.status}|${String(entry.remarks ?? "").trim()}`)
+      .join(",");
+  return `${sig(passReturnStatuses.value)}#${sig(keyReturnStatuses.value)}`;
+}
+
+function openReturnDialog(item: Record<string, any>) {
+  returnVisitor.value = item;
+  selectedVisitorId.value = item?._id ?? null;
+  passReturnStatuses.value = passEntries(item?.visitorPass)
+    .filter((pass) => Boolean(pass.keyId))
+    .map(startReturnEntry);
+  keyReturnStatuses.value = passEntries(item?.passKeys).map(startReturnEntry);
+  returnInitialSignature.value = returnSignature();
+  returnDialogError.value = "";
+  dialog.returnPassesKeys = true;
+  void loadReturnKeyNames(
+    [...passReturnStatuses.value, ...keyReturnStatuses.value]
+      .filter((entry) => !entry.prefixAndName)
+      .map((entry) => entry.keyId)
+  );
+}
+
+/** Update only once a status or remark differs from what was loaded. */
+const returnStatusesChanged = computed(
+  () => returnSignature() !== returnInitialSignature.value
+);
+
+/** Check Out stays disabled while anything is still out (or already checked out). */
+const returnCheckOutBlocked = computed(
+  () =>
+    [...passReturnStatuses.value, ...keyReturnStatuses.value].some(
+      (entry) => !["Returned", "Damaged", "Lost", "Removed"].includes(entry.status)
+    ) || Boolean(returnVisitor.value?.checkOut)
+);
+
+function returnProblem(): string | null {
+  return [...passReturnStatuses.value, ...keyReturnStatuses.value].some(
+    (entry) =>
+      ["Damaged", "Lost"].includes(entry.status) && !String(entry.remarks ?? "").trim()
+  )
+    ? "Remarks cannot be empty"
+    : null;
+}
+
+const RETURN_DISPLAY_ONLY = [
+  "lastUpdate",
+  "description",
+  "templatePrefixPass",
+  "prefixAndName",
+  "add",
+  "locked",
+];
+
+function returnEntryForServer(entry: TReturnEntry) {
+  const rest: Record<string, any> = { ...entry };
+  for (const key of RETURN_DISPLAY_ONLY) delete rest[key];
+  return rest;
+}
+
+/** "Scan QR Code": the scanned pass or key is marked Returned. */
+watch(
+  () => returnScan.value,
+  (value) => {
+    if (!value) return;
+    returnScan.value = "";
+    let found = false;
+    let problem: string | null = null;
+    const mark = (entries: TReturnEntry[], already: string) =>
+      entries.map((entry) => {
+        if ((entry.prefixAndName || returnKeyNames[entry.keyId]) !== value) return entry;
+        found = true;
+        if (entry.status === "Returned") {
+          problem = already.replace("{value}", value);
+          return entry;
+        }
+        return { ...entry, status: "Returned" };
+      });
+    passReturnStatuses.value = mark(
+      passReturnStatuses.value,
+      "This pass {value} has already been selected as Returned."
+    );
+    keyReturnStatuses.value = mark(
+      keyReturnStatuses.value,
+      "This key {value} has already been selected as Returned."
+    );
+    if (!found) problem = `Pass or key: ${value} not found in this visitor transaction.`;
+    returnDialogError.value = problem ?? "";
+  }
+);
+
+/** "Update": the statuses and remarks only, no check-out; closes on success. */
 async function handleUpdatePassKeys() {
-  if (!selectedVisitorId.value) return;
+  const id = returnVisitor.value?._id;
+  if (!id) return;
+  const problem = returnProblem();
+  if (problem) {
+    returnDialogError.value = problem;
+    return;
+  }
+  returnDialogError.value = "";
   try {
     loading.updatingPassKeys = true;
-    const payload: any = {};
-    if (passReturnStatuses.value.length > 0) {
-      const passReturnStatusesPayload = passReturnStatuses.value.map((p) => ({
-        keyId: p.keyId,
-        status: p.status,
-        remarks: p.remarks,
-      }));
-      payload.visitorPass = passReturnStatusesPayload;
-    }
-    if (keyReturnStatuses.value.length > 0) {
-      const keyReturnStatusesPayload = keyReturnStatuses.value.map((k) => ({
-        keyId: k.keyId,
-        status: k.status,
-        remarks: k.remarks,
-      }));
-      payload.passKeys = keyReturnStatusesPayload;
-    }
-    await updateVisitor(selectedVisitorId.value, payload);
-    showMessage("Pass/Key statuses updated successfully!", "info");
+    await updateVisitor(id, {
+      visitorPass: passReturnStatuses.value.map(returnEntryForServer),
+      passKeys: keyReturnStatuses.value.map(returnEntryForServer),
+      updatedBy: currentUser.value?._id,
+    } as any);
+    dialog.returnPassesKeys = false;
+    showMessage("Successfully updated.", "success");
     await getVisitorRefresh();
   } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
-    showMessage(
-      errorMessage || "Something went wrong. Please try again later.",
-      "error"
-    );
+    returnDialogError.value =
+      errorConverter(error) || "Something went wrong. Please try again later.";
   } finally {
     loading.updatingPassKeys = false;
   }
 }
 
-const passReturnStatuses = ref<
-  { keyId: string; status: string; prefixAndName: string; remarks: string }[]
->([]);
-const keyReturnStatuses = ref<
-  { keyId: string; status: string; prefixAndName: string; remarks: string }[]
->([]);
+/** "Check Out": what came back and the check-out, in one update. */
+async function confirmReturnCheckout() {
+  const visitor = returnVisitor.value;
+  if (!visitor?._id || returnCheckOutBlocked.value) return;
+  const problem = returnProblem();
+  if (problem) {
+    returnDialogError.value = problem;
+    return;
+  }
+  returnDialogError.value = "";
+  try {
+    loading.checkingOut = true;
+    await updateVisitor(visitor._id, {
+      visitorPass: passReturnStatuses.value.map(returnEntryForServer),
+      passKeys: keyReturnStatuses.value.map(returnEntryForServer),
+      checkOut: new Date().toISOString(),
+      updatedBy: currentUser.value?._id,
+    } as any);
+    dialog.returnPassesKeys = false;
+    dialog.viewVisitor = false;
+    showMessage("Visitor information successfully updated.", "success");
+    await getVisitorRefresh();
+  } catch (error: any) {
+    // Stays open so what the guard recorded is not lost.
+    returnDialogError.value =
+      errorConverter(error) || "Something went wrong. Please try again later.";
+  } finally {
+    loading.checkingOut = false;
+  }
+}
+
+/* ---- NFC card return (iSecure CardReturnDialog) -------------------------- */
+
 const nfcCardReturnStatuses = ref<
   { cardId: string; cardNo: string; status: string; remarks: string }[]
 >([]);
-
-const canConfirmCheckout = computed(() => {
-  const allEntries = [...passReturnStatuses.value, ...keyReturnStatuses.value];
-  return allEntries.every((entry) => {
-    if (!entry.status || ["In Use", "Not Returned"].includes(entry.status))
-      return false;
-    if (
-      (entry.status === "Lost" || entry.status === "Damaged") &&
-      !entry.remarks.trim()
-    )
-      return false;
-    return true;
-  });
-});
+const nfcDialogError = ref("");
 
 const canConfirmNfcCheckout = computed(() => {
   if (nfcCardReturnStatuses.value.length === 0) return false;
@@ -2888,110 +3771,97 @@ const canConfirmNfcCheckout = computed(() => {
   });
 });
 
+/** The primary card, then every other card once - each by its number. */
+function openNfcDialog(visitor: Record<string, any>) {
+  const cards: any[] = [];
+  if (visitor?.accessCards?.cardNo) cards.push(visitor.accessCards);
+  const primaryId = visitor?.accessCards?._id?.toString();
+  for (const card of allCards(visitor)) {
+    // An extra card may be stored as an id only: it is returned too, shown by
+    // the number read for it.
+    if (card?._id && card._id.toString() !== primaryId) cards.push(card);
+  }
+  nfcCardReturnStatuses.value = cards.map((card: any) => ({
+    cardId: card._id,
+    cardNo: nfcCardLabel(card, visitor),
+    status: "In Use",
+    remarks: "",
+  }));
+  nfcDialogError.value = "";
+  void loadNfcCardNos(visitor);
+  dialog.returnNfcCard = true;
+}
+
 function handleCheckin(user: Record<string, any>) {
   visitorDataFromScannedQRCode.value = user;
   dialog.showVisitorDataFromScannedQRCode = true;
 }
 
-function handleCheckout(userId: string) {
+/** iSecure's row: Check Out once checked in and not out, never on Guests, with the Update right. */
+function showCheckOutButton(item: Record<string, any>) {
+  if (!props.canCheckoutVisitor) return false;
+  if (!item?.checkIn || item?.checkOut) return false;
+  if (activeTab.value === "guests") return false;
+  if (activeTab.value === "overnight-parking") {
+    return ["registered", "unregistered"].includes(String(item?.status ?? ""));
+  }
+  return true;
+}
+
+/**
+ * Check Out, in iSecure's order: a held pass or key goes to the return
+ * statuses first, an NFC card to the card return, and only a visit holding
+ * neither checks out straight away. Each path is an update of the visit.
+ */
+function handleCheckout(userId: string, visitorObj?: Record<string, any>) {
   if (!userId) {
     showMessage("Invalid userId", "error");
     return;
   }
+  if (!props.canCheckoutVisitor) {
+    showMessage("You do not have permission to update visitors.", "error");
+    return;
+  }
   selectedVisitorId.value = userId;
 
-  const visitor = items.value.find((x: any) => x?._id === userId);
-  const hasPasses = (visitor?.visitorPass?.length ?? 0) > 0;
-  const hasKeys = (visitor?.passKeys?.length ?? 0) > 0;
-
-  if (hasPasses || hasKeys) {
-    const visitor = items.value.find((x: any) => x?._id === userId);
-    passReturnStatuses.value = ((visitor?.visitorPass as any[]) || []).map(
-      (p: any) => ({
-        keyId: p.keyId,
-        status: p.status ?? "In Use",
-        remarks: "",
-        prefixAndName: p.prefixAndName,
-      })
-    );
-    keyReturnStatuses.value = ((visitor?.passKeys as any[]) || []).map(
-      (k: any) => ({
-        keyId: k.keyId,
-        status: k.status ?? "In Use",
-        remarks: "",
-        prefixAndName: k.prefixAndName,
-      })
-    );
-    dialog.returnPassesKeys = true;
+  const visitor =
+    visitorObj ??
+    items.value.find((x: any) => x?._id === userId) ??
+    (visitorDataFromScannedQRCode.value?._id === userId
+      ? visitorDataFromScannedQRCode.value
+      : null);
+
+  if (visitor && holdsPassOrKeys(visitor)) {
+    openReturnDialog(visitor);
     return;
   }
-
-  const hasNfc =
-    visitor?.accessCards?.type === "NFC" && !!visitor?.accessCards?.cardNo;
-  if (hasNfc) {
-    const allCards: any[] = visitor.cards?.flat() ?? [];
-    nfcCardReturnStatuses.value = allCards.map((card: any) => ({
-      cardId: card._id,
-      cardNo: nfcCardLabel(card, visitor),
-      status: "In Use",
-      remarks: "",
-    }));
-    if (nfcCardReturnStatuses.value.length === 0) {
-      nfcCardReturnStatuses.value = [
-        {
-          cardId: visitor.accessCards._id,
-          cardNo: visitor.accessCards.cardNo,
-          status: "In Use",
-          remarks: "",
-        },
-      ];
-    }
-    loadNfcCardNos(visitor);
-    dialog.returnNfcCard = true;
+  if (visitor && holdsNfcCards(visitor)) {
+    openNfcDialog(visitor);
     return;
   }
-
   proceedCheckout();
 }
 
+/** A visit holding nothing: just the check-out. */
 async function proceedCheckout() {
   const userId = selectedVisitorId.value;
   if (!userId) return;
 
   try {
     loading.checkingOut = true;
-
-    const passReturnStatusesPayload = passReturnStatuses.value.map((p) => ({
-      keyId: p.keyId,
-      status: p.status,
-      remarks: p.remarks,
-    }));
-    const keyReturnStatusesPayload = keyReturnStatuses.value.map((k) => ({
-      keyId: k.keyId,
-      status: k.status,
-      remarks: k.remarks,
-    }));
-
     const res = await updateVisitor(userId as string, {
       checkOut: new Date().toISOString(),
-      ...(passReturnStatuses.value.length > 0
-        ? { visitorPass: passReturnStatusesPayload }
-        : {}),
-      ...(keyReturnStatuses.value.length > 0
-        ? { passKeys: keyReturnStatusesPayload }
-        : {}),
-    });
+      updatedBy: currentUser.value?._id,
+    } as any);
     if (res) {
-      showMessage("Visitor successfully checked-out!", "info");
+      showMessage("Visitor successfully checked out.", "success");
       await getVisitorRefresh();
       dialog.viewVisitor = false;
-      dialog.returnPassesKeys = false;
     }
   } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
     console.error("[ERROR]", error);
     showMessage(
-      errorMessage || "Something went wrong. Please try again later.",
+      errorConverter(error) || "Something went wrong. Please try again later.",
       "error"
     );
   } finally {
@@ -3002,6 +3872,7 @@ async function proceedCheckout() {
 async function handleNfcCheckout() {
   const userId = selectedVisitorId.value;
   if (!userId) return;
+  nfcDialogError.value = "";
   try {
     loading.checkingOut = true;
     const res = await visitorCheckout({
@@ -3015,18 +3886,18 @@ async function handleNfcCheckout() {
     if (res) {
       await updateVisitor(userId as string, {
         checkOut: new Date().toISOString(),
-      });
-      showMessage("Visitor successfully checked-out!", "info");
+        updatedBy: currentUser.value?._id,
+      } as any);
+      showMessage("Visitor successfully checked out.", "success");
       await getVisitorRefresh();
       dialog.returnNfcCard = false;
       dialog.viewVisitor = false;
     }
   } catch (error: any) {
-    const errorMessage = error?.response?._data?.message;
-    showMessage(
-      errorMessage || "Something went wrong. Please try again later.",
-      "error"
-    );
+    // Stays open with the reason.
+    const reason = errorConverter(error) || "Failed to checkout visitor.";
+    nfcDialogError.value = reason;
+    showMessage(reason, "error");
   } finally {
     loading.checkingOut = false;
   }
@@ -3036,17 +3907,13 @@ function buildReportParams(): any {
   const params: any = {
     site: siteId,
     search: searchQuery.value,
-    dateTo: dateTo.value
-      ? moment(dateTo.value).endOf("day").toISOString()
-      : undefined,
-    dateFrom: dateFrom.value
-      ? moment(dateFrom.value).startOf("day").toISOString()
-      : undefined,
-    type:
-      filterTypes.value.length === 0 && activeTab.value === "registered"
-        ? "contractor,delivery,walk-in,pick-up,drop-off,guest"
-        : filterTypes.value.filter(Boolean).join(","),
-    checkedOut: displayNotCheckedOut.value ? false : undefined,
+    dateTo: sgDayEnd(dateTo.value),
+    dateFrom: sgDayStart(dateFrom.value),
+    type: typeParamForTab() ?? "",
+    checkedOut:
+      displayNotCheckedOut.value && activeTab.value === "registered"
+        ? false
+        : undefined,
     limit: 100,
   };
 
@@ -3054,7 +3921,6 @@ function buildReportParams(): any {
     // Kept in sync with the Guests tab's own list query above - otherwise a
     // report generated from this tab would silently omit contractors and
     // pending rows the screen is actually showing.
-    params.type = "guest,contractor";
     params.status = "approved,pending,rejected";
   } else if (activeTab.value === "resident-transactions") {
     params.status = "registered";
@@ -3065,10 +3931,10 @@ function buildReportParams(): any {
     params.status = activeTab.value;
   }
 
-  if (activeTab.value !== "registered") {
+  if (activeTab.value !== "registered" && activeTab.value !== "guests") {
     delete params.type;
-    delete params.checkedOut;
   }
+  if (activeTab.value !== "registered") delete params.checkedOut;
 
   return params;
 }
@@ -3248,8 +4114,20 @@ watch(
   },
   { deep: true }
 );
-watch([searchQuery, dateFrom, dateTo, filterTypes, activeTab], () => {
-  page.value = 1;
+// iSecure: any filter change starts again at page 1.
+watch(
+  [searchQuery, dateFrom, dateTo, filterTypes, activeTab, displayNotCheckedOut],
+  () => {
+    page.value = 1;
+  }
+);
+
+// iSecure: the dates cannot be cleared - a cleared one goes back to its default.
+watch(dateFrom, (value) => {
+  if (!value) dateFrom.value = defaultDateFrom();
+});
+watch(dateTo, (value) => {
+  if (!value) dateTo.value = defaultDateTo();
 });
 
 const syncVisitorFiltersFromRoute = () => {
@@ -3257,7 +4135,7 @@ const syncVisitorFiltersFromRoute = () => {
   const nextTab =
     // Until the switches are read, keep a requested Unregistered tab (the plate
     // toast links here) instead of bouncing it to Registered.
-    (anprSettingsLoaded.value &&
+    (unregisteredTabKnown.value &&
       !enableUnregisteredTab.value &&
       requestedTab === "unregistered") ||
     (!showResidentTransactionsTab.value && requestedTab === "resident-transactions")
@@ -3291,14 +4169,17 @@ const syncVisitorFiltersFromRoute = () => {
     }
   }
 
-  if (activeTab.value === "registered") {
+  if (activeTab.value === "registered" || activeTab.value === "guests") {
+    const allowed = typeFilterOptions.value.map((option) => option.value);
     const nextFilterTypes = (
       (route.query.type as string)?.split(",") || []
-    ).filter(Boolean) as TVisitorType[];
+    ).filter((value) => Boolean(value) && allowed.includes(value));
     if (filterTypes.value.join(",") !== nextFilterTypes.join(",")) {
       filterTypes.value = nextFilterTypes;
     }
+  }
 
+  if (activeTab.value === "registered") {
     const nextDisplayNotCheckedOut =
       (route.query.checkedOut as string) == "true" || false;
     if (displayNotCheckedOut.value !== nextDisplayNotCheckedOut) {
@@ -3318,13 +4199,13 @@ onBeforeUnmount(() => {
 
 watch(() => route.query, syncVisitorFiltersFromRoute, { deep: true });
 
-const { socketUnregisteredVisitorTrigger, visitorSocketData } =
+const { socketUnregisteredVisitorTrigger, visitorSocketData, registerVisitorFormData } =
   useVisitorSocket();
 
 watch(
-  [enableUnregisteredTab, anprSettingsLoaded],
+  [enableUnregisteredTab, unregisteredTabKnown],
   ([enabled]) => {
-    if (!enabled && anprSettingsLoaded.value && activeTab.value === "unregistered") {
+    if (!enabled && unregisteredTabKnown.value && activeTab.value === "unregistered") {
       activeTab.value = "registered";
     }
   },
@@ -3332,6 +4213,8 @@ watch(
 );
 
 watchEffect(async () => {
+  // A reload only refreshes the list. It no longer cancels a pending Register
+  // (security mobile app: nothing but a new arrival replaces the stored one).
   if (
     visitorSocketData.value &&
     visitorSocketData.value.reload &&
@@ -3339,33 +4222,114 @@ watchEffect(async () => {
   ) {
     await getVisitorRefresh();
     visitorSocketData.value = null;
-    socketUnregisteredVisitorTrigger.value = false;
-  }
-
-  if (
-    visitorSocketData.value &&
-    visitorSocketData.value.plateNumber &&
-    socketUnregisteredVisitorTrigger.value &&
-    activeTab.value === "unregistered" &&
-    dialog.showSelection === false
-  ) {
-    // await getVisitorRefresh();
-    // visitorSocketData.value = null;
-    // socketUnregisteredVisitorTrigger.value = false;
-    setTimeout(async () => {
-      const { _id } = visitorSocketData.value;
-      await handleRegistrationUnregisteredVisitor({ _id });
-      socketUnregisteredVisitorTrigger.value = false;
-
-      setTimeout(() => {
-        visitorSocketData.value = null;
-      }, 1000);
-    }, 1000);
   }
 });
+
+/*
+ * The plate notice's Register / "Go to Unregistered" (security mobile app,
+ * \`(visitors)/index.tsx\`): once the Unregistered tab is showing, open the
+ * visitor type picker for the record the camera read. Skipped without the
+ * Update right (the trigger is left as it is), and the stored arrival is used
+ * once - a later tap must not reopen the same vehicle.
+ */
+watch(
+  [
+    socketUnregisteredVisitorTrigger,
+    registerVisitorFormData,
+    activeTab,
+    () => dialog.showSelection,
+    () => dialog.showForm,
+  ],
+  () => {
+    const record = registerVisitorFormData.value;
+    if (!socketUnregisteredVisitorTrigger.value || !record) return;
+    if (activeTab.value !== "unregistered") return;
+    if (!props.canUpdateVisitor) return;
+    if (dialog.showSelection || dialog.showForm) return;
+
+    socketUnregisteredVisitorTrigger.value = false;
+    registerVisitorFormData.value = null;
+    if (!record._id) return;
+
+    // Straight away: the id and plate are all the form needs.
+    handleRegistrationUnregisteredVisitor({
+      _id: record._id,
+      plateNumber: record.plateNumber,
+    });
+  },
+  { immediate: true }
+);
 </script>
 
 <style scoped>
+/*
+ * Pass / key / Assign / NFC / QR chips in the Check In/Out column: dark text
+ * and border on the card surface (theme colours, so dark mode reads white on
+ * the dark card), bold, default size - readable for older eyes. The icon
+ * keeps its colour so a pass and a key are told apart at a glance.
+ */
+/* Whose passes and keys these are, above the scanner. */
+.visitor-return__who {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px 12px;
+  margin-bottom: 12px;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 8px;
+  font-size: 0.9375rem;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.visitor-return__who-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* The section headings in the return dialogs: readable at a glance. */
+.visitor-return__label {
+  margin: 6px 0 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.visitor-pass-chip.v-chip {
+  /* Between Vuetify's small (24px) and default (32px): readable without
+     making every row much taller. */
+  --v-chip-height: 28px;
+  font-size: 0.8125rem;
+  padding: 0 10px;
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
+  border: 1.5px solid rgba(var(--v-theme-on-surface), 0.87);
+  letter-spacing: 0;
+}
+
+/* In the return dialogs: the same height as the status dropdown beside it. */
+.visitor-pass-chip--field.v-chip {
+  --v-chip-height: 40px;
+  font-size: 0.875rem;
+  padding: 0 14px;
+}
+
+.visitor-pass-chip--pass :deep(.v-chip__prepend .v-icon) {
+  color: #1565c0;
+}
+
+.visitor-pass-chip--key :deep(.v-chip__prepend .v-icon) {
+  color: #e65100;
+}
+
+.visitor-pass-chip--nfc :deep(.v-chip__prepend .v-icon) {
+  color: #7b1fa2;
+}
+
+.visitor-pass-chip--qr :deep(.v-chip__prepend .v-icon) {
+  color: #00796b;
+}
+
 /*
  * THE PREVIEW DIALOG'S FIELD LIST - LABEL BESIDE VALUE.
  *
@@ -3428,6 +4392,43 @@ watchEffect(async () => {
   display: block;
 }
 
+.visitor-preview__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+}
+
+.visitor-preview__chips .visitor-pass-chip.v-chip {
+  max-width: 100%;
+}
+
+.visitor-preview__photos {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.visitor-photos-full {
+  background: #000 !important;
+  color: #fff;
+}
+
+.visitor-photos-full__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+  padding: 0 8px 0 20px;
+}
+
+.visitor-preview__lead {
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
 .visitor-preview__members {
   display: flex;
   flex-direction: column;