@7365admin1/layer-common 3.2.1 → 3.2.2-staging.76

package/components/HidIdentityMapping.vue

@@ -1,975 +0,0 @@
-<template>
-  <section class="hid-identity-mapping">
-    <div class="toolbar">
-      <v-select
-        v-if="readers.length > 1"
-        v-model="selectedReaderId"
-        :items="readerOptions"
-        item-title="title"
-        item-value="value"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="reader-input"
-        @update:model-value="loadIdentities"
-      />
-
-      <v-btn
-        rounded="xl"
-        class="text-none refresh-button"
-        variant="flat"
-        prepend-icon="mdi-refresh"
-        :loading="loading"
-        @click="loadIdentities"
-      >
-        Refresh
-      </v-btn>
-
-      <div class="toolbar-spacer" />
-
-      <v-text-field
-        v-model="search"
-        placeholder="Search HID user or mapped user"
-        prepend-inner-icon="mdi-magnify"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="search-input"
-      />
-
-      <v-select
-        v-model="type"
-        :items="typeOptions"
-        item-title="title"
-        item-value="value"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="type-input"
-        @update:model-value="loadIdentities"
-      />
-    </div>
-
-    <v-card flat border class="table-card">
-      <v-tabs v-model="activeTab" class="mapping-tabs" density="compact">
-        <v-tab value="all" class="text-none">All</v-tab>
-        <v-tab value="mapped" class="text-none">Mapped</v-tab>
-        <v-tab value="unmapped" class="text-none">Unmapped</v-tab>
-        <v-tab value="review" class="text-none">Needs Review</v-tab>
-      </v-tabs>
-
-      <v-table>
-        <thead>
-          <tr>
-            <th>HID User</th>
-            <th>HID User ID</th>
-            <th>Registration No.</th>
-            <th>Access Method</th>
-            <th>Mapped To</th>
-            <th>Unit / Company</th>
-            <th>Status</th>
-            <th class="text-right"></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="identity in filteredIdentities" :key="identity._id">
-            <td>{{ getIdentityName(identity) }}</td>
-            <td>{{ identity.hidUserId || "N/A" }}</td>
-            <td>{{ identity.registration || "N/A" }}</td>
-            <td>{{ getAccessMethod(identity) }}</td>
-            <td>{{ getMappedLabel(identity) }}</td>
-            <td>{{ getUnitLabel(identity) }}</td>
-            <td>
-              <v-chip
-                size="small"
-                variant="flat"
-                :class="isMapped(identity) ? 'mapped-chip' : 'unmapped-chip'"
-              >
-                {{ isMapped(identity) ? "Mapped" : "Unmapped" }}
-              </v-chip>
-            </td>
-            <td class="text-right">
-              <v-menu>
-                <template #activator="{ props: menuProps }">
-                  <v-btn v-bind="menuProps" icon="mdi-dots-vertical" variant="text" density="comfortable" />
-                </template>
-                <v-list density="compact" min-width="160">
-                  <v-list-item @click="openMapDialog(identity)">
-                    <v-list-item-title>{{ isMapped(identity) ? "Edit Mapping" : "Map Identity" }}</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item :disabled="!isMapped(identity)" @click="unmapIdentity(identity)">
-                    <v-list-item-title>Unmap</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
-            </td>
-          </tr>
-        </tbody>
-      </v-table>
-
-      <div v-if="!filteredIdentities.length" class="empty-state">
-        No HID identities found.
-      </div>
-    </v-card>
-
-    <v-dialog v-model="mapDialog" max-width="520" persistent>
-      <v-card class="mapping-dialog" rounded="lg">
-        <v-card-title class="dialog-title">
-          {{ selectedIdentity && isMapped(selectedIdentity) ? "Edit Mapping" : "Map Identity" }}
-        </v-card-title>
-
-        <v-card-text class="dialog-body">
-          <div class="identity-summary">
-            <div>
-              <span>HID User</span>
-              <strong>{{ selectedIdentity ? getIdentityName(selectedIdentity) : "N/A" }}</strong>
-            </div>
-            <div>
-              <span>HID User ID</span>
-              <strong>{{ selectedIdentity?.hidUserId || "N/A" }}</strong>
-            </div>
-          </div>
-
-          <div class="field-label">User Type <span>*</span></div>
-          <v-select
-            v-model="mappingForm.type"
-            :items="mappingTypeOptions"
-            item-title="title"
-            item-value="value"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
-            class="mb-3"
-            @update:model-value="onMappingTypeChange"
-          />
-
-          <div class="field-label">Search User <span>*</span></div>
-          <v-autocomplete
-            v-model="mappingForm.recordId"
-            v-model:search="recordSearch"
-            :items="recordOptions"
-            item-title="title"
-            item-value="value"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
-            placeholder="Search name, unit, company or email"
-            :loading="recordLoading"
-            no-filter
-            class="mb-3"
-            @update:search="debouncedSearchRecords"
-            @update:model-value="onRecordSelect"
-          />
-
-          <div class="field-label">Unit / Company</div>
-          <v-text-field
-            v-model="mappingForm.unitLabel"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
-            placeholder="Auto filled when possible"
-            class="mb-3"
-          />
-
-          <div class="field-label">Notes</div>
-          <v-textarea
-            v-model="mappingForm.notes"
-            density="compact"
-            variant="outlined"
-            hide-details="auto"
-            rows="3"
-            placeholder="Optional notes"
-          />
-        </v-card-text>
-
-        <v-card-actions class="dialog-actions pa-0">
-          <v-btn class="text-none action-cancel" variant="flat" height="48" @click="mapDialog = false">
-            Cancel
-          </v-btn>
-          <v-btn
-            class="text-none action-submit"
-            variant="flat"
-            height="48"
-            :loading="saving"
-            :disabled="!mappingForm.recordId"
-            @click="saveMapping"
-          >
-            Save
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <v-snackbar v-model="snackbar.show" :color="snackbar.color" timeout="2600">
-      {{ snackbar.message }}
-    </v-snackbar>
-  </section>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  site: {
-    type: String,
-    required: true,
-  },
-  org: {
-    type: String,
-    default: "",
-  },
-});
-
-type MappingType = "resident" | "visitor" | "staff";
-
-const { getReaders, getIdentities, runObjectOperation, createIdentity, updateIdentity } = useHidAmico();
-const { getAll: getMembers } = useMember();
-const { getVisitors } = useVisitor();
-const { getUsers } = useUser();
-
-const readers = ref<Record<string, any>[]>([]);
-const identities = ref<Record<string, any>[]>([]);
-const selectedReaderId = ref("");
-const activeTab = ref("all");
-const search = ref("");
-const type = ref("all");
-const loading = ref(false);
-const mapDialog = ref(false);
-const selectedIdentity = ref<Record<string, any>>();
-const recordSearch = ref("");
-const recordOptions = ref<Array<{ title: string; value: string; raw: Record<string, any> }>>([]);
-const recordLoading = ref(false);
-const saving = ref(false);
-let searchTimer: ReturnType<typeof setTimeout> | undefined;
-
-const snackbar = reactive({
-  show: false,
-  message: "",
-  color: "success",
-});
-
-const mappingForm = reactive({
-  type: "resident" as MappingType,
-  recordId: "",
-  unitLabel: "",
-  notes: "",
-  record: undefined as Record<string, any> | undefined,
-});
-
-const typeOptions = [
-  { title: "All Types", value: "all" },
-  { title: "Resident", value: "resident" },
-  { title: "Visitor", value: "visitor" },
-  { title: "Administrator", value: "staff" },
-];
-
-const mappingTypeOptions = [
-  { title: "Resident", value: "resident" },
-  { title: "Visitor", value: "visitor" },
-  { title: "Administrator", value: "staff" },
-];
-
-const readerOptions = computed(() =>
-  readers.value.map((reader) => ({
-    title: reader.name || reader.deviceId || reader._id,
-    value: reader._id,
-  })),
-);
-
-const filteredIdentities = computed(() => {
-  const query = search.value.trim().toLowerCase();
-  return identities.value.filter((identity) => {
-    const mapped = isMapped(identity);
-    const matchesTab =
-      activeTab.value === "all" ||
-      (activeTab.value === "mapped" && mapped) ||
-      (activeTab.value === "unmapped" && !mapped) ||
-      (activeTab.value === "review" && !mapped);
-    const matchesSearch = !query || [
-      getIdentityName(identity),
-      identity.hidUserId,
-      identity.registration,
-      identity.cardNo,
-      getMappedLabel(identity),
-      getUnitLabel(identity),
-      getAccessMethod(identity),
-    ].some((value) => String(value ?? "").toLowerCase().includes(query));
-
-    return matchesTab && matchesSearch;
-  });
-});
-
-watch(
-  () => props.site,
-  () => init(),
-  { immediate: true },
-);
-
-async function init() {
-  await loadReaders();
-  await loadIdentities();
-}
-
-async function loadReaders() {
-  if (!props.site) return;
-  const response = await getReaders({ site: props.site, page: 1, limit: 100 });
-  readers.value = normalizeItems(response, "readers");
-  if (!selectedReaderId.value && readers.value.length) {
-    selectedReaderId.value = readers.value[0]._id;
-  }
-}
-
-async function loadIdentities() {
-  if (!selectedReaderId.value) {
-    identities.value = [];
-    return;
-  }
-
-  loading.value = true;
-  try {
-    const [identityResponse, readerResponse] = await Promise.all([
-      getIdentities(selectedReaderId.value, {
-        page: 1,
-        limit: 500,
-        status: "active",
-      }),
-      runObjectOperation(selectedReaderId.value, {
-        operation: "load",
-        object: "users",
-        limit: 500,
-        offset: 0,
-      }),
-    ]);
-    const readerUsers = normalizeHidUsers(readerResponse);
-    let localIdentities = normalizeItems(identityResponse, "identities");
-    const localUserIds = new Set(
-      localIdentities
-        .map((identity: Record<string, any>) => toHidNumericId(identity.hidUserId))
-        .filter((hidUserId): hidUserId is number => Boolean(hidUserId)),
-    );
-    const deviceOnlyUsers = readerUsers.filter((user) => !localUserIds.has(user.hidUserId));
-
-    if (deviceOnlyUsers.length) {
-      await Promise.all(deviceOnlyUsers.map(async (user) => {
-        try {
-          await createIdentity(selectedReaderId.value, {
-            site: props.site,
-            hidUserId: String(user.hidUserId),
-            registration: user.registration,
-            cardNo: user.cardNo,
-            type: "resident",
-            status: "active",
-            metadata: {
-              name: user.name,
-              hidImported: true,
-              importedAt: new Date().toISOString(),
-            },
-          });
-        } catch {
-          // A parallel sync may have already created the identity.
-        }
-      }));
-
-      const refreshedResponse = await getIdentities(selectedReaderId.value, {
-        page: 1,
-        limit: 500,
-        status: "active",
-      });
-      localIdentities = normalizeItems(refreshedResponse, "identities");
-    }
-
-    const identityByUserId = new Map<number, Record<string, any>>();
-    localIdentities.forEach((identity: Record<string, any>) => {
-      const hidUserId = toHidNumericId(identity.hidUserId);
-      if (hidUserId) identityByUserId.set(hidUserId, identity);
-    });
-
-    identities.value = readerUsers
-      .map((user) => {
-        const identity = identityByUserId.get(user.hidUserId);
-        if (!identity) return undefined;
-        return {
-          ...identity,
-          hidUserId: String(user.hidUserId),
-          registration: user.registration || identity.registration,
-          cardNo: user.cardNo || identity.cardNo,
-          metadata: {
-            ...identity.metadata,
-            name: identity.metadata?.name || user.name,
-            hidReaderSource: true,
-          },
-        };
-      })
-      .filter(Boolean)
-      .filter((identity: Record<string, any>) => type.value === "all" || identity.type === type.value);
-  } finally {
-    loading.value = false;
-  }
-}
-
-function normalizeHidUsers(response: Record<string, any>) {
-  const data = response?.data || response || {};
-  const users = data?.users || data?.data?.users || data?.result?.users || [];
-  return (Array.isArray(users) ? users : [])
-    .map((user: Record<string, any>) => ({
-      hidUserId: toHidNumericId(user.id),
-      registration: String(user.registration || ""),
-      cardNo: String(user.card_value || user.cardNo || ""),
-      name: String(user.name || ""),
-    }))
-    .filter((user) => Boolean(user.hidUserId));
-}
-
-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 normalizeItems(response: any, key: string) {
-  const candidates = [
-    response?.items,
-    response?.[key],
-    response?.data?.items,
-    response?.data?.[key],
-    response?.data?.data?.items,
-    response?.data?.data?.[key],
-    response?.data?.results,
-    response?.results,
-    response?.data?.data,
-    response?.data,
-  ];
-
-  return candidates.find((items) => Array.isArray(items)) ?? [];
-}
-
-function isMapped(identity: Record<string, any>) {
-  return Boolean(identity.person || identity.user || identity.member || identity.visitor || identity.metadata?.mappedRecordId);
-}
-
-function getIdentityName(identity: Record<string, any>) {
-  return identity.metadata?.name || identity.name || identity.metadata?.hidName || "N/A";
-}
-
-function getMappedLabel(identity: Record<string, any>) {
-  return identity.metadata?.mappedName || identity.metadata?.personName || identity.metadata?.userName || "Unmapped";
-}
-
-function getUnitLabel(identity: Record<string, any>) {
-  return identity.metadata?.unitLabel || identity.metadata?.company || [identity.metadata?.block, identity.metadata?.level, identity.metadata?.unit].filter(Boolean).join("/") || "N/A";
-}
-
-function getAccessMethod(identity: Record<string, any>) {
-  if (identity.cardNo) return "Card";
-  if (identity.metadata?.qrCode || identity.metadata?.qrcode) return "QR Code";
-  if (identity.metadata?.panicPin || identity.metadata?.pin) return "PIN";
-  if (identity.metadata?.pinPassword) return "ID and Password";
-  if (identity.metadata?.photo || identity.metadata?.facialData) return "Facial";
-  return "N/A";
-}
-
-function openMapDialog(identity: Record<string, any>) {
-  selectedIdentity.value = identity;
-  mappingForm.type = normalizeIdentityType(identity.type);
-  mappingForm.recordId = identity.metadata?.mappedRecordId || String(identity.member || identity.user || identity.person || identity.visitor || "");
-  mappingForm.unitLabel = getUnitLabel(identity) === "N/A" ? "" : getUnitLabel(identity);
-  mappingForm.notes = identity.metadata?.mappingNotes || "";
-  mappingForm.record = undefined;
-  recordSearch.value = "";
-  recordOptions.value = [];
-  mapDialog.value = true;
-  searchRecords();
-}
-
-function normalizeIdentityType(value: string): MappingType {
-  if (value === "visitor") return "visitor";
-  if (value === "staff") return "staff";
-  return "resident";
-}
-
-function onMappingTypeChange() {
-  mappingForm.recordId = "";
-  mappingForm.record = undefined;
-  recordOptions.value = [];
-  searchRecords();
-}
-
-function debouncedSearchRecords() {
-  if (searchTimer) clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => searchRecords(), 300);
-}
-
-async function searchRecords() {
-  recordLoading.value = true;
-  try {
-    if (mappingForm.type === "visitor") {
-      const response = await getVisitors({
-        site: props.site,
-        search: recordSearch.value,
-        page: 1,
-        limit: 20,
-        order: "desc",
-      });
-      recordOptions.value = normalizeItems(response, "items").map((record: Record<string, any>) =>
-        toRecordOption(record, "visitor"),
-      );
-      return;
-    }
-
-    let records: Record<string, any>[] = [];
-
-    if (mappingForm.type === "staff") {
-      const response = await getMembers({
-        page: 1,
-        limit: 20,
-        search: recordSearch.value,
-        org: props.org,
-        type: "property_management_agency",
-        status: "active",
-      });
-      records = normalizeItems(response, "members");
-    }
-
-    if (!records.length) {
-      const usersResponse = await getUsers({
-        status: "active",
-        search: recordSearch.value,
-        page: 1,
-      });
-      records = normalizeItems(usersResponse, "users").map((user: Record<string, any>) => ({
-        ...user,
-        __mappingSource: "user",
-      }));
-    }
-
-    recordOptions.value = records.map((record: Record<string, any>) =>
-      toRecordOption(record, record.__mappingSource || "member"),
-    );
-  } catch {
-    recordOptions.value = [];
-  } finally {
-    recordLoading.value = false;
-  }
-}
-
-function toRecordOption(record: Record<string, any>, source = "member") {
-  const id = getRecordId(record, source);
-  const name = getRecordName(record);
-  const unit = getRecordUnit(record);
-  return {
-    title: unit && unit !== "N/A" ? `${name} - ${unit}` : name,
-    value: id,
-    raw: {
-      ...record,
-      __mappingSource: source,
-    },
-  };
-}
-
-function getRecordId(record: Record<string, any>, source = "member") {
-  if (source === "user") {
-    return String(record._id || record.id || record.user?._id || record.user?.id || record.user || "");
-  }
-
-  return String(
-    record._id ||
-      record.id ||
-      record.member?._id ||
-      record.member?.id ||
-      record.member ||
-      record.memberId ||
-      record.user?._id ||
-      record.user?.id ||
-      record.user ||
-      "",
-  );
-}
-
-function getRecordName(record: Record<string, any>) {
-  return (
-    record.name ||
-    record.userName ||
-    record.user?.name ||
-    record.memberName ||
-    record.fullName ||
-    record.firstName ||
-    record.email ||
-    record.user?.email ||
-    "Unnamed"
-  );
-}
-
-function getRecordUnit(record: Record<string, any>) {
-  return (
-    record.unitName ||
-    record.unitLabel ||
-    record.unit?.name ||
-    record.unitNo ||
-    record.company ||
-    record.customerSiteName ||
-    record.siteName ||
-    record.roleName ||
-    record.orgName ||
-    "N/A"
-  );
-}
-
-function onRecordSelect(value: string) {
-  const option = recordOptions.value.find((item) => item.value === value);
-  mappingForm.record = option?.raw;
-  if (option?.raw) {
-    mappingForm.unitLabel = getRecordUnit(option.raw) === "N/A" ? "" : getRecordUnit(option.raw);
-  }
-}
-
-async function saveMapping() {
-  if (!selectedIdentity.value || !mappingForm.recordId) return;
-
-  saving.value = true;
-  try {
-    const record = mappingForm.record || recordOptions.value.find((item) => item.value === mappingForm.recordId)?.raw || {};
-    const payload: Record<string, any> = {
-      type: mappingForm.type,
-      metadata: {
-        ...(selectedIdentity.value.metadata || {}),
-        mappedRecordId: mappingForm.recordId,
-        mappedName: getRecordName(record),
-        unitLabel: mappingForm.unitLabel,
-        mappingNotes: mappingForm.notes,
-        mappedAt: new Date().toISOString(),
-      },
-    };
-
-    if (mappingForm.type === "visitor") {
-      payload.visitor = mappingForm.recordId;
-      payload.member = "";
-      payload.user = "";
-      payload.person = "";
-    } else if (mappingForm.type === "staff") {
-      payload.user = getRecordUserId(record);
-      payload.member = getRecordMemberId(record);
-      payload.visitor = "";
-      payload.person = "";
-    } else {
-      payload.member = getRecordMemberId(record) || mappingForm.recordId;
-      payload.user = getRecordUserId(record);
-      payload.visitor = "";
-      payload.person = "";
-    }
-
-    await updateIdentity(selectedIdentity.value._id, payload);
-    showMessage("Identity mapped successfully.", "success");
-    mapDialog.value = false;
-    await loadIdentities();
-  } catch (error: any) {
-    showMessage(error?.data?.message || error?.message || "Unable to save mapping.", "error");
-  } finally {
-    saving.value = false;
-  }
-}
-
-async function unmapIdentity(identity: Record<string, any>) {
-  try {
-    await updateIdentity(identity._id, {
-      member: "",
-      user: "",
-      person: "",
-      visitor: "",
-      metadata: {
-        ...(identity.metadata || {}),
-        mappedRecordId: "",
-        mappedName: "",
-        mappingNotes: "",
-        unmappedAt: new Date().toISOString(),
-      },
-    });
-    showMessage("Identity unmapped successfully.", "success");
-    await loadIdentities();
-  } catch (error: any) {
-    showMessage(error?.data?.message || error?.message || "Unable to unmap identity.", "error");
-  }
-}
-
-function getRecordUserId(record: Record<string, any>) {
-  if (record.__mappingSource === "user") {
-    return String(record._id || record.id || "");
-  }
-
-  const user = record.user;
-  if (typeof user === "object" && user) {
-    return String(user._id || user.id || "");
-  }
-
-  return String(user || "");
-}
-
-function getRecordMemberId(record: Record<string, any>) {
-  if (record.__mappingSource === "user") return "";
-
-  const member = record.member;
-  if (typeof member === "object" && member) {
-    return String(member._id || member.id || "");
-  }
-
-  return String(record._id || record.id || record.memberId || member || "");
-}
-
-function showMessage(message: string, color: string) {
-  snackbar.message = message;
-  snackbar.color = color;
-  snackbar.show = true;
-}
-</script>
-
-<style scoped>
-.hid-identity-mapping {
-  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;
-}
-
-.reader-input,
-.search-input {
-  max-width: 280px;
-}
-
-.type-input {
-  max-width: 170px;
-}
-
-.refresh-button {
-  min-width: 130px;
-  background: #e4e4e4;
-  color: #0a2638;
-}
-
-.table-card {
-  min-height: 430px;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.table-card :deep(table) {
-  table-layout: fixed;
-  width: 100%;
-  min-width: 1040px;
-}
-
-.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: 16%;
-}
-
-.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: 14%;
-}
-
-.table-card :deep(th:nth-child(4)),
-.table-card :deep(td:nth-child(4)) {
-  width: 14%;
-}
-
-.table-card :deep(th:nth-child(5)),
-.table-card :deep(td:nth-child(5)) {
-  width: 16%;
-}
-
-.table-card :deep(th:nth-child(6)),
-.table-card :deep(td:nth-child(6)) {
-  width: 14%;
-}
-
-.table-card :deep(th:nth-child(7)),
-.table-card :deep(td:nth-child(7)) {
-  width: 10%;
-}
-
-.table-card :deep(th:nth-child(8)),
-.table-card :deep(td:nth-child(8)) {
-  width: 4%;
-}
-
-.mapping-tabs {
-  border-bottom: 1px solid #eeeeee;
-}
-
-.mapping-tabs :deep(.v-slide-group__content) {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  width: 100%;
-}
-
-.mapping-tabs :deep(.v-tab) {
-  flex: none;
-  min-width: 0;
-  width: 100%;
-  max-width: none;
-  color: #0a2638;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.mapping-tabs :deep(.v-tab--selected) {
-  font-weight: 600;
-}
-
-.mapped-chip,
-.unmapped-chip {
-  min-width: 96px;
-  justify-content: center;
-  font-weight: 600;
-}
-
-.mapped-chip {
-  background: #dff7e7 !important;
-  color: #1b7f3a !important;
-}
-
-.unmapped-chip {
-  background: #fff0cc !important;
-  color: #9a6700 !important;
-}
-
-.empty-state {
-  min-height: 280px;
-  display: grid;
-  place-items: center;
-  color: #687382;
-  font-size: 13px;
-}
-
-.mapping-dialog {
-  overflow: hidden;
-}
-
-.dialog-title {
-  font-size: 14px;
-  font-weight: 700;
-  padding: 12px 16px;
-  border-bottom: 1px solid #ececec;
-}
-
-.dialog-body {
-  padding: 18px 16px 20px;
-}
-
-.identity-summary {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  padding: 12px;
-  margin-bottom: 16px;
-  background: #f5f7f9;
-  border: 1px solid #e2e6ea;
-}
-
-.identity-summary span {
-  display: block;
-  margin-bottom: 4px;
-  color: #687382;
-  font-size: 11px;
-}
-
-.identity-summary strong {
-  color: #0a2638;
-  font-size: 13px;
-}
-
-.field-label {
-  color: #4f5a66;
-  font-size: 12px;
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
-.field-label span {
-  color: #e53935;
-}
-
-.dialog-actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.action-cancel {
-  background: #ffffff;
-  color: #111827;
-  border-radius: 0;
-}
-
-.action-submit {
-  background: #062d42;
-  color: #ffffff;
-  border-radius: 0;
-}
-
-@media (max-width: 960px) {
-  .toolbar {
-    align-items: stretch;
-  }
-
-  .toolbar-spacer {
-    display: none;
-  }
-
-  .reader-input,
-  .search-input,
-  .type-input,
-  .refresh-button {
-    max-width: none;
-    width: 100%;
-  }
-
-  .table-card {
-    min-height: 360px;
-  }
-}
-
-@media (max-width: 600px) {
-  .hid-identity-mapping {
-    padding: 12px 0;
-  }
-
-  .mapping-tabs :deep(.v-slide-group__content) {
-    display: flex;
-  }
-
-  .mapping-tabs :deep(.v-tab) {
-    min-width: 120px;
-  }
-
-  .identity-summary {
-    grid-template-columns: 1fr;
-  }
-
-  :global(.v-dialog > .v-overlay__content) {
-    max-width: calc(100vw - 24px) !important;
-    margin: 12px !important;
-  }
-}
-</style>