@7365admin1/layer-common 4.0.3-staging.232 → 4.0.3-staging.234

package/components/HidReaderUserRoster.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="hid-reader-user-roster">
     <TableMain
-      title="HID Reader Users"
+      title="HID Users"
       :headers="headers"
       :items="users"
       :loading="loading"
@@ -14,12 +14,6 @@
       @refresh="loadUsers"
       @update:page="goToPage"
     >
-      <template #actions>
-        <AppButton icon="mdi-account-switch-outline" @click="openMapping">
-          HID User Mapping
-        </AppButton>
-      </template>
-
       <template #extension>
         <div class="app-filter-row hid-reader-user-roster__filters">
           <AppSelect
@@ -35,6 +29,12 @@
             placeholder="Search Amico user, UID or registration"
             @keyup.enter="reloadFromFirstPage"
           />
+          <AppSelect
+            v-model="userType"
+            class="user-type-select"
+            :items="userTypeOptions"
+            @update:model-value="reloadFromFirstPage"
+          />
         </div>
       </template>
 
@@ -42,6 +42,12 @@
         <span class="app-cell--strong">{{ getRawName(item) }}</span>
       </template>
 
+      <template #[`item.userType`]="{ item }">
+        <span class="hid-user-type" :class="{ 'hid-user-type--visitor': isVisitor(item) }">
+          {{ getUserTypeLabel(item) }}
+        </span>
+      </template>
+
       <template #[`item.hidUserId`]="{ item }">
         <span class="app-cell--num">{{ formatUid(item.hidUserId) }}</span>
       </template>
@@ -68,17 +74,15 @@
         </span>
       </template>
 
-      <template #[`item.isAdministrator`]="{ item }">
-        <v-icon
-          :icon="item.isAdministrator ? 'mdi-check-circle' : 'mdi-close-circle'"
-          :class="item.isAdministrator ? 'admin-rule--enabled' : 'admin-rule--disabled'"
-          :aria-label="item.isAdministrator ? 'Administrator' : 'Not administrator'"
-          size="22"
-        />
-      </template>
-
-      <template #[`item.mappingStatus`]="{ item }">
-        <StatusChip :status="isMapped(item) ? 'Mapped' : 'Unmapped'" />
+      <template #[`item.action-table`]="{ item }">
+        <AppButton
+          variant="row"
+          icon="mdi-form-textbox-password"
+          aria-label="Update access PIN"
+          @click="openPinDialog(item)"
+        >
+          PIN
+        </AppButton>
       </template>
 
       <template #no-data>
@@ -89,6 +93,89 @@
       </template>
     </TableMain>
 
