@7365admin1/layer-common 3.2.2-staging.181 → 3.2.2-staging.183

package/components/HidUserEnrollment.vue

@@ -36,8 +36,8 @@
     </v-alert>
 
     <TableMain
-      title="HID Users"
-      :headers="userHeaders"
+      :title="tableTitle"
+      :headers="tableHeaders"
       :items="users"
       :loading="loading"
       :items-per-page="-1"
@@ -49,7 +49,7 @@
       @refresh="loadUsers"
       @update:page="goToPage"
     >
-      <template #actions>
+      <template v-if="!props.cardManagement" #actions>
         <AppButton icon="mdi-account-plus" @click="openEnroll">Enroll</AppButton>
       </template>
 
@@ -71,8 +71,11 @@
             @keyup.enter="loadUsers"
           />
           <AppSelect
+            v-if="!props.cardManagement"
             v-model="status"
             :items="statusOptions"
+            placeholder="Status"
+            clearable
             @update:model-value="loadUsers"
           />
         </div>
@@ -107,8 +110,43 @@
         <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
+            v-for="card in getUserPhysicalCards(item)"
+            :key="card.id"
+            class="hid-card-cell__item"
+          >
+            {{ formatPhysicalCard(card) }}
+          </span>
+        </div>
+        <span v-else class="app-cell--muted">No card</span>
+      </template>
+
       <template #[`item.action-table`]="{ item }">
-        <v-menu>
+        <AppButton
+          v-if="props.cardManagement"
+          variant="secondary"
+          icon="mdi-card-account-details-outline"
+          @click="openCardManager(item)"
+        >
+          Manage
+        </AppButton>
+        <v-menu v-else>
           <template #activator="{ props: menuProps }">
             <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" />
           </template>
@@ -116,6 +154,7 @@
           <v-list density="compact" min-width="150">
             <v-list-item title="View" @click="openView(item)" />
             <v-list-item title="Edit" @click="openEdit(item)" />
+            <v-list-item title="Manage HID Cards" @click="openCardManager(item)" />
             <v-list-item
               title="Delete"
               class="text-error"
@@ -130,8 +169,13 @@
            that nobody has been enrolled yet. -->
       <template #no-data>
         <div class="table-card__empty">
-          <v-icon icon="mdi-account-off-outline" size="32" />
-          <span>No HID users enrolled yet.</span>
+          <v-icon
+            :icon="props.cardManagement ? 'mdi-card-account-details-outline' : 'mdi-account-off-outline'"
+            size="32"
+          />
+          <span>
+            {{ props.cardManagement ? "No HID users available for card assignment." : "No HID users enrolled yet." }}
+          </span>
         </div>
       </template>
     </TableMain>
@@ -207,6 +251,17 @@
             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
@@ -294,6 +349,17 @@
             ><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>
