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

package/pages/require-organization-membership.vue

@@ -1,23 +1,32 @@
+<!--
+  The "you must be a member of an organization" 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 be a member of an organization 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 Account 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="createOrg"
-          rounded="xl"
-          variant="tonal"
-          class="text-none text-subtitle-2"
         >
           Create an Organization
         </v-btn>
@@ -45,3 +54,18 @@ function createOrg() {
   }
 }
 </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>

package/pages/unauthorized.vue

@@ -1,14 +1,24 @@
+<!--
+  The "you are not a member of an organization" 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 be a member of an organization to view this page. Please join or
       contact your administrator for access.
       <v-row no-gutters justify="center" class="mt-2">
         <v-btn
+          class="screen-btn-primary"
+          variant="flat"
           @click="goToAccount"
-          rounded="xl"
-          variant="tonal"
-          class="text-none text-subtitle-2"
         >
           Go to Account Page
         </v-btn>
@@ -27,3 +37,18 @@ function goToAccount() {
   window.location.href = `${APP_ACCOUNT}/home`;
 }
 </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>

package/plugins/secure-member.client.ts

@@ -12,75 +12,40 @@ export default defineNuxtPlugin(() => {
 
   const { userAppRole, id, orgNature } = useLocalSetup();
 
-  router.afterEach(async (to) => {
+  router.beforeEach(async (to) => {
     const isMember = to.meta?.memberOnly;
 
     if (!isMember) return;
 
     const APP = useRuntimeConfig().public.APP;
-    const org = computed(
-      () =>
-        (to.params.org as string) || (to.params.organization as string) || ""
-    );
+    const org =
+      (to.params.org as string) || (to.params.organization as string) || "";
 
-    console.log('[secure-member-plugin', 'org', org.value)
-
-    if (!hexSchema.safeParse(org.value).success) {
-      return router.replace({ name: "require-organization-membership" });
+    if (!hexSchema.safeParse(org).success) {
+      return { name: "require-organization-membership" };
     }
 
-    const userId = computed(() => useCookie("user").value ?? "");
-
-    const { data: userMemberData, error: userMemberError } =
-      await useLazyAsyncData(
-        "plugin-get-member-by-id-" + userId.value + "-" + APP + "-" + org.value,
-        () => getByUserType(userId.value, APP, org.value),
-        { watch: [userId] }
-      );
-
-    watchEffect(() => {
-      if (userMemberError.value) {
-        console.log('running-secure-member-redirect-plugin')
-        navigateTo(
-          {
-            name: "index",
-          },
-          { replace: true }
-        );
-      }
-    });
-
-    const roleId = ref("roleId");
+    const userId = useCookie("user").value ?? "";
+    if (!userId) return { name: "index" };
 
-    watchEffect(() => {
-      if (userMemberData.value) {
-        id.value = userMemberData.value.org ?? "";
-        roleId.value = userMemberData.value.role ?? "roleId";
-      }
-    });
+    try {
+      const userMemberData = await getByUserType(userId, APP, org);
+      id.value = userMemberData.org ?? "";
 
-    const { data: getOrgByIdReq } = await useLazyAsyncData(
-      "plugin-get-org-by-id-" + org.value,
-      () => getById(org.value),
-      { watch: [org] }
-    );
+      const [orgResult, roleResult] = await Promise.allSettled([
+        getById(org),
+        userMemberData.role ? getRoleById(userMemberData.role) : null,
+      ]);
 
-    watchEffect(() => {
-      if (getOrgByIdReq.value) {
-        orgNature.value = getOrgByIdReq.value.nature ?? "";
+      if (orgResult.status === "fulfilled" && orgResult.value) {
+        orgNature.value = orgResult.value.nature ?? "";
       }
-    });
 
-    const { data: getRoleByIdReq } = await useLazyAsyncData(
-      "plugin-get-role-by-id-" + roleId.value,
-      () => getRoleById(roleId.value),
-      { watch: [roleId] }
-    );
-
-    watchEffect(() => {
-      if (getRoleByIdReq.value) {
-        userAppRole.value = getRoleByIdReq.value;
+      if (roleResult.status === "fulfilled" && roleResult.value) {
+        userAppRole.value = roleResult.value;
       }
-    });
+    } catch (error) {
+      return { name: "index" };
+    }
   });
 });

package/plugins/vuetify.ts

@@ -43,8 +43,75 @@ import {
 import "vuetify-pro-tiptap/style.css";
 
 import { LIGHT_THEME, DARK_THEME } from "../utils/theme";
+import { MDI_TO_SYMBOL } from "../utils/materialSymbols";
+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";
+
+/**
+ * THE ICON SET.
+ *
+ * The design handoff draws icons with Google's `Material Symbols Outlined`
+ * variable font - the stylesheet for it is already requested in
+ * `nuxt.config.ts` - while the product asks for Material Design Icons names
+ * (`mdi-close`, `mdi-magnify`, ...) in roughly 680 places here and again in
+ * every application. Translating at the icon set means none of those call sites
+ * change: a component still writes `mdi-close`, and this renders the Material
+ * Symbols glyph for it.
+ *
+ * A name with no entry in the table falls through to the previous Iconify
+ * rendering, so an unrecognised icon draws its old glyph instead of a blank
+ * box. `mdi-blank` maps to an empty string on purpose - it is mdi's deliberate
+ * spacer, and `.v-icon` keeps the 1em box.
+ *
+ * `icon` and `tag` are declared props so Vue does not also emit them as
+ * literal attributes; everything else Vuetify passes (the `v-icon` classes,
+ * size, colour, click handling) falls through to the root element untouched.
+ */
+const MaterialSymbol = (props: any) => {
+  // "mdi-loading mdi-spin" - the name first, any mdi modifier classes after it.
+  const [name, ...modifiers] = String(props.icon ?? "").split(/\s+/);
+  const symbol = MDI_TO_SYMBOL[name];
+
+  return symbol === undefined
+    ? h(Icon, { icon: props.icon })
+    : h(
+        props.tag ?? "span",
+        { class: ["material-symbols-outlined", ...modifiers] },
+        symbol,
+      );
+};
+MaterialSymbol.props = ["icon", "tag"];
 
 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 +164,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,
@@ -114,7 +181,7 @@ export default defineNuxtPlugin((app) => {
       defaultSet: "iconify",
       sets: {
         iconify: {
-          component: (props: any) => h(Icon, { icon: props.icon }),
+          component: MaterialSymbol,
         },
       },
     },

package/types/nfc-patrol-report.ts

@@ -85,9 +85,10 @@ export interface NFCPatrolSummaryReport {
 export interface NFCPatrolMonthlyReportRow {
   month: string;
   checked: number;
-  checkedPercentage: number;
+  /** `null` when no checkpoint was due that month - see `utils/nfc-patrol-report.ts`. */
+  checkedPercentage: number | null;
   missed: number;
-  missedPercentage: number;
+  missedPercentage: number | null;
 }
 
 export interface NFCPatrolMonthlyReport {

package/types/site.d.ts

@@ -1,5 +1,76 @@
 declare type TSiteCreate = Pick<TSite, "name" | "description" | "orgId">;
 
+declare type THidQrCodeFormat = "0" | "1" | "2";
+
+declare type THidPermissionCategory =
+  | "resident"
+  | "property_management"
+  | "service_provider";
+
+declare type THidPermissionAssignment = {
+  subjectId: string;
+  category: THidPermissionCategory;
+  name: string;
+  subtitle?: string;
+  intercom: boolean;
+  readerId?: string;
+  location?: string;
+  locationKey?: string;
+};
+
+declare type THidSitePermissions = {
+  orgId: string;
+  site: string;
+  readerId: string;
+  location: string;
+  assignments: THidPermissionAssignment[];
+  counts: {
+    resident: number;
+    propertyManagement: number;
+    serviceProvider: number;
+    intercom: number;
+  };
+};
+
+declare type THidPermissionCandidate = THidPermissionAssignment & {
+  selected: boolean;
+};
+
+declare type THidQrCodePassConfig = {
+  enabled: boolean;
+  onlineMode?: boolean;
+  readerId: string;
+  qrFormat: THidQrCodeFormat;
+  identificationMethods?: {
+    facial: boolean;
+    card: boolean;
+    qrCode: boolean;
+    idPassword: boolean;
+    pin: boolean;
+    bluetooth: boolean;
+  };
+  printer: {
+    vendorId: string;
+    productId: string;
+  };
+  template: {
+    header: string;
+    subtext: string;
+  };
+  validityMinutes: number | null;
+  updatedAt?: string;
+};
+
+declare type TSiteMetadata = {
+  block?: number;
+  guardPosts?: number;
+  gracePeriod?: number;
+  incidentCounter?: number;
+  incidentLogo?: string;
+  services?: Record<string, unknown>[];
+  hidQrCodePass?: THidQrCodePassConfig;
+};
+
 
 declare type TSite = {
   _id?: string;

package/types/subscription.ts

@@ -5,10 +5,8 @@ export type PlanType = "free_bundle" | "paid_bundle" | "custom_apps";
 export type BillingCycle = "monthly" | "annually";
 
 export interface AppOption {
-  id: string;
-  name: string;
-  monthlyPrice: number;
-  yearlyPrice: number;
+  title: string;
+  value: string;
 }
 
 export interface SubscriptionPlan {
@@ -32,6 +30,7 @@ export interface PlanFormState {
   bundleApps: string[];
   bundlePrice: number | null;
   customApps: string[];
+  customAppPrices: Record<string, number>;
 }
 
 export const PLAN_TYPE_LABEL: Record<PlanType, string> = {
@@ -40,12 +39,20 @@ export const PLAN_TYPE_LABEL: Record<PlanType, string> = {
   custom_apps: "Paid (Custom Apps)",
 };
 
-// Mock catalogue of applications that can be bundled into a plan.
+// Catalogue of applications that can be bundled into a plan.
 // Replace with data fetched from your backend.
-export const AVAILABLE_APPLICATIONS: AppOption[] = [
-  { id: "crm", name: "CRM", monthlyPrice: 49, yearlyPrice: 490 },
-  { id: "hrm", name: "HRM", monthlyPrice: 39, yearlyPrice: 390 },
-  { id: "accounting", name: "Accounting", monthlyPrice: 59, yearlyPrice: 590 },
-  { id: "inventory", name: "Inventory", monthlyPrice: 45, yearlyPrice: 450 },
-  { id: "pos", name: "POS", monthlyPrice: 69, yearlyPrice: 690 },
+export const APP_LIST: AppOption[] = [
+  { title: "Organization", value: "organization" },
+  { title: "Security Agency", value: "security_agency" },
+  { title: "Cleaning Services", value: "cleaning_services" },
+  { title: "Property Management Agency", value: "property_management_agency" },
+  { title: "Mechanical & Electrical Services", value: "mechanical_electrical_services" },
+  { title: "Pest Control Services", value: "pest_control_services" },
+  { title: "Landscaping Services", value: "landscaping_services" },
+  { title: "Pool Maintenance Services", value: "pool_maintenance_services" },
 ];
+
+// Static placeholder price applied to every app, for now.
+// Replace with real per-app pricing once that's available.
+export const STATIC_APP_MONTHLY_PRICE = 49;
+export const STATIC_APP_YEARLY_PRICE = 490;

package/utils/breadcrumb.test.ts

@@ -0,0 +1,108 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+
+import { moduleNameFromRoute } from "./breadcrumb.ts";
+
+/**
+ * Real routes, not invented ones: name, path and parameters exactly as
+ * vue-router hands them to the bar in each application.
+ */
+const ID = "68b0c1d2e3f4a5b6c7d8e9f0";
+
+test("a site application names the page, not its parameters", () => {
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-site-work-orders",
+      path: `/${ID}/${ID}/work-orders`,
+      params: { org: ID, site: ID },
+    }),
+    "Work Orders"
+  );
+});
+
+test("a detail route names its module, not its argument", () => {
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-site-feedbacks-id",
+      path: `/${ID}/${ID}/feedbacks/${ID}`,
+      params: { org: ID, site: ID, id: ID },
+    }),
+    "Feedbacks"
+  );
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-site-members-status",
+      path: `/${ID}/${ID}/members/pending`,
+      params: { org: ID, site: ID, status: "pending" },
+    }),
+    "Members"
+  );
+});
+
+test("a fixed folder in front of the context parameter is not the page", () => {
+  // THE DEFECT: every screen of the organization application read "Org".
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-organization-marketplace",
+      path: `/org/${ID}/marketplace`,
+      params: { organization: ID },
+    }),
+    "Marketplace"
+  );
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-organization-payment-methods-linked",
+      path: `/org/${ID}/payment-methods/linked`,
+      params: { organization: ID },
+    }),
+    "Payment Methods Linked"
+  );
+});
+
+test("a literal second segment is NOT a skipped context", () => {
+  // `/organizations/status/:status` also begins with a literal folder, but
+  // "Organizations" is the page here - only the THIRD segment is a parameter.
+  assert.equal(
+    moduleNameFromRoute({
+      name: "organizations-status-status",
+      path: "/organizations/status/pending",
+      params: { status: "pending" },
+    }),
+    "Organizations"
+  );
+});
+
+test("a route with no parameters is left alone", () => {
+  assert.equal(
+    moduleNameFromRoute({
+      name: "super-admin-client-list",
+      path: "/super-admin/client-list",
+      params: {},
+    }),
+    "Super Admin Client List"
+  );
+  assert.equal(
+    moduleNameFromRoute({ name: "personal-info-name", path: "/personal-info/name", params: {} }),
+    "Personal Info Name"
+  );
+});
+
+test("acronyms keep their case", () => {
+  assert.equal(
+    moduleNameFromRoute({
+      name: "org-site-virtual-patrol-cctv",
+      path: `/${ID}/${ID}/virtual-patrol/cctv`,
+      params: { org: ID, site: ID },
+    }),
+    "Virtual Patrol CCTV"
+  );
+});
+
+test("a context-only route has no page half", () => {
+  // The organization dashboard: the bar shows the organization's name alone.
+  assert.equal(
+    moduleNameFromRoute({ name: "org-organization", path: `/org/${ID}`, params: { organization: ID } }),
+    ""
+  );
+  assert.equal(moduleNameFromRoute({ name: "", path: "/", params: {} }), "");
+});

