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

package/composables/useWebUsb.ts

@@ -11,6 +11,10 @@ interface USBDevice {
   close(): Promise<void>;
   selectConfiguration(configurationValue: number): Promise<void>;
   claimInterface(interfaceNumber: number): Promise<void>;
+  selectAlternateInterface(
+    interfaceNumber: number,
+    alternateSetting: number,
+  ): Promise<void>;
   releaseInterface(interfaceNumber: number): Promise<void>;
   transferOut(
     endpointNumber: number,
@@ -19,14 +23,27 @@ interface USBDevice {
   configuration: {
     interfaces: Array<{
       interfaceNumber: number;
+      alternate: USBAlternateInterface;
       alternates: Array<{
+        alternateSetting: number;
+        interfaceClass: number;
         endpoints: Array<{
           endpointNumber: number;
           direction: "in" | "out";
         }>;
       }>;
     }>;
-  };
+  } | null;
+  configurations: Array<{ configurationValue: number }>;
+}
+
+interface USBAlternateInterface {
+  alternateSetting: number;
+  interfaceClass: number;
+  endpoints: Array<{
+    endpointNumber: number;
+    direction: "in" | "out";
+  }>;
 }
 
 interface USBOutTransferResult {
@@ -39,13 +56,86 @@ declare global {
     usb: {
       getDevices(): Promise<USBDevice[]>;
       requestDevice(options: {
-        filters: Array<{ vendorId?: number; productId?: number }>;
+        filters: Array<{
+          vendorId?: number;
+          productId?: number;
+          classCode?: number;
+        }>;
       }): Promise<USBDevice>;
     };
   }
 }
 
 export default function useWebUsb() {
+  const printerConnections = new WeakMap<
+    USBDevice,
+    { interfaceNumber: number; endpointNumber: number }
+  >();
+
+  const protectedInterfaceClasses = new Set([0x01, 0x03, 0x08, 0x0b, 0x0e, 0x10, 0xe0]);
+
+  function getErrorMessage(error: unknown, fallback: string) {
+    return error instanceof Error && error.message ? error.message : fallback;
+  }
+
+  function findPrinterInterface(device: USBDevice) {
+    const candidates = (device.configuration?.interfaces || []).flatMap((usbInterface) =>
+      usbInterface.alternates.flatMap((alternate) => {
+        const outputEndpoint = alternate.endpoints.find((endpoint) => endpoint.direction === "out");
+        if (!outputEndpoint || protectedInterfaceClasses.has(alternate.interfaceClass)) return [];
+
+        return [{
+          interfaceNumber: usbInterface.interfaceNumber,
+          alternateSetting: alternate.alternateSetting,
+          activeAlternateSetting: usbInterface.alternate.alternateSetting,
+          interfaceClass: alternate.interfaceClass,
+          endpointNumber: outputEndpoint.endpointNumber,
+        }];
+      }),
+    );
+
+    candidates.sort((left, right) => {
+      const priority = (interfaceClass: number) => interfaceClass === 0x07 ? 0 : interfaceClass === 0xff ? 1 : 2;
+      return priority(left.interfaceClass) - priority(right.interfaceClass);
+    });
+
+    return candidates[0] || null;
+  }
+
+  async function preparePrinterDevice(device: USBDevice) {
+    await device.open();
+    if (!device.configuration) {
+      await device.selectConfiguration(device.configurations[0]?.configurationValue || 1);
+    }
+
+    const printerInterface = findPrinterInterface(device);
+    if (!printerInterface) {
+      throw new Error(
+        "The selected USB device is not a compatible printer. Select the receipt printer instead of a Bluetooth, camera, keyboard, or other system device.",
+      );
+    }
+
+    await device.claimInterface(printerInterface.interfaceNumber);
+    if (printerInterface.alternateSetting !== printerInterface.activeAlternateSetting) {
+      await device.selectAlternateInterface(
+        printerInterface.interfaceNumber,
+        printerInterface.alternateSetting,
+      );
+    }
+
+    printerConnections.set(device, {
+      interfaceNumber: printerInterface.interfaceNumber,
+      endpointNumber: printerInterface.endpointNumber,
+    });
+    return device;
+  }
+
+  function getPrinterConnection(device: USBDevice) {
+    const connection = printerConnections.get(device);
+    if (!connection) throw new Error("Printer interface is not connected");
+    return connection;
+  }
+
   const isWebUsbSupported = computed(() => {
     return typeof navigator !== "undefined" && "usb" in navigator;
   });
@@ -75,7 +165,9 @@ export default function useWebUsb() {
       throw new Error("Web USB is not supported in this browser");
     }
     try {
-      const device = await navigator.usb.requestDevice({ filters: [] });
+      const device = await navigator.usb.requestDevice({
+        filters: [{ classCode: 0x07 }, { classCode: 0xff }],
+      });
       return {
         vendorId: device.vendorId,
         productId: device.productId,
@@ -84,12 +176,12 @@ export default function useWebUsb() {
         serialNumber: device.serialNumber || "Unknown",
         deviceId: `${device.vendorId}:${device.productId}`,
       };
-    } catch (error: any) {
-      if (error.name === "NotFoundError") {
+    } catch (error: unknown) {
+      if (error instanceof DOMException && error.name === "NotFoundError") {
         throw new Error("No device selected");
       }
       console.error("Error requesting USB device:", error);
-      throw new Error("Failed to access USB device");
+      throw new Error(getErrorMessage(error, "Failed to access USB printer"));
     }
   };
 
@@ -110,14 +202,17 @@ export default function useWebUsb() {
         });
       }
       console.log("[WebUSB] Opening device:", device.vendorId, device.productId);
-      await device.open();
-      await device.selectConfiguration(1);
-      await device.claimInterface(0);
+      await preparePrinterDevice(device);
       console.log("[WebUSB] Device opened and interface claimed.");
       return device;
-    } catch (error) {
+    } catch (error: unknown) {
       console.error("Error connecting to USB device:", error);
-      throw new Error("Failed to connect to USB device");
+      try {
+        await device?.close();
+      } catch (closeError) {
+        console.error("Error closing rejected USB device:", closeError);
+      }
+      throw new Error(getErrorMessage(error, "Failed to connect to USB printer"));
     }
   };
 