@@ -305,6 +371,118 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog v-model="cardDialog" max-width="560" persistent>
+      <v-card rounded="lg">
+        <v-card-title class="small-title">Physical HID Cards</v-card-title>
+        <v-card-text>
+          <p class="hid-card-user">
+            {{ getName(cardUser) }}
+            <span>{{ cardUser ? formatHidUid(cardUser.hidUserId) : "" }}</span>
+          </p>
+
+          <v-progress-linear v-if="loadingCards" indeterminate class="mb-3" />
+          <div v-else-if="physicalCards.length" class="hid-card-list mb-4">
+            <div v-for="card in physicalCards" :key="card.id" class="hid-card-row">
+              <v-icon icon="mdi-card-account-details-outline" size="22" />
+              <div class="hid-card-row__content">
+                <strong>{{ formatPhysicalCard(card) }}</strong>
+                <span>{{ getPhysicalCardSubtitle(card) }}</span>
+              </div>
+              <AppButton
+                variant="row"
+                icon="mdi-delete-outline"
+                :disabled="deletingCardId === String(card.id)"
+                @click="removePhysicalCard(card)"
+              />
+            </div>
+          </div>
+          <v-alert v-else type="info" variant="tonal" density="compact" class="mb-4">
+            No physical HID card is assigned to this user.
+          </v-alert>
+
+          <div class="field-label">Card data type</div>
+          <AppSelect
+            v-model="cardForm.cardType"
+            :items="physicalCardTypeOptions"
+            class="mb-3"
+          />
+          <p class="field-hint hid-card-type-hint">
+            PACS uses Facility Code + Card Number. CSN uses the raw serial number read from the physical card.
+          </p>
+          <p class="field-hint hid-card-access-hint">
+            The card uses this HID user's existing portal and access rules; assigning a card does not grant new access.
+          </p>
+
+          <div v-if="cardForm.cardType === 'pacs'" class="hid-card-fields">
+            <div>
+              <div class="field-label">Facility Code</div>
+              <AppField
+                v-model="cardForm.facilityCode"
+                inputmode="numeric"
+                placeholder="e.g. 123"
+              />
+            </div>
+            <div>
+              <div class="field-label">Card Number</div>
+              <AppField
+                v-model="cardForm.cardNumber"
+                inputmode="numeric"
+                placeholder="e.g. 45678"
+              />
+            </div>
+          </div>
+          <template v-else>
+            <div class="field-label">CSN / Raw Card Value</div>
+            <AppField
+              v-model="cardForm.cardValue"
+              inputmode="numeric"
+              placeholder="Enter the decimal card value"
+            />
+          </template>
+
+          <v-alert
+            v-if="enrollingCard"
+            type="info"
+            variant="tonal"
+            density="compact"
+            class="mt-4"
+          >
+            Present the physical card to the selected Amico reader. The request will time out after 30 seconds.
+          </v-alert>
+
+          <div class="hid-card-actions mt-4">
+            <AppButton
+              variant="secondary"
+              :disabled="savingCard || enrollingCard"
+              @click="assignPhysicalCard"
+            >
+              Assign Manually
+            </AppButton>
+            <AppButton
+              icon="mdi-contactless-payment"
+              :disabled="savingCard || enrollingCard"
+              @click="enrollPhysicalCard"
+            >
+              Read at Reader
+            </AppButton>
+            <AppButton
+              v-if="enrollingCard"
+              variant="ghost"
+              @click="cancelPhysicalCardEnrollment"
+            >
+              Cancel Reading
+            </AppButton>
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <AppButton variant="ghost" :disabled="enrollingCard" @click="cardDialog = false">
+            Close
+          </AppButton>
+        </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>
@@ -347,9 +525,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  identityType: {
-    type: String,
-    default: "resident",
+  cardManagement: {
+    type: Boolean,
+    default: false,
   },
 });
 