+    <v-dialog v-model="pinDialog" max-width="420" persistent>
+      <v-card rounded="lg">
+        <v-card-title class="small-title">Update Access PIN</v-card-title>
+        <v-card-text>
+          <p class="pin-user">
+            {{ pinUser ? getRawName(pinUser) : "HID User" }}
+            <span>{{ pinUser ? formatUid(pinUser.hidUserId) : "" }}</span>
+          </p>
+          <v-progress-linear v-if="pinLoading" indeterminate class="mb-4" />
+          <template v-else>
+            <p class="field-hint mb-4">
+              {{ pinEnrolled
+                ? "Enter a new PIN to replace the current one, or select Remove current PIN."
+                : "This numeric PIN is an independent Amico credential." }}
+            </p>
+            <div class="field-label">Access PIN</div>
+            <AppField
+              v-model="accessPin"
+              aria-label="Access PIN"
+              placeholder="Enter numeric access PIN"
+              inputmode="numeric"
+              autocomplete="new-password"
+              :disabled="removePinRequested"
+              :type="showPin ? 'text' : 'password'"
+              @update:model-value="onPinInput"
+            >
+              <template #trailing>
+                <button
+                  type="button"
+                  class="app-field__trailing"
+                  :aria-label="showPin ? 'Hide access PIN' : 'Show access PIN'"
+                  @click="showPin = !showPin"
+                >
+                  <v-icon :icon="showPin ? 'mdi-eye-off' : 'mdi-eye'" size="18" />
+                </button>
+              </template>
+            </AppField>
+            <div class="field-label mt-3">Confirm Access PIN</div>
+            <AppField
+              v-model="confirmPin"
+              aria-label="Confirm access PIN"
+              placeholder="Re-enter numeric access PIN"
+              inputmode="numeric"
+              autocomplete="new-password"
+              :disabled="removePinRequested"
+              :type="showPin ? 'text' : 'password'"
+              @update:model-value="onConfirmPinInput"
+            />
+            <v-checkbox
+              v-if="pinEnrolled"
+              v-model="removePinRequested"
+              label="Remove current access PIN"
+              density="compact"
+              hide-details
+              class="mt-2"
+            />
+            <p v-if="pinError" class="pin-error">{{ pinError }}</p>
+          </template>
+        </v-card-text>
+        <v-card-actions class="pa-0">
+          <v-btn
+            class="text-none action-cancel"
+            variant="flat"
+            height="44"
+            :disabled="pinSaving"
+            @click="pinDialog = false"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            class="text-none action-submit"
+            variant="flat"
+            height="44"
+            :disabled="pinLoading || pinSaving || (!removePinRequested && !accessPin)"
+            :loading="pinSaving"
+            @click="savePin"
+          >
+            {{ removePinRequested ? "Remove PIN" : pinEnrolled ? "Update PIN" : "Save PIN" }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
     <v-snackbar v-model="snackbar.show" :color="snackbar.color" timeout="3500">
       {{ snackbar.message }}
     </v-snackbar>
@@ -116,41 +203,57 @@ type HidReaderUser = Record<string, unknown> & {
   registration?: string;
   name?: string;
   metadata?: HidMetadata;
-  person?: string;
-  member?: string;
-  serviceProvider?: string;
-  visitor?: string;
-  isAdministrator?: boolean;
 };
 
-const { getReaders, getReaderUsers, getUserImage } = useHidAmico();
-const route = useRoute();
-const router = useRouter();
+const {
+  getReaders,
+  getReaderUsers,
+  getUserImage,
+  getUserPinStatus,
+  setUserPin,
+  deleteUserPin,
+} = useHidAmico();
 const readers = ref<HidReader[]>([]);
 const users = ref<HidReaderUser[]>([]);
 const userImages = ref<Record<string, string>>({});
 const selectedReaderId = ref("");
 const search = ref("");
+const userType = ref<"all" | "user" | "visitor">("all");
 const page = ref(1);
 const pages = ref(1);
 const total = ref(0);
 const serverPageRange = ref("");
 const loading = ref(false);
+const pinDialog = ref(false);
+const pinUser = ref<HidReaderUser>();
+const accessPin = ref("");
+const confirmPin = ref("");
+const showPin = ref(false);
+const pinEnrolled = ref(false);
+const removePinRequested = ref(false);
+const pinLoading = ref(false);
+const pinSaving = ref(false);
+const pinError = ref("");
 const snackbar = reactive({ show: false, color: "success", message: "" });
 
 const headers = [
   { title: "Amico Name", value: "name", sortable: false },
+  { title: "Type", value: "userType", sortable: false },
   { title: "UID", value: "hidUserId", sortable: false },
   { title: "Registration No.", value: "registration", sortable: false },
   { title: "Facial Data", value: "facialData", sortable: false },
-  { title: "Admin", value: "isAdministrator", sortable: false },
-  { title: "iService Mapping", value: "mappingStatus", sortable: false },
+  { title: "", value: "action-table", sortable: false },
 ];
 
 const readerOptions = computed(() => readers.value.map((reader) => ({
   title: `${reader.name || reader.deviceId || reader._id} - ${reader.portalName || "Portal not configured"}`,
   value: reader._id,
 })));
+const userTypeOptions = [
+  { title: "All user types", value: "all" },
+  { title: "HID Users", value: "user" },
+  { title: "Visitors", value: "visitor" },
+];
 
 const pageRange = computed(() => {
   if (serverPageRange.value) return serverPageRange.value;
@@ -191,18 +294,50 @@ async function loadUsers() {
 
   loading.value = true;
   try {
-    const response = toRecord(await getReaderUsers(selectedReaderId.value, {
-      page: page.value,
-      limit: 10,
-      search: search.value.trim(),
-    }));
+    let clientFiltersUserType = false;
+    let response: Record<string, unknown>;
+    try {
+      response = toRecord(await getReaderUsers(selectedReaderId.value, {
+        page: page.value,
+        limit: 10,
+        search: search.value.trim(),
+        includeVisitors: true,
+        userType: userType.value,
+      }));
+    } catch (error: unknown) {
+      if (!isUnsupportedUserTypeFilter(error)) throw error;
+
+      // A deployed API can lag behind the shared layer. Retain a working
+      // Visitor/HID User filter while that API has not yet added userType.
+      clientFiltersUserType = true;
+      response = toRecord(await getReaderUsers(selectedReaderId.value, {
+        page: 1,
+        limit: 100,
+        search: search.value.trim(),
+        includeVisitors: true,
+      }));
+    }
     const data = toRecord(response.data);
     const items = response.items ?? data.items ?? [];
-    users.value = (Array.isArray(items) ? items : []).map(toReaderUser);
+    const allItems = Array.isArray(items) ? items : [];
+    const matchingItems = clientFiltersUserType
+      ? allItems.filter((item) => matchesUserType(toReaderUser(item)))
+      : allItems;
+    const pageStart = (page.value - 1) * 10;
+    const pageItems = clientFiltersUserType
+      ? matchingItems.slice(pageStart, pageStart + 10)
+      : matchingItems;
+    users.value = pageItems.map(toReaderUser);
     await loadUserImages(users.value);
-    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);
+    total.value = clientFiltersUserType
+      ? matchingItems.length
+      : toNumber(response.total ?? data.total, users.value.length);
+    pages.value = clientFiltersUserType
+      ? Math.max(1, Math.ceil(total.value / 10))
+      : Math.max(1, toNumber(response.pages ?? data.pages, 1));
+    serverPageRange.value = clientFiltersUserType
+      ? ""
+      : toText(response.pageRange ?? data.pageRange);
   } catch (error: unknown) {
     users.value = [];
     total.value = 0;
@@ -225,17 +360,6 @@ function reloadFromFirstPage() {
   loadUsers();
 }
 
-function openMapping() {
-  router.push({
-    name: "org-site-access-mgmt-hid-user-mapping",
-    params: { org: route.params.org, site: props.site },
-  });
-}
-
-function isMapped(user: HidReaderUser) {
-  return Boolean(user.person || user.member || user.serviceProvider || user.visitor);
-}
-
 function hasFacialData(user: HidReaderUser) {
   return user.metadata?.facialEnrolled === true || Boolean(toText(user.metadata?.facialData));
 }
@@ -263,13 +387,97 @@ async function loadUserImages(items: HidReaderUser[]) {
 
 function getUserImageSrc(user: HidReaderUser) {
   const hidUserId = toHidNumericId(user.hidUserId);
-  return toText(user.metadata?.photo) || (hidUserId ? userImages.value[String(hidUserId)] : "") || "";
+  return (hidUserId ? userImages.value[String(hidUserId)] : "") || "";
+}
+
+async function openPinDialog(user: HidReaderUser) {
+  const hidUserId = toHidNumericId(user.hidUserId);
+  if (!selectedReaderId.value || !hidUserId) {
+    showToast("This Amico user does not have a valid UID for PIN management.", "error");
+    return;
+  }
+
+  pinUser.value = user;
+  accessPin.value = "";
+  confirmPin.value = "";
+  showPin.value = false;
+  pinEnrolled.value = false;
+  removePinRequested.value = false;
+  pinError.value = "";
+  pinDialog.value = true;
+  pinLoading.value = true;
+  try {
+    const response = toRecord(await getUserPinStatus(selectedReaderId.value, hidUserId));
+    const data = toRecord(response.data ?? response);
+    pinEnrolled.value = data.pinEnrolled === true;
+  } catch (error: unknown) {
+    pinError.value = getErrorMessage(error, "Unable to load the current HID Access PIN.");
+  } finally {
+    pinLoading.value = false;
+  }
+}
+
+function onPinInput(value: string) {
+  accessPin.value = value.replace(/\D/g, "").slice(0, 32);
+}
+
+function onConfirmPinInput(value: string) {
+  confirmPin.value = value.replace(/\D/g, "").slice(0, 32);
+}
+
+async function savePin() {
+  const hidUserId = pinUser.value ? toHidNumericId(pinUser.value.hidUserId) : undefined;
+  if (!selectedReaderId.value || !hidUserId) return;
+
+  if (!removePinRequested.value) {
+    if (!/^\d{1,32}$/.test(accessPin.value)) {
+      pinError.value = "Access PIN must contain 1 to 32 numbers.";
+      return;
+    }
+    if (accessPin.value !== confirmPin.value) {
+      pinError.value = "Access PIN confirmation does not match.";
+      return;
+    }
+  }
+
+  pinSaving.value = true;
+  pinError.value = "";
+  try {
+    if (removePinRequested.value) {
+      await deleteUserPin(selectedReaderId.value, hidUserId);
+      pinEnrolled.value = false;
+      showToast("HID Access PIN removed.");
+    } else {
+      await setUserPin(selectedReaderId.value, hidUserId, accessPin.value);
+      pinEnrolled.value = true;
+      showToast("HID Access PIN updated.");
+    }
+    pinDialog.value = false;
+  } catch (error: unknown) {
+    pinError.value = getErrorMessage(error, "Unable to update HID Access PIN.");
+  } finally {
+    pinSaving.value = false;
+  }
 }
 
 function getRawName(user: HidReaderUser) {
   return toText(user.metadata?.name) || toText(user.name) || "Unknown";
 }
 
+function isVisitor(user: HidReaderUser) {
+  return Number(user.metadata?.hidUserTypeId ?? user.user_type_id) === 1;
+}
+
+function getUserTypeLabel(user: HidReaderUser) {
+  return isVisitor(user) ? "Visitor" : "HID User";
+}
+
+function matchesUserType(user: HidReaderUser) {
+  return userType.value === "all"
+    || (userType.value === "visitor" && isVisitor(user))
+    || (userType.value === "user" && !isVisitor(user));
+}
+
 function formatUid(value: unknown) {
   const text = toText(value);
   if (!text) return "N/A";
@@ -288,10 +496,16 @@ function showToast(message: string, color = "success") {
   snackbar.show = true;
 }
 
-function getErrorMessage(error: unknown) {
+function getErrorMessage(error: unknown, fallback = "Unable to load HID reader users.") {
   const record = toRecord(error);
   const data = toRecord(record.data);
-  return toText(data.message) || toText(record.message) || "Unable to load HID reader users.";
+  return toText(data.message) || toText(record.message) || fallback;
+}
+
+function isUnsupportedUserTypeFilter(error: unknown) {
+  const message = getErrorMessage(error, "").toLowerCase();
+  return message.includes("usertype")
+    && (message.includes("not allowed") || message.includes("unknown"));
 }
 
 function toReader(value: unknown): HidReader | null {
@@ -309,11 +523,6 @@ function toReaderUser(value: unknown): HidReaderUser {
     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,
-    isAdministrator: user.isAdministrator === true,
   };
 }
 
@@ -354,12 +563,24 @@ function toNumber(value: unknown, fallback: number) {
   max-width: 320px;
 }
 
-.admin-rule--enabled {
-  color: var(--success, #16855f);
+.hid-reader-user-roster__filters :deep(.user-type-select) {
+  max-width: 190px;
+}
+
+.hid-user-type {
+  background: color-mix(in srgb, var(--primary, #3b70d1) 12%, transparent);
+  border-radius: 999px;
+  color: var(--primary, #3b70d1);
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 4px 9px;
+  white-space: nowrap;
 }
 
-.admin-rule--disabled {
-  color: var(--err, #d94a4a);
+.hid-user-type--visitor {
+  background: color-mix(in srgb, var(--warning, #9a6b00) 14%, transparent);
+  color: var(--warning, #9a6b00);
 }
 
 .hid-face-avatar {
@@ -373,4 +594,26 @@ function toNumber(value: unknown, fallback: number) {
   gap: 6px;
   white-space: nowrap;
 }
+
+.pin-user {
+  color: var(--text, #1e2632);
+  display: grid;
+  font-size: 16px;
+  font-weight: 700;
+  gap: 3px;
+  margin: 0 0 18px;
+}
+
+.pin-user span,
+.field-hint {
+  color: var(--muted, #7a8494);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.pin-error {
+  color: var(--error, #d21f2b);
+  font-size: 13px;
+  margin: 12px 0 0;
+}
 </style>

package/components/HidUserEnrollment.vue

@@ -110,20 +110,6 @@
         <StatusChip :status="getMappingStatus(item)" />
       </template>
 
-      <template #[`item.isAdministrator`]="{ item }">
-        <v-icon
-          :icon="item.isAdministrator ? 'mdi-check-circle' : 'mdi-close-circle'"
-          :class="[
-            'admin-rule-indicator',
-            item.isAdministrator
-              ? 'admin-rule-indicator--enabled'
-              : 'admin-rule-indicator--disabled',
-          ]"
-          :aria-label="item.isAdministrator ? 'Administrator' : 'Not administrator'"
-          size="22"
-        />
-      </template>
-
       <template #[`item.cards`]="{ item }">
         <div v-if="getUserPhysicalCards(item).length" class="hid-card-cell">
           <span
@@ -134,6 +120,12 @@
             {{ formatPhysicalCard(card) }}
           </span>
         </div>
+        <span v-else-if="getUserCardLoadError(item)" class="hid-card-load-error">
+          Unable to load
+          <v-tooltip activator="parent" location="top">
+            {{ getUserCardLoadError(item) }}
+          </v-tooltip>
+        </span>
         <span v-else class="app-cell--muted">No card</span>
       </template>
 
@@ -269,17 +261,6 @@
             klass="mb-3"
           />
 
-          <v-checkbox
-            v-model="form.isAdministrator"
-            label="Administrator"
-            density="compact"
-            hide-details
-            class="admin-rule-checkbox"
-          />
-          <p class="field-hint admin-rule-hint">
-            Allow this HID user to access the reader as an administrator.
-          </p>
-
           <div class="field-label">Access PIN (optional)</div>
           <!--
             The handoff draws no password field anywhere (the sign-in screens
@@ -367,17 +348,6 @@
             ><strong>{{
               selectedUser ? getMappingStatus(selectedUser) : "N/A"
             }}</strong>
-            <span>Administrator</span>
-            <strong class="admin-rule-detail">
-              <v-icon
-                :icon="selectedUser?.isAdministrator ? 'mdi-check-circle' : 'mdi-close-circle'"
-                :class="selectedUser?.isAdministrator
-                  ? 'admin-rule-indicator--enabled'
-                  : 'admin-rule-indicator--disabled'"
-                size="18"
-              />
-              {{ selectedUser?.isAdministrator ? "Yes" : "No" }}
-            </strong>
             <span>Access PIN</span
             ><strong>{{ selectedUser?.metadata?.pinEnrolled ? "Configured" : "N/A" }}</strong>
           </div>
@@ -668,6 +638,7 @@ const selectedUser = ref<HidUser | null>(null);
 const cardUser = ref<HidUser | null>(null);
 const physicalCards = ref<HidCard[]>([]);
 const physicalCardsByUserId = ref<Record<string, HidCard[]>>({});
+const physicalCardErrorsByUserId = ref<Record<string, string>>({});
 const loadingCards = ref(false);
 const savingCard = ref(false);
 const enrollingCard = ref(false);
@@ -757,7 +728,6 @@ const userHeaders = [
   { title: "Facial Data", value: "facialData", sortable: false },
   { title: "UID", value: "hidUserId", sortable: false },
   { title: "Status", value: "status", sortable: false },
-  { title: "Admin", value: "isAdministrator", sortable: false },
   { title: "", value: "action-table", sortable: false },
 ];
 
@@ -765,7 +735,6 @@ const cardHeaders = [
   { title: "Name", value: "name", sortable: false },
   { title: "UID", value: "hidUserId", sortable: false },
   { title: "Physical HID Cards", value: "cards", sortable: false },
-  { title: "Admin", value: "isAdministrator", sortable: false },
   { title: "", value: "action-table", sortable: false },
 ];
 
@@ -835,6 +804,7 @@ async function loadUsers() {
     users.value = [];
     administratorUserIds.value = new Set();
     physicalCardsByUserId.value = {};
+    physicalCardErrorsByUserId.value = {};
     return;
   }
 
@@ -871,6 +841,7 @@ async function loadUsers() {
     users.value = [];
     administratorUserIds.value = new Set();
     physicalCardsByUserId.value = {};
+    physicalCardErrorsByUserId.value = {};
     total.value = 0;
     pages.value = 1;
     serverPageRange.value = "";
@@ -1110,12 +1081,11 @@ async function saveUser() {
         ? "resident"
         : form.subjectCategory === "service_provider"
           ? "contractor"
-          : form.isAdministrator ? "admin" : "staff") as
+          : "staff") as
         | "resident"
         | "staff"
         | "contractor"
         | "visitor"
-        | "admin"
         | "unknown",
       status: "active" as const,
       metadata: {
@@ -1134,7 +1104,6 @@ async function saveUser() {
 
     if (selectedUser.value) {
       await updateHidUserOnReader(readerId, hidUser);
-      await syncHidUserRole(readerId, hidUser.id, form.isAdministrator);
       const facialResult = await syncFacialImage(readerId, hidUser.id);
       applyFacialResult(payload.metadata, facialResult);
       payload.metadata.pinEnrolled = await syncAccessPin(readerId, hidUser.id);
@@ -1146,7 +1115,6 @@ async function saveUser() {
     } else {
       const created = await createHidUserOnReader(readerId, hidUser);
       if (created) newlyCreatedHidUserId = hidUser.id;
-      await syncHidUserRole(readerId, hidUser.id, form.isAdministrator);
       const facialResult = await syncFacialImage(readerId, hidUser.id);
       applyFacialResult(payload.metadata, facialResult);
       payload.metadata.pinEnrolled = await syncAccessPin(readerId, hidUser.id);
@@ -1501,6 +1469,7 @@ function hasAdministratorRule(user?: HidUser | null) {
 async function loadVisibleUserCards(items: HidUser[]) {
   if (!selectedReaderId.value) return;
 
+  const cardErrors: Record<string, string> = {};
   const entries = await Promise.all(
     items.map(async (user) => {
       const hidUserId = toHidNumericId(user.hidUserId);
@@ -1511,7 +1480,8 @@ async function loadVisibleUserCards(items: HidUser[]) {
         const responseData = toRecord(toRecord(response).data);
         const cards = responseData.cards;
         return [String(hidUserId), (Array.isArray(cards) ? cards : []).map(toHidCard)] as const;
-      } catch {
+      } catch (error: unknown) {
+        cardErrors[String(hidUserId)] = getHidErrorMessage(error);
         return [String(hidUserId), []] as const;
       }
     }),
@@ -1520,6 +1490,7 @@ async function loadVisibleUserCards(items: HidUser[]) {
   physicalCardsByUserId.value = Object.fromEntries(
     entries.filter(([hidUserId]) => Boolean(hidUserId)),
   );
+  physicalCardErrorsByUserId.value = cardErrors;
 }
 
 function getUserPhysicalCards(user: HidUser) {
@@ -1527,6 +1498,11 @@ function getUserPhysicalCards(user: HidUser) {
   return hidUserId ? physicalCardsByUserId.value[String(hidUserId)] || [] : [];
 }
 
+function getUserCardLoadError(user: HidUser) {
+  const hidUserId = toHidNumericId(user.hidUserId);
+  return hidUserId ? physicalCardErrorsByUserId.value[String(hidUserId)] || "" : "";
+}
+
 async function openCardManager(user: HidUser) {
   cardUser.value = user;
   const reader = readers.value.find((item) => String(item._id) === String(user.reader || selectedReaderId.value));
@@ -2082,6 +2058,13 @@ function toHidCard(value: unknown): HidCard {
   font-weight: 700;
 }
 
+.hid-card-load-error {
+  color: var(--error, #d21f2b);
+  cursor: help;
+  font-size: 12px;
+  font-weight: 700;
+}
+
 .hid-card-list {
   overflow: hidden;
   border: 1px solid var(--border);