@7365admin1/layer-common 3.0.7 → 3.0.9

package/components/HidUserEnrollment.vue

@@ -0,0 +1,1274 @@
+<template>
+  <section class="hid-user-enrollment">
+    <div class="toolbar">
+      <v-btn
+        rounded="xl"
+        class="text-none enroll-button"
+        variant="flat"
+        prepend-icon="mdi-account-plus"
+        @click="openEnroll"
+      >
+        Enroll
+      </v-btn>
+
+      <v-select
+        v-if="readers.length > 1"
+        v-model="selectedReaderId"
+        :items="readerOptions"
+        item-title="title"
+        item-value="value"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="reader-input"
+        @update:model-value="loadUsers"
+      />
+
+      <div class="toolbar-spacer" />
+
+      <v-text-field
+        v-model="search"
+        placeholder="Search"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="search-input"
+        prepend-inner-icon="mdi-magnify"
+        @keyup.enter="loadUsers"
+      />
+
+      <v-select
+        v-model="status"
+        :items="statusOptions"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="status-input"
+        @update:model-value="loadUsers"
+      />
+    </div>
+
+    <v-card flat border class="table-card">
+      <div class="table-refresh">
+        <v-btn icon="mdi-refresh" variant="text" density="comfortable" :loading="loading" @click="loadUsers" />
+        <div class="page-count">{{ pageRange }}</div>
+      </div>
+
+      <div class="table-body">
+        <v-table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Facial Data</th>
+              <th>UID</th>
+              <th>Status</th>
+              <th class="text-right"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="user in users" :key="user._rowKey || user._id || user.hidUserId">
+              <td>{{ getName(user) }}</td>
+              <td>
+                <v-avatar v-if="getUserImageSrc(user)" size="34" rounded="lg" class="hid-face-avatar">
+                  <v-img :src="getUserImageSrc(user)" cover />
+                </v-avatar>
+                <span v-else>{{ getFacialData(user) }}</span>
+              </td>
+              <td>{{ formatHidUid(user.hidUserId) || "N/A" }}</td>
+              <td>
+                <v-chip
+                  size="small"
+                  variant="flat"
+                  class="status-chip"
+                  :class="getMappingStatusClass(user)"
+                >
+                  {{ getMappingStatus(user) }}
+                </v-chip>
+              </td>
+              <td class="text-right">
+                <v-menu>
+                  <template #activator="{ props: menuProps }">
+                    <v-btn v-bind="menuProps" icon="mdi-dots-vertical" variant="text" density="comfortable" />
+                  </template>
+
+                  <v-list density="compact" min-width="150">
+                    <v-list-item title="View" @click="openView(user)" />
+                    <v-list-item title="Edit" @click="openEdit(user)" />
+                    <v-list-item title="Delete" class="text-error" @click="openDelete(user)" />
+                  </v-list>
+                </v-menu>
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+
+        <div v-if="!users.length" class="empty-state">
+          No HID users enrolled yet.
+        </div>
+      </div>
+
+      <div class="table-footer">
+        <span>{{ pageRange }}</span>
+        <v-btn icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="page--; loadUsers()" />
+        <v-btn icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= pages" @click="page++; loadUsers()" />
+      </div>
+    </v-card>
+
+    <v-dialog v-model="formDialog" max-width="420" persistent>
+      <v-card rounded="lg">
+        <v-card-title class="small-title">
+          {{ selectedUser ? "Edit User Information" : "Enroll" }}
+        </v-card-title>
+
+        <v-card-text>
+          <div class="photo-wrap">
+            <v-menu>
+              <template #activator="{ props: menuProps }">
+                <button v-bind="menuProps" class="photo-button" type="button">
+                  <v-img v-if="form.photoPreview" :src="form.photoPreview" cover class="photo-preview" />
+                  <span v-if="form.photoPreview" class="photo-edit-icon">
+                    <v-icon icon="mdi-pencil" size="16" />
+                  </span>
+                  <template v-else>
+                    <v-icon icon="mdi-account-plus" size="40" color="#a4acb5" />
+                    <span>Add Photo</span>
+                  </template>
+                </button>
+              </template>
+              <v-list density="compact" min-width="190">
+                <v-list-item title="Browse" @click="triggerPhotoInput" />
+                <v-list-item title="Take Photo using Camera" @click="triggerPhotoInput" />
+              </v-list>
+            </v-menu>
+            <input ref="photoInput" type="file" accept="image/*" class="hidden-input" @change="onPhotoChange" />
+          </div>
+
+          <div class="field-label">Name <span>*</span></div>
+          <v-text-field
+            v-model="form.name"
+            aria-label="Name"
+            placeholder="Enter name"
+            density="compact"
+            variant="outlined"
+            hide-details="auto"
+            class="mb-3"
+          />
+
+          <div class="field-label">ID</div>
+          <v-text-field
+            v-model="form.hidUserId"
+            aria-label="ID"
+            density="compact"
+            variant="outlined"
+            hide-details="auto"
+            readonly
+            class="mb-3"
+          />
+
+          <div class="field-label">Registration No. <span>*</span></div>
+          <v-text-field
+            v-model="form.registration"
+            aria-label="Registration No."
+            placeholder="Enter registration no."
+            density="compact"
+            variant="outlined"
+            hide-details="auto"
+            :readonly="!selectedUser"
+            class="mb-3"
+          />
+
+          <div class="field-label">Panic Pin (optional)</div>
+          <v-text-field
+            v-model="form.cardNo"
+            aria-label="Panic Pin"
+            placeholder="Enter panic pin"
+            density="compact"
+            variant="outlined"
+            hide-details="auto"
+            class="mb-3"
+          />
+
+          <div class="field-label">Panic Password (optional)</div>
+          <v-text-field
+            v-model="form.pinPassword"
+            aria-label="Panic Password"
+            placeholder="Enter password"
+            density="compact"
+            variant="outlined"
+            hide-details="auto"
+            :type="showPassword ? 'text' : 'password'"
+            :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
+            @click:append-inner="showPassword = !showPassword"
+          />
+        </v-card-text>
+
+        <v-card-actions class="pa-0">
+          <v-btn class="text-none action-cancel" variant="flat" height="44" @click="formDialog = false">Cancel</v-btn>
+          <v-btn class="text-none action-submit" variant="flat" height="44" :loading="saving" @click="saveUser">
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="viewDialog" max-width="430">
+      <v-card rounded="lg">
+        <v-card-title class="small-title">User Information</v-card-title>
+        <v-card-text>
+          <div class="detail-grid">
+            <span>Name</span><strong>{{ getName(selectedUser) }}</strong>
+            <span>User ID</span><strong>{{ selectedUser ? formatHidUid(selectedUser.hidUserId) : "N/A" }}</strong>
+            <span>Registration No.</span><strong>{{ selectedUser?.registration || "N/A" }}</strong>
+            <span>Last access time</span><strong>{{ formatDate(selectedUser?.metadata?.lastAccessAt) }}</strong>
+            <span>Status</span><strong>{{ selectedUser ? getMappingStatus(selectedUser) : "N/A" }}</strong>
+            <span>Panic Pin</span><strong>{{ selectedUser?.cardNo || "N/A" }}</strong>
+            <span>Private Password</span><strong>{{ selectedUser?.metadata?.pinPassword ? "********" : "N/A" }}</strong>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn class="text-none" variant="text" @click="viewDialog = false">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="deleteDialog" max-width="360" persistent>
+      <v-card rounded="lg">
+        <v-card-title class="small-title">Delete</v-card-title>
+        <v-card-text class="text-body-2">
+          Are you sure you want to permanently delete this HID user?
+          <div class="text-caption text-medium-emphasis mt-2">
+            This action will remove the user from the HID reader and mark the identity as deleted.
+          </div>
+        </v-card-text>
+        <v-card-actions class="pa-0">
+          <v-btn class="text-none action-cancel" variant="flat" height="44" @click="deleteDialog = false">Cancel</v-btn>
+          <v-btn class="text-none action-submit" variant="flat" height="44" :loading="deleting" @click="deleteUser">Delete</v-btn>
+        </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,
+  },
+  identityType: {
+    type: String,
+    default: "resident",
+  },
+});
+
+const {
+  getReaders,
+  getIdentities,
+  getUserImage,
+  runObjectOperation,
+  createIdentity,
+  updateIdentity,
+  deleteIdentity,
+} = useHidAmico();
+
+const readers = ref<Record<string, any>[]>([]);
+const users = ref<Record<string, any>[]>([]);
+const userImages = ref<Record<string, string>>({});
+const selectedReaderId = ref("");
+const search = ref("");
+const status = ref("Status");
+const page = ref(1);
+const limit = ref(10);
+const pages = ref(1);
+const total = ref(0);
+const serverPageRange = ref("");
+const loading = ref(false);
+const saving = ref(false);
+const deleting = ref(false);
+const formDialog = ref(false);
+const viewDialog = ref(false);
+const deleteDialog = ref(false);
+const selectedUser = ref<Record<string, any> | null>(null);
+const showPassword = ref(false);
+const photoInput = ref<HTMLInputElement | null>(null);
+const snackbar = reactive({
+  show: false,
+  color: "success",
+  message: "",
+});
+
+const form = reactive({
+  reader: "",
+  block: "",
+  level: "",
+  unit: "",
+  name: "",
+  hidUserId: "",
+  registration: "",
+  cardNo: "",
+  pinPassword: "",
+  photoPreview: "",
+});
+
+const statusOptions = ["Status", "Mapped", "Unmapped"];
+
+const readerOptions = computed(() =>
+  readers.value.map((reader) => ({
+    title: reader.name || reader.deviceId || reader._id,
+    value: reader._id,
+  })),
+);
+
+const pageRange = computed(() => {
+  if (serverPageRange.value) return serverPageRange.value;
+  if (!total.value) return "0-0 of 0";
+  const start = (page.value - 1) * limit.value + 1;
+  const end = Math.min(page.value * limit.value, total.value);
+  return `${start}-${end} of ${total.value}`;
+});
+
+watch(
+  () => props.site,
+  () => init(),
+  { immediate: true },
+);
+
+async function init() {
+  await loadReaders();
+  await loadUsers();
+}
+
+async function loadReaders() {
+  if (!props.site) return;
+  const response = await getReaders({ site: props.site, page: 1, limit: 100 });
+  readers.value = response?.items ?? response?.data?.items ?? response?.data?.readers ?? [];
+  if (!selectedReaderId.value && readers.value.length) {
+    selectedReaderId.value = readers.value[0]._id;
+  }
+}
+
+async function loadUsers() {
+  if (!selectedReaderId.value) {
+    users.value = [];
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const identityQuery: Record<string, any> = {
+      page: page.value,
+      limit: 500,
+      type: props.identityType,
+      search: search.value,
+    };
+
+    const [identityResponse, readerResponse, roleResponse] = await Promise.all([
+      getIdentities(selectedReaderId.value, identityQuery),
+      runObjectOperation(selectedReaderId.value, {
+        operation: "load",
+        object: "users",
+        limit: 500,
+        offset: 0,
+      }),
+      isAdministratorIdentity() ? loadAdministratorRoles(selectedReaderId.value) : Promise.resolve(null),
+    ]);
+
+    const identities = identityResponse?.items ?? identityResponse?.data?.items ?? identityResponse?.data?.identities ?? [];
+    const adminRoleIds = getAdministratorRoleUserIds(roleResponse);
+    const readerUsers = normalizeHidUsers(readerResponse).filter((user) => {
+      if (!isAdministratorIdentity()) return true;
+      const hidUserId = toHidNumericId(user.hidUserId);
+      return Boolean(hidUserId && adminRoleIds.has(hidUserId));
+    });
+    const mergedUsers = mergeReaderUsersWithIdentities(readerUsers, identities);
+    const filteredUsers = filterUsers(mergedUsers);
+    total.value = filteredUsers.length;
+    pages.value = Math.max(1, Math.ceil(total.value / limit.value));
+    if (page.value > pages.value) page.value = pages.value;
+    const start = (page.value - 1) * limit.value;
+    users.value = filteredUsers.slice(start, start + limit.value);
+    serverPageRange.value = "";
+    await loadUserImages(users.value);
+  } catch (error) {
+    console.error("Unable to load HID reader users:", error);
+    showToast("Unable to load HID users from reader.", "error");
+    users.value = [];
+    total.value = 0;
+    pages.value = 1;
+    serverPageRange.value = "";
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadUserImages(items: Record<string, any>[]) {
+  if (!selectedReaderId.value) return;
+
+  await Promise.all(items.map(async (user) => {
+    const hidUserId = toHidNumericId(user.hidUserId);
+    const key = String(hidUserId || "");
+    if (!hidUserId || userImages.value[key] || user?.metadata?.photo) return;
+
+    try {
+      const response = await getUserImage(selectedReaderId.value, hidUserId);
+      const image = response?.data || response;
+      userImages.value[key] = image?.base64
+        ? `data:${image.contentType || "image/jpeg"};base64,${image.base64}`
+        : "";
+    } catch {
+      userImages.value[key] = "";
+    }
+  }));
+}
+
+function resetForm() {
+  form.reader = selectedReaderId.value || readers.value[0]?._id || "";
+  form.block = "";
+  form.level = "";
+  form.unit = "";
+  form.name = "";
+  form.hidUserId = "";
+  form.registration = "";
+  form.cardNo = "";
+  form.pinPassword = "";
+  form.photoPreview = "";
+}
+
+async function openEnroll() {
+  selectedUser.value = null;
+  resetForm();
+  const [hidUserId, registration] = await Promise.all([
+    getNextUid(),
+    getNextRegistration(),
+  ]);
+  form.hidUserId = hidUserId;
+  form.registration = registration;
+  formDialog.value = true;
+}
+
+async function openEdit(user: Record<string, any>) {
+  selectedUser.value = user;
+  form.reader = String(user.reader ?? selectedReaderId.value);
+  form.block = user.metadata?.block ?? "";
+  form.level = user.metadata?.level ?? "";
+  form.unit = user.metadata?.unit ?? "";
+  form.name = getName(user);
+  form.hidUserId = formatHidUid(user.hidUserId);
+  form.registration = user.registration ?? "";
+  form.cardNo = user.cardNo ?? "";
+  form.pinPassword = user.metadata?.pinPassword ?? "";
+  form.photoPreview = getUserImageSrc(user);
+  formDialog.value = true;
+
+  if (!form.photoPreview) {
+    await loadUserImages([user]);
+    if (selectedUser.value?._rowKey === user._rowKey) {
+      form.photoPreview = getUserImageSrc(user);
+    }
+  }
+}
+
+function openView(user: Record<string, any>) {
+  selectedUser.value = user;
+  viewDialog.value = true;
+}
+
+function openDelete(user: Record<string, any>) {
+  selectedUser.value = user;
+  deleteDialog.value = true;
+}
+
+function triggerPhotoInput() {
+  photoInput.value?.click();
+}
+
+function onPhotoChange(event: Event) {
+  const file = (event.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = () => {
+    form.photoPreview = String(reader.result || "");
+  };
+  reader.readAsDataURL(file);
+}
+
+async function saveUser() {
+  const readerId = selectedReaderId.value || form.reader || readers.value[0]?._id;
+  if (!readerId || !form.name || !form.hidUserId || !form.registration) {
+    showToast("Please complete the required HID user fields.", "error");
+    return;
+  }
+
+  saving.value = true;
+  try {
+    const hidUser = toHidUserObject({
+      hidUserId: form.hidUserId,
+      name: form.name,
+      registration: form.registration,
+    });
+    if (!hidUser.id) {
+      showToast("HID user ID must contain a valid numeric value.", "error");
+      return;
+    }
+
+    const payload = {
+      hidUserId: String(hidUser.id),
+      registration: form.registration,
+      cardNo: form.cardNo,
+      type: props.identityType as "resident" | "staff" | "contractor" | "visitor" | "admin" | "unknown",
+      status: "active" as const,
+      metadata: {
+        name: form.name,
+        block: form.block,
+        level: form.level,
+        unit: form.unit,
+        unitLabel: buildUnitLabel(),
+        facialData: form.photoPreview ? form.hidUserId : "",
+        photo: form.photoPreview,
+        pinPassword: form.pinPassword,
+      },
+    };
+
+    if (selectedUser.value) {
+      await updateHidUserOnReader(readerId, hidUser);
+      await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
+      if (selectedUser.value._id) {
+        await updateIdentity(selectedUser.value._id, payload);
+      } else {
+        await saveIdentityOnReader(readerId, payload);
+      }
+    } else {
+      await createHidUserOnReader(readerId, hidUser);
+      await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
+      await saveIdentityOnReader(readerId, payload);
+      selectedReaderId.value = readerId;
+    }
+
+    formDialog.value = false;
+    await loadUsers();
+    showToast(selectedUser.value?._id ? "HID user updated on reader." : "HID user enrolled on reader.");
+  } catch (error: any) {
+    console.error("Unable to save HID user:", error);
+    showToast(getHidErrorMessage(error), "error");
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function deleteUser() {
+  if (!selectedUser.value) return;
+
+  deleting.value = true;
+  try {
+    await syncHidUserRole(selectedReaderId.value, toHidNumericId(selectedUser.value.hidUserId), false);
+    await deleteHidUserFromReader(selectedReaderId.value, selectedUser.value);
+    if (selectedUser.value._id) {
+      await deleteIdentity(selectedUser.value._id);
+    }
+    deleteDialog.value = false;
+    await loadUsers();
+    showToast("HID user deleted from reader.");
+  } catch (error: any) {
+    console.error("Unable to delete HID user:", error);
+    showToast(getHidErrorMessage(error), "error");
+  } finally {
+    deleting.value = false;
+  }
+}
+
+async function saveIdentityOnReader(readerId: string, payload: Record<string, any>) {
+  const existingIdentity = await findExistingIdentityOnReader(readerId, payload);
+  if (existingIdentity?._id) {
+    await updateIdentity(existingIdentity._id, payload);
+    return;
+  }
+
+  try {
+    await createIdentity(readerId, { ...payload, site: props.site });
+  } catch (error: any) {
+    const message = getHidErrorMessage(error);
+    if (!message.toLowerCase().includes("already exists")) throw error;
+
+    const duplicatedIdentity = await findExistingIdentityOnReader(readerId, payload);
+    if (!duplicatedIdentity?._id) throw error;
+    await updateIdentity(duplicatedIdentity._id, payload);
+  }
+}
+
+async function findExistingIdentityOnReader(readerId: string, payload: Record<string, any>) {
+  const response = await getIdentities(readerId, {
+    page: 1,
+    limit: 500,
+    search: payload.hidUserId || payload.registration || payload.cardNo || "",
+  });
+  const identities = response?.items ?? response?.data?.items ?? response?.data?.identities ?? [];
+  const hidUserId = String(payload.hidUserId || "");
+  const registration = String(payload.registration || "");
+  const cardNo = String(payload.cardNo || "");
+
+  return identities.find((identity: Record<string, any>) =>
+    String(identity.hidUserId || "") === hidUserId ||
+    Boolean(registration && String(identity.registration || "") === registration) ||
+    Boolean(cardNo && String(identity.cardNo || "") === cardNo),
+  );
+}
+
+async function createHidUserOnReader(readerId: string, user: Record<string, any>) {
+  const existing = await getHidUserFromReader(readerId, user.id);
+  if (existing) {
+    await updateHidUserOnReader(readerId, user);
+    return;
+  }
+
+  await runObjectOperation(readerId, {
+    operation: "create",
+    object: "users",
+    values: [user],
+  });
+}
+
+async function getHidUserFromReader(readerId: string, id: unknown) {
+  if (!readerId || !id) return undefined;
+  const response = await runObjectOperation(readerId, {
+    operation: "load",
+    object: "users",
+    where: {
+      users: {
+        id,
+      },
+    },
+    limit: 1,
+    offset: 0,
+  });
+  return normalizeHidUsers(response)[0];
+}
+
+async function updateHidUserOnReader(readerId: string, user: Record<string, any>) {
+  const { id, ...values } = user;
+  await runObjectOperation(readerId, {
+    operation: "modify",
+    object: "users",
+    where: {
+      users: {
+        id,
+      },
+    },
+    values,
+  });
+}
+
+async function deleteHidUserFromReader(readerId: string, user: Record<string, any>) {
+  const id = toHidNumericId(user.hidUserId);
+  if (!readerId || !id) return;
+
+  await runObjectOperation(readerId, {
+    operation: "destroy",
+    object: "users",
+    where: {
+      users: {
+        id,
+      },
+    },
+  });
+}
+
+async function syncHidUserRole(readerId: string, hidUserId: unknown, isAdministrator: boolean) {
+  const userId = toHidNumericId(hidUserId);
+  if (!readerId || !userId) return;
+
+  const existingRole = await getHidUserRole(readerId, userId);
+  if (isAdministrator) {
+    if (existingRole) {
+      await runObjectOperation(readerId, {
+        operation: "modify",
+        object: "user_roles",
+        where: {
+          user_roles: {
+            user_id: userId,
+          },
+        },
+        values: {
+          role: 1,
+        },
+      });
+      return;
+    }
+
+    await runObjectOperation(readerId, {
+      operation: "create",
+      object: "user_roles",
+      values: [
+        {
+          user_id: userId,
+          role: 1,
+        },
+      ],
+    });
+    return;
+  }
+
+  if (existingRole) {
+    await runObjectOperation(readerId, {
+      operation: "destroy",
+      object: "user_roles",
+      where: {
+        user_roles: {
+          user_id: userId,
+        },
+      },
+    });
+  }
+}
+
+async function getHidUserRole(readerId: string, userId: number) {
+  const response = await runObjectOperation(readerId, {
+    operation: "load",
+    object: "user_roles",
+    where: {
+      user_roles: {
+        user_id: userId,
+      },
+    },
+    limit: 1,
+    offset: 0,
+  });
+  const data = response?.data || response || {};
+  const roles =
+    data?.user_roles ||
+    data?.data?.user_roles ||
+    data?.result?.user_roles ||
+    [];
+  return Array.isArray(roles) ? roles[0] : undefined;
+}
+
+function loadAdministratorRoles(readerId: string) {
+  return runObjectOperation(readerId, {
+    operation: "load",
+    object: "user_roles",
+    where: {
+      user_roles: {
+        role: 1,
+      },
+    },
+    limit: 500,
+    offset: 0,
+  });
+}
+
+function getAdministratorRoleUserIds(response: Record<string, any> | null) {
+  const data = response?.data || response || {};
+  const roles =
+    data?.user_roles ||
+    data?.data?.user_roles ||
+    data?.result?.user_roles ||
+    [];
+
+  return new Set(
+    (Array.isArray(roles) ? roles : [])
+      .map((role) => toHidNumericId(role.user_id))
+      .filter((userId): userId is number => Boolean(userId)),
+  );
+}
+
+function toHidUserObject(identity: Record<string, any>) {
+  return {
+    id: toHidNumericId(identity.hidUserId),
+    name: identity.metadata?.name || identity.name || `User ${identity.hidUserId || ""}`.trim(),
+    registration: identity.registration || "",
+  };
+}
+
+function toHidNumericId(value: unknown) {
+  const raw = String(value ?? "").trim();
+  if (!raw) return undefined;
+  const numeric = Number(raw);
+  if (Number.isInteger(numeric) && numeric > 0) return numeric;
+  const match = raw.match(/(\d+)$/);
+  const parsed = match ? Number(match[1]) : NaN;
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;
+}
+
+function isAdministratorIdentity() {
+  return props.identityType === "admin";
+}
+
+function buildUnitLabel() {
+  const parts = [form.block, form.level, form.unit].filter(Boolean);
+  return parts.length ? `BLK ${parts.join("/")}` : "";
+}
+
+function getName(user?: Record<string, any> | null) {
+  return user?.metadata?.name || user?.name || "N/A";
+}
+
+function getUnit(user?: Record<string, any> | null) {
+  return user?.metadata?.unitLabel || [user?.metadata?.block, user?.metadata?.level, user?.metadata?.unit].filter(Boolean).join("/") || "N/A";
+}
+
+function getFacialData(user: Record<string, any>) {
+  return user?.metadata?.facialData || user?.metadata?.imageTimestamp || (user?.metadata?.photo ? user.hidUserId : "N/A");
+}
+
+function getUserImageSrc(user: Record<string, any>) {
+  const hidUserId = toHidNumericId(user?.hidUserId);
+  return user?.metadata?.photo || (hidUserId ? userImages.value[String(hidUserId)] : "") || "";
+}
+
+async function getNextUid() {
+  const readerIds = await getExistingHidReaderIds();
+  const maxNumber = users.value.reduce((max, user) => {
+    const match = String(user.hidUserId ?? "").match(/^UID(\d+)$/i);
+    return Math.max(max, match ? Number(match[1]) : toHidNumericId(user.hidUserId) || 0);
+  }, 0);
+  const nextNumber = Math.max(maxNumber, ...readerIds, 0) + 1;
+  return `UID${String(nextNumber).padStart(6, "0")}`;
+}
+
+async function getNextRegistration() {
+  const existingUsers = await getExistingHidReaderUsers();
+  const registrations = existingUsers
+    .map((user) => String(user.registration || "").trim())
+    .filter(Boolean);
+  const numericRegistrations = registrations
+    .map((registration) => {
+      const match = registration.match(/^(\d+)$/);
+      return match ? { value: Number(match[1]), width: match[1].length } : undefined;
+    })
+    .filter((item): item is { value: number; width: number } => Boolean(item));
+  const maxRegistration = numericRegistrations.reduce((max, item) => Math.max(max, item.value), 0);
+  const width = Math.max(6, ...numericRegistrations.map((item) => item.width));
+
+  return String(maxRegistration + 1).padStart(width, "0");
+}
+
+async function getExistingHidReaderIds() {
+  const users = await getExistingHidReaderUsers(["id"]);
+  return users
+    .map((user) => toHidNumericId(user.hidUserId) || 0)
+    .filter((value) => Number.isInteger(value) && value > 0);
+}
+
+async function getExistingHidReaderUsers(fields?: string[]) {
+  if (!selectedReaderId.value) return [];
+  try {
+    const response = await runObjectOperation(selectedReaderId.value, {
+      operation: "load",
+      object: "users",
+      ...(fields ? { fields } : {}),
+      limit: 500,
+      offset: 0,
+    });
+    return normalizeHidUsers(response);
+  } catch {
+    return [];
+  }
+}
+
+function normalizeHidUsers(response: Record<string, any>) {
+  const items =
+    response?.data?.users ||
+    response?.data?.data?.users ||
+    response?.users ||
+    [];
+
+  return Array.isArray(items)
+    ? items.map((user) => ({
+        _rowKey: `reader-${user.id}`,
+        hidUserId: String(user.id || ""),
+        rawHidUserId: user.id,
+        registration: user.registration,
+        cardNo: user.card_value || user.cardNo || "",
+        name: user.name,
+        metadata: {
+          name: user.name,
+          imageTimestamp: user.image_timestamp ? String(user.image_timestamp) : "",
+          lastAccessAt: fromUnixSeconds(user.last_access),
+          hidReaderSource: true,
+        },
+      }))
+    : [];
+}
+
+function mergeReaderUsersWithIdentities(readerUsers: Record<string, any>[], identities: Record<string, any>[]) {
+  const identityById = new Map<string, Record<string, any>>();
+  identities.forEach((identity) => {
+    const id = toHidNumericId(identity.hidUserId);
+    if (id) identityById.set(String(id), identity);
+  });
+
+  const merged = readerUsers.map((readerUser) => {
+    const identity = identityById.get(String(toHidNumericId(readerUser.hidUserId)));
+    if (!identity) return readerUser;
+
+    return {
+      ...readerUser,
+      ...identity,
+      _rowKey: `mapped-${identity._id || readerUser.rawHidUserId}`,
+      hidUserId: identity.hidUserId || readerUser.hidUserId,
+      rawHidUserId: readerUser.rawHidUserId,
+      name: identity.metadata?.name || identity.name || readerUser.name,
+      registration: identity.registration || readerUser.registration,
+      cardNo: identity.cardNo || readerUser.cardNo,
+      metadata: {
+        ...readerUser.metadata,
+        ...identity.metadata,
+        imageTimestamp: identity.metadata?.imageTimestamp || readerUser.metadata?.imageTimestamp,
+        lastAccessAt: identity.metadata?.lastAccessAt || readerUser.metadata?.lastAccessAt,
+      },
+    };
+  });
+
+  return merged;
+}
+
+function filterUsers(items: Record<string, any>[]) {
+  const searchText = search.value.trim().toLowerCase();
+  return items.filter((item) => {
+    const matchesSearch = !searchText || [
+      getName(item),
+      item.hidUserId,
+      item.registration,
+      item.cardNo,
+    ].some((value) => String(value || "").toLowerCase().includes(searchText));
+    const matchesStatus = status.value === "Status" || getMappingStatus(item) === status.value;
+    return matchesSearch && matchesStatus;
+  });
+}
+
+function getTotalFromPageRange(value: string) {
+  const match = value.match(/\bof\s+(\d+)$/i);
+  return match ? Number(match[1]) : undefined;
+}
+
+function getMappingStatus(user: Record<string, any>) {
+  return hasMappedRecord(user) ? "Mapped" : "Unmapped";
+}
+
+function getMappingStatusClass(user: Record<string, any>) {
+  return hasMappedRecord(user) ? "status-success" : "status-warning";
+}
+
+function hasMappedRecord(user: Record<string, any>) {
+  return Boolean(user?.person || user?.user || user?.member || user?.visitor);
+}
+
+function formatDate(value?: string) {
+  if (!value) return "N/A";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "N/A" : date.toLocaleString();
+}
+
+function formatHidUid(value: unknown) {
+  const id = toHidNumericId(value);
+  return id ? `UID${String(id).padStart(6, "0")}` : String(value || "");
+}
+
+function fromUnixSeconds(value: unknown) {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric) || numeric <= 0) return "";
+  return new Date(numeric * 1000).toISOString();
+}
+
+function showToast(message: string, color = "success") {
+  snackbar.message = message;
+  snackbar.color = color;
+  snackbar.show = true;
+}
+
+function getHidErrorMessage(error: any) {
+  const data =
+    error?.data ||
+    error?.response?._data ||
+    error?.response?.data ||
+    error?.cause?.data ||
+    error?.cause?.response?._data ||
+    {};
+
+  return String(
+    data?.message ||
+      data?.error ||
+      data?.statusMessage ||
+      error?.statusMessage ||
+      error?.message ||
+      "Unable to save HID user.",
+  );
+}
+</script>
+
+<style scoped>
+.hid-user-enrollment {
+  padding: 24px 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.toolbar-spacer {
+  flex: 1;
+}
+
+.enroll-button {
+  min-width: 170px;
+  background: #e4e4e4;
+  color: #0a2638;
+}
+
+.reader-input,
+.search-input {
+  max-width: 240px;
+}
+
+.status-input {
+  max-width: 160px;
+}
+
+.table-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 430px;
+  overflow: hidden;
+}
+
+.table-card :deep(table) {
+  table-layout: fixed;
+  width: 100%;
+  min-width: 820px;
+}
+
+.table-card :deep(th),
+.table-card :deep(td) {
+  white-space: nowrap;
+}
+
+.table-card :deep(th:nth-child(1)),
+.table-card :deep(td:nth-child(1)) {
+  width: 24%;
+}
+
+.table-card :deep(th:nth-child(2)),
+.table-card :deep(td:nth-child(2)) {
+  width: 20%;
+}
+
+.table-card :deep(th:nth-child(3)),
+.table-card :deep(td:nth-child(3)) {
+  width: 12%;
+}
+
+.table-card :deep(th:nth-child(4)),
+.table-card :deep(td:nth-child(4)) {
+  width: 20%;
+}
+
+.table-card :deep(th:nth-child(5)),
+.table-card :deep(td:nth-child(5)) {
+  width: 16%;
+}
+
+.table-card :deep(th:nth-child(6)),
+.table-card :deep(td:nth-child(6)) {
+  width: 8%;
+}
+
+.table-body {
+  flex: 1;
+  overflow-x: auto;
+}
+
+.table-refresh,
+.table-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+.table-footer {
+  justify-content: flex-end;
+  border-top: 1px solid #eeeeee;
+  border-bottom: 0;
+  background: #f6f6f6;
+  min-height: 44px;
+  padding: 4px 10px;
+}
+
+.page-count {
+  margin-left: auto;
+  color: #475467;
+  font-size: 12px;
+}
+
+.empty-state {
+  min-height: 280px;
+  display: grid;
+  place-items: center;
+  color: #687382;
+  font-size: 13px;
+}
+
+.status-chip {
+  min-width: 86px;
+  justify-content: center;
+  font-weight: 600;
+}
+
+.status-success {
+  background: #dff7e7 !important;
+  color: #1b7f3a !important;
+}
+
+.status-warning {
+  background: #fff0cc !important;
+  color: #9a6700 !important;
+}
+
+.status-error {
+  background: #fde2e1 !important;
+  color: #b42318 !important;
+}
+
+.small-title {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.field-label {
+  color: #4f5a66;
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.field-label span {
+  color: #e53935;
+}
+
+.photo-wrap {
+  display: grid;
+  place-items: center;
+  margin-bottom: 14px;
+}
+
+.photo-button {
+  width: 120px;
+  height: 120px;
+  border: 1px solid #d8dde4;
+  border-radius: 8px;
+  background: #ffffff;
+  display: grid;
+  place-items: center;
+  color: #98a2b3;
+  font-size: 12px;
+  overflow: hidden;
+  position: relative;
+}
+
+.photo-preview {
+  width: 100%;
+  height: 100%;
+}
+
+.photo-edit-icon {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #ffffff;
+  color: #00324a;
+  display: grid;
+  place-items: center;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
+}
+
+.hid-face-avatar {
+  border: 1px solid #d8dde4;
+  background: #f2f4f7;
+}
+
+.hidden-input {
+  display: none;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 16px;
+  font-size: 13px;
+}
+
+.detail-grid span {
+  color: #667085;
+}
+
+.action-cancel,
+.action-submit {
+  flex: 1;
+  border-radius: 0;
+}
+
+.action-submit {
+  background: #062d42;
+  color: #ffffff;
+}
+
+@media (max-width: 960px) {
+  .toolbar {
+    align-items: stretch;
+  }
+
+  .toolbar-spacer {
+    display: none;
+  }
+
+  .enroll-button,
+  .reader-input,
+  .search-input,
+  .status-input {
+    max-width: none;
+    width: 100%;
+  }
+
+  .table-card {
+    min-height: 360px;
+  }
+}
+
+@media (max-width: 600px) {
+  .hid-user-enrollment {
+    padding: 12px 0;
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .photo-button {
+    width: 104px;
+    height: 104px;
+  }
+
+  .table-footer {
+    justify-content: center;
+  }
+
+  :global(.v-dialog > .v-overlay__content) {
+    max-width: calc(100vw - 24px) !important;
+    margin: 12px !important;
+  }
+}
+</style>