package/utils/breadcrumb.ts

@@ -0,0 +1,82 @@
+/**
+ * THE TOP BAR'S BREADCRUMB, PAGE HALF.
+ *
+ * The bar draws `Context / Page`. The page half is derived from the route the
+ * router is already on - nothing is fetched and nothing is configured per app,
+ * because the applications build their route names from their own folder
+ * structure: `org-site-work-orders` is Work Orders.
+ *
+ * Lives here rather than in the component so the rule is testable: it is the
+ * one piece of the bar with real branching, and it named a whole application's
+ * screens wrongly for want of a case.
+ */
+const ACRONYMS: Record<string, string> = {
+  cctv: "CCTV",
+  hid: "HID",
+  dob: "DOB",
+  anpr: "ANPR",
+  nfc: "NFC",
+  qr: "QR",
+  soa: "SOA",
+  sp: "SP",
+  id: "ID",
+};
+
+export function moduleNameFromRoute(route: {
+  name?: unknown;
+  path?: unknown;
+  params?: Record<string, unknown> | null;
+}): string {
+  const segments = String(route.name ?? "").split("-").filter(Boolean);
+  const params = new Set(Object.keys(route.params ?? {}));
+
+  let i = 0;
+
+  /**
+   * A FIXED FOLDER IN FRONT OF THE CONTEXT PARAMETER IS NOT THE PAGE.
+   *
+   * The site applications are `/:org/:site/...`, so skipping the leading
+   * parameters was enough. The organization application is
+   * `/org/:organization/...` - a literal folder first - and the route NAME
+   * cannot tell that "org" is a folder and not a parameter, so every one of
+   * that application's screens named itself "Org" instead of the page it is.
+   *
+   * The PATH can tell: its first segment is that same word, and the segment
+   * after it is a parameter's VALUE. Checked against the path rather than
+   * assumed, because `/organizations/status/:status` also begins with a
+   * literal - and there "Organizations Status" is the right page name, its
+   * second path segment being the folder `status` and not the parameter's
+   * value.
+   */
+  const values = new Set(
+    Object.values(route.params ?? {})
+      .flat()
+      .map((v) => String(v))
+      .filter(Boolean)
+  );
+  const pathParts = String(route.path ?? "").split("/").filter(Boolean);
+
+  if (
+    segments.length > 1 &&
+    !params.has(segments[0]) &&
+    pathParts[0] === segments[0] &&
+    values.has(String(pathParts[1] ?? ""))
+  ) {
+    i++;
+  }
+
+  /**
+   * Leading parameter segments (`org`, `site`) are skipped and the name stops
+   * at the first one that follows, so a detail route (`...-feedbacks-id`) and
+   * a status route (`...-members-status`) both name their module rather than
+   * their argument.
+   */
+  while (i < segments.length && params.has(segments[i])) i++;
+
+  const words: string[] = [];
+  while (i < segments.length && !params.has(segments[i])) words.push(segments[i++]);
+
+  return words
+    .map((w) => ACRONYMS[w] ?? w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}