@@ -359,6 +537,11 @@ const {
   getUserImage,
   setUserImage,
   deleteUserImage,
+  getUserCards,
+  assignUserCard,
+  enrollUserCard,
+  cancelUserCardEnrollment,
+  deleteUserCard,
   getUserPinStatus,
   setUserPin,
   deleteUserPin,
@@ -371,9 +554,10 @@ const {
 const readers = ref<Record<string, any>[]>([]);
 const users = ref<Record<string, any>[]>([]);
 const userImages = ref<Record<string, string>>({});
+const administratorUserIds = ref<Set<number>>(new Set());
 const selectedReaderId = ref("");
 const search = ref("");
-const status = ref("Status");
+const status = ref("");
 const page = ref(1);
 const limit = ref(10);
 const pages = ref(1);
@@ -385,7 +569,16 @@ const deleting = ref(false);
 const formDialog = ref(false);
 const viewDialog = ref(false);
 const deleteDialog = ref(false);
+const cardDialog = ref(false);
 const selectedUser = ref<Record<string, any> | null>(null);
+const cardUser = ref<Record<string, any> | null>(null);
+const physicalCards = ref<Record<string, any>[]>([]);
+const physicalCardsByUserId = ref<Record<string, Record<string, any>[]>>({});
+const loadingCards = ref(false);
+const savingCard = ref(false);
+const enrollingCard = ref(false);
+const cardEnrollmentCancelled = ref(false);
+const deletingCardId = ref("");
 const showPin = ref(false);
 const pinEnrolled = ref(false);
 const photoInput = ref<HTMLInputElement | null>(null);
@@ -407,11 +600,24 @@ const form = reactive({
   name: "",
   hidUserId: "",
   registration: "",
+  isAdministrator: false,
   accessPin: "",
   photoPreview: "",
 });
 
-const statusOptions = ["Status", "Mapped", "Unmapped"];
+const cardForm = reactive({
+  cardType: "pacs" as "pacs" | "csn",
+  facilityCode: "",
+  cardNumber: "",
+  cardValue: "",
+});
+
+const physicalCardTypeOptions = [
+  { title: "PACS (Facility Code + Card Number)", value: "pacs" },
+  { title: "CSN (Raw Card Serial Number)", value: "csn" },
+];
+
+const statusOptions = ["Mapped", "Unmapped"];
 
 /**
  * `sortable: false` keeps the previous behaviour - the raw `v-table` never
@@ -424,9 +630,21 @@ 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 },
+];
+
+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 },
 ];
 
+const tableTitle = computed(() => props.cardManagement ? "HID Cards" : "HID Users");
+const tableHeaders = computed(() => props.cardManagement ? cardHeaders : userHeaders);
+
 /**
  * The list is paged on the SERVER, so the shared pager only moves the cursor -
  * the rows still come from `loadUsers`. This is the same pair of statements
@@ -479,16 +697,16 @@ async function loadReaders() {
 async function loadUsers() {
   if (!selectedReaderId.value) {
     users.value = [];
+    administratorUserIds.value = new Set();
+    physicalCardsByUserId.value = {};
     return;
   }
 
   loading.value = true;
   try {
     const identityQuery: Record<string, any> = {
-      page: page.value,
+      page: 1,
       limit: 500,
-      type: props.identityType,
-      search: search.value,
     };
 
     const [identityResponse, readerResponse, roleResponse] = await Promise.all([
@@ -499,9 +717,7 @@ async function loadUsers() {
         limit: 500,
         offset: 0,
       }),
-      isAdministratorIdentity()
-        ? loadAdministratorRoles(selectedReaderId.value)
-        : Promise.resolve(null),
+      loadAdministratorRoles(selectedReaderId.value),
     ]);
 
     const identities =
@@ -509,14 +725,16 @@ async function loadUsers() {
       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));
-    });
-    const mergedUsers = mergeReaderUsersWithIdentities(readerUsers, identities);
+    administratorUserIds.value = getAdministratorRoleUserIds(roleResponse);
+    const readerUsers = normalizeHidUsers(readerResponse).filter(
+      (user) => Number(user.userTypeId) !== 1,
+    );
+    const mergedUsers = mergeReaderUsersWithIdentities(readerUsers, identities).map(
+      (user) => ({
+        ...user,
+        isAdministrator: hasAdministratorRule(user),
+      }),
+    );
     const filteredUsers = filterUsers(mergedUsers);
     total.value = filteredUsers.length;
     pages.value = Math.max(1, Math.ceil(total.value / limit.value));
@@ -524,11 +742,17 @@ async function loadUsers() {
     const start = (page.value - 1) * limit.value;
     users.value = filteredUsers.slice(start, start + limit.value);
     serverPageRange.value = "";
-    await loadUserImages(users.value);
+    if (props.cardManagement) {
+      await loadVisibleUserCards(users.value);
+    } else {
+      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 = [];
+    administratorUserIds.value = new Set();
+    physicalCardsByUserId.value = {};
     total.value = 0;
     pages.value = 1;
     serverPageRange.value = "";
@@ -567,6 +791,7 @@ function resetForm() {
   form.name = "";
   form.hidUserId = "";
   form.registration = "";
+  form.isAdministrator = false;
   form.accessPin = "";
   pinEnrolled.value = false;
   showPin.value = false;
@@ -597,6 +822,7 @@ async function openEdit(user: Record<string, any>) {
   form.name = getName(user);
   form.hidUserId = formatHidUid(user.hidUserId);
   form.registration = user.registration ?? "";
+  form.isAdministrator = hasAdministratorRule(user);
   form.accessPin = "";
   pinEnrolled.value = Boolean(user.metadata?.pinEnrolled);
   removePinRequested.value = false;
@@ -722,7 +948,7 @@ async function saveUser() {
     const payload = {
       hidUserId: String(hidUser.id),
       registration: form.registration,
-      type: props.identityType as
+      type: (selectedUser.value?.type || "resident") as
         | "resident"
         | "staff"
         | "contractor"
@@ -741,12 +967,13 @@ async function saveUser() {
         imageTimestamp: selectedUser.value?.metadata?.imageTimestamp || "",
         facialScores: selectedUser.value?.metadata?.facialScores || {},
         pinEnrolled: pinEnrolled.value,
+        hidPhysicalCards: selectedUser.value?.metadata?.hidPhysicalCards || [],
       },
     };
 
     if (selectedUser.value) {
       await updateHidUserOnReader(readerId, hidUser);
-      await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
+      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);
@@ -757,7 +984,7 @@ async function saveUser() {
       }
     } else {
       await createHidUserOnReader(readerId, hidUser);
-      await syncHidUserRole(readerId, hidUser.id, isAdministratorIdentity());
+      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);
@@ -1122,8 +1349,182 @@ function toHidNumericId(value: unknown) {
   return Number.isInteger(parsed) && parsed > 0 ? parsed : undefined;
 }
 
-function isAdministratorIdentity() {
-  return props.identityType === "admin";
+function hasAdministratorRule(user?: Record<string, any> | null) {
+  const hidUserId = toHidNumericId(user?.hidUserId);
+  return Boolean(hidUserId && administratorUserIds.value.has(hidUserId));
+}
+
+async function loadVisibleUserCards(items: Record<string, any>[]) {
+  if (!selectedReaderId.value) return;
+
+  const entries = await Promise.all(
+    items.map(async (user) => {
+      const hidUserId = toHidNumericId(user.hidUserId);
+      if (!hidUserId) return ["", []] as const;
+
+      try {
+        const response = await getUserCards(selectedReaderId.value, hidUserId);
+        return [String(hidUserId), response?.data?.cards || []] as const;
+      } catch {
+        return [String(hidUserId), []] as const;
+      }
+    }),
+  );
+
+  physicalCardsByUserId.value = Object.fromEntries(
+    entries.filter(([hidUserId]) => Boolean(hidUserId)),
+  );
+}
+
+function getUserPhysicalCards(user: Record<string, any>) {
+  const hidUserId = toHidNumericId(user.hidUserId);
+  return hidUserId ? physicalCardsByUserId.value[String(hidUserId)] || [] : [];
+}
+
+async function openCardManager(user: Record<string, any>) {
+  cardUser.value = user;
+  cardForm.cardType = "pacs";
+  cardForm.facilityCode = "";
+  cardForm.cardNumber = "";
+  cardForm.cardValue = "";
+  physicalCards.value = [];
+  cardDialog.value = true;
+  await loadPhysicalCards();
+}
+
+function getCardReaderAndUser() {
+  const readerId = String(cardUser.value?.reader || selectedReaderId.value || "");
+  const hidUserId = toHidNumericId(cardUser.value?.hidUserId);
+  return { readerId, hidUserId };
+}
+
+async function loadPhysicalCards() {
+  const { readerId, hidUserId } = getCardReaderAndUser();
+  if (!readerId || !hidUserId) return;
+
+  loadingCards.value = true;
+  try {
+    const response = await getUserCards(readerId, hidUserId);
+    physicalCards.value = response?.data?.cards || [];
+  } catch (error: unknown) {
+    physicalCards.value = [];
+    showToast(getHidErrorMessage(error), "error");
+  } finally {
+    loadingCards.value = false;
+  }
+}
+
+function parsePhysicalCardInteger(value: string, label: string) {
+  if (!/^\d+$/.test(value.trim())) {
+    showToast(`${label} must contain numbers only.`, "error");
+    return null;
+  }
+  const number = Number(value);
+  if (!Number.isSafeInteger(number) || number < 0) {
+    showToast(`${label} is outside the supported range.`, "error");
+    return null;
+  }
+  return number;
+}
+
+async function assignPhysicalCard() {
+  const { readerId, hidUserId } = getCardReaderAndUser();
+  if (!readerId || !hidUserId) return;
+
+  let payload:
+    | { cardType: "pacs"; facilityCode: number; cardNumber: number }
+    | { cardType: "csn"; cardValue: string };
+  if (cardForm.cardType === "pacs") {
+    const facilityCode = parsePhysicalCardInteger(cardForm.facilityCode, "Facility Code");
+    const cardNumber = parsePhysicalCardInteger(cardForm.cardNumber, "Card Number");
+    if (facilityCode === null || cardNumber === null) return;
+    payload = { cardType: "pacs", facilityCode, cardNumber };
+  } else {
+    const cardValue = parsePhysicalCardInteger(cardForm.cardValue, "CSN");
+    if (cardValue === null || cardValue <= 0) {
+      if (cardValue === 0) showToast("CSN must be greater than zero.", "error");
+      return;
+    }
+    payload = { cardType: "csn", cardValue: String(cardValue) };
+  }
+
+  savingCard.value = true;
+  try {
+    await assignUserCard(readerId, hidUserId, payload);
+    cardForm.facilityCode = "";
+    cardForm.cardNumber = "";
+    cardForm.cardValue = "";
+    await loadPhysicalCards();
+    await loadUsers();
+    showToast("Physical HID card assigned and verified on the reader.");
+  } catch (error: unknown) {
+    showToast(getHidErrorMessage(error), "error");
+  } finally {
+    savingCard.value = false;
+  }
+}
+
+async function enrollPhysicalCard() {
+  const { readerId, hidUserId } = getCardReaderAndUser();
+  if (!readerId || !hidUserId) return;
+
+  enrollingCard.value = true;
+  cardEnrollmentCancelled.value = false;
+  try {
+    await enrollUserCard(readerId, hidUserId, cardForm.cardType, 30);
+    await loadPhysicalCards();
+    await loadUsers();
+    showToast("Physical HID card read and enrolled on the reader.");
+  } catch (error: unknown) {
+    if (!cardEnrollmentCancelled.value) {
+      showToast(getHidErrorMessage(error), "error");
+    }
+  } finally {
+    enrollingCard.value = false;
+  }
+}
+
+async function cancelPhysicalCardEnrollment() {
+  const { readerId } = getCardReaderAndUser();
+  if (!readerId) return;
+  cardEnrollmentCancelled.value = true;
+  try {
+    await cancelUserCardEnrollment(readerId);
+    showToast("Physical HID card reading cancelled.");
+  } catch (error: unknown) {
+    showToast(getHidErrorMessage(error), "error");
+  }
+}
+
+async function removePhysicalCard(card: Record<string, any>) {
+  if (!window.confirm(`Remove physical HID card ${formatPhysicalCard(card)}?`)) return;
+  const { readerId, hidUserId } = getCardReaderAndUser();
+  if (!readerId || !hidUserId || !card?.id) return;
+
+  deletingCardId.value = String(card.id);
+  try {
+    await deleteUserCard(readerId, hidUserId, card.id);
+    await loadPhysicalCards();
+    await loadUsers();
+    showToast("Physical HID card removed from the reader.");
+  } catch (error: unknown) {
+    showToast(getHidErrorMessage(error), "error");
+  } finally {
+    deletingCardId.value = "";
+  }
+}
+
+function formatPhysicalCard(card: Record<string, any>) {
+  if (card?.cardType === "pacs") {
+    return `PACS ${card.facilityCode}.${card.cardNumber}`;
+  }
+  if (card?.cardType === "csn") return `CSN ${card.value}`;
+  return `Card ${card?.value || "N/A"}`;
+}
+
+function getPhysicalCardSubtitle(card: Record<string, any>) {
+  const source = card?.source === "reader" ? "Read at reader" : card?.source === "manual" ? "Manual" : "On device";
+  return `${source} - Raw value ${card?.value || "N/A"}`;
 }
 
 function buildUnitLabel() {
@@ -1299,8 +1700,7 @@ function filterUsers(items: Record<string, any>[]) {
             .toLowerCase()
             .includes(searchText)
       );
-    const matchesStatus =
-      status.value === "Status" || getMappingStatus(item) === status.value;
+    const matchesStatus = !status.value || getMappingStatus(item) === status.value;
     return matchesSearch && matchesStatus;
   });
 }
@@ -1466,6 +1866,122 @@ function getHidErrorMessage(error: any) {
   background: var(--hover);
 }
 
+.admin-rule-indicator {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.hid-card-user {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 0 14px;
+  color: var(--text);
+  font-weight: 700;
+}
+
+.hid-card-user span,
+.hid-card-row__content span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.hid-card-cell {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.hid-card-cell__item {
+  padding: 4px 9px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--primary) 10%, transparent);
+  color: var(--primary);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.hid-card-list {
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+}
+
+.hid-card-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 58px;
+  padding: 8px 10px 8px 14px;
+  color: var(--text2);
+}
+
+.hid-card-row + .hid-card-row {
+  border-top: 1px solid var(--border);
+}
+
+.hid-card-row__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.hid-card-row__content strong {
+  color: var(--text);
+  font-size: 13px;
+}
+
+.hid-card-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.hid-card-type-hint {
+  margin-bottom: 6px;
+}
+
+.hid-card-access-hint {
+  margin-bottom: 14px;
+}
+
+.hid-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+@media (max-width: 520px) {
+  .hid-card-fields {
+    grid-template-columns: 1fr;
+  }
+}
+
+.admin-rule-indicator--enabled {
+  color: var(--ok);
+}
+
+.admin-rule-indicator--disabled {
+  color: var(--err);
+}
+
+.admin-rule-checkbox {
+  margin-top: -4px;
+}
+
+.admin-rule-hint {
+  margin: -2px 0 14px;
+}
+
+.admin-rule-detail {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .hidden-input {
   display: none;
 }