@7365admin1/layer-common 3.2.2-staging.79 → 3.2.2-staging.81

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/useThemePreference.ts

@@ -0,0 +1,63 @@
+/**
+ * THE USER'S LIGHT/DARK CHOICE, REMEMBERED.
+ *
+ * Until now `Layout/Header.vue` flipped `theme.global.name` and wrote nothing,
+ * so the choice was gone on the next reload.
+ *
+ * A COOKIE, NOT localStorage. The handoff says "persists in localStorage", and
+ * for a single-page prototype that is right - but this product is ELEVEN
+ * applications on eleven hostnames. localStorage is per-origin, so a user who
+ * picked dark mode in Security would land on a white screen in Property
+ * Management, and again in Account, and would have to set it eleven times.
+ *
+ * A cookie written with the layer's own `cookieConfig` carries the parent
+ * domain, which is exactly how `sid`, `user` and `landing-page` already travel
+ * between these applications. So this is the estate's existing preference
+ * mechanism rather than a new one, and it is also the only one that makes the
+ * setting mean what a user expects it to mean.
+ *
+ * NO FLASH OF THE WRONG THEME. Nothing here corrects the theme after mount -
+ * `plugins/vuetify.ts` reads the same cookie BEFORE `createVuetify` and boots
+ * on it, so the first paint is already right. The apps are `ssr: false`, so
+ * there is no server render to disagree with.
+ */
+import { useTheme } from "vuetify";
+import type { CookieOptions } from "#app";
+
+export type TThemeName = "light" | "dark";
+
+/** The one place the cookie is named. `plugins/vuetify.ts` reads the same one. */
+export const THEME_COOKIE = "theme";
+
+export default function useThemePreference() {
+  // `runtimeConfig.public.cookieConfig` is typed `unknown`, so it is narrowed
+  // here rather than at every call site. Same object `sid`, `user` and
+  // `landing-page` are written with - it carries the shared parent domain.
+  const cookieConfig = useRuntimeConfig().public.cookieConfig as CookieOptions<
+    TThemeName | null
+  > & { readonly?: false };
+
+  const vuetifyTheme = useTheme();
+
+  const stored = useCookie<TThemeName | null>(THEME_COOKIE, cookieConfig);
+
+  const current = computed<TThemeName>(() =>
+    vuetifyTheme.global.current.value.dark ? "dark" : "light"
+  );
+
+  /**
+   * Sets the theme AND remembers it. The write is the whole point - a caller
+   * that only wants a temporary theme for one subtree should use
+   * `<v-theme-provider>` instead, which is what `plain-dark` does.
+   */
+  function setTheme(name: TThemeName) {
+    vuetifyTheme.global.name.value = name;
+    stored.value = name;
+  }
+
+  function toggleTheme() {
+    setTheme(current.value === "dark" ? "light" : "dark");
+  }
+
+  return { current, setTheme, toggleTheme, stored };
+}

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/nuxt.config.ts

