@7365admin1/layer-common 3.2.7 → 3.2.8-staging.201

package/components/OvernightParkingManagement.vue

@@ -1,6 +1,11 @@
 <template>
   <v-row no-gutters>
-    <TableMain :headers="headers" :items="items" :loading="loading" :page="page" :pages="pages" :pageRange="pageRange"
+    <!--
+      The screen had no heading at all - the page name lived only in the
+      navigation rail. `TableMain` draws the design's 22px/800 title row with
+      the create button on that same line, so the title is all this needs.
+    -->
+    <TableMain title="Overnight Parking" :headers="headers" :items="items" :loading="loading" :page="page" :pages="pages" :pageRange="pageRange"
       :createLabel="createLabel" :show-header="true" :extension-height="extensionHeight" :offset="offset"
       v-model:search="searchInput" @refresh="emits('refresh')" @create="emits('create')" @row-click="handleRowClick"
       @update:page="handleUpdatePage">
@@ -37,25 +42,44 @@
         {{ formatDateDDMMYYYYLocal(value) }}
       </template>
 
+      <!--
+        The column had no slot, so an OBJECT `invitedBy` printed its raw JSON
+        into the cell - `{ "_id": "u-1", "name": "Unit A-12-01" }`. Never seen,
+        because the table had never drawn a row. `types/overnight-parking.d.ts`
+        declares `{ _id, name }`; every OTHER collection in `core` stores
+        `invitedBy` as a plain id/name string, and the overnight parking model
+        has no such field at all - so both shapes are read rather than betting
+        on one, and an absent value says N/A instead of nothing.
+      -->
+      <template #item.invitedBy="{ value }">
+        {{ (typeof value === "object" ? value?.name : value) || "N/A" }}
+      </template>
+
+      <!--
+        The same four words, the same four meanings - approved/expired/
+        rejected/pending map to ok/neutral/err/warn in `utils/status.ts`,
+        which is the exact pairing `formatStatus` already made. The shared
+        chip's tones are the measured ones, so the label reads at AA in both
+        themes; a `flat` `v-chip` painted a Vuetify colour does not.
+      -->
       <template #item.status="{ value }">
-        <v-chip class="text-capitalize" :color="formatStatus(value).color" density="compact" variant="flat" pill>
-          {{ formatStatus(value).label }}
-        </v-chip>
+        <StatusChip :status="value" :label="formatStatus(value).label" />
       </template>
 
       <template #item.action="{ item }">
         <v-menu v-if="item?.status === 'pending'" activator="parent" transition="scale-transition">
           <template #activator="{ props }">
-            <v-btn variant="flat" density="compact" icon="mdi-dots-vertical" v-bind="props"></v-btn>
+            <v-btn variant="flat" density="compact" class="screen-kebab" icon="mdi-dots-vertical"
+              v-bind="props"></v-btn>
           </template>
           <v-list>
             <v-list-item @click="openActionDialog(item, 'approved')">
               <v-list-item-title>
-                <v-icon class="text-success mr-2 text-subtitle-1">mdi-check</v-icon>Approve</v-list-item-title>
+                <v-icon class="text-success mr-2" size="16">mdi-check</v-icon>Approve</v-list-item-title>
             </v-list-item>
             <v-list-item @click="openActionDialog(item, 'rejected')">
               <v-list-item-title>
-                <v-icon class="text-error mr-2 text-subtitle-1">mdi-close</v-icon>Reject</v-list-item-title>
+                <v-icon class="text-error mr-2" size="16">mdi-close</v-icon>Reject</v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
@@ -84,7 +108,7 @@
 
     <v-dialog v-model="actionDialog.open" max-width="520" persistent>
       <v-card>
-        <v-card-title class="text-subtitle-1 font-weight-bold pt-4 px-4">
+        <v-card-title class="screen-card-title pt-4 px-4">
           {{ actionDialog.action === 'approved' ? 'Approve Request' : 'Reject Request' }}
         </v-card-title>
         <v-card-text class="px-4 pb-2">
@@ -96,14 +120,24 @@
         </v-card-text>
         <v-card-actions class="px-4 pb-4">
           <v-spacer />
