@7365admin1/layer-common 3.2.2-staging.78 → 3.2.2-staging.80

package/.changeset/notification-preferences.md

@@ -0,0 +1,17 @@
+---
+"@7365admin1/layer-common": patch
+---
+
+Add a Notification Settings screen, shared by every web app.
+
+A person can now choose, per module and per delivery route, what they hear
+about: in the app, on their phone, or by email. The screen only lists modules
+their role actually gives them, and a route a module cannot use is shown dimmed
+with the reason in plain words rather than hidden.
+
+Modules are collapsed by default with a one-line summary of what is on, so
+somebody with many modules gets a short list instead of thirty switches. There
+is a master control for everything and one per module.
+
+The choices are enforced where notifications are sent, in `@7365admin1/core` and
+in the API, so a switch here actually stops the message.

package/components/NotificationSettings.vue

@@ -0,0 +1,361 @@
+<template>
+  <v-row no-gutters class="pa-8" justify="center">
+    <v-col cols="12" md="10">
+      <v-row no-gutters>
+        <v-col cols="12" class="text-h5">Notifications</v-col>
+
+        <v-col cols="12" md="8" class="mt-4 font-weight-light">
+          Choose what you want to hear about, and how. These settings are yours
+          alone and apply everywhere you use iService — on this site and on your
+          phone.
+        </v-col>
+
+        <!-- loading -->
+        <v-col v-if="loading" cols="12" class="mt-8">
+          <v-skeleton-loader type="list-item-two-line@4" />
+        </v-col>
+
+        <!-- could not load -->
+        <v-col v-else-if="loadError" cols="12" class="mt-8">
+          <v-alert type="error" variant="tonal" rounded="lg">
+            {{ loadError }}
+          </v-alert>
+        </v-col>
+
+        <!-- nothing to offer -->
+        <v-col v-else-if="!categories.length" cols="12" class="mt-8">
+          <v-alert type="info" variant="tonal" rounded="lg">
+            You are not set up to receive any notifications yet. Once you are
+            given access to a part of the system, its settings will appear here.
+          </v-alert>
+        </v-col>
+
+        <template v-else>
+          <!-- everything, at once -->
+          <v-col cols="12" class="mt-8">
+            <v-card
+              width="100%"
+              border="grey-darken-3 sm"
+              variant="outlined"
+              rounded="lg"
+            >
+              <v-row no-gutters align="center" class="pa-6">
+                <v-col cols="12" sm="8">
+                  <div class="text-h6">Everything</div>
+                  <div class="text-body-2 text-medium-emphasis mt-1">
+                    {{ everythingSummary }}
+                  </div>
+                </v-col>
+                <v-col cols="12" sm="4" class="d-flex justify-sm-end mt-3 mt-sm-0">
+                  <v-btn
+                    variant="tonal"
+                    rounded="xl"
+                    class="text-none"
+                    :disabled="saving"
+                    @click="setAll(!allOn)"
+                  >
+                    {{ allOn ? "Turn everything off" : "Turn everything on" }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-card>
+          </v-col>
+
+          <!-- one panel per module, collapsed by default so a person with many
+               modules gets a short list rather than a wall of switches -->
+          <v-col cols="12" class="mt-4">
+            <v-expansion-panels variant="accordion" multiple>
+              <v-expansion-panel
+                v-for="category in categories"
+                :key="category.key"
+                :value="category.key"
+                elevation="0"
+                class="border-sm rounded-lg mb-2"
+              >
+                <v-expansion-panel-title>
+                  <v-row no-gutters align="center">
+                    <v-col cols="12" sm="6">
+                      <span class="text-subtitle-1 font-weight-medium">
+                        {{ category.label }}
+                      </span>
+                      <v-chip
+                        v-if="category.safety"
+                        size="x-small"
+                        class="ml-2"
+                        variant="tonal"
+                        color="info"
+                      >
+                        Safety
+                      </v-chip>
+                    </v-col>
+                    <v-col
+                      cols="12"
+                      sm="6"
+                      class="text-body-2 text-medium-emphasis"
+                    >
+                      {{ summaryFor(category) }}
+                    </v-col>
+                  </v-row>
+                </v-expansion-panel-title>
+
+                <v-expansion-panel-text>
+                  <div class="text-body-2 text-medium-emphasis mb-4">
+                    {{ category.description }}
+                  </div>
+
+                  <v-btn
+                    size="small"
+                    variant="outlined"
+                    rounded="xl"
+                    class="text-none mb-4"
+                    :disabled="saving || !switchableIn(category).length"
+                    @click="setCategory(category, !categoryAllOn(category))"
+                  >
+                    {{
+                      categoryAllOn(category)
+                        ? "Turn all off for " + category.label
+                        : "Turn all on for " + category.label
+                    }}
+                  </v-btn>
+
+                  <!-- one channel per row: a switch must never sit beside the
+                       NEXT channel's label, which is what a three-up grid does -->
+                  <v-row no-gutters>
+                    <v-col
+                      v-for="(channel, index) in category.channels"
+                      :key="channel.key"
+                      cols="12"
+                      :class="index < category.channels.length - 1 ? 'border-b-thin' : ''"
+                    >
+                      <div
+                        class="d-flex align-center justify-space-between py-2"
+                        :class="{ 'channel-unavailable': !channel.supported }"
+                      >
+                        <div class="pr-4">
+                          <div class="text-body-1">{{ channel.label }}</div>
+                          <div v-if="!channel.supported" class="text-caption mt-1">
+                            {{ channel.note }}
+                          </div>
+                        </div>
+
+                        <v-switch
+                          :model-value="channel.enabled"
+                          :disabled="!channel.supported || saving"
+                          color="primary"
+                          hide-details
+                          density="compact"
+                          :aria-label="`${channel.label} for ${category.label}`"
+                          @update:model-value="
+                            (value) => onToggle(category, channel, !!value)
+                          "
+                        />
+                      </div>
+                    </v-col>
+                  </v-row>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </v-col>
+        </template>
+      </v-row>
+    </v-col>
+
+    <!-- switching a safety alert off: say plainly what stops arriving -->
+    <v-dialog v-model="confirmOpen" max-width="460" persistent>
+      <v-card rounded="lg" class="pa-2">
+        <v-card-title class="text-h6">{{ confirmText.title }}</v-card-title>
+        <v-card-text class="text-body-1">{{ confirmText.body }}</v-card-text>
+        <v-card-actions class="justify-end">
+          <v-btn variant="text" class="text-none" @click="cancelConfirm">
+            {{ confirmText.cancel }}
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="tonal"
+            class="text-none"
+            @click="acceptConfirm"
+          >
+            {{ confirmText.confirm }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar v-model="noticeOpen" :timeout="4000" location="bottom">
+      {{ notice }}
+    </v-snackbar>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import type {
+  TNotificationCategorySetting,
+  TNotificationChannelSetting,
+} from "../composables/useNotificationPreference";
+
+const { getPreferences, savePreferences } = useNotificationPreference();
+
+const categories = ref<TNotificationCategorySetting[]>([]);
+const loading = ref(true);
+const saving = ref(false);
+const loadError = ref("");
+const notice = ref("");
+const noticeOpen = ref(false);
+
+const confirmOpen = ref(false);
+const confirmText = ref({ title: "", body: "", confirm: "", cancel: "" });
+let confirmAccept: (() => void) | null = null;
+
+/** the channels a person can actually move on this category */
+const switchableIn = (category: TNotificationCategorySetting) =>
+  category.channels.filter((c) => c.supported);
+
+const categoryAllOn = (category: TNotificationCategorySetting) =>
+  switchableIn(category).every((c) => c.enabled);
+
+const allOn = computed(
+  () =>
+    categories.value.length > 0 &&
+    categories.value.every((category) => categoryAllOn(category)),
+);
+
+/** what is on, in words — so a collapsed panel still says what it is doing */
+function summaryFor(category: TNotificationCategorySetting) {
+  const on = switchableIn(category).filter((c) => c.enabled);
+  if (!on.length) return "Off";
+  if (on.length === switchableIn(category).length) return "On everywhere";
+  return `On: ${on.map((c) => c.label).join(", ")}`;
+}
+
+const everythingSummary = computed(() => {
+  const total = categories.value.length;
+  const on = categories.value.filter((c) => categoryAllOn(c)).length;
+  if (on === total) return "Everything is on.";
+  if (on === 0) return "Everything is off.";
+  return `${on} of ${total} fully on.`;
+});
+
+async function load() {
+  loading.value = true;
+  loadError.value = "";
+  try {
+    const res = await getPreferences();
+    categories.value = res.data.categories;
+  } catch {
+    loadError.value =
+      "We could not load your notification settings. Please refresh the page and try again.";
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * Save the whole screen after any change, and put it back the way it was if the
+ * save fails — so what is on screen is never a setting the server did not take.
+ */
+async function persist(previous: TNotificationCategorySetting[]) {
+  saving.value = true;
+  try {
+    const res = await savePreferences({ channels: [], categories: categories.value });
+    categories.value = res.data.categories;
+    notice.value = "Saved.";
+  } catch {
+    categories.value = previous;
+    notice.value = "We could not save that change. Please try again.";
+  } finally {
+    noticeOpen.value = true;
+    saving.value = false;
+  }
+}
+
+const snapshot = () =>
+  JSON.parse(JSON.stringify(categories.value)) as TNotificationCategorySetting[];
+
+function apply(mutate: () => void) {
+  const previous = snapshot();
+  mutate();
+  void persist(previous);
+}
+
+function onToggle(
+  category: TNotificationCategorySetting,
+  channel: TNotificationChannelSetting,
+  value: boolean,
+) {
+  if (!channel.supported) return;
+
+  const commit = () => apply(() => (channel.enabled = value));
+
+  // switching a safety alert OFF is the only thing worth stopping to confirm
+  if (category.safety && !value) {
+    confirmText.value = safetyOffConfirmation(category.label, channel.label);
+    confirmAccept = commit;
+    confirmOpen.value = true;
+    return;
+  }
+
+  commit();
+}
+
+function setCategory(category: TNotificationCategorySetting, value: boolean) {
+  const commit = () =>
+    apply(() => {
+      for (const channel of switchableIn(category)) channel.enabled = value;
+    });
+
+  if (category.safety && !value) {
+    confirmText.value = safetyOffConfirmation(category.label, "every channel");
+    confirmAccept = commit;
+    confirmOpen.value = true;
+    return;
+  }
+
+  commit();
+}
+
+function setAll(value: boolean) {
+  const commit = () =>
+    apply(() => {
+      for (const category of categories.value) {
+        for (const channel of switchableIn(category)) channel.enabled = value;
+      }
+    });
+
+  if (!value && categories.value.some((c) => c.safety)) {
+    confirmText.value = safetyOffConfirmation("safety and security", "every channel");
+    confirmAccept = commit;
+    confirmOpen.value = true;
+    return;
+  }
+
+  commit();
+}
+
+function acceptConfirm() {
+  confirmOpen.value = false;
+  confirmAccept?.();
+  confirmAccept = null;
+}
+
+function cancelConfirm() {
+  confirmOpen.value = false;
+  confirmAccept = null;
+}
+
+onMounted(load);
+</script>
+
+<style scoped>
+/* Unavailable channels are shown and explained, never hidden.
+ *
+ * They are NOT faded. The disabled switch already says the control cannot be
+ * moved, and the sentence beside it is the only place a person is told why —
+ * dimming that sentence is dimming the explanation. A blanket opacity here
+ * measured 2.3:1 against the card, which is unreadable; the row is now marked
+ * by a rule down its edge instead, and every word stays at full strength. */
+.channel-unavailable {
+  border-left: 2px solid rgb(var(--v-border-color));
+  padding-left: 12px;
+  opacity: 1;
+}
+</style>

package/components/PassInformation.vue

@@ -8,8 +8,8 @@
           :height="40"
           text="Scan QR Code"
           class="text-capitalize"
-          disabled
           prepend-icon="mdi-qrcode"
+          @click="handleScanQRCode"
         />
         <v-autocomplete
           v-model="selectedPass"
@@ -88,6 +88,11 @@
       </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 +100,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 +139,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 +179,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 +224,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 +240,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 +248,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 +313,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/ScanVisitorQRCode.vue

@@ -60,7 +60,9 @@ const props = defineProps({
 
 const { standardFormatDate } = useUtils();
 
-const { validateVisitorQrCode } = useVisitor();
+const { validateVisitorQrCode, getVisitors } = useVisitor();
+
+const { getPassKeysByPageSearch } = usePassKey();
 
 const emits = defineEmits([
   "closeDialog",
@@ -97,8 +99,6 @@ const handleScanVisitorQRCode = async () => {
         showNotFoundMessage.value = false;
         // Automatically navigate to the scanned URL if it's a valid link
         if (isValidUrl(qrCodeMessage)) {
-          console.log("QR Code value", qrCodeMessage);
-          console.log("Last _id", qrCodeMessage.split("/").pop());
           // get the last _id in the url
           const id = qrCodeMessage.split("/").pop();
           // check if it's a valid mongodb _id
@@ -108,7 +108,6 @@ const handleScanVisitorQRCode = async () => {
               props.site as string,
               id as string
             );
-            console.log("validateVisitorQrCode", response);
             if (response.errorMessage) {
               showNotFoundMessage.value = true;
               errorMessage.value =
@@ -122,9 +121,38 @@ const handleScanVisitorQRCode = async () => {
               emits("openVisitorDataFromScannedQrCodeDialog", response);
             }
           } else {
-            showNotFoundMessage.value = true;
-            errorMessage.value = "Invalid mongodb _id.";
-            showMessage(errorMessage.value, "error");
+            const result: any = await getPassKeysByPageSearch({
+              sites: [props.site as string],
+              search: qrCodeMessage,
+            });
+
+            if (result.items?.length < 1) {
+              showMessage(`Pass or Key ${qrCodeMessage} not found.`, "error");
+              return;
+            }
+
+            const data: any = await getVisitors({
+              site: props.site as string,
+              passOrKey: {
+                keyId: result.items[0]._id,
+                type: result.items[0].passType == "pass-key" ? "key" : "pass",
+              },
+              checkedOut: false,
+            });
+
+            if (data.items?.length < 1) {
+              showMessage(
+                `There are no unchecked-out visitor transactions for the scanned ${
+                  result.items[0].passType == "pass-key" ? "Key" : "Pass"
+                } ${qrCodeMessage}.`,
+                "error"
+              );
+
+              return;
+            }
+
+            closeDialog();
+            emits("openVisitorDataFromScannedQrCodeDialog", data.items[0]);
           }
 
           // window.location.href = qrCodeMessage;

package/composables/useNotificationPreference.ts

@@ -0,0 +1,87 @@
+/**
+ * A person's own notification settings.
+ *
+ * The server decides everything that matters here: which categories this person
+ * is offered, which channels each one can actually reach them on, and what the
+ * words are. Nothing on this side maintains a second list — a screen that made
+ * up its own module names is how the previous version came to show three
+ * switches that governed nothing.
+ *
+ * There is no user id in either call. Whose settings these are comes from the
+ * session, so a person can only ever see and change their own.
+ */
+
+export type TNotificationChannelSetting = {
+  key: string;
+  label: string;
+  /** false = this category cannot reach them this way; drawn, dimmed, explained */
+  supported: boolean;
+  /** the plain-English reason, present only when unsupported */
+  note?: string;
+  enabled: boolean;
+};
+
+export type TNotificationCategorySetting = {
+  key: string;
+  label: string;
+  description: string;
+  safety: boolean;
+  channels: TNotificationChannelSetting[];
+};
+
+export type TNotificationPreferences = {
+  channels: Array<{ key: string; label: string }>;
+  categories: TNotificationCategorySetting[];
+};
+
+const EMPTY: TNotificationPreferences = { channels: [], categories: [] };
+
+export default function useNotificationPreference() {
+  function getPreferences() {
+    return useNuxtApp().$api<{ data: TNotificationPreferences }>(
+      "/api/notification-preferences",
+      { method: "GET" },
+    );
+  }
+
+  /**
+   * Save the whole screen at once.
+   *
+   * What is sent is the list of switches that are OFF, which is also how the
+   * server stores it: somebody who has changed nothing has no stored row at
+   * all, and behaves exactly as they did before this screen existed.
+   */
+  function savePreferences(preferences: TNotificationPreferences) {
+    const off = preferences.categories.flatMap((category) =>
+      category.channels
+        .filter((channel) => channel.supported && !channel.enabled)
+        .map((channel) => ({ category: category.key, channel: channel.key })),
+    );
+
+    return useNuxtApp().$api<{ data: TNotificationPreferences }>(
+      "/api/notification-preferences",
+      { method: "PUT", body: { off } },
+    );
+  }
+
+  return { getPreferences, savePreferences, EMPTY_PREFERENCES: EMPTY };
+}
+
+/**
+ * The sentence shown when somebody switches a safety or security alert off.
+ *
+ * It says what will stop arriving and how to undo it, and it does not argue —
+ * the owner's decision is that these can be switched off, so the job here is to
+ * make sure nobody does it by accident, not to talk them out of it.
+ */
+export function safetyOffConfirmation(categoryLabel: string, channelLabel: string) {
+  return {
+    title: `Turn off ${categoryLabel}?`,
+    body:
+      `You will stop getting ${categoryLabel.toLowerCase()} alerts under "${channelLabel}". ` +
+      `These are safety and security alerts, so they are on for everyone by default. ` +
+      `You can turn them back on here at any time.`,
+    confirm: "Turn it off",
+    cancel: "Keep it on",
+  };
+}

package/composables/useVisitor.ts

@@ -92,6 +92,7 @@ export default function () {
     checkedOut?: boolean;
     plateNumber?: string;
     tab?: string;
+    passOrKey?: string;
   };
 
   type SearchUncheckedOutUnregisteredVisitorParams = {
@@ -130,6 +131,7 @@ export default function () {
     plateNumber = "",
     checkedOut,
     tab,
+    passOrKey,
   }: GetVisitorsParams = {}) {
     const query = Object.fromEntries(
       Object.entries({
@@ -146,7 +148,10 @@ export default function () {
         plateNumber,
         order,
         tab,
-      }).filter(([, value]) => value !== undefined && value !== null && value !== "")
+        passOrKey,
+      }).filter(
+        ([, value]) => value !== undefined && value !== null && value !== ""
+      )
     );
 
     return await useNuxtApp().$api<Record<string, any>>(

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.78",
+  "version": "3.2.2-staging.80",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/pages/notification-settings.vue

@@ -0,0 +1,19 @@
+<template>
+  <NotificationSettings />
+</template>
+
+<script setup lang="ts">
+/**
+ * Notification settings, reachable from Profile.
+ *
+ * The page lives in the shared layer so every web app has the route and there
+ * is only one screen to keep correct; the link to it sits in Profile, in the
+ * account app, which is where "Manage Account" already sends everybody.
+ */
+definePageMeta({
+  middleware: ["01-auth"],
+});
+
+const { authenticate } = useLocalAuth();
+authenticate();
+</script>