@7365admin1/layer-common 3.0.7 → 3.0.9

package/components/HidIdentityMapping.vue

@@ -0,0 +1,975 @@
+<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>