-          <v-btn variant="text" :disabled="actionLoading" @click="closeActionDialog">Cancel</v-btn>
-          <v-btn color="primary" variant="flat" :loading="actionLoading" :disabled="!remarks.trim()"
-            @click="confirmAction">
+          <v-btn variant="outlined" class="screen-btn-ghost" :disabled="actionLoading"
+            @click="closeActionDialog">Cancel</v-btn>
+          <v-btn variant="flat" class="screen-btn-primary" :loading="actionLoading"
+            :disabled="!remarks.trim()" @click="confirmAction">
             Confirm
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <!--
+      Approve/Reject had NO failure path at all: `confirmAction` was a
+      try/finally with no catch, so a 400/403/network failure left the dialog
+      open, the spinner off and not one word on screen - the guard cannot tell
+      a saved approval from a refused one. The shared `Snackbar` is what every
+      other screen in the layer uses to say so.
+    -->
+    <Snackbar v-model="messageSnackbar" :text="snackbarMessage" :color="messageColor" />
   </v-row>
 </template>
 
@@ -215,15 +249,18 @@ function formatStatus(status: TOvernightParkingRequest["status"]) {
   }
 }
 
-const { data: overnightParkingRequests, pending: isPendingOvernightParkingRequests, refresh: refreshOvernightParkingRequests } = await useLazyAsyncData<TOvernightParkingRequest[]>(() => getOvernightParkingRequests({ site: props.site, status: statusFilter.value }), { immediate: true })
+// `page` was read by the pager and never sent to the API, so page 2 re-fetched
+// page 1 - with the API's `limit` of 10, every request past the tenth was
+// unreachable. It is part of the query now.
+const { data: overnightParkingRequests, pending: isPendingOvernightParkingRequests, refresh: refreshOvernightParkingRequests } = await useLazyAsyncData<TOvernightParkingRequest[]>(() => getOvernightParkingRequests({ site: props.site, status: statusFilter.value, page: page.value }), { immediate: true })
 
 
 watch(overnightParkingRequests, (data: any) => {
-  // items.value = Array.isArray(data?.items)
-  //   ? data.items
-  //   : Array.isArray(data)
-  //     ? data
-  //     : []
+  items.value = Array.isArray(data?.items)
+    ? data.items
+    : Array.isArray(data)
+      ? data
+      : []
   pages.value = data?.pages ?? 0;
   pageRange.value = data?.pageRange ?? "-- - -- of --"
 }, { immediate: true })
@@ -247,6 +284,8 @@ function handleRowClick(data: { item?: TOvernightParkingRequest }) {
 }
 
 function handleUpdatePage(value: number) {
+  page.value = value;
+  refreshOvernightParkingRequests();
   emits("update:page", value);
 }
 
@@ -262,9 +301,21 @@ function closeActionDialog() {
   actionDialog.open = false
 }
 