@@ -173,15 +268,20 @@ export default function useWebUsb() {
           ? "Connection and print test successful"
           : "Connection successful but print test failed",
       };
-    } catch (error: any) {
+    } catch (error: unknown) {
       return {
         success: false,
-        error: error.message,
+        error: getErrorMessage(error, "Failed to connect to USB printer"),
         message: "Connection failed",
       };
     } finally {
       if (device) {
         try {
+          const connection = printerConnections.get(device);
+          if (connection) {
+            await device.releaseInterface(connection.interfaceNumber);
+            printerConnections.delete(device);
+          }
           await device.close();
         } catch (closeError) {
           console.error("Error closing device:", closeError);
@@ -205,21 +305,16 @@ export default function useWebUsb() {
       ];
 
       const testData = new Uint8Array(testCommands);
-      const usbInterface = device.configuration.interfaces[0];
-      const alternate = usbInterface.alternates[0];
-      const outputEndpoint = alternate.endpoints.find(
-        (ep: any) => ep.direction === "out",
-      );
-
-      if (!outputEndpoint) {
-        throw new Error("No output endpoint found");
-      }
-
-      await device.transferOut(outputEndpoint.endpointNumber, testData);
+      const { endpointNumber } = getPrinterConnection(device);
+      await device.transferOut(endpointNumber, testData);
       return { success: true, message: "Test print sent successfully" };
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error("Test print error:", error);
-      return { success: false, error: error.message, message: "Test print failed" };
+      return {
+        success: false,
+        error: getErrorMessage(error, "Test print failed"),
+        message: "Test print failed",
+      };
     }
   };
 
@@ -354,13 +449,8 @@ export default function useWebUsb() {
   ) => {
     try {
       console.log("[WebUSB] printQrCode start — doorLevel:", doorLevel, "liftLevel:", liftLevel, "company:", companyName, "address:", address);
-      const usbInterface = device.configuration.interfaces[0];
-      const alternate = usbInterface.alternates[0];
-      const outputEndpoint = alternate.endpoints.find(
-        (ep: any) => ep.direction === "out",
-      );
-      if (!outputEndpoint) throw new Error("No output endpoint found");
-      console.log("[WebUSB] Using endpoint:", outputEndpoint.endpointNumber);
+      const { endpointNumber } = getPrinterConnection(device);
+      console.log("[WebUSB] Using endpoint:", endpointNumber);
 
       const canvas = await createReceiptLayout(
         urlImage,
@@ -375,17 +465,17 @@ export default function useWebUsb() {
       const rasterData = canvasToRaster(canvas);
       console.log("[WebUSB] Raster data size:", rasterData.byteLength, "bytes");
 
-      await device.transferOut(outputEndpoint.endpointNumber, rasterData.buffer);
+      await device.transferOut(endpointNumber, rasterData.buffer);
       console.log("[WebUSB] Raster data sent.");
 
       const CUT = new Uint8Array([0x1d, 0x56, 0x41, 0x10]);
-      await device.transferOut(outputEndpoint.endpointNumber, CUT.buffer);
+      await device.transferOut(endpointNumber, CUT.buffer);
       console.log("[WebUSB] Cut command sent.");
 
       return { success: true, message: "QR print sent successfully" };
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error("[WebUSB] printQrCode error:", error);
-      return { success: false, error: error.message };
+      return { success: false, error: getErrorMessage(error, "Unable to print QR code") };
     }
   };
 

package/composables/useWorkOrder.ts

@@ -57,9 +57,23 @@ export default function useWorkOrder() {
 
   const workOrder = useState("workOrder", () => new MWorkOrder());
   const workOrders = useState<Array<TWorkOrder>>("workOrders", () => []);
-  const page = useState("page", () => 1);
-  const pages = useState("pages", () => 0);
-  const pageRange = useState("pageRange", () => "-- - -- of --");
+  /*
+   * Namespaced, like every other composable in this folder (`facilityPage`,
+   * `commentPage`, `unit-billPage`). These three were registered on the bare
+   * keys "page" / "pages" / "pageRange", which `useState` treats as ONE
+   * app-global cell per key - so `useFeedback`, `useMember` and
+   * `useServiceProvider`, which register the same bare keys, were handed the
+   * very same refs. Two of those screens open at once and they share one page
+   * counter.
+   *
+   * Nothing depended on the collision: these three are never assigned anywhere
+   * in this composable, and `WorkOrder/ListView.vue` is the only file in the
+   * layer or in any of the 11 web apps that destructures them - every real
+   * work-order page keeps its own local `ref(1)`.
+   */
+  const page = useState("workOrderPage", () => 1);
+  const pages = useState("workOrderPages", () => 0);
+  const pageRange = useState("workOrderPageRange", () => "-- - -- of --");
 
   function setWorkOrder(data?: TWorkOrder) {
     workOrder.value = data || new MWorkOrder();

package/error.vue

@@ -1,3 +1,16 @@
+<!--
+  THE ERROR PAGE - what a user sees at their worst moment.
+
+  It was Vuetify's own chrome end to end: `text-h2` (a 60px Roboto display
+  size the design's scale does not contain), and a `variant="tonal"
+  rounded="xl" size="large"` button - a 24px-cornered 44px pill in the theme's
+  tinted wash, where every other action in the product is a 40px, 10px-cornered
+  `.screen-btn-primary`.
+
+  Nothing about the behaviour changes: same `v-app`/`v-main` wrapper (this page
+  renders OUTSIDE the app layout, so it has to bring its own), same message,
+  same route home.
+-->
 <script setup lang="ts">
 import type { NuxtError } from "#app";
 
@@ -17,16 +30,14 @@ const props = defineProps({
       >
         <v-col cols="9">
           <v-row>
-            <v-col cols="12" class="text-center text-h2">
-              <span class="font-weight-bold">{{ props.error?.message }}</span>
+            <v-col cols="12" class="text-center">
+              <p class="error-page__message">{{ props.error?.message }}</p>
             </v-col>
             <v-col cols="12">
               <v-row no-gutters justify="center">
                 <v-btn
-                  rounded="xl"
-                  size="large"
-                  class="text-none font-weight-bold"
-                  variant="tonal"
+                  class="screen-btn-primary"
+                  variant="flat"
                   :to="{ name: 'index' }"
                 >
                   Go back
@@ -39,3 +50,16 @@ const props = defineProps({
     </v-main>
   </v-app>
 </template>
+
+<style scoped>
+/* The design's page title, one step up: an error message is the only thing on
+   the screen, so it keeps display weight without borrowing Roboto's 60px. */
+.error-page__message {
+  font-family: var(--font-sans);
+  font-size: calc(var(--fs-h1) * 1.6);
+  font-weight: var(--fw-h1);
+  letter-spacing: var(--ls-h1);
+  color: var(--text);
+  margin-bottom: 24px;
+}
+</style>

package/nuxt.config.ts

@@ -7,6 +7,42 @@ 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.
+   *
+   * The second family is the redesign's icon set. Its axis ranges are the
+   * handoff's, character for character (`opsz,wght,FILL,GRAD@20..48,300..700,
+   * 0..1,0`) - do not widen or narrow them without a design change to point
+   * at. `plugins/vuetify.ts` and `assets/css/primitives.css` do the applying.
+   */
+  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,300..700,0..1,0&display=swap",
+        },
+      ],
+    },
+  },
+
   runtimeConfig: {
     public: {
       cookieConfig: {

package/package.json

@@ -2,9 +2,30 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.7",
+  "version": "3.2.8-staging.201",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
+  "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",
+  "files": [
+    "CHANGELOG.md",
+    "app.vue",
+    "error.vue",
+    "nuxt.config.ts",
+    "tsconfig.json",
+    ".nuxtrc",
+    "assets",
+    "components",
+    "composables",
+    "constants",
+    "layouts",
+    "middleware",
+    "pages",
+    "plugins",
+    "public",
+    "services",
+    "types",
+    "utils"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -14,9 +35,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:theme": "node --test \"utils/theme.test.ts\"",
-    "test:camera-wall": "node --test \"utils/camera-wall.test.ts\"",
+    "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": {
@@ -43,6 +63,7 @@
     "qrcode": "^1.5.4",
     "qrcode.vue": "^3.4.1",
     "sass": "^1.80.6",
+    "sip.js": "0.21.2",
     "socket.io-client": "^4.8.3",
     "vue-draggable-next": "^2.3.0",
     "vue3-signature": "^0.2.4",

package/pages/[org]/[site]/access-mgmt/administrator/index.vue

@@ -3,9 +3,9 @@
     <HidEnabledGate
       :site="siteId"
       :org="orgId"
-      message="Enable HID as a service for this site before managing HID administrators."
+      message="Enable HID as a service for this site before managing HID users."
     >
-      <HidUserEnrollment :site="siteId" identity-type="admin" />
+      <HidUserEnrollment :site="siteId" />
     </HidEnabledGate>
   </v-container>
 </template>

package/pages/[org]/[site]/access-mgmt/{identity-mapping → hid-cards}/index.vue

@@ -3,9 +3,9 @@
     <HidEnabledGate
       :site="siteId"
       :org="orgId"
-      message="Enable HID as a service for this site before mapping identities."
+      message="Enable HID as a service for this site before managing physical HID cards."
     >
-      <HidIdentityMapping :site="siteId" :org="orgId" />
+      <HidUserEnrollment :site="siteId" card-management />
     </HidEnabledGate>
   </v-container>
 </template>

package/pages/[org]/[site]/access-mgmt/intercom/index.vue

@@ -5,7 +5,7 @@
       :org="orgId"
       message="Enable HID as a service for this site before configuring HID intercom."
     >
-      <HidIntercomManagement :site="siteId" />
+      <HidIntercomManagement :site="siteId" :org="orgId" />
     </HidEnabledGate>
   </v-container>
 </template>

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>

package/pages/payment-method-linked.vue

@@ -1,20 +1,44 @@
+<!--
+  The "payment method linked" confirmation the payment window returns to.
+
+  THE DEFECT IS THE CLOSE BUTTON, NOT THE CARD. Measured before assuming:
+  `color="success lighten-1"` is Vuetify **2** syntax, but Vuetify 3 takes the
+  first token and applies it, so the card IS green - `rgb(15,138,98)` light,
+  `rgb(65,199,149)` dark. Only `lighten-1` is dead, and it changes nothing.
+  The green card stays: a success page is green on purpose, and swapping it for
+  a neutral surface would be a design decision, not a conversion.
+
+  What was wrong is `color="white" variant="tonal"` on Close. `tonal` paints
+  its tint on an OVERLAY, so the button's own background measured
+  `rgba(0,0,0,0)` and all that reached the glass was white text - on the green
+  card. Light: white on `rgb(15,138,98)` = 4.35:1. **Dark: white on
+  `rgb(65,199,149)` = 2.12:1**, which is the worst reading on this page and the
+  reason it needed touching at all. `.screen-btn-ghost` is the design's
+  secondary button - the card surface with `--text2` ink and a `--border` - so
+  it reads on green in both themes, and it is the 40px/10px button the rest of
+  the product uses rather than a 44px 24px-cornered pill.
+
+  The title had the same defect in the other direction: a literal `text-white`
+  on a fill that changes with the theme. See the comment on it below.
+
+  Behaviour is unchanged: same `window.close()`.
+-->
 <template>
   <v-row no-gutters class="fill-height" justify="center" align-content="center">
-    <v-card class="pa-4" elevation="4" color="success lighten-1">
-      <v-card-title class="text-white d-flex align-center">
+    <v-card class="pa-4" elevation="4" color="success">
+      <!-- `text-white` was a literal on a THEMED fill, and the fill changes with
+           the theme: white on dark's `rgb(65,199,149)` measures **2.14:1**.
+           Dropping it lets the card use its own paired ink - Vuetify sets
+           `on-success` from `color="success"` - which follows the fill. -->
+      <v-card-title class="d-flex align-center">
         <v-icon class="mr-2">mdi-check-circle</v-icon>
         Successfully Linked Payment Method
       </v-card-title>
 
       <v-card-actions class="d-flex justify-center">
-        <v-btn
-          color="white"
-          variant="tonal"
-          rounded="xl"
-          size="large"
-          @click="closeWindow"
-          >Close</v-btn
-        >
+        <v-btn class="screen-btn-ghost" variant="flat" @click="closeWindow">
+          Close
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-row>

package/pages/require-customer.vue

@@ -1,23 +1,32 @@
+<!--
+  The "you must have a customer" gate.
+
+  Was Vuetify's chrome: `text-subtitle-1` for the sentence, `text-subtitle-2`
+  on the buttons, and `variant="tonal" rounded="xl"` - a 24px-cornered pill in
+  the theme's tinted wash, where the product's action is a 40px, 10px-cornered
+  button. The sentence is now `--text2` (9.62:1 on a card) at the design's
+  reading size, and the actions are the design's primary and ghost buttons.
+
+  No behaviour change: same handlers, same destinations, same `plain` layout.
+-->
 <template>
   <v-row no-gutters class="fill-height" align="center" justify="center">
-    <v-col cols="12" lg="6" md="6" sm="6" class="text-center text-subtitle-1">
+    <v-col cols="12" lg="6" md="6" sm="6" class="text-center gate-page__message">
       You must have a customer to view this page. Please join or contact your
       administrator for access.
       <v-row no-gutters justify="center" align="center" class="mt-2">
         <v-btn
+          class="screen-btn-ghost"
+          variant="flat"
           @click="goToAccount"
-          rounded="xl"
-          variant="tonal"
-          class="text-none text-subtitle-2"
         >
           Go to Organization Page
         </v-btn>
-        <span class="mx-2">or</span>
+        <span class="mx-2 gate-page__or">or</span>
         <v-btn
+          class="screen-btn-primary"
+          variant="flat"
           @click="createCustomer"
-          rounded="xl"
-          variant="tonal"
-          class="text-none text-subtitle-2"
         >
           Create an Customer
         </v-btn>
@@ -27,6 +36,10 @@
 </template>
 
 <script setup lang="ts">
+// Relative import, never Nuxt auto-import: this layer's `utils/` are auto-imported
+// into the consuming apps but not reliably into the layer's own components.
+import { pickRouteName } from "../utils/route-name";
+
 definePageMeta({
   layout: "plain",
 });
@@ -44,9 +57,19 @@ authenticate();
 const { currentUser } = useLocalAuth();
 
 function createCustomer() {
-  if (APP_NAME.toLowerCase() === "org") {
+  // The org app's page is `pages/org/[organization]/customers/add.vue`, whose
+  // route name is `org-organization-customers-add` - singular. The plural spelt
+  // here matched nothing, so the only way off this dead-end page threw. The
+  // `hasRoute` check also keeps a mis-set APP_NAME from taking this branch in an
+  // app that has no such page; that app falls through to the cross-app URL.
+  const customerAdd = pickRouteName(
+    useRouter(),
+    "org-organization-customers-add",
+    "organizations-customers-add"
+  );
+  if (APP_NAME.toLowerCase() === "org" && customerAdd) {
     navigateTo({
-      name: "org-organizations-customers-add",
+      name: customerAdd,
       params: { organization: currentUser.value?.defaultOrg },
     });
   } else {
@@ -54,3 +77,18 @@ function createCustomer() {
   }
 }
 </script>
+
+<style scoped>
+.gate-page__message {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+  line-height: 1.6;
+}
+
+.gate-page__or {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+</style>