@7365admin1/layer-common 3.2.0 → 3.2.1-staging.59

package/components/HidServiceSettingsPanel.vue

@@ -12,7 +12,8 @@
     <v-col cols="12" md="4" class="d-flex justify-md-end">
       <v-switch
         v-model="hidEnabled"
-        color="primary"
+        class="hid-service-switch"
+        color="success"
         hide-details
         inset
         :loading="isSaving"
@@ -148,3 +149,21 @@ function goToHidReaders() {
   });
 }
 </script>
+
+<style scoped>
+.hid-service-switch :deep(.v-switch__track) {
+  background-color: #8b9297;
+  opacity: 1;
+}
+
+.hid-service-switch :deep(.v-selection-control--dirty .v-switch__track) {
+  background-color: #2eaf55 !important;
+  color: #2eaf55 !important;
+  opacity: 1;
+}
+
+.hid-service-switch :deep(.v-switch__thumb) {
+  background-color: #fff !important;
+  color: #fff !important;
+}
+</style>

package/components/HidUserEnrollment.vue

@@ -137,10 +137,24 @@
               </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-item title="Take Photo using Camera" @click="triggerCameraInput" />
+                <v-list-item
+                  v-if="form.photoPreview"
+                  title="Remove Photo"
+                  class="text-error"
+                  @click="removePhoto"
+                />
               </v-list>
             </v-menu>
             <input ref="photoInput" type="file" accept="image/*" class="hidden-input" @change="onPhotoChange" />
+            <input
+              ref="cameraInput"
+              type="file"
+              accept="image/*"
+              capture="user"
+              class="hidden-input"
+              @change="onPhotoChange"
+            />
           </div>
 
           <div class="field-label">Name <span>*</span></div>