+const snackbarMessage = ref("")
+const messageColor = ref("")
+const messageSnackbar = ref(false)
+
+function showMessage(msg: string, color: string) {
+  snackbarMessage.value = msg
+  messageColor.value = color
+  messageSnackbar.value = true
+}
+
 async function confirmAction() {
   if (!actionDialog.requestId || !remarks.value.trim()) return
 
+  const verb = actionDialog.action === 'approved' ? 'approve' : 'reject'
+
   try {
     actionLoading.value = true
     await updateOvernightParkingRequest(actionDialog.requestId, {
@@ -272,8 +323,14 @@ async function confirmAction() {
       remarks: remarks.value.trim(),
     })
     actionDialog.open = false
+    // One refresh. The second, unawaited call fired the same GET a second time
+    // and could land BEFORE the first, putting the pre-update rows back.
     await refreshOvernightParkingRequests()
-    refreshOvernightParkingRequests()
+    showMessage(`Request ${actionDialog.action}.`, "success")
+  } catch (error: any) {
+    // The dialog stays OPEN on failure, with the remarks still typed, so the
+    // action can be retried rather than silently lost.
+    showMessage(error?.data?.message || `Failed to ${verb} this request. Please try again.`, "error")
   } finally {
     actionLoading.value = false
   }
@@ -281,6 +338,9 @@ async function confirmAction() {
 
 watch([statusFilter], ([newStatus], [oldStatus]) => {
   if (newStatus === oldStatus) return
+  // A new filter is a new result set - staying on page 3 of the old one asks
+  // the API for a page that usually does not exist, and the table draws empty.
+  page.value = 1
   refreshOvernightParkingRequests()
 }, { immediate: false })
 </script>

package/components/PageHeader.vue

@@ -0,0 +1,43 @@
+<!--
+  THE PAGE TITLE ROW.
+
+  The design opens EVERY screen with this row: the page's name at 22px/800,
+  and the screen's primary action on the right of the same line. The product
+  has never had it - the page name lived only in the browser tab and in the
+  navigation rail - which is the single most visible difference between the
+  staging site and the handoff.
+
+  It is a label and a slot. It fetches nothing, decides nothing and navigates
+  nowhere; the action passed into it is the screen's own button.
+-->
+<template>
+  <div class="app-page-head">
+    <!-- A caller with actions but no page name (the shared table card, when the
+         screen has not given it a title) gets just the action group, at the
+         left, rather than an empty heading holding a line of blank space. -->
+    <div v-if="title || $slots.title || subtitle || $slots.subtitle">
+      <h1 class="app-page-head__title">
+        <slot name="title">{{ title }}</slot>
+      </h1>
+
+      <!-- The design's second line: a location, a count, a date range. Only
+           drawn when a screen supplies one. -->
+      <div v-if="subtitle || $slots.subtitle" class="app-page-head__sub">
+        <v-icon v-if="subtitleIcon" :icon="subtitleIcon" size="15" />
+        <slot name="subtitle">{{ subtitle }}</slot>
+      </div>
+    </div>
+
+    <div v-if="$slots.actions" class="app-page-head__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: { type: String, default: "" },
+  subtitle: { type: String, default: "" },
+  subtitleIcon: { type: String, default: "" },
+});
+</script>

package/components/PassInformation.vue

@@ -1,21 +1,20 @@
 <template>
   <v-row no-gutters class="w-100">
-    <v-card class="w-100">
+    <v-card flat class="w-100 screen-card">
       <v-card-text>
         <v-btn
           block
-          color="primary-button"
           :height="40"
           text="Scan QR Code"
-          class="text-capitalize"
-          disabled
+          class="screen-btn-primary"
           prepend-icon="mdi-qrcode"
+          @click="handleScanQRCode"
         />
         <v-autocomplete
           v-model="selectedPass"
           v-model:search="passInput"
           :hide-no-data="false"
-          class="mt-3"
+          class="mt-3 filter-field"
           :items="passItems"
           :rules="props.passRules"
           item-title="prefixAndName"
@@ -23,7 +22,6 @@
           label="Pass"
           variant="outlined"
           hide-details
-          density="compact"
           persistent-hint
           small-chips
           :clearable="props.clearable"
@@ -45,7 +43,7 @@
             v-model="selectedKeys"
             v-model:search="keyInput"
             :hide-no-data="false"
-            class="mt-3"
+            class="mt-3 filter-field"
             :items="keyItems"
             :rules="props.passRules"
             item-title="prefixAndName"
@@ -54,7 +52,6 @@
             multiple
             variant="outlined"
             hide-details
-            density="compact"
             persistent-hint
             small-chips
             closable-chips
@@ -78,16 +75,21 @@
         <template v-if="selectedType">
           <v-number-input
             v-model="count"
+            class="filter-field"
             variant="outlined"
             :min="1"
             :precision="0"
-            density="compact"
             :rules="countRules"
           />
         </template>
       </v-card-text>
     </v-card>
   </v-row>
+  <visitor-pass-key-q-r-scanner
+    :dialog="dialog.scanQRCode"
+    v-model:scannedValue="scannedValue"
+    @close-dialog="dialog.scanQRCode = false"
+  />
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
 
@@ -95,46 +97,36 @@
 import type { PropType } from "vue";
 import type { ValidationRule } from "vuetify/lib/types.mjs";
 import usePassKey from "../composables/usePassKey";
-import useKey from "../composables/useKey";
-import { string } from "zod/v4";
+import { errorConverter } from "../utils/data";
+import VisitorPassKeyQRScanner from "./VisitorPassKeyQRScanner.vue";
 
-const props = defineProps({
-  passRules: {
-    type: Array as PropType<ValidationRule[]>,
-    default: [],
-  },
-  countRules: {
-    type: Array as PropType<ValidationRule[]>,
-    default: [],
-  },
-  site: {
-    type: String,
-    required: true,
-  },
-  type: {
-    type: String as PropType<TVisitorType>,
-    required: true,
-  },
-  contractorType: {
-    type: String,
-    default: "",
-  },
-  passKeys: {
-    type: Array,
-    default: [],
-  },
-  hideKeys: {
-    type: Boolean,
-    default: false,
-  },
-  clearable: {
-    type: Boolean,
-    default: false,
-  },
+type PassInformationProps = {
+  passRules?: ValidationRule[];
+  countRules?: ValidationRule[];
+  site: string;
+  type: TVisitorType;
+  contractorType?: string;
+  passKeys?: unknown[];
+  hideKeys?: boolean;
+  clearable?: boolean;
+  pass?: TPassKeyPayload[];
+  keys?: TPassKeyPayload[];
+};
+
+const props = withDefaults(defineProps<PassInformationProps>(), {
+  passRules: [],
+  countRules: [],
+  contractorType: "",
+  passKeys: [],
+  hideKeys: false,
+  clearable: false,
+  pass: [],
+  keys: [],
 });
 
-const pass = defineModel<TPassKeyPayload[]>("pass", { default: [] });
-const keys = defineModel<TPassKeyPayload[]>("keys", { default: [] });
+const emit = defineEmits(["update:pass", "update:keys"]);
+const pass = ref<TPassKeyPayload[]>(props.pass);
+const keys = ref<TPassKeyPayload[]>(props.keys);
 const selectedPass = ref<string>("");
 const selectedKeys = ref<string[]>([]);
 const passInput = ref("");
@@ -144,6 +136,11 @@ const keyItems = ref<any[]>([]);
 const selectedType = ref<"qr-pass" | "nfc-card">();
 const count = ref(1);
 
+const dialog = reactive({
+  scanQRCode: false,
+});
+const scannedValue = ref("");
+
 const { getPassKeysByPageSearch } = usePassKey();
 
 const typeItems = [
@@ -179,6 +176,23 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 
+function getItemLabel(item: any) {
+  return (item?.prefixAndName ?? item?.raw?.prefixAndName ?? "")
+    .toString()
+    .trim();
+}
+
+function handleScanQRCode() {
+  scannedValue.value = "";
+  dialog.scanQRCode = true;
+  if (passItems.value.length === 0) {
+    fetchPasses();
+  }
+  if (!props.hideKeys && keyItems.value.length === 0) {
+    fetchKeys();
+  }
+}
+
 const isPassListLoading = ref(false);
 
 async function fetchPasses() {
@@ -207,7 +221,7 @@ const isKeyListLoading = ref(false);
 async function fetchKeys() {
   isKeyListLoading.value = true;
   try {
-    const keys: any = await getPassKeysByPageSearch({
+    const result: any = await getPassKeysByPageSearch({
       page: 1,
       sites: [props.site],
       limit: 10000,
@@ -223,7 +237,7 @@ async function fetchKeys() {
       return false;
     });
 
-    const filteredArray = keys.items.filter((item: any) => {
+    const filteredArray = result.items.filter((item: any) => {
       if (Array.isArray(props?.passKeys) && props.passKeys.length) {
         return !props.passKeys.includes(item._id);
       }
@@ -231,18 +245,60 @@ async function fetchKeys() {
     });
     keyItems.value = [...previouslySelectedKeys, ...filteredArray];
   } catch (error) {
-    showMessage(errorConverter(error as string), "error");
+    showMessage(errorConverter(error), "error");
   } finally {
     isKeyListLoading.value = false;
   }
 }
 
 watch(selectedPass, (newVal) => {
-  pass.value = [{ keyId: newVal }];
+  const updated = newVal ? [{ keyId: newVal }] : [];
+  pass.value = updated;
+  emit("update:pass", updated);
 });
 
 watch(selectedKeys, (newVal) => {
-  keys.value = newVal.map((key) => ({ keyId: key }));
+  const updated = newVal.map((key) => ({ keyId: key }));
+  keys.value = updated;
+  emit("update:keys", updated);
+});
+
+watch(scannedValue, async (newValue) => {
+  if (!newValue) return;
+
+  const scanned = String(newValue).trim();
+  if (!scanned) return;
+
+  if (passItems.value.length === 0) {
+    await fetchPasses();
+  }
+  if (!props.hideKeys && keyItems.value.length === 0) {
+    await fetchKeys();
+  }
+
+  const matchedPass = passItems.value.find((item) => {
+    return getItemLabel(item).toLowerCase() === scanned.toLowerCase();
+  });
+
+  if (matchedPass && matchedPass._id) {
+    selectedPass.value = matchedPass._id;
+    return;
+  }
+
+  if (!props.hideKeys) {
+    const matchedKey = keyItems.value.find((item) => {
+      return getItemLabel(item).toLowerCase() === scanned.toLowerCase();
+    });
+
+    if (matchedKey && matchedKey._id) {
+      if (!selectedKeys.value.includes(matchedKey._id)) {
+        selectedKeys.value = [...selectedKeys.value, matchedKey._id];
+      }
+      return;
+    }
+  }
+
+  showMessage(`Scanned pass or key "${scanned}" not found`, "error");
 });
 
 //prevent negative value;
@@ -254,10 +310,10 @@ watch(count, (newCount) => {
 
 onMounted(() => {
   if (pass.value.length > 0) {
-    selectedPass.value = pass.value[0].keyId;
+    selectedPass.value = pass.value[0]?.keyId ?? "";
   }
   if (keys.value.length > 0) {
-    selectedKeys.value = keys.value.map((k) => k.keyId);
+    selectedKeys.value = keys.value.map((k) => k.keyId ?? "");
   }
 });
 </script>

package/components/PasswordConfirmation.vue

@@ -1,40 +1,54 @@
 <template>
-    <v-card width="100%" :disabled="loading || processingPassword" :loading="loading || processingPassword">
-        <v-toolbar density="compact">
-            <v-row no-gutters class="pa-3 text-h6 font-weight-bold">
-                <span>{{ promptTitle }}</span>
-            </v-row>
-        </v-toolbar>
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
+    <!--
+      A dialog card, so it wears `.screen-modal` (16px corner, the modal shadow,
+      the `--card` surface). The two `v-toolbar`s it used to have were grey
+      slabs standing in for a title row and a footer - a `v-toolbar` keeps that
+      grey on the dark theme, so this dialog dropped a light slab onto a dark
+      card at both ends. A `v-card-title` and a `v-card-actions` are the same
+      two rows without the slab, and they follow the theme.
+    -->
+    <v-card class="screen-modal" width="100%" :disabled="loading || processingPassword" :loading="loading || processingPassword">
+        <v-card-title>{{ promptTitle }}</v-card-title>
+
+        <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
             <v-row no-gutters class="w-100">
                 <v-col cols="12">
-                    <v-icon icon="mdi-lock-outline" :color="'gray'" class="text-h2" />
+                    <!-- Was `:color="'gray'"`, a fixed Vuetify grey that is the
+                         same grey on both themes. `--muted` is the design's
+                         secondary ink and follows the theme. -->
+                    <v-icon icon="mdi-lock-outline" class="text-h2 screen-lock-icon" />
                 </v-col>
                 <v-col cols="12" v-if="message" class="mt-2">
                     {{ message }}
                 </v-col>
                 <v-col cols="12" class="mt-5 text-start">
-                    <v-text-field v-model="passwordInput" label="Password" type="password" density="compact" :error-messages="errorMessage"></v-text-field>
+                    <!-- Still a `v-text-field`, not an `AppField`: it carries
+                         the `:error-messages` surface that `handleConfirm`
+                         writes the server's reply into, which `AppField` has
+                         no equivalent for. `.filter-field` gives it the
+                         design's 40px / 10px / 13.5px shape without taking
+                         that away. -->
+                    <v-text-field v-model="passwordInput" class="filter-field" label="Password" type="password" density="compact" :error-messages="errorMessage"></v-text-field>
                 </v-col>
             </v-row>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
-            <v-row no-gutters>
-                <v-col cols="6" class="pa-0">
-                    <v-btn block variant="text" class="text-none" size="large" tile @click="emit('cancel')" height="48">
-                        Cancel
-                    </v-btn>
-                </v-col>
+        <!-- The design's footer: two equal-width buttons, ghost then primary,
+             on a bordered strip. The confirming button was a hardcoded
+             `color="red"` fill; the handoff draws no destructive button, so it
+             takes the primary shape like every other modal's confirm, and the
+             destructive-variant gap is raised for a design decision rather than
+             invented here. -->
+        <div class="screen-modal__footer">
+            <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('cancel')">
+                Cancel
+            </v-btn>
 
-                <v-col cols="6" class="pa-0">
-                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="red" :disabled="!passwordInput"
-                        @click="handleConfirm">
-                        Confirm
-                    </v-btn>
-                </v-col>
-            </v-row>
-        </v-toolbar>
+            <v-btn class="screen-btn-primary" variant="flat" :disabled="!passwordInput"
+                @click="handleConfirm">
+                Confirm
+            </v-btn>
+        </div>
     </v-card>
 </template>
 
@@ -75,7 +89,7 @@ async function handleConfirm() {
     const userId = currentUser.value?._id;
     if (!userId) {
         throw new Error('User not found. Please login again.');
-    }   
+    }
     const res = await confirmPassword({ userId, password: passwordInput.value });
     if (res) {
       emit('confirm');
@@ -92,4 +106,8 @@ async function handleConfirm() {
 
 </script>
 
-<style scoped></style>
+<style scoped>
+.screen-lock-icon {
+    color: var(--muted);
+}
+</style>