@7365admin1/layer-common 3.0.8 → 3.0.9

package/components/HidReaderManagement.vue

@@ -0,0 +1,1233 @@
+<template>
+  <section class="hid-reader-management">
+    <div class="toolbar">
+      <v-btn
+        rounded="xl"
+        class="text-none add-button"
+        variant="flat"
+        prepend-icon="mdi-plus"
+        @click="openAdd"
+      >
+        Add HID Reader
+      </v-btn>
+
+      <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"
+      />
+
+      <v-select
+        v-model="status"
+        :items="statusOptions"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="status-input"
+      />
+    </div>
+
+    <v-card flat border class="table-card">
+      <div class="table-refresh">
+        <v-btn icon="mdi-refresh" variant="text" density="comfortable" :loading="loading" @click="loadReaders" />
+      </div>
+
+      <v-table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Location</th>
+            <th>Base URL</th>
+            <th>Device ID</th>
+            <th>Status</th>
+            <th>Last sync at</th>
+            <th>Last sync message</th>
+            <th class="text-right"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="reader in filteredReaders" :key="reader._id">
+            <td>{{ reader.name || "N/A" }}</td>
+            <td>{{ reader.location || "N/A" }}</td>
+            <td>
+              <a v-if="reader.baseUrl" :href="reader.baseUrl" target="_blank" rel="noopener">
+                {{ reader.baseUrl }}
+              </a>
+              <span v-else>N/A</span>
+            </td>
+            <td>{{ reader.deviceId || "N/A" }}</td>
+            <td>
+              <v-chip
+                size="small"
+                variant="flat"
+                class="status-chip"
+                :class="getStatusClass(resolveReaderStatus(reader))"
+              >
+                {{ formatReaderStatus(resolveReaderStatus(reader)) }}
+              </v-chip>
+            </td>
+            <td>{{ formatDate(reader.lastSyncAt) }}</td>
+            <td>{{ reader.lastSyncMessage || "N/A" }}</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="180">
+                  <v-list-item title="View" @click="openView(reader)" />
+                  <v-list-item title="Sync HID Reader" @click="openSyncConfirm(reader)" />
+                  <v-list-item title="Test Connection" @click="openTestConfirm(reader)" />
+                  <v-list-item title="Edit" @click="openEdit(reader)" />
+                  <v-list-item title="Delete" class="text-error" @click="openDeleteConfirm(reader)" />
+                </v-list>
+              </v-menu>
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+
+      <div v-if="!filteredReaders.length" class="empty-state">
+        No HID devices added yet.
+      </div>
+    </v-card>
+
+    <HidReaderForm
+      v-model="formDialog"
+      :mode="selectedReader ? 'edit' : 'add'"
+      :reader="selectedReader"
+      :loading="saving"
+      @submit="saveReader"
+    />
+
+    <v-dialog v-model="viewDialog" max-width="390">
+      <v-card rounded="lg">
+        <v-card-title class="small-title">{{ selectedReader?.name || "HID Reader" }}</v-card-title>
+        <v-card-text>
+          <div class="detail-grid">
+            <span>HID reader name</span><strong>{{ selectedReader?.name || "N/A" }}</strong>
+            <span>Base URL / IP address</span><strong>{{ selectedReader?.baseUrl || "N/A" }}</strong>
+            <span>Device ID</span><strong>{{ selectedReader?.deviceId || "N/A" }}</strong>
+            <span>Location</span><strong>{{ selectedReader?.location || "N/A" }}</strong>
+            <span>Monitor Path</span><strong>{{ selectedReader?.monitorPath || "N/A" }}</strong>
+            <span>Status</span><strong>{{ formatReaderStatus(resolveReaderStatus(selectedReader)) }}</strong>
+            <span>Username</span><strong>{{ selectedReader?.username || "N/A" }}</strong>
+          </div>
+
+          <div class="dialog-actions-inline">
+            <v-btn rounded="xl" class="text-none" variant="tonal" @click="openTestConfirm(selectedReader)">Test Connection</v-btn>
+            <v-btn rounded="xl" class="text-none" variant="tonal" @click="openSyncConfirm(selectedReader)">Sync Reader</v-btn>
+          </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="confirmDialog" max-width="390" persistent>
+      <v-card rounded="lg" class="reader-action-dialog">
+        <v-card-title class="small-title">{{ confirmTitle }}</v-card-title>
+
+        <v-card-text v-if="pendingAction === 'test'" class="reader-action-content">
+          <v-icon icon="mdi-database-sync-outline" color="#1976d2" size="48" />
+          <h3>Test Device Connection</h3>
+          <p>You are about to test the connection for {{ selectedReader?.name || "this HID Reader" }}.</p>
+          <div class="reader-action-meta">
+            <span>IP Address:</span>
+            <strong>{{ readerIpAddress }}</strong>
+          </div>
+        </v-card-text>
+
+        <v-card-text v-else-if="pendingAction === 'sync' && actionStage === 'confirm'" class="reader-action-content">
+          <v-icon icon="mdi-database-sync-outline" color="#1976d2" size="48" />
+          <h3>Sync Data</h3>
+          <p>You're about to sync data with {{ selectedReader?.name || "this HID Reader" }}.</p>
+        </v-card-text>
+
+        <v-card-text v-else-if="pendingAction === 'sync' && actionStage === 'review'" class="reader-action-content reader-sync-review">
+          <v-icon icon="mdi-database-sync-outline" color="#1976d2" size="48" />
+          <h3>Ready to Synchronize</h3>
+          <div class="sync-summary-list">
+            <div>
+              <span>New Enrolled</span>
+              <strong>{{ syncPreviewStats.newEnrolled }}</strong>
+            </div>
+            <div>
+              <span>Updated Information</span>
+              <strong>{{ syncPreviewStats.updatedInformation }}</strong>
+            </div>
+            <div>
+              <span>Facial Data</span>
+              <strong>{{ syncPreviewStats.facialData }}</strong>
+            </div>
+          </div>
+          <v-textarea
+            v-model="syncMessage"
+            label="Sync Message"
+            variant="outlined"
+            density="compact"
+            hide-details
+            rows="4"
+            auto-grow
+          />
+        </v-card-text>
+
+        <v-card-text v-else-if="pendingAction === 'sync' && actionStage === 'loading'" class="reader-action-content">
+          <v-progress-circular indeterminate color="#8a8f98" size="42" width="5" />
+          <h3>Sync Data to {{ selectedReader?.name || "HID Reader" }}...</h3>
+        </v-card-text>
+
+        <v-card-text v-else class="text-body-2">
+          {{ confirmMessage }}
+        </v-card-text>
+
+        <v-card-actions class="pa-0">
+          <v-btn class="text-none action-cancel" variant="flat" height="44" :disabled="actionLoading" @click="closeConfirmDialog">Cancel</v-btn>
+          <v-btn
+            class="text-none action-submit"
+            variant="flat"
+            height="44"
+            :loading="actionLoading && actionStage !== 'loading'"
+            :disabled="actionStage === 'loading'"
+            @click="runConfirmedAction"
+          >
+            {{ confirmActionLabel }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="resultDialog" max-width="390">
+      <v-card rounded="lg">
+        <v-card-title v-if="resultReaderName" class="small-title">{{ resultReaderName }}</v-card-title>
+        <v-card-text class="result-content" :class="{ 'result-with-stats': resultStats }">
+          <v-icon :icon="resultSuccess ? 'mdi-check-circle' : 'mdi-alert-circle'" :color="resultSuccess ? 'success' : 'warning'" size="42" />
+          <h3>{{ resultTitle }}</h3>
+          <p>{{ resultMessage }}</p>
+          <div v-if="resultStats" class="sync-summary-list">
+            <div>
+              <span>New Enrolled</span>
+              <strong>{{ resultStats.newEnrolled }}</strong>
+            </div>
+            <div>
+              <span>Updated Information</span>
+              <strong>{{ resultStats.updatedInformation }}</strong>
+            </div>
+            <div>
+              <span>New Photos</span>
+              <strong>{{ resultStats.facialData }}</strong>
+            </div>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn class="text-none" variant="text" @click="resultDialog = false">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </section>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  site: {
+    type: String,
+    required: true,
+  },
+});
+
+const {
+  getReaders,
+  createReader,
+  updateReader,
+  deleteReader,
+  testReader,
+  getIdentities,
+  createIdentity,
+  runObjectOperation,
+} = useHidAmico();
+
+const readers = ref<Record<string, any>[]>([]);
+const search = ref("");
+const status = ref("Status");
+const loading = ref(false);
+const saving = ref(false);
+const actionLoading = ref(false);
+const formDialog = ref(false);
+const viewDialog = ref(false);
+const confirmDialog = ref(false);
+const resultDialog = ref(false);
+const selectedReader = ref<Record<string, any> | null>(null);
+const pendingAction = ref<"test" | "sync" | "delete" | null>(null);
+const actionStage = ref<"confirm" | "review" | "loading">("confirm");
+const resultSuccess = ref(true);
+const resultTitle = ref("");
+const resultMessage = ref("");
+const resultReaderName = ref("");
+const syncMessage = ref("");
+const syncPreviewPayload = ref<Record<string, any> | null>(null);
+const syncPreviewStats = ref({
+  newEnrolled: 0,
+  updatedInformation: 0,
+  facialData: 0,
+});
+const resultStats = ref<typeof syncPreviewStats.value | null>(null);
+
+const statusOptions = ["Status", "active", "inactive", "deleted", "offline"];
+
+const filteredReaders = computed(() => {
+  const query = search.value.trim().toLowerCase();
+  return readers.value.filter((reader) => {
+    const matchesSearch = !query || [
+      reader.name,
+      reader.location,
+      reader.baseUrl,
+      reader.deviceId,
+      resolveReaderStatus(reader),
+    ].some((value) => String(value ?? "").toLowerCase().includes(query));
+
+    const matchesStatus = status.value === "Status" || resolveReaderStatus(reader) === status.value;
+
+    return matchesSearch && matchesStatus;
+  });
+});
+
+const confirmTitle = computed(() => {
+  if (pendingAction.value === "sync" && actionStage.value === "loading") return "Test Connection...";
+  if (pendingAction.value === "sync") return "Sync Data";
+  if (pendingAction.value === "test") return "Test Connection";
+  return "Delete";
+});
+
+const confirmMessage = computed(() => {
+  if (pendingAction.value === "sync") {
+    return `You're about to sync data with ${selectedReader.value?.name || "this HID Reader"}.`;
+  }
+  if (pendingAction.value === "test") {
+    return `You are about to test the connection to ${selectedReader.value?.baseUrl || "this HID Reader"}.`;
+  }
+  return "Are you sure you want to permanently delete reader?";
+});
+
+const confirmActionLabel = computed(() => {
+  if (pendingAction.value === "delete") return "Delete";
+  if (pendingAction.value === "sync" && actionStage.value === "confirm") return "Continue";
+  if (pendingAction.value === "sync" && actionStage.value === "review") return "Sync Now";
+  if (pendingAction.value === "test") return "Test Connection";
+  return "Confirm";
+});
+
+const readerIpAddress = computed(() => getReaderHost(selectedReader.value?.baseUrl));
+
+watch(
+  () => props.site,
+  () => loadReaders(),
+  { immediate: true },
+);
+
+async function loadReaders() {
+  if (!props.site) return;
+
+  loading.value = true;
+  try {
+    const response = await getReaders({ site: props.site, page: 1, limit: 100 });
+    const items = response?.items ?? response?.data?.items ?? response?.data?.readers ?? [];
+    readers.value = items.map(normalizeReaderStatus);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openAdd() {
+  selectedReader.value = null;
+  formDialog.value = true;
+}
+
+function openEdit(reader: Record<string, any>) {
+  selectedReader.value = reader;
+  formDialog.value = true;
+}
+
+function openView(reader: Record<string, any>) {
+  selectedReader.value = reader;
+  viewDialog.value = true;
+}
+
+function openTestConfirm(reader?: Record<string, any> | null) {
+  if (reader) selectedReader.value = reader;
+  pendingAction.value = "test";
+  resetActionFlow();
+  confirmDialog.value = true;
+}
+
+function openSyncConfirm(reader?: Record<string, any> | null) {
+  if (reader) selectedReader.value = reader;
+  pendingAction.value = "sync";
+  resetActionFlow();
+  confirmDialog.value = true;
+}
+
+function openDeleteConfirm(reader: Record<string, any>) {
+  selectedReader.value = reader;
+  pendingAction.value = "delete";
+  resetActionFlow();
+  confirmDialog.value = true;
+}
+
+function resetActionFlow() {
+  actionStage.value = "confirm";
+  syncMessage.value = "";
+  syncPreviewPayload.value = null;
+  syncPreviewStats.value = {
+    newEnrolled: 0,
+    updatedInformation: 0,
+    facialData: 0,
+  };
+}
+
+function closeConfirmDialog() {
+  confirmDialog.value = false;
+  resetActionFlow();
+}
+
+async function saveReader(payload: Record<string, any>) {
+  saving.value = true;
+  try {
+    if (selectedReader.value?._id) {
+      await updateReader(selectedReader.value._id, payload);
+    } else {
+      await createReader({ ...payload, site: props.site });
+    }
+    formDialog.value = false;
+    await loadReaders();
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function runConfirmedAction() {
+  if (!selectedReader.value?._id || !pendingAction.value) return;
+
+  actionLoading.value = true;
+  try {
+    if (pendingAction.value === "test") {
+      const response = await testReader(selectedReader.value._id);
+      const message = response?.data?.message || response?.message || "Device connection successful.";
+      await applyReaderSyncState(selectedReader.value._id, "completed", message);
+      showResult(true, "Test Device Connection", message);
+    }
+    if (pendingAction.value === "sync") {
+      if (actionStage.value === "confirm") {
+        const payload = await buildSyncPayload(selectedReader.value._id);
+        syncPreviewPayload.value = payload;
+        syncPreviewStats.value = payload.stats;
+        syncMessage.value = payload.defaultMessage || "";
+        actionStage.value = "review";
+        return;
+      }
+
+      if (actionStage.value !== "review" || !syncPreviewPayload.value) return;
+
+      actionStage.value = "loading";
+      const payload = syncPreviewPayload.value;
+      const hidUsersToImport = payload.hidUsersToImport || [];
+      const importedCount = hidUsersToImport.length
+        ? await importHidUsers(selectedReader.value._id, hidUsersToImport)
+        : 0;
+
+      if (!payload.objects.length) {
+        if (importedCount) {
+          const stats = {
+            ...syncPreviewStats.value,
+            newEnrolled: importedCount,
+          };
+          const message = syncMessage.value || `Synced ${importedCount} HID user(s) from reader.`;
+          await applyReaderSyncState(selectedReader.value._id, "completed", message);
+          showResult(true, "Sync Successful", message, {
+            readerName: selectedReader.value.name || "HID Reader",
+            stats,
+          });
+          confirmDialog.value = false;
+          resetActionFlow();
+          await loadReaders();
+          return;
+        }
+
+        const message = syncMessage.value || "No active HID users found to sync.";
+        await applyReaderSyncState(selectedReader.value._id, "failed", message);
+        showResult(false, "Sync Device Failed", message);
+        confirmDialog.value = false;
+        resetActionFlow();
+        await loadReaders();
+        return;
+      }
+      const result = await syncHidUsers(selectedReader.value._id, payload.users);
+      const importMessage = importedCount ? `${importedCount} HID user(s) imported from reader.` : "";
+      const message = syncMessage.value || [result.message, importMessage].filter(Boolean).join(" ");
+      await applyReaderSyncState(selectedReader.value._id, "completed", message);
+      showResult(true, "Sync Successful", message, {
+        readerName: selectedReader.value.name || "HID Reader",
+        stats: syncPreviewStats.value,
+      });
+    }
+    if (pendingAction.value === "delete") {
+      await deleteReader(selectedReader.value._id);
+      showResult(true, "Reader Deleted", "HID reader has been deleted.");
+    }
+    confirmDialog.value = false;
+    resetActionFlow();
+    await loadReaders();
+  } catch (error: any) {
+    console.error("HID reader action failed:", error);
+    const friendlyMessage = getFriendlyHidError(error);
+    if ((pendingAction.value === "sync" || pendingAction.value === "test") && selectedReader.value?._id) {
+      await applyReaderSyncState(selectedReader.value._id, "failed", friendlyMessage);
+    }
+    showResult(
+      false,
+      pendingAction.value === "sync" ? "Sync Device Failed" : "Test Connection Device Failed",
+      friendlyMessage,
+    );
+    confirmDialog.value = false;
+    resetActionFlow();
+  } finally {
+    actionLoading.value = false;
+  }
+}
+
+async function applyReaderSyncState(readerId: string, status: "completed" | "failed", message: string) {
+  const lastSyncAt = new Date().toISOString();
+  const patch: Record<string, any> = {
+    lastSyncAt,
+    lastSyncStatus: status,
+    lastSyncMessage: message,
+  };
+  if (status === "failed") {
+    patch.status = "offline";
+  }
+
+  try {
+    await updateReader(readerId, patch);
+  } catch (error) {
+    console.error("Unable to persist HID reader sync state:", error);
+  }
+
+  readers.value = readers.value.map((reader) =>
+    reader._id === readerId
+      ? {
+          ...reader,
+          ...patch,
+        }
+      : reader,
+  );
+
+  if (selectedReader.value?._id === readerId) {
+    selectedReader.value = {
+      ...selectedReader.value,
+      ...patch,
+    };
+  }
+}
+
+async function buildSyncPayload(readerId: string) {
+  const response = await getIdentities(readerId, {
+    page: 1,
+    limit: 500,
+    status: "active",
+  });
+  let identities = response?.items ?? response?.data?.items ?? response?.data?.identities ?? [];
+
+  if (!identities.length) {
+    const hidResponse = await runObjectOperation(readerId, {
+      operation: "load",
+      object: "users",
+      limit: 500,
+      offset: 0,
+    });
+    const hidUsers = normalizeHidUsers(hidResponse);
+    return {
+      objects: [],
+      importedCount: 0,
+      users: [],
+      hidUsersToImport: hidUsers,
+      stats: {
+        newEnrolled: hidUsers.length,
+        updatedInformation: 0,
+        facialData: countFacialData(hidUsers),
+      },
+      defaultMessage: hidUsers.length ? `Ready to import ${hidUsers.length} HID user(s) from reader.` : "",
+    };
+  }
+
+  const users = identities
+    .map(toHidUserObject)
+    .filter((user: Record<string, any>) => user.id && user.name);
+  const existingHidUsers = await getExistingHidUsers(readerId);
+  const existingIds = new Set(existingHidUsers.map((user) => Number(user.hidUserId)));
+  const localIds = new Set(
+    users
+      .map((user: Record<string, any>) => Number(user.id))
+      .filter((id) => Number.isInteger(id) && id > 0),
+  );
+  const hidUsersToImport = existingHidUsers.filter((user) => {
+    const hidUserId = Number(user.hidUserId);
+    return Number.isInteger(hidUserId) && hidUserId > 0 && !localIds.has(hidUserId);
+  });
+  const newEnrolled = users.filter((user: Record<string, any>) => !existingIds.has(Number(user.id))).length;
+  const updatedInformation = users.filter((user: Record<string, any>) => existingIds.has(Number(user.id))).length;
+  const totalUsersToSync = users.length + hidUsersToImport.length;
+
+  return {
+    objects: users.length
+      ? [
+          {
+            object: "users",
+            values: users,
+          },
+        ]
+      : [],
+    users,
+    hidUsersToImport,
+    importedCount: hidUsersToImport.length,
+    stats: {
+      newEnrolled: newEnrolled + hidUsersToImport.length,
+      updatedInformation,
+      facialData: countFacialData([...users, ...hidUsersToImport]),
+    },
+    defaultMessage: totalUsersToSync ? `Ready to sync ${totalUsersToSync} HID user(s).` : "",
+  };
+}
+
+async function syncHidUsers(readerId: string, users: Record<string, any>[]) {
+  const existingIds = await getExistingHidUserIds(readerId);
+  const usersToCreate = users.filter((user) => !existingIds.has(Number(user.id)));
+  const usersToModify = users.filter((user) => existingIds.has(Number(user.id)));
+  const results: Record<string, any>[] = [];
+
+  if (usersToModify.length) {
+    const modifyResults = [];
+    for (const user of usersToModify) {
+      const result = await runObjectOperation(readerId, {
+        operation: "modify",
+        object: "users",
+        where: {
+          users: {
+            id: user.id,
+          },
+        },
+        values: toHidUserValues(user),
+      });
+      modifyResults.push(result);
+    }
+    results.push({ operation: "modify", count: usersToModify.length, result: modifyResults });
+  }
+
+  if (usersToCreate.length) {
+    const result = await runObjectOperation(readerId, {
+      operation: "create",
+      object: "users",
+      values: usersToCreate.map(toHidUserCreateValues),
+    });
+    results.push({ operation: "create", count: usersToCreate.length, result });
+  }
+
+  for (const user of users) {
+    await syncHidUserRole(readerId, user.id, user._identityType === "admin");
+  }
+
+  return {
+    results,
+    message: `Synced ${users.length} HID user(s). ${usersToModify.length} updated, ${usersToCreate.length} created.`,
+  };
+}
+
+async function getExistingHidUserIds(readerId: string) {
+  const users = await getExistingHidUsers(readerId);
+  return new Set(users.map((user) => Number(user.hidUserId)));
+}
+
+async function getExistingHidUsers(readerId: string) {
+  const hidResponse = await runObjectOperation(readerId, {
+    operation: "load",
+    object: "users",
+    limit: 500,
+    offset: 0,
+  });
+  return normalizeHidUsers(hidResponse);
+}
+
+function normalizeHidUsers(response: Record<string, any>) {
+  const users =
+    response?.data?.users ||
+    response?.data?.data?.users ||
+    response?.users ||
+    [];
+
+  return Array.isArray(users)
+    ? users.map((user) => ({
+        hidUserId: user.id,
+        registration: user.registration,
+        cardNo: user.card_value || user.cardNo,
+        name: user.name,
+        metadata: {
+          name: user.name,
+        },
+      }))
+    : [];
+}
+
+async function importHidUsers(readerId: string, hidUsers: Record<string, any>[]) {
+  let importedCount = 0;
+  for (const user of hidUsers) {
+    if (!user.hidUserId) continue;
+    try {
+      await createIdentity(readerId, {
+        site: props.site,
+        hidUserId: user.hidUserId,
+        registration: user.registration || "",
+        cardNo: user.cardNo || "",
+        type: "resident",
+        status: "active",
+        metadata: {
+          name: user.metadata?.name || user.name || `HID User ${user.hidUserId}`,
+          hidImported: true,
+          importedAt: new Date().toISOString(),
+        },
+      });
+      importedCount += 1;
+    } catch {
+      // Existing users may already be mapped; keep syncing the remaining HID users.
+    }
+  }
+  return importedCount;
+}
+
+function toHidUserObject(identity: Record<string, any>) {
+  return {
+    id: toHidNumericId(identity.hidUserId),
+    name: identity.metadata?.name || identity.name || `User ${identity.hidUserId || ""}`.trim(),
+    registration: identity.registration || "",
+    _identityType: identity.type || "resident",
+  };
+}
+
+function toHidUserCreateValues(user: Record<string, any>) {
+  return {
+    id: user.id,
+    ...toHidUserValues(user),
+  };
+}
+
+function toHidUserValues(user: Record<string, any>) {
+  return {
+    name: user.name,
+    registration: user.registration || "",
+  };
+}
+
+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 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 showResult(
+  success: boolean,
+  title: string,
+  message: string,
+  options: { readerName?: string; stats?: typeof syncPreviewStats.value | null } = {},
+) {
+  resultSuccess.value = success;
+  resultTitle.value = title;
+  resultMessage.value = message;
+  resultReaderName.value = options.readerName || "";
+  resultStats.value = options.stats || null;
+  resultDialog.value = true;
+}
+
+function countFacialData(users: Record<string, any>[]) {
+  return users.filter((user) => user.face || user.photo || user.image || user.imageUrl || user.faceImage).length;
+}
+
+function getReaderHost(value?: string) {
+  if (!value) return "N/A";
+  try {
+    return new URL(value).hostname || value;
+  } catch {
+    return value.replace(/^https?:\/\//, "").split("/")[0] || value;
+  }
+}
+
+function getFriendlyHidError(error: any) {
+  const message = getHidErrorMessage(error);
+  const lowerMessage = message.toLowerCase();
+
+  if (message.includes("UNIQUE constraint failed: users.id")) {
+    return "This HID user already exists on the device. Please try Sync Reader again so the system can update the existing user instead of creating a duplicate.";
+  }
+
+  if (message.includes("Invalid member 'values'") || message.includes("object expected")) {
+    return "The HID device rejected the sync payload format. The user data exists, but the device expects a different update format. Please contact the developer to adjust the HID sync payload.";
+  }
+
+  if (
+    message.includes("Unable to connect") ||
+    message.includes("ECONNREFUSED") ||
+    message.includes("ETIMEDOUT") ||
+    message.includes("ENETUNREACH") ||
+    message.includes("EHOSTUNREACH") ||
+    message.includes("ECONNRESET") ||
+    message.includes("ECONNABORTED") ||
+    lowerMessage.includes("timeout") ||
+    lowerMessage.includes("network error") ||
+    lowerMessage.includes("no route to host")
+  ) {
+    return "Unable to connect to the HID device. Please check that the reader is online, reachable from the server, and the Base URL/IP address is correct.";
+  }
+
+  if (lowerMessage.includes("login failed") || lowerMessage.includes("session")) {
+    return "Unable to verify the HID reader session. Please check the reader username and password, then try again.";
+  }
+
+  if (message.includes("reader is not active")) {
+    return "This HID reader is not active. Please enable the reader before syncing.";
+  }
+
+  if (message.includes("HID Amico request failed:")) {
+    return message;
+  }
+
+  return message || "The HID device rejected the request. Please check the reader connection and try again.";
+}
+
+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 ||
+      "Request failed.",
+  );
+}
+
+function formatDate(value?: string) {
+  if (!value) return "N/A";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "N/A" : date.toLocaleString();
+}
+
+function getStatusClass(value?: string) {
+  if (value === "active") return "status-success";
+  if (value === "inactive") return "status-warning";
+  if (value === "deleted") return "status-error";
+  return "status-muted";
+}
+
+function resolveReaderStatus(reader?: Record<string, any> | null) {
+  if (!reader) return "";
+  if (reader.lastSyncStatus === "failed" && reader.status === "active") return "offline";
+  return reader.status || "offline";
+}
+
+function normalizeReaderStatus(reader: Record<string, any>) {
+  return {
+    ...reader,
+    status: resolveReaderStatus(reader),
+  };
+}
+
+function formatReaderStatus(value?: string) {
+  if (!value) return "N/A";
+  if (value === "offline") return "Offline";
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+</script>
+
+<style scoped>
+.hid-reader-management {
+  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;
+}
+
+.add-button {
+  min-width: 170px;
+  background: #e4e4e4;
+  color: #0a2638;
+}
+
+.search-input {
+  max-width: 240px;
+}
+
+.status-input {
+  max-width: 160px;
+}
+
+.table-card {
+  min-height: 430px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.table-card :deep(table) {
+  table-layout: fixed;
+  width: 100%;
+  min-width: 1120px;
+}
+
+.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: 14%;
+}
+
+.table-card :deep(th:nth-child(2)),
+.table-card :deep(td:nth-child(2)) {
+  width: 12%;
+}
+
+.table-card :deep(th:nth-child(3)),
+.table-card :deep(td:nth-child(3)) {
+  width: 18%;
+}
+
+.table-card :deep(th:nth-child(4)),
+.table-card :deep(td:nth-child(4)) {
+  width: 12%;
+}
+
+.table-card :deep(th:nth-child(5)),
+.table-card :deep(td:nth-child(5)) {
+  width: 10%;
+}
+
+.table-card :deep(th:nth-child(6)),
+.table-card :deep(td:nth-child(6)) {
+  width: 14%;
+}
+
+.table-card :deep(th:nth-child(7)),
+.table-card :deep(td:nth-child(7)) {
+  width: 14%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.table-card :deep(th:nth-child(8)),
+.table-card :deep(td:nth-child(8)) {
+  width: 6%;
+}
+
+.table-refresh {
+  display: flex;
+  padding: 8px 10px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+.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;
+}
+
+.status-muted {
+  background: #e9edf2 !important;
+  color: #475467 !important;
+}
+
+.small-title {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px 16px;
+  font-size: 13px;
+}
+
+.detail-grid span {
+  color: #667085;
+}
+
+.dialog-actions-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.reader-action-dialog {
+  overflow: hidden;
+}
+
+.reader-action-content {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  min-height: 160px;
+  padding: 28px 28px 26px;
+  text-align: center;
+}
+
+.reader-action-content h3 {
+  margin: 4px 0 0;
+  color: #111827;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.reader-action-content p {
+  margin: 0;
+  color: #667085;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.reader-action-meta {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  color: #344054;
+  font-size: 13px;
+}
+
+.reader-action-meta strong {
+  font-weight: 700;
+}
+
+.reader-sync-review {
+  justify-items: stretch;
+  text-align: left;
+}
+
+.reader-sync-review > .v-icon,
+.reader-sync-review > h3 {
+  justify-self: center;
+  text-align: center;
+}
+
+.sync-summary-list {
+  display: grid;
+  gap: 10px;
+  width: 100%;
+  margin: 4px 0 10px;
+}
+
+.sync-summary-list div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  color: #667085;
+  font-size: 13px;
+}
+
+.sync-summary-list strong {
+  color: #111827;
+  font-weight: 700;
+}
+
+.action-cancel,
+.action-submit {
+  flex: 1;
+  border-radius: 0;
+}
+
+.action-submit {
+  background: #062d42;
+  color: #ffffff;
+}
+
+.result-content {
+  display: grid;
+  place-items: center;
+  gap: 10px;
+  text-align: center;
+  min-height: 180px;
+}
+
+.result-with-stats {
+  place-items: stretch;
+  text-align: left;
+}
+
+.result-with-stats > .v-icon,
+.result-with-stats > h3,
+.result-with-stats > p {
+  justify-self: center;
+  text-align: center;
+}
+
+@media (max-width: 960px) {
+  .toolbar {
+    align-items: stretch;
+  }
+
+  .toolbar-spacer {
+    display: none;
+  }
+
+  .add-button,
+  .search-input,
+  .status-input {
+    max-width: none;
+    width: 100%;
+  }
+
+  .table-card {
+    min-height: 360px;
+  }
+}
+
+@media (max-width: 600px) {
+  .hid-reader-management {
+    padding: 12px 0;
+  }
+
+  .detail-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dialog-actions-inline .v-btn {
+    width: 100%;
+  }
+
+  :global(.v-dialog > .v-overlay__content) {
+    max-width: calc(100vw - 24px) !important;
+    margin: 12px !important;
+  }
+}
+</style>