@7365admin1/layer-common 3.2.1-staging.75 → 3.2.2-staging.100

package/composables/useHidAmico.ts

@@ -33,7 +33,7 @@ type HidVisitorQrData = {
   readerId: string;
   hidUserId: number;
   qrValue: string;
-  qrFormat: "0" | "1" | "2";
+  qrFormat: "0";
   issuedAt: string;
   expiresAt: string;
 };
@@ -120,7 +120,7 @@ export default function useHidAmico() {
 
   function issueVisitorQr(
     readerId: string,
-    payload: { visitorId: string; validityMinutes: number; qrFormat: "0" | "1" | "2" },
+    payload: { visitorId: string; validityMinutes: number },
   ) {
     return useNuxtApp().$api<HidVisitorQrResponse>(`${basePath}/readers/${readerId}/visitor-qr`, {
       method: "POST",
@@ -189,6 +189,27 @@ export default function useHidAmico() {
     );
   }
 
+  function getUserPinStatus(readerId: string, hidUserId: string | number) {
+    return useNuxtApp().$api<{ data: { pinEnrolled: boolean } }>(
+      `${basePath}/readers/${readerId}/users/${hidUserId}/pin`,
+      { method: "GET" },
+    );
+  }
+
+  function setUserPin(readerId: string, hidUserId: string | number, pin: string) {
+    return useNuxtApp().$api<{ data: { pinEnrolled: boolean } }>(
+      `${basePath}/readers/${readerId}/users/${hidUserId}/pin`,
+      { method: "PUT", body: { pin } },
+    );
+  }
+
+  function deleteUserPin(readerId: string, hidUserId: string | number) {
+    return useNuxtApp().$api<{ data: { pinEnrolled: boolean } }>(
+      `${basePath}/readers/${readerId}/users/${hidUserId}/pin`,
+      { method: "DELETE" },
+    );
+  }
+
   function createIdentity(readerId: string, payload: HidIdentityPayload) {
     return useNuxtApp().$api<Record<string, any>>(`${basePath}/readers/${readerId}/identities`, {
       method: "POST",
@@ -286,6 +307,9 @@ export default function useHidAmico() {
     getUserImage,
     setUserImage,
     deleteUserImage,
+    getUserPinStatus,
+    setUserPin,
+    deleteUserPin,
     getIdentities,
     createIdentity,
     updateIdentity,

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

@@ -170,7 +170,7 @@ export default function useOrg() {
 
   function updateOrg(
     id: string,
-    value: Partial<Pick<TOrg, "name" | "type" | "email" | "nature" | "contact">>
+    value: Partial<Pick<TOrg, "name" | "type" | "email" | "nature" | "contact" | "terms" | "policies">>
   ) {
     return useNuxtApp()
       .$api<Record<string, any>>(`/api/organizations/${id}`, {

package/composables/useRole.ts

@@ -68,6 +68,26 @@ export default function useRole() {
     });
   }
 
+  function getDeletionPreview(_id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/roles/${_id}/deletion-preview`,
+      { method: "GET" }
+    );
+  }
+
+  function deleteWithReassignments(
+    _id: string,
+    reassignments: Array<{ memberId: string; roleId: string }>
+  ) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/roles/${_id}/delete-with-reassignments`,
+      {
+        method: "PUT",
+        body: { reassignments },
+      }
+    );
+  }
+
   const role = useState<TRole>("userRole", () => {
     return {
       _id: "",
@@ -103,6 +123,8 @@ export default function useRole() {
     updateRoleById,
     updateRoleFieldById,
     deleteRole,
+    getDeletionPreview,
+    deleteWithReassignments,
     updatePermissionById,
     getRoleByUserId,
   };

package/composables/useSipWebPhone.ts

@@ -31,6 +31,12 @@ export default function useSipWebPhone() {
 
   const isRegistered = computed(() => connectionState.value === "registered");
   const hasCall = computed(() => callState.value !== "idle");
+  const audioConstraints: MediaTrackConstraints = {
+    echoCancellation: true,
+    noiseSuppression: true,
+    autoGainControl: true,
+    channelCount: 1,
+  };
 
   async function connect(config: SipWebPhoneConfig, media: SipWebPhoneMedia) {
     validateConfig(config);
@@ -73,6 +79,7 @@ export default function useSipWebPhone() {
         },
         onCallAnswered: () => {
           callState.value = "active";
+          ensureMicrophoneSending();
           syncVideoState();
         },
         onCallHangup: () => {
@@ -104,7 +111,9 @@ export default function useSipWebPhone() {
         aor: normalizeSipUri(config.aor),
         delegate,
         media: {
-          constraints: { audio: true, video: false },
+          // The browser sends microphone audio and receives HID audio/video.
+          // Do not request a local camera merely because the HID video leg is enabled.
+          constraints: { audio: audioConstraints, video: false },
           remote: {
             audio: media.remoteAudio || undefined,
             video: media.remoteVideo || undefined,
@@ -167,7 +176,7 @@ export default function useSipWebPhone() {
     callState.value = "calling";
     try {
       const sessionDescriptionHandlerOptions: SessionDescriptionHandlerOptions = {
-        constraints: { audio: true, video: false },
+        constraints: { audio: audioConstraints, video: false },
         offerOptions: {
           offerToReceiveAudio: true,
           offerToReceiveVideo: Boolean(activeConfig.value?.video),
@@ -184,7 +193,11 @@ export default function useSipWebPhone() {
   async function answer() {
     const user = requireRegisteredUser();
     const sessionDescriptionHandlerOptions: SessionDescriptionHandlerOptions = {
-      constraints: { audio: true, video: false },
+      constraints: { audio: audioConstraints, video: false },
+      offerOptions: {
+        offerToReceiveAudio: true,
+        offerToReceiveVideo: Boolean(activeConfig.value?.video),
+      },
     };
     await user.answer({ sessionDescriptionHandlerOptions });
   }
@@ -214,6 +227,18 @@ export default function useSipWebPhone() {
     muted.value = !enable;
   }
 
+  function ensureMicrophoneSending() {
+    const tracks = simpleUser.value?.localMediaStream?.getAudioTracks() || [];
+    if (!tracks.length) {
+      errorMessage.value = "The call connected without a microphone track. Reconnect and allow microphone access.";
+      return;
+    }
+    tracks.forEach((track) => {
+      track.enabled = true;
+    });
+    muted.value = false;
+  }
+
   function syncVideoState() {
     const user = simpleUser.value;
     const remoteStream = user?.remoteMediaStream;

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.1-staging.75",
+  "version": "3.2.2-staging.100",
   "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/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/plugins/vuetify.ts

@@ -43,8 +43,39 @@ 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";
+import "../assets/css/screens.css";
+import "../assets/css/primitives.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 +128,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/types/org.d.ts

@@ -11,4 +11,6 @@ declare type TOrg = {
   status?: string;
   deletedAt?: string;
   nature?: string;
+  terms?: string;
+  policies?: string;
 };

package/utils/nav-sections.test.ts

@@ -0,0 +1,190 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { NAV_SECTIONS, withSections } from "./nav-sections.ts";
+
+/** The Security menu, item for item and in `web-app-security`'s own order. */
+const SECURITY = [
+  "Dashboard",
+  "Feedbacks",
+  "Work Orders",
+  "Vehicle Mgmt",
+  "Building Mgmt",
+  "Visitor Mgmt",
+  "Pass & Key Mgmt",
+  "HID Face Reader",
+  "Daily Occurrence Books",
+  "Manpower",
+  "Virtual Patrol",
+  "Robot Mgmt",
+  "Incident Reports",
+  "Bulletin Board",
+  "Attendance",
+  "My Attendance",
+  "Invitations",
+  "Members",
+  "Roles & Permissions",
+  "Settings",
+].map((title) => ({ title }));
+
+/**
+ * THE RULE THAT MATTERS. Grouping may reorder the rail; it may never change
+ * the menu. Same objects, same count - nothing added, hidden or duplicated.
+ */
+test("every menu item comes back exactly once, and nothing else does", () => {
+  const out = withSections(SECURITY);
+
+  assert.equal(out.length, SECURITY.length);
+  assert.deepEqual(
+    new Set(out.map((e) => e.item)),
+    new Set(SECURITY)
+  );
+});
+
+test("Security is labelled the way the design draws it", () => {
+  const labelled = withSections(SECURITY)
+    .filter((e) => e.section)
+    .map((e) => `${e.section}: ${e.item.title}`);
+
+  assert.deepEqual(labelled, [
+    "OVERVIEW: Dashboard",
+    "SERVICE DESK: Feedbacks",
+    "PROPERTY: Vehicle Mgmt",
+    "SECURITY OPERATIONS: HID Face Reader",
+    "COMMUNITY: Bulletin Board",
+    "WORKFORCE: Attendance",
+    "ADMINISTRATION: Invitations",
+  ]);
+});
+
+/**
+ * A permission-gated menu is a SUBSET, and every application's is different.
+ * Dropping the items a user cannot see must not leave a heading behind or move
+ * one onto the wrong item.
+ */
+test("a user who can only see three modules gets three correct headings", () => {
+  const out = withSections(
+    [{ title: "Dashboard" }, { title: "Work Orders" }, { title: "Settings" }]
+  );
+
+  assert.deepEqual(
+    out.map((e) => e.section),
+    ["OVERVIEW", "SERVICE DESK", "ADMINISTRATION"]
+  );
+});
+
+/**
+ * The eleven applications add menu items without touching this layer. An
+ * unknown title must appear where its author put it, under the heading it
+ * follows - never suppressed, and never given a heading of its own.
+ */
+test("an unmapped module inherits the section above it", () => {
+  const out = withSections([
+    { title: "Dashboard" },
+    { title: "Something New" },
+    { title: "Members" },
+  ]);
+
+  assert.deepEqual(
+    out.map((e) => e.section),
+    ["OVERVIEW", "", "ADMINISTRATION"]
+  );
+  assert.equal(out[1].item.title, "Something New");
+});
+
+test("an unmapped FIRST item prints no heading rather than a blank one", () => {
+  const out = withSections([{ title: "Something New" }, { title: "Members" }]);
+
+  assert.deepEqual(
+    out.map((e) => e.section),
+    ["", "ADMINISTRATION"]
+  );
+});
+
+/**
+ * The applications do not agree on order: Landscape lists Feedbacks after its
+ * equipment modules. Those two Feedbacks/Work Orders items are collected under
+ * ONE SERVICE DESK heading instead of printing the heading twice.
+ */
+test("a section that comes back later is grouped, not labelled twice", () => {
+  const out = withSections([
+    { title: "Feedbacks" },
+    { title: "Equipment Items" },
+    { title: "Work Orders" },
+  ]);
+
+  assert.deepEqual(
+    out.map((e) => `${e.section}|${e.item.title}`),
+    [
+      "SERVICE DESK|Feedbacks",
+      "|Work Orders",
+      "EQUIPMENT|Equipment Items",
+    ]
+  );
+});
+
+/**
+ * Property Management is the screen that showed the defect: its own menu order
+ * printed SERVICE DESK, PROPERTY and SECURITY OPERATIONS twice each.
+ */
+test("Property Management prints each heading exactly once", () => {
+  const PM = [
+    "Dashboard",
+    "Service Providers",
+    "Feedbacks",
+    "Work Orders",
+    "Facility Mgmt",
+    "Pass & Key Mgmt",
+    "HID Face Reader",
+    "Online Forms",
+    "NFC Patrol",
+    "Bulletin Board",
+    "Bulletin Videos",
+    "Visitor Mgmt",
+    "Document Mgmt",
+    "Access Mgmt",
+  ].map((title) => ({ title }));
+
+  const out = withSections(PM);
+  const headings = out.map((e) => e.section).filter(Boolean);
+
+  assert.deepEqual(headings, [
+    "OVERVIEW",
+    "SERVICE DESK",
+    "PROPERTY",
+    "SECURITY OPERATIONS",
+    "COMMUNITY",
+  ]);
+  assert.equal(new Set(headings).size, headings.length);
+  assert.deepEqual(
+    out.map((e) => e.item.title),
+    [
+      "Dashboard",
+      "Service Providers",
+      "Feedbacks",
+      "Work Orders",
+      "Online Forms",
+      "Facility Mgmt",
+      "Pass & Key Mgmt",
+      "Visitor Mgmt",
+      "Document Mgmt",
+      "Access Mgmt",
+      "HID Face Reader",
+      "NFC Patrol",
+      "Bulletin Board",
+      "Bulletin Videos",
+    ]
+  );
+});
+
+test("a missing or empty title does not throw", () => {
+  const out = withSections([{}, { title: "" }] as Array<{ title?: string }>);
+  assert.equal(out.length, 2);
+});
+
+/** Every section name is the uppercase form the type scale is drawn for. */
+test("section names are uppercase", () => {
+  for (const section of Object.values(NAV_SECTIONS)) {
+    assert.equal(section, section.toUpperCase(), section);
+  }
+});