@@ -270,6 +284,8 @@ const {
   getReaders,
   getIdentities,
   getUserImage,
+  setUserImage,
+  deleteUserImage,
   runObjectOperation,
   createIdentity,
   updateIdentity,
@@ -296,6 +312,9 @@ const deleteDialog = ref(false);
 const selectedUser = ref<Record<string, any> | null>(null);
 const showPassword = ref(false);
 const photoInput = ref<HTMLInputElement | null>(null);
+const cameraInput = ref<HTMLInputElement | null>(null);
+const selectedPhotoFile = ref<File | null>(null);
+const removePhotoRequested = ref(false);
 const snackbar = reactive({
   show: false,
   color: "success",
@@ -381,6 +400,7 @@ async function loadUsers() {
     const identities = identityResponse?.items ?? identityResponse?.data?.items ?? identityResponse?.data?.identities ?? [];
     const adminRoleIds = getAdministratorRoleUserIds(roleResponse);
     const readerUsers = normalizeHidUsers(readerResponse).filter((user) => {
+      if (Number(user.userTypeId) === 1) return false;
       if (!isAdministratorIdentity()) return true;
       const hidUserId = toHidNumericId(user.hidUserId);
       return Boolean(hidUserId && adminRoleIds.has(hidUserId));
@@ -437,6 +457,8 @@ function resetForm() {
   form.cardNo = "";
   form.pinPassword = "";
   form.photoPreview = "";
+  selectedPhotoFile.value = null;
+  removePhotoRequested.value = false;
 }
 
 async function openEnroll() {
@@ -463,6 +485,8 @@ async function openEdit(user: Record<string, any>) {
   form.cardNo = user.cardNo ?? "";
   form.pinPassword = user.metadata?.pinPassword ?? "";
   form.photoPreview = getUserImageSrc(user);
+  selectedPhotoFile.value = null;
+  removePhotoRequested.value = false;
   formDialog.value = true;
 
   if (!form.photoPreview) {
@@ -487,9 +511,32 @@ function triggerPhotoInput() {
   photoInput.value?.click();
 }
 
+function triggerCameraInput() {
+  cameraInput.value?.click();
+}
+
+function removePhoto() {
+  form.photoPreview = "";
+  selectedPhotoFile.value = null;
+  removePhotoRequested.value = true;
+}
+
 function onPhotoChange(event: Event) {
-  const file = (event.target as HTMLInputElement).files?.[0];
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
   if (!file) return;
+  if (!["image/jpeg", "image/png"].includes(file.type)) {
+    showToast("Facial enrollment only accepts JPG or PNG images.", "error");
+    return;
+  }
+  if (file.size > 2 * 1024 * 1024) {
+    showToast("Facial enrollment images must be smaller than 2 MB.", "error");
+    return;
+  }
+
+  selectedPhotoFile.value = file;
+  removePhotoRequested.value = false;
   const reader = new FileReader();
   reader.onload = () => {
     form.photoPreview = String(reader.result || "");
@@ -530,6 +577,8 @@ async function saveUser() {
         unitLabel: buildUnitLabel(),
         facialData: form.photoPreview ? form.hidUserId : "",
         photo: form.photoPreview,
+        imageTimestamp: selectedUser.value?.metadata?.imageTimestamp || "",
+        facialScores: selectedUser.value?.metadata?.facialScores || {},
         pinPassword: form.pinPassword,
       },
     };
@@ -537,6 +586,8 @@ async function saveUser() {
     if (selectedUser.value) {
       await updateHidUserOnReader(readerId, hidUser);
       await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
+      const facialResult = await syncFacialImage(readerId, hidUser.id);
+      applyFacialResult(payload.metadata, facialResult);
       if (selectedUser.value._id) {
         await updateIdentity(selectedUser.value._id, payload);
       } else {
@@ -545,6 +596,8 @@ async function saveUser() {
     } else {
       await createHidUserOnReader(readerId, hidUser);
       await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
+      const facialResult = await syncFacialImage(readerId, hidUser.id);
+      applyFacialResult(payload.metadata, facialResult);
       await saveIdentityOnReader(readerId, payload);
       selectedReaderId.value = readerId;
     }
@@ -560,6 +613,46 @@ async function saveUser() {
   }
 }
 
+type FacialSyncResult = {
+  action: "none" | "enrolled" | "removed";
+  timestamp?: number;
+  scores?: Record<string, unknown>;
+};
+
+async function syncFacialImage(readerId: string, hidUserId: number): Promise<FacialSyncResult> {
+  if (selectedPhotoFile.value) {
+    const timestamp = Math.floor(Date.now() / 1000);
+    const response = await setUserImage(readerId, hidUserId, selectedPhotoFile.value, {
+      timestamp,
+      match: true,
+    });
+    const result = response?.data;
+    userImages.value[String(hidUserId)] = form.photoPreview;
+    return { action: "enrolled", timestamp, scores: result?.scores };
+  }
+
+  if (removePhotoRequested.value) {
+    await deleteUserImage(readerId, hidUserId);
+    delete userImages.value[String(hidUserId)];
+    return { action: "removed" };
+  }
+
+  return { action: "none" };
+}
+
+function applyFacialResult(metadata: Record<string, unknown>, result: FacialSyncResult) {
+  if (result.action === "enrolled") {
+    metadata.facialData = form.hidUserId;
+    metadata.imageTimestamp = String(result.timestamp || "");
+    metadata.facialScores = result.scores || {};
+  } else if (result.action === "removed") {
+    metadata.facialData = "";
+    metadata.photo = "";
+    metadata.imageTimestamp = "";
+    metadata.facialScores = {};
+  }
+}
+
 async function deleteUser() {
   if (!selectedUser.value) return;
 
@@ -882,6 +975,7 @@ function normalizeHidUsers(response: Record<string, any>) {
         hidUserId: String(user.id || ""),
         rawHidUserId: user.id,
         registration: user.registration,
+        userTypeId: user.user_type_id,
         cardNo: user.card_value || user.cardNo || "",
         name: user.name,
         metadata: {

package/components/Nfc/NFCPatrolRouteMain.vue

@@ -4,6 +4,7 @@
       <v-row no-gutters class="mb-4" align="center">
         <v-col cols="12" md="6">
           <v-btn
+            v-if="props.canCreateNfcPatrol"
             rounded="pill"
             variant="outlined"
   
@@ -82,7 +83,12 @@
     </v-col>
 
     <!-- Add Dialog -->
-    <v-dialog v-model="dialogAdd" persistent max-width="900">
+    <v-dialog
+      v-if="props.canCreateNfcPatrol"
+      v-model="dialogAdd"
+      persistent
+      max-width="900"
+    >
       <NFCPatrolRouteForm
         title="Add Route"
         :site="props.site"
@@ -94,7 +100,12 @@
     </v-dialog>
 
     <!-- Edit Dialog -->
-    <v-dialog v-model="dialogEdit" persistent max-width="900">
+    <v-dialog
+      v-if="props.canUpdateNfcPatrol"
+      v-model="dialogEdit"
+      persistent
+      max-width="900"
+    >
       <NFCPatrolRouteForm
         title="Edit Route"
         :site="props.site"
@@ -190,7 +201,10 @@
 
         <v-toolbar class="pa-0" density="compact">
           <v-row no-gutters>
-            <v-col cols="6" class="pa-0">
+            <v-col
+              :cols="props.canUpdateNfcPatrol || props.canDeleteNfcPatrol ? 6 : 12"
+              class="pa-0"
+            >
               <v-btn
                 block
                 variant="text"
@@ -203,7 +217,11 @@
               </v-btn>
             </v-col>
 
-            <v-col cols="6" class="pa-0">
+            <v-col
+              v-if="props.canUpdateNfcPatrol || props.canDeleteNfcPatrol"
+              cols="6"
+              class="pa-0"
+            >
               <v-menu>
                 <template #activator="{ props }">
                   <v-btn
@@ -220,13 +238,17 @@
                 </template>
 
                 <v-list class="pa-0">
-                  <v-list-item @click="openDialogEdit()">
+                  <v-list-item v-if="props.canUpdateNfcPatrol" @click="openDialogEdit()">
                     <v-list-item-title class="text-subtitle-2">
                       Edit Route
                     </v-list-item-title>
                   </v-list-item>
 
-                  <v-list-item @click="openDialogDelete()" class="text-red">
+                  <v-list-item
+                    v-if="props.canDeleteNfcPatrol"
+                    @click="openDialogDelete()"
+                    class="text-red"
+                  >
                     <v-list-item-title class="text-subtitle-2">
                       Delete Route
                     </v-list-item-title>
@@ -240,7 +262,12 @@
     </v-dialog>
 
     <!-- Delete Dialog -->
-    <v-dialog v-model="dialogDelete" persistent width="540">
+    <v-dialog
+      v-if="props.canDeleteNfcPatrol"
+      v-model="dialogDelete"
+      persistent
+      width="540"
+    >
       <v-card width="100%">
         <v-card-text
           style="max-height: 100vh; overflow-y: auto"
@@ -304,6 +331,18 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  canCreateNfcPatrol: {
+    type: Boolean,
+    default: false,
+  },
+  canUpdateNfcPatrol: {
+    type: Boolean,
+    default: false,
+  },
+  canDeleteNfcPatrol: {
+    type: Boolean,
+    default: false,
+  },
   headers: {
     type: Array as PropType<Array<any>>,
     default: () => [
@@ -406,6 +445,8 @@ const messageSnackbar = ref(false);
 const messageColor = ref("");
 
 async function openDialogEdit() {
+  if (!props.canUpdateNfcPatrol) return;
+
   try {
     // Fetch the full route details from the API
     const response = await getRouteById(selectedRoute.value._id);
@@ -431,6 +472,8 @@ async function openDialogEdit() {
 }
 
 function openDialogDelete() {
+  if (!props.canDeleteNfcPatrol) return;
+
   dialogDelete.value = true;
 
   if (dialogPreview.value) dialogPreview.value = false;
@@ -502,6 +545,8 @@ function handleRowClick(_: any, data: any) {
 }
 
 async function submitDelete() {
+  if (!props.canDeleteNfcPatrol) return;
+
   try {
     await deleteRouteById(selectedRoute.value._id ?? "");
     await getRoutesRefresh();