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

package/utils/materialSymbols.ts

@@ -0,0 +1,363 @@
+/**
+ * mdi -> Material Symbols Outlined.
+ *
+ * The design handoff draws every icon with Google's variable
+ * `Material Symbols Outlined` font (`opsz,wght,FILL,GRAD@20..48,300..700,0..1,0`),
+ * using the icon's name as the element's text and letting the font's ligature
+ * table turn it into a glyph. The product ships Material Design Icons (`mdi`)
+ * instead - a different, heavier family - so every screen mixes two icon
+ * languages.
+ *
+ * Rather than rewrite ~680 call sites across this package (and again in eleven
+ * applications), the Vuetify icon set in `plugins/vuetify.ts` translates on the
+ * way out: a component still asks for `mdi-close`, this table answers `close`,
+ * and the span renders the Material Symbols glyph. Vuetify's own internal
+ * aliases (`$dropdown`, `$checkboxOn`, `$next`, ...) resolve to `mdi-*` strings
+ * too, so they are listed here as well and convert with everything else.
+ *
+ * Anything NOT in this table falls back to the previous Iconify rendering, so
+ * an unmapped name draws its old icon rather than a blank box.
+ *
+ * Every value below was checked against Google's published codepoint list for
+ * the variable font, so no entry is a name that does not exist.
+ *
+ * Where mdi draws something Material Symbols has no equivalent for, the entry
+ * is marked NEAREST with what was lost. Those are deliberate, not oversights.
+ */
+export const MDI_TO_SYMBOL: Record<string, string> = {
+  // --- navigation & chevrons ---
+  "mdi-chevron-left": "chevron_left",
+  "mdi-chevron-right": "chevron_right",
+  "mdi-chevron-up": "expand_less",
+  "mdi-chevron-down": "expand_more",
+  "mdi-chevron-down-box-outline": "expand_more", // NEAREST: no boxed chevron
+  "mdi-menu": "menu",
+  "mdi-menu-down": "arrow_drop_down",
+  "mdi-menu-right": "arrow_right",
+  "mdi-unfold-more-horizontal": "unfold_more",
+  "mdi-arrow-left": "arrow_back",
+  "mdi-arrow-right": "arrow_forward",
+  "mdi-arrow-up": "arrow_upward",
+  "mdi-arrow-down": "arrow_downward",
+  "mdi-arrow-u-left-top": "undo",
+  "mdi-page-first": "first_page",
+  "mdi-page-last": "last_page",
+  "mdi-open-in-new": "open_in_new",
+  "mdi-swap-horizontal": "swap_horiz",
+  "mdi-drag": "drag_indicator",
+  "mdi-dots-vertical": "more_vert",
+  "mdi-dots-horizontal": "more_horiz",
+
+  // --- actions ---
+  "mdi-close": "close",
+  "mdi-close-circle": "cancel",
+  "mdi-close-circle-outline": "cancel",
+  "mdi-check": "check",
+  "mdi-check-circle": "check_circle",
+  "mdi-check-circle-outline": "check_circle",
+  "mdi-plus": "add",
+  "mdi-minus": "remove",
+  "mdi-minus-box": "indeterminate_check_box",
+  "mdi-refresh": "refresh",
+  "mdi-cached": "cached",
+  "mdi-restore": "restore",
+  "mdi-magnify": "search",
+  "mdi-magnify-close": "search_off",
+  "mdi-pencil": "edit",
+  "mdi-pencil-outline": "edit",
+  "mdi-square-edit-outline": "edit_square",
+  "mdi-delete": "delete",
+  "mdi-delete-outline": "delete",
+  "mdi-trash-outline": "delete",
+  "mdi-trash-can-outline": "delete",
+  "mdi-content-save": "save",
+  "mdi-content-copy": "content_copy",
+  "mdi-download": "download",
+  "mdi-download-outline": "download",
+  "mdi-upload": "upload",
+  "mdi-tray-arrow-up": "file_upload",
+  "mdi-export": "output",
+  "mdi-printer": "print",
+  "mdi-printer-alert": "print_error",
+  "mdi-printer-check": "print", // NEAREST: no printer-with-tick
+  "mdi-draw": "draw",
+  "mdi-tune-variant": "tune",
+  "mdi-cog": "settings",
+  "mdi-cog-outline": "settings",
+  "mdi-backspace": "backspace",
+  "mdi-eyedropper": "colorize",
+  "mdi-palette": "palette",
+  "mdi-sort-alphabetical-ascending": "sort_by_alpha",
+
+  // --- status & feedback ---
+  "mdi-alert": "warning",
+  "mdi-alert-outline": "warning",
+  "mdi-alert-circle": "error",
+  "mdi-alert-circle-outline": "error",
+  "mdi-information": "info",
+  "mdi-information-outline": "info",
+  "mdi-information-symbol": "info",
+  "mdi-help-circle": "help",
+  "mdi-loading": "progress_activity",
+  "mdi-progress-clock": "pending", // NEAREST: no clock-with-progress-arc
+  "mdi-history": "history",
+  "mdi-trending-up": "trending_up",
+  "mdi-flag": "flag",
+  "mdi-flash": "bolt",
+  "mdi-bug": "bug_report",
+  "mdi-bug-outline": "bug_report",
+  "mdi-radar": "radar",
+  "mdi-emoticon-happy-outline": "sentiment_satisfied",
+  "mdi-star": "star",
+  "mdi-star-outline": "star",
+  "mdi-star-half-full": "star_half",
+  "mdi-circle": "circle",
+  "mdi-circle-outline": "radio_button_unchecked",
+
+  // --- form controls (Vuetify's internal aliases live here) ---
+  "mdi-checkbox-marked": "check_box",
+  "mdi-checkbox-blank-outline": "check_box_outline_blank",
+  "mdi-checkbox-multiple-outline": "checklist", // NEAREST: no stacked checkboxes
+  "mdi-radiobox-marked": "radio_button_checked",
+  "mdi-radiobox-blank": "radio_button_unchecked",
+  "mdi-form-textbox": "text_fields",
+  "mdi-text": "subject",
+  "mdi-format-list-bulleted": "format_list_bulleted",
+  "mdi-format-list-numbered": "format_list_numbered",
+  "mdi-format-header-1": "format_h1",
+  "mdi-keyboard-return": "keyboard_return",
+  "mdi-keyboard-space": "space_bar",
+  "mdi-apple-keyboard-command": "keyboard_command_key",
+  "mdi-apple-keyboard-control": "keyboard_control_key",
+  "mdi-apple-keyboard-option": "keyboard_option_key",
+  "mdi-apple-keyboard-shift": "shift",
+
+  // --- time & calendar ---
+  "mdi-calendar": "calendar_month",
+  "mdi-calendar-month-outline": "calendar_month",
+  "mdi-calendar-range": "date_range",
+  "mdi-calendar-check": "event_available",
+  "mdi-calendar-remove": "event_busy",
+  "mdi-calendar-clock": "calendar_clock",
+  "mdi-calendar-start": "today", // NEAREST: no start/end calendar pair
+  "mdi-calendar-end": "event", // NEAREST: no start/end calendar pair
+  "mdi-clock-outline": "schedule",
+  "mdi-clock-check": "update",
+  "mdi-clock-check-outline": "update",
+  "mdi-clock-time-four-outline": "schedule", // NEAREST: no per-hour clock faces
+  "mdi-clock-time-eight-outline": "schedule", // NEAREST: no per-hour clock faces
+  "mdi-timer-outline": "timer",
+
+  // --- files & documents ---
+  "mdi-file": "draft",
+  "mdi-file-outline": "draft",
+  "mdi-file-document-outline": "description",
+  "mdi-file-document-remove-outline": "scan_delete",
+  "mdi-file-question-outline": "unknown_document",
+  "mdi-file-pdf": "picture_as_pdf",
+  "mdi-file-pdf-box": "picture_as_pdf",
+  "mdi-file-pdf-outline": "picture_as_pdf",
+  "mdi-file-word-box": "description", // NEAREST: no per-format document icons
+  "mdi-file-excel": "table_chart", // NEAREST: no per-format document icons
+  "mdi-file-excel-box": "table_chart", // NEAREST: no per-format document icons
+  "mdi-file-powerpoint-box": "slideshow", // NEAREST: no per-format document icons
+  "mdi-file-csv": "csv",
+  "mdi-file-delimited-outline": "csv",
+  "mdi-folder": "folder",
+  "mdi-folder-plus-outline": "create_new_folder",
+  "mdi-folder-zip-outline": "folder_zip",
+  "mdi-zip-box-outline": "folder_zip",
+  "mdi-paperclip": "attach_file",
+  "mdi-clipboard-list": "assignment",
+  "mdi-clipboard-text-outline": "assignment",
+  "mdi-clipboard-check-outline": "assignment_turned_in",
+  "mdi-cloud-upload": "cloud_upload",
+  "mdi-cloud-upload-outline": "cloud_upload",
+  "mdi-database-sync-outline": "sync", // NEAREST: no database-with-sync
+  "mdi-database-search-outline": "manage_search", // NEAREST: no database-with-search
+
+  // --- media & camera ---
+  "mdi-camera": "photo_camera",
+  "mdi-camera-outline": "photo_camera",
+  "mdi-camera-off": "no_photography",
+  "mdi-camera-off-outline": "no_photography",
+  "mdi-camera-plus-outline": "add_a_photo",
+  "mdi-camera-retake": "flip_camera_android", // NEAREST: retake reads as flip
+  "mdi-camera-switch": "cameraswitch",
+  "mdi-cctv": "videocam", // NEAREST: no dome/CCTV camera
+  "mdi-video": "videocam",
+  "mdi-image": "image",
+  "mdi-image-broken": "broken_image",
+  "mdi-play": "play_arrow",
+  "mdi-play-circle-outline": "play_circle",
+  "mdi-pause": "pause",
+  "mdi-fullscreen": "fullscreen",
+  "mdi-fullscreen-exit": "fullscreen_exit",
+  "mdi-microphone": "mic",
+  "mdi-microphone-off": "mic_off",
+  "mdi-volume-high": "volume_up",
+  "mdi-volume-medium": "volume_down",
+  "mdi-volume-low": "volume_mute",
+  "mdi-volume-variant-off": "volume_off",
+  "mdi-eye": "visibility",
+  "mdi-eye-outline": "visibility",
+  "mdi-eye-off": "visibility_off",
+  "mdi-eye-off-outline": "visibility_off",
+  "mdi-view-grid": "grid_view",
+
+  // --- people & accounts ---
+  "mdi-account": "person",
+  "mdi-user": "person",
+  "mdi-account-circle": "account_circle",
+  "mdi-account-plus": "person_add",
+  "mdi-account-off": "person_off",
+  "mdi-account-search-outline": "person_search",
+  "mdi-account-cog-outline": "manage_accounts",
+  "mdi-account-arrow-right": "how_to_reg", // NEAREST: person-with-arrow reads as check-in
+  "mdi-account-multiple": "group",
+  "mdi-account-group": "groups",
+  "mdi-account-badge": "badge",
+  "mdi-card-account-details": "badge",
+  "mdi-card-account-details-outline": "badge",
+  "mdi-card-account-details-star": "badge", // NEAREST: no starred ID card
+  "mdi-card-bulleted-outline": "badge", // NEAREST: access card reads as badge
+  "mdi-credit-card-outline": "credit_card",
+  "mdi-face-recognition": "face", // NEAREST: no face-recognition frame
+  "mdi-briefcase": "work",
+  "mdi-login": "login",
+  "mdi-logout": "logout",
+
+  // --- communication ---
+  "mdi-phone": "call",
+  "mdi-phone-outline": "call",
+  "mdi-phone-hangup": "call_end",
+  "mdi-phone-incoming": "call_received",
+  "mdi-phone-outgoing": "call_made",
+  "mdi-phone-in-talk": "phone_in_talk",
+  "mdi-phone-in-talk-outline": "phone_in_talk",
+  "mdi-email": "mail",
+  "mdi-message": "chat_bubble",
+  "mdi-message-outline": "chat_bubble",
+  "mdi-comment-multiple": "forum",
+  "mdi-link-variant": "link",
+  "mdi-lan-connect": "lan",
+  "mdi-lan-disconnect": "link_off", // NEAREST: no disconnected-LAN glyph
+  "mdi-bluetooth": "bluetooth",
+  "mdi-nfc": "nfc",
+
+  // --- places, security & operations ---
+  "mdi-office-building": "apartment",
+  "mdi-office-building-marker-outline": "location_city",
+  "mdi-building": "apartment",
+  "mdi-domain": "domain",
+  "mdi-home-city-outline": "home_work",
+  "mdi-warehouse": "warehouse",
+  "mdi-storefront-outline": "storefront",
+  "mdi-map-marker": "location_on",
+  "mdi-map-search": "travel_explore", // NEAREST: no map-with-magnifier
+  "mdi-door-open": "door_open",
+  "mdi-key": "key",
+  "mdi-lock": "lock",
+  "mdi-lock-outline": "lock",
+  "mdi-shield-outline": "shield",
+  "mdi-shield-check": "verified_user",
+  "mdi-shield-crown": "admin_panel_settings", // NEAREST: no crowned shield
+  "mdi-qrcode": "qr_code",
+  "mdi-qrcode-scan": "qr_code_scanner",
+  "mdi-barcode-scan": "barcode_scanner",
+  "mdi-car": "directions_car",
+  "mdi-car-back": "directions_car", // NEAREST: no rear-view car
+  "mdi-truck": "local_shipping",
+  "mdi-cart-plus": "add_shopping_cart",
+  "mdi-pool": "pool",
+  "mdi-broom": "cleaning_services",
+  "mdi-spray-bottle": "sanitizer",
+  "mdi-tools": "handyman",
+  "mdi-tree-outline": "park",
+  "mdi-flower": "local_florist",
+  "mdi-weather-sunny": "light_mode",
+  "mdi-weather-night": "dark_mode",
+
+  // mdi's deliberate spacer. No glyph, but `.v-icon` still holds the 1em box.
+  "mdi-blank": "",
+
+  // ------------------------------------------------------------------
+  // Names this package never uses, but the eleven applications do.
+  // ------------------------------------------------------------------
+  // The applications draw their icons through this same set, so a name
+  // missing here is an mdi glyph sitting next to a Material Symbols one on
+  // the same screen - the exact split the sweep exists to remove. Adding
+  // them here means no application repository needs a change of its own.
+  "mdi-view-dashboard": "dashboard",
+  "mdi-chart-bar": "bar_chart",
+  "mdi-update": "update",
+  "mdi-calendar-clock-outline": "calendar_clock",
+  "mdi-calendar-check-outline": "event_available",
+  "mdi-timer-check-outline": "timer", // NEAREST: no timer-with-tick
+  "mdi-timer-remove-outline": "timer_off",
+  "mdi-progress-check": "task_alt", // NEAREST: no progress-arc family
+  "mdi-progress-alert": "error", // NEAREST: no progress-arc family
+  "mdi-progress-question": "help", // NEAREST: no progress-arc family
+  "mdi-comment-outline": "chat_bubble",
+  "mdi-message-text": "chat",
+  "mdi-email-outline": "mail",
+  "mdi-email-fast-outline": "forward_to_inbox",
+  "mdi-bullhorn-outline": "campaign",
+  "mdi-web": "language",
+  "mdi-cellphone": "smartphone",
+  "mdi-cellphone-cog": "phonelink_setup",
+  "mdi-nfc-variant": "nfc",
+  "mdi-nfc-tap": "contactless",
+  "mdi-handshake": "handshake",
+  "mdi-hand-coin-outline": "payments", // NEAREST: no hand-holding-coin
+  "mdi-wallet-outline": "account_balance_wallet",
+  "mdi-credit-card": "credit_card",
+  "mdi-account-credit-card-outline": "credit_card", // NEAREST: no person-with-card
+  "mdi-sale-outline": "sell",
+  "mdi-rocket-launch": "rocket_launch",
+  "mdi-rocket-launch-outline": "rocket_launch",
+  "mdi-robot-happy-outline": "smart_toy",
+  "mdi-account-hard-hat": "engineering",
+  "mdi-account-wrench": "engineering", // NEAREST: no person-with-spanner
+  "mdi-wrench-clock": "build", // NEAREST: no spanner-with-clock
+  "mdi-account-clock": "pending_actions", // NEAREST: no person-with-clock
+  "mdi-account-clock-outline": "pending_actions", // NEAREST: no person-with-clock
+  "mdi-account-remove": "person_remove",
+  "mdi-account-cog": "manage_accounts",
+  "mdi-account-multiple-outline": "group",
+  "mdi-account-group-outline": "groups",
+  "mdi-account-multiple-check-outline": "how_to_reg", // NEAREST: no group-with-tick
+  "mdi-badge-account-outline": "badge",
+  "mdi-shield": "shield",
+  "mdi-shield-account": "admin_panel_settings",
+  "mdi-shield-account-outline": "admin_panel_settings",
+  "mdi-shield-search": "policy",
+  "mdi-office-building-outline": "apartment",
+  "mdi-office-building-marker": "location_city",
+  "mdi-office-building-cog-outline": "apartment", // NEAREST: no building-with-cog
+  "mdi-home-modern": "house",
+  "mdi-sign-text": "signpost",
+  "mdi-car-side": "directions_car", // NEAREST: one car glyph for all views
+  "mdi-car-clock": "directions_car", // NEAREST: no car-with-clock
+  "mdi-car-emergency": "emergency",
+  "mdi-key-variant": "key",
+  "mdi-pencil-box": "edit_square",
+  "mdi-trash": "delete",
+  "mdi-delete-forever-outline": "delete_forever",
+  "mdi-close-box": "disabled_by_default",
+  "mdi-circle-slice-8": "circle",
+  "mdi-help-circle-outline": "help",
+  "mdi-folder-alert": "folder", // NEAREST: no folder-with-alert
+  "mdi-note-text-outline": "description",
+  "mdi-card-text-outline": "article",
+  "mdi-list-box-outline": "list_alt",
+  "mdi-form-select": "dynamic_form", // NEAREST: no form-with-select
+  "mdi-microsoft-excel": "table_chart", // NEAREST: no per-format document icons
+  "mdi-tray-arrow-down": "file_download",
+  "mdi-image-off-outline": "hide_image",
+  "mdi-eye-arrow-right-outline": "visibility", // NEAREST: no eye-with-arrow
+
+  // Landed on staging while this branch was open (the HID screens).
+  "mdi-account-off-outline": "person_off",
+  "mdi-deskphone": "deskphone",
+};

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);
+  }
+});