@@ -7,6 +7,37 @@ export default defineNuxtConfig({
     transpile: ["vuetify"],
   },
 
+  /**
+   * THE REDESIGN'S TYPEFACE - LOADED, DELIBERATELY NOT APPLIED YET.
+   *
+   * `--font-sans` in `assets/css/tokens.css` names Manrope, and a token that
+   * names a font nobody loaded is a trap: the next phase writes
+   * `font-family: var(--font-sans)`, silently falls back to Arial, and looks
+   * fine to whoever wrote it. So the stylesheet is requested here.
+   *
+   * Nothing sets `font-family` on the page in Phase 1. Switching eleven
+   * applications to a new typeface before one screen has been rebuilt would
+   * leave the whole product looking half-migrated; each phase adopts the token
+   * as it rebuilds its own surfaces. Browsers do not download a webfont no
+   * element uses, so until then this costs one small CSS request.
+   */
+  app: {
+    head: {
+      link: [
+        { rel: "preconnect", href: "https://fonts.googleapis.com" },
+        {
+          rel: "preconnect",
+          href: "https://fonts.gstatic.com",
+          crossorigin: "",
+        },
+        {
+          rel: "stylesheet",
+          href: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap",
+        },
+      ],
+    },
+  },
+
   runtimeConfig: {
     public: {
       cookieConfig: {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.79",
+  "version": "3.2.2-staging.81",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {
@@ -14,7 +14,8 @@
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
-    "test": "esbuild composables/useVisitorSocket.ts --format=esm --outfile=test/.build/useVisitorSocket.mjs --log-level=error && node --test \"test/*.test.mjs\"",
+    "test": "esbuild composables/useVisitorSocket.ts --format=esm --outfile=test/.build/useVisitorSocket.mjs --log-level=error && node --test \"test/*.test.mjs\" && yarn test:units",
+    "test:units": "node --experimental-strip-types --test \"utils/*.test.ts\"",
     "release": "yarn run build && changeset publish"
   },
   "devDependencies": {

package/plugins/vuetify.ts

@@ -43,8 +43,37 @@ import {
 import "vuetify-pro-tiptap/style.css";
 
 import { LIGHT_THEME, DARK_THEME } from "../utils/theme";
+import { THEME_COOKIE } from "../composables/useThemePreference";
+import type { CookieOptions } from "#app";
+
+/**
+ * The design tokens. Loaded HERE rather than in `nuxt.config.ts` so they land
+ * after `vuetify/styles` in the bundle - `tokens.css` aliases `--v-theme-*`,
+ * which Vuetify has to have emitted first.
+ */
+import "../assets/css/tokens.css";
+import "../assets/css/shell.css";
 
 export default defineNuxtPlugin((app) => {
+  /**
+   * BOOT ON THE REMEMBERED THEME, DON'T CORRECT IT AFTERWARDS.
+   *
+   * Reading the cookie here, before `createVuetify`, is what makes the choice
+   * survive a reload with no flash: Vuetify's first paint is already the right
+   * theme, so there is no moment where the wrong one is on screen. Setting it
+   * from a component's `onMounted` would repaint the whole application one
+   * frame in, which is the flash this is written to avoid.
+   *
+   * `useThemePreference()` writes this cookie; nothing else does.
+   */
+  const stored = useCookie<string | null>(
+    THEME_COOKIE,
+    // typed `unknown` in runtimeConfig; same object `sid` and `user` use
+    useRuntimeConfig().public.cookieConfig as CookieOptions<string | null> & {
+      readonly?: false;
+    }
+  ).value;
+
   const vuetify = createVuetify({
     defaults: {
       VTextField: {
@@ -97,7 +126,7 @@ export default defineNuxtPlugin((app) => {
      * `utils/theme.ts`, which `utils/theme.test.ts` measures on every run.
      */
     theme: {
-      defaultTheme: "light",
+      defaultTheme: stored === "dark" ? "dark" : "light",
       themes: {
         light: LIGHT_THEME,
         dark: DARK_THEME,

package/utils/status.test.ts

@@ -0,0 +1,41 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { statusTone, statusToneClass } from "./status.ts";
+
+test("the handoff's mapping, word for word", () => {
+  for (const s of ["Completed", "Paid", "Available", "Open"]) {
+    assert.equal(statusTone(s), "ok", s);
+  }
+
+  assert.equal(statusTone("Pending"), "warn");
+
+  for (const s of ["In Use", "Closed", "Checkout"]) {
+    assert.equal(statusTone(s), "err", s);
+  }
+
+  assert.equal(statusTone("Role"), "info");
+});
+
+/** The same status arrives spelled three ways from three endpoints. */
+test("casing, spacing and underscores do not change a status's colour", () => {
+  for (const s of ["in use", "IN USE", "In_Use", "in-use", "  In Use  "]) {
+    assert.equal(statusTone(s), "err", s);
+  }
+});
+
+/**
+ * The important one. A status the design never named must NOT be guessed into
+ * a colour - a wrong green on a failed job reads as success. Neutral is
+ * visible, honest, and gets it noticed.
+ */
+test("an unmapped status comes out neutral rather than guessed", () => {
+  for (const s of ["Cancelled", "Overdue", "Draft", "", null, undefined]) {
+    assert.equal(statusTone(s), "neutral", String(s));
+  }
+});
+
+test("the class name matches what tokens.css actually defines", () => {
+  assert.equal(statusToneClass("Paid"), "tone-ok");
+  assert.equal(statusToneClass("Whatever"), "tone-neutral");
+});

package/utils/status.ts

@@ -0,0 +1,54 @@
+/**
+ * THE SEMANTIC STATUS MAPPING, IN ONE PLACE.
+ *
+ * The design assigns a colour to a status WORD rather than to a module, so the
+ * same word has to look the same wherever it appears - "Open" on a Daily
+ * Occurrence Book and "Open" on a work order are the same green. Keeping the
+ * list here rather than in each screen is what makes that true, and is what
+ * Phases 3 and 4 read when they restyle the chips.
+ *
+ * Straight from the handoff:
+ *   Completed / Paid / Available / Open -> ok
+ *   Pending                             -> warn
+ *   In Use / Closed / Checkout          -> err
+ *   Role and info tags                  -> info
+ *
+ * Anything not listed is `neutral` on purpose. A status this product has and
+ * the design did not name must NOT be guessed into a colour - a wrong green on
+ * a failed job is worse than a grey one - so it comes out neutral and visible,
+ * which is how it gets noticed and added.
+ */
+export type TStatusTone = "ok" | "warn" | "err" | "info" | "neutral";
+
+const TONES: Record<string, TStatusTone> = {
+  completed: "ok",
+  paid: "ok",
+  available: "ok",
+  open: "ok",
+
+  pending: "warn",
+
+  "in use": "err",
+  closed: "err",
+  checkout: "err",
+
+  role: "info",
+  info: "info",
+};
+
+/**
+ * The tone for a status word. Case- and space-insensitive, because the same
+ * status arrives as "In Use", "in_use" and "IN USE" from different endpoints.
+ */
+export function statusTone(status: string | null | undefined): TStatusTone {
+  if (!status) return "neutral";
+
+  const key = String(status).trim().toLowerCase().replace(/[_-]+/g, " ");
+
+  return TONES[key] ?? "neutral";
+}
+
+/** The class `assets/css/tokens.css` paints that tone with. */
+export function statusToneClass(status: string | null | undefined): string {
+  return `tone-${statusTone(status)}`;
+}