@7365admin1/layer-common 3.2.8-staging.210 → 3.2.8-staging.211

package/components/HidUserMapping.vue

@@ -0,0 +1,583 @@
+<template>
+  <section class="hid-user-mapping">
+    <v-alert type="info" variant="tonal" density="compact" class="mb-4">
+      This screen links an existing Amico user to an iService record. It does not create,
+      rename, or delete the user on the HID reader. Visitor QR passes are linked from the
+      visitor transaction automatically.
+    </v-alert>
+
+    <TableMain
+      title="HID User Mapping"
+      :headers="headers"
+      :items="users"
+      :loading="loading"
+      :items-per-page="-1"
+      :page="page"
+      :pages="pages"
+      :page-range="pageRange"
+      item-value="_rowKey"
+      show-header
+      @refresh="loadUsers"
+      @update:page="goToPage"
+    >
+      <template #extension>
+        <div class="app-filter-row hid-user-mapping__filters">
+          <AppSelect
+            v-if="readers.length"
+            v-model="selectedReaderId"
+            class="reader-select"
+            :items="readerOptions"
+            @update:model-value="reloadFromFirstPage"
+          />
+          <AppField
+            v-model="search"
+            search
+            placeholder="Search Amico user, UID or registration"
+            @keyup.enter="reloadFromFirstPage"
+          />
+          <AppSelect
+            v-model="mappingFilter"
+            :items="mappingFilterOptions"
+            placeholder="Mapping status"
+            @update:model-value="reloadFromFirstPage"
+          />
+        </div>
+      </template>
+
+      <template #[`item.name`]="{ item }">
+        <span class="app-cell--strong">{{ getRawName(item) }}</span>
+      </template>
+
+      <template #[`item.hidUserId`]="{ item }">
+        <span class="app-cell--num">{{ formatUid(item.hidUserId) }}</span>
+      </template>
+
+      <template #[`item.registration`]="{ item }">
+        <span class="app-cell--num">{{ item.registration || "N/A" }}</span>
+      </template>
+
+      <template #[`item.linkedRecord`]="{ item }">
+        <span :class="isMapped(item) ? 'app-cell--strong' : 'app-cell--muted'">
+          {{ getMappingLabel(item) }}
+        </span>
+      </template>
+
+      <template #[`item.mappingStatus`]="{ item }">
+        <StatusChip :status="isMapped(item) ? 'Mapped' : 'Unmapped'" />
+      </template>
+
+      <template #[`item.action-table`]="{ item }">
+        <v-menu v-if="isMapped(item)">
+          <template #activator="{ props: menuProps }">
+            <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" />
+          </template>
+          <v-list density="compact" min-width="150">
+            <v-list-item title="Change mapping" @click="openMapping(item)" />
+            <v-list-item title="Remove mapping" class="text-error" @click="openUnmap(item)" />
+          </v-list>
+        </v-menu>
+        <AppButton v-else variant="secondary" icon="mdi-link-variant" @click="openMapping(item)">
+          Map
+        </AppButton>
+      </template>
+
+      <template #no-data>
+        <div class="table-card__empty">
+          <v-icon icon="mdi-account-off-outline" size="32" />
+          <span>No HID users found for this mapping filter.</span>
+        </div>
+      </template>
+    </TableMain>
+
+    <v-dialog v-model="mappingDialog" max-width="520" persistent>
+      <v-card rounded="lg">
+        <v-card-title class="small-title">
+          {{ isMapped(selectedUser) ? "Change HID User Mapping" : "Map HID User" }}
+        </v-card-title>
+        <v-card-text>
+          <div class="hid-user-summary">
+            <strong>{{ getRawName(selectedUser) }}</strong>
+            <span>{{ formatUid(selectedUser?.hidUserId) }} · {{ selectedUser?.registration || "No registration" }}</span>
+          </div>
+
+          <div class="field-label">Link To <span>*</span></div>
+          <AppSelect
+            v-model="mappingForm.category"
+            :items="categoryOptions"
+            placeholder="Select record type"
+            class="mb-3"
+            @update:model-value="onCategoryChanged"
+          />
+
+          <div class="field-label">iService Record <span>*</span></div>
+          <AppSelect
+            v-model="mappingForm.subjectId"
+            :items="candidateOptions"
+            :loading="loadingCandidates"
+            placeholder="Select an existing site record"
+          />
+          <p class="field-hint">
+            {{ categoryHint }}
+          </p>
+        </v-card-text>
+        <v-card-actions class="pa-0">
+          <v-btn class="text-none action-cancel" variant="flat" height="44" @click="mappingDialog = false">
+            Cancel
+          </v-btn>
+          <v-btn
+            class="text-none action-submit"
+            variant="flat"
+            height="44"
+            :loading="saving"
+            @click="saveMapping"
+          >
+            Save Mapping
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="unmapDialog" max-width="420" persistent>
+      <v-card rounded="lg">
+        <v-card-title class="small-title">Remove HID User Mapping</v-card-title>
+        <v-card-text>
+          Remove the iService link for <strong>{{ getRawName(selectedUser) }}</strong>?
+          The user and their credentials remain on the HID reader.
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <AppButton variant="ghost" :disabled="saving" @click="unmapDialog = false">Cancel</AppButton>
+          <AppButton :loading="saving" @click="removeMapping">Remove Mapping</AppButton>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar v-model="snackbar.show" :color="snackbar.color" timeout="3500">
+      {{ snackbar.message }}
+    </v-snackbar>
+  </section>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+});
+
+type HidMetadata = Record<string, unknown> & {
+  name?: string;
+  mappingLabel?: string;
+  mappingCategory?: THidPermissionCategory;
+};
+type HidReader = Record<string, unknown> & {
+  _id: string;
+  name?: string;
+  deviceId?: string;
+  portalName?: string;
+};
+type HidReaderUser = Record<string, unknown> & {
+  _id?: string;
+  _rowKey?: string;
+  hidUserId?: string;
+  registration?: string;
+  name?: string;
+  metadata?: HidMetadata;
+  person?: string;
+  member?: string;
+  serviceProvider?: string;
+  visitor?: string;
+};
+
+const { getReaders, getReaderUsers, getPermissionCandidates, createIdentity, updateIdentity, deleteIdentity } = useHidAmico();
+const route = useRoute();
+const orgId = computed(() => String(route.params.org || ""));
+const readers = ref<HidReader[]>([]);
+const users = ref<HidReaderUser[]>([]);
+const selectedReaderId = ref("");
+const search = ref("");
+const mappingFilter = ref<"" | "mapped" | "unmapped">("");
+const page = ref(1);
+const pages = ref(1);
+const total = ref(0);
+const serverPageRange = ref("");
+const loading = ref(false);
+const saving = ref(false);
+const mappingDialog = ref(false);
+const unmapDialog = ref(false);
+const selectedUser = ref<HidReaderUser | null>(null);
+const permissionCandidates = ref<THidPermissionCandidate[]>([]);
+const loadingCandidates = ref(false);
+const snackbar = reactive({ show: false, color: "success", message: "" });
+const mappingForm = reactive({
+  category: "resident" as THidPermissionCategory,
+  subjectId: "",
+});
+
+const headers = [
+  { title: "Amico Name", value: "name", sortable: false },
+  { title: "UID", value: "hidUserId", sortable: false },
+  { title: "Registration No.", value: "registration", sortable: false },
+  { title: "iService Record", value: "linkedRecord", sortable: false },
+  { title: "Status", value: "mappingStatus", sortable: false },
+  { title: "", value: "action-table", sortable: false },
+];
+const mappingFilterOptions = [
+  { title: "All users", value: "" },
+  { title: "Unmapped", value: "unmapped" },
+  { title: "Mapped", value: "mapped" },
+];
+const categoryOptions = [
+  { title: "Resident", value: "resident" },
+  { title: "Property management", value: "property_management" },
+  { title: "Service provider", value: "service_provider" },
+];
+const readerOptions = computed(() => readers.value.map((reader) => ({
+  title: `${reader.name || reader.deviceId || reader._id} - ${reader.portalName || "Portal not configured"}`,
+  value: reader._id,
+})));
+const candidateOptions = computed(() => permissionCandidates.value.map((candidate) => ({
+  title: candidate.subtitle ? `${candidate.name} · ${candidate.subtitle}` : candidate.name,
+  value: candidate.subjectId,
+})));
+const categoryHint = computed(() => {
+  if (mappingForm.category === "service_provider") {
+    return "Service provider candidates are provider records assigned to this site.";
+  }
+  return "The HID identity is linked to one active record at this site.";
+});
+const pageRange = computed(() => {
+  if (serverPageRange.value) return serverPageRange.value;
+  if (!total.value) return "0-0 of 0";
+  const start = (page.value - 1) * 10 + 1;
+  return `${start}-${Math.min(page.value * 10, total.value)} of ${total.value}`;
+});
+
+watch(() => props.site, init, { immediate: true });
+
+async function init() {
+  await loadReaders();
+  await loadUsers();
+}
+
+async function loadReaders() {
+  if (!props.site) return;
+  try {
+    const response = toRecord(await getReaders({ site: props.site, page: 1, limit: 100 }));
+    const data = toRecord(response.data);
+    const items = response.items ?? data.items ?? data.readers ?? [];
+    readers.value = (Array.isArray(items) ? items : [])
+      .map(toReader)
+      .filter((reader): reader is HidReader => reader !== null);
+    if (!selectedReaderId.value && readers.value.length) selectedReaderId.value = readers.value[0]._id;
+  } catch (error: unknown) {
+    readers.value = [];
+    showToast(getErrorMessage(error), "error");
+  }
+}
+
+async function loadUsers() {
+  if (!selectedReaderId.value) {
+    users.value = [];
+    total.value = 0;
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const response = toRecord(await getReaderUsers(selectedReaderId.value, {
+      page: page.value,
+      limit: 10,
+      search: search.value.trim(),
+      status: mappingFilter.value,
+    }));
+    const data = toRecord(response.data);
+    const items = response.items ?? data.items ?? [];
+    users.value = (Array.isArray(items) ? items : []).map(toReaderUser);
+    total.value = toNumber(response.total ?? data.total, users.value.length);
+    pages.value = Math.max(1, toNumber(response.pages ?? data.pages, 1));
+    serverPageRange.value = toText(response.pageRange ?? data.pageRange);
+  } catch (error: unknown) {
+    users.value = [];
+    total.value = 0;
+    pages.value = 1;
+    serverPageRange.value = "";
+    showToast(getErrorMessage(error), "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
+function goToPage(nextPage: number) {
+  page.value = nextPage;
+  loadUsers();
+}
+
+function reloadFromFirstPage() {
+  page.value = 1;
+  loadUsers();
+}
+
+async function openMapping(user: HidReaderUser) {
+  selectedUser.value = user;
+  mappingForm.category = getMappingCategory(user);
+  mappingForm.subjectId = getMappedSubjectId(user);
+  await loadCandidates();
+  mappingDialog.value = true;
+}
+
+async function onCategoryChanged() {
+  mappingForm.subjectId = "";
+  await loadCandidates();
+}
+
+async function loadCandidates() {
+  if (!selectedReaderId.value || !orgId.value) {
+    permissionCandidates.value = [];
+    return;
+  }
+  loadingCandidates.value = true;
+  try {
+    const response = await getPermissionCandidates(props.site, {
+      orgId: orgId.value,
+      readerId: selectedReaderId.value,
+      category: mappingForm.category,
+      page: 1,
+      limit: 500,
+    });
+    permissionCandidates.value = response.items ?? response.data?.items ?? [];
+  } catch (error: unknown) {
+    permissionCandidates.value = [];
+    showToast(getErrorMessage(error), "error");
+  } finally {
+    loadingCandidates.value = false;
+  }
+}
+
+async function saveMapping() {
+  const user = selectedUser.value;
+  const hidUserId = toText(user?.hidUserId);
+  const candidate = permissionCandidates.value.find((item) => item.subjectId === mappingForm.subjectId);
+  if (!user || !selectedReaderId.value || !hidUserId || !candidate) {
+    showToast("Select an iService record to create the HID user mapping.", "error");
+    return;
+  }
+
+  saving.value = true;
+  try {
+    const payload = {
+      site: props.site,
+      hidUserId,
+      registration: toText(user.registration),
+      person: mappingForm.category === "resident" ? candidate.subjectId : "",
+      member: mappingForm.category === "property_management" ? candidate.subjectId : "",
+      serviceProvider: mappingForm.category === "service_provider" ? candidate.subjectId : "",
+      type: getIdentityType(mappingForm.category),
+      status: "active" as const,
+      metadata: {
+        ...toRecord(user.metadata),
+        name: getRawName(user),
+        mappingLabel: candidate.subtitle ? `${candidate.name} · ${candidate.subtitle}` : candidate.name,
+        mappingCategory: mappingForm.category,
+      },
+    };
+    const identityId = getIdentityId(user);
+    if (identityId) {
+      await updateIdentity(identityId, payload);
+    } else {
+      await createIdentity(selectedReaderId.value, payload);
+    }
+    mappingDialog.value = false;
+    await loadUsers();
+    showToast("HID user mapping saved.");
+  } catch (error: unknown) {
+    showToast(getErrorMessage(error), "error");
+  } finally {
+    saving.value = false;
+  }
+}
+
+function openUnmap(user: HidReaderUser) {
+  selectedUser.value = user;
+  unmapDialog.value = true;
+}
+
+async function removeMapping() {
+  const identityId = selectedUser.value ? getIdentityId(selectedUser.value) : "";
+  if (!identityId) {
+    showToast("This HID user does not have a removable iService mapping.", "error");
+    return;
+  }
+  saving.value = true;
+  try {
+    await deleteIdentity(identityId);
+    unmapDialog.value = false;
+    await loadUsers();
+    showToast("HID user mapping removed. The reader user is unchanged.");
+  } catch (error: unknown) {
+    showToast(getErrorMessage(error), "error");
+  } finally {
+    saving.value = false;
+  }
+}
+
+function isMapped(user?: HidReaderUser | null) {
+  return Boolean(user?.person || user?.member || user?.serviceProvider || user?.visitor);
+}
+
+function getIdentityId(user: HidReaderUser) {
+  return isMapped(user) ? toText(user._id) : "";
+}
+
+function getMappingCategory(user: HidReaderUser): THidPermissionCategory {
+  if (user.serviceProvider) return "service_provider";
+  if (user.member) return "property_management";
+  return "resident";
+}
+
+function getMappedSubjectId(user: HidReaderUser) {
+  return toText(user.person) || toText(user.member) || toText(user.serviceProvider);
+}
+
+function getMappingLabel(user: HidReaderUser) {
+  if (!isMapped(user)) return "Unmapped";
+  return toText(user.metadata?.mappingLabel) || `${getCategoryTitle(getMappingCategory(user))} record`;
+}
+
+function getCategoryTitle(category: THidPermissionCategory) {
+  return category === "property_management"
+    ? "Property management"
+    : category === "service_provider" ? "Service provider" : "Resident";
+}
+
+function getIdentityType(category: THidPermissionCategory) {
+  return category === "resident"
+    ? "resident" as const
+    : category === "service_provider" ? "contractor" as const : "staff" as const;
+}
+
+function getRawName(user?: HidReaderUser | null) {
+  return toText(user?.metadata?.name) || toText(user?.name) || "Unknown";
+}
+
+function formatUid(value: unknown) {
+  const text = toText(value);
+  if (!text) return "N/A";
+  const numeric = Number(text);
+  return Number.isSafeInteger(numeric) && numeric > 0 ? `UID${String(numeric).padStart(6, "0")}` : text;
+}
+
+function showToast(message: string, color = "success") {
+  snackbar.message = message;
+  snackbar.color = color;
+  snackbar.show = true;
+}
+
+function getErrorMessage(error: unknown) {
+  const record = toRecord(error);
+  const data = toRecord(record.data);
+  return toText(data.message) || toText(record.message) || "Unable to update HID user mapping.";
+}
+
+function toReader(value: unknown): HidReader | null {
+  const reader = toRecord(value);
+  const id = toText(reader._id);
+  return id ? { ...reader, _id: id, name: toText(reader.name) || undefined } : null;
+}
+
+function toReaderUser(value: unknown): HidReaderUser {
+  const user = toRecord(value);
+  return {
+    ...user,
+    _id: toText(user._id) || undefined,
+    _rowKey: toText(user._rowKey) || toText(user.id) || toText(user.hidUserId),
+    hidUserId: toText(user.hidUserId) || toText(user.id) || undefined,
+    registration: toText(user.registration) || undefined,
+    name: toText(user.name) || undefined,
+    metadata: toMetadata(user.metadata),
+    person: toText(user.person) || undefined,
+    member: toText(user.member) || undefined,
+    serviceProvider: toText(user.serviceProvider) || undefined,
+    visitor: toText(user.visitor) || undefined,
+  };
+}
+
+function toMetadata(value: unknown): HidMetadata {
+  return toRecord(value) as HidMetadata;
+}
+
+function toRecord(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : {};
+}
+
+function toText(value: unknown) {
+  if (typeof value === "string") return value.trim();
+  if (typeof value === "number") return String(value);
+  return "";
+}
+
+function toNumber(value: unknown, fallback: number) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+</script>
+
+<style scoped>
+.hid-user-mapping {
+  padding: 24px 0;
+  min-width: 0;
+}
+
+.hid-user-mapping__filters {
+  margin: 0;
+  padding: 10px 14px;
+}
+
+.hid-user-mapping__filters :deep(.app-field) {
+  max-width: 320px;
+}
+
+.small-title,
+.field-label,
+.hid-user-summary strong {
+  color: var(--text);
+}
+
+.small-title {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.field-label {
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.field-label span {
+  color: var(--err);
+}
+
+.field-hint {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.hid-user-summary {
+  display: grid;
+  gap: 4px;
+  margin-bottom: 18px;
+}
+
+.hid-user-summary span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+</style>

package/composables/useHidAmico.ts

@@ -101,6 +101,14 @@ type HidFacialEnrollmentResult = {
   errors?: Array<{ code?: number; message?: string }>;
 };
 
+export type HidFacialSyncResult = {
+  readerId: string;
+  facialDetected: number;
+  syncedCount: number;
+  unmappedCount: number;
+  message: string;
+};
+
 export type HidPhysicalCardType = "pacs" | "csn";
 
 export type HidPhysicalCard = {
@@ -191,6 +199,13 @@ export default function useHidAmico() {
     });
   }
 
+  function syncReaderFacialData(readerId: string) {
+    return useNuxtApp().$api<{ data: HidFacialSyncResult }>(
+      `${basePath}/readers/${readerId}/facial-sync`,
+      { method: "POST" },
+    );
+  }
+
   function configureReaderIntegration(readerId: string) {
     return useNuxtApp().$api<HidApiRecord>(`${basePath}/readers/${readerId}/configure`, {
       method: "POST",
@@ -254,6 +269,7 @@ export default function useHidAmico() {
     limit?: number;
     search?: string;
     status?: "mapped" | "unmapped" | "";
+    includeVisitors?: boolean;
   } = {}) {
     return useNuxtApp().$api<HidCollectionResponse>(`${basePath}/readers/${readerId}/users`, {
       method: "GET",
@@ -267,7 +283,7 @@ export default function useHidAmico() {
     search?: string;
     status?: "authorized" | "not_authorized" | "unknown" | "";
     method?: "facial" | "qr_code" | "id_password" | "pin" | "card" | "";
-    tab?: "resident" | "visitor" | "administrator";
+    tab?: "all" | "unmapped" | "mapped" | "resident" | "visitor" | "administrator";
   } = {}) {
     return useNuxtApp().$api<HidCollectionResponse>(`${basePath}/readers/${readerId}/access-logs`, {
       method: "GET",
@@ -499,6 +515,7 @@ export default function useHidAmico() {
     deleteReader,
     testReader,
     syncReader,
+    syncReaderFacialData,
     configureReaderIntegration,
     setReaderMonitor,
     setReaderOperatingMode,

package/composables/useHidNavigation.ts

@@ -23,12 +23,19 @@ export default function useHidNavigation() {
           },
         },
         {
-          title: "HID Users",
+          title: "HID Reader Users",
           route: {
             name: "org-site-access-mgmt-hid-users",
             params: { org, site },
           },
         },
+        {
+          title: "HID User Mapping",
+          route: {
+            name: "org-site-access-mgmt-hid-user-mapping",
+            params: { org, site },
+          },
+        },
         {
           title: "HID Cards",
           route: {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.8-staging.210",
+  "version": "3.2.8-staging.211",
   "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.",

package/pages/[org]/[site]/access-mgmt/hid-user-mapping/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-container fluid>
+    <HidEnabledGate
+      :site="siteId"
+      :org="orgId"
+      message="Enable HID as a service for this site before mapping HID users."
+    >
+      <HidUserMapping :site="siteId" />
+    </HidEnabledGate>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "default",
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+
+const route = useRoute();
+const siteId = computed(() => String(route.params.site ?? ""));
+const orgId = computed(() => String(route.params.org ?? ""));
+</script>

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

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