From 0daaef0b39e666036512bee1e592e44ddbcb88f7 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sun, 25 Oct 2026 19:22:30 +0330
Subject: [PATCH] fix(web): calm hero flash, lead detail, and scope sources

Keep the dashboard backdrop out of flow on first paint, clamp long lead notes, scroll the quick-actions rail, return to the lead board, and only list import sources that exist in this environment.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/components/DataAccessEditor.vue  | 75 +++++++++++++++----
 .../src/components/DataAccessPolicyPanel.vue  | 14 ++++
 .../web/src/components/dashboard/HomeHero.vue | 12 ++-
 apps/web/src/views/LeadDetailView.vue         | 14 +++-
 4 files changed, 94 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/components/DataAccessEditor.vue b/apps/web/src/components/DataAccessEditor.vue
index ea9a7ff..73571f4 100644
--- a/apps/web/src/components/DataAccessEditor.vue
+++ b/apps/web/src/components/DataAccessEditor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { Select as ASelect } from 'ant-design-vue';
 import type {
   DataAccessOwnerKind,
@@ -10,13 +10,13 @@ import type {
 } from '@mento/shared';
 import {
   DATA_ACCESS_SECTION_LABELS,
-  PERSON_IMPORT_SOURCE_LABELS,
   PERSON_IMPORT_SOURCES,
   PERSON_MOOD_LABELS,
   PERSON_MOODS,
   sectionHasDataAccessLimits,
 } from '@mento/shared';
 export type IdOption = { id: string; name: string };
+type Choice = { value: string; label: string };
 
 const props = withDefaults(
   defineProps<{
@@ -27,6 +27,10 @@ const props = withDefaults(
     pipelines?: IdOption[];
     boards?: IdOption[];
     activityTypes?: IdOption[];
+    /** منبع‌هایی که در مشتریان همین محیط رکورد دارند */
+    importSources?: Choice[];
+    importSourcesReady?: boolean;
+    importSourcesFailed?: boolean;
     disabled?: boolean;
     compact?: boolean;
   }>(),
@@ -37,6 +41,9 @@ const props = withDefaults(
     pipelines: () => [],
     boards: () => [],
     activityTypes: () => [],
+    importSources: () => [],
+    importSourcesReady: false,
+    importSourcesFailed: false,
   },
 );
 
@@ -211,7 +218,6 @@ type ListKey =
   | 'boardIds'
   | 'typeIds';
 
-type Choice = { value: string; label: string };
 type PickerMode = 'multiple' | 'tags';
 type Picker = {
   key: ListKey;
@@ -221,6 +227,7 @@ type Picker = {
   notFound: string;
   hint?: string;
   options: Choice[];
+  loading?: boolean;
 };
 
 function namedOptions(items: IdOption[]): Choice[] {
@@ -239,18 +246,44 @@ function listValue(key: ListKey): string[] {
   return ((filter.value[key] as string[] | undefined) ?? []).map(String);
 }
 
+const catalogSources = new Set<string>(PERSON_IMPORT_SOURCES);
+
+/** کلیدهای ثابت کاتالوگ که در این محیط رکورد ندارند را نشان نده؛ متن سفارشی بماند. */
+function sourcesInThisEnvironment(selected: readonly string[] | undefined): string[] {
+  const list = selected ?? [];
+  if (!props.importSourcesReady) {
+    return list.filter((source) => !catalogSources.has(source));
+  }
+  const present = new Set(props.importSources.map((option) => option.value));
+  return list.filter((source) => present.has(source) || !catalogSources.has(source));
+}
+
+const visibleImportSources = computed(() => sourcesInThisEnvironment(filter.value.sources));
+
 function setList(key: ListKey, value: unknown) {
   const raw = Array.isArray(value) ? value : value == null || value === '' ? [] : [value];
-  const list = [...new Set(raw.map((item) => String(item).trim()).filter(Boolean))];
+  let list = [...new Set(raw.map((item) => String(item).trim()).filter(Boolean))];
+  if (key === 'sources' && showImportSources.value && props.importSourcesReady) {
+    list = sourcesInThisEnvironment(list);
+  }
   patchFilter({ [key]: list.length ? list : undefined });
 }
 
-const sourceOptions = computed(() =>
-  PERSON_IMPORT_SOURCES.map((s) => ({
-    value: s,
-    label: PERSON_IMPORT_SOURCE_LABELS[s],
-  })),
-);
+function pickerValue(picker: Picker): string[] {
+  if (picker.key === 'sources' && showImportSources.value && props.importSourcesReady) {
+    return visibleImportSources.value;
+  }
+  return listValue(picker.key);
+}
+
+watch(visibleImportSources, (next) => {
+  if (!showImportSources.value || !props.importSourcesReady) return;
+  const current = filter.value.sources ?? [];
+  if (current.length === next.length && current.every((source, index) => source === next[index])) {
+    return;
+  }
+  patchFilter({ sources: next.length ? next : undefined });
+});
 
 const moodOptions: Choice[] = PERSON_MOODS.map((mood) => ({
   value: mood,
@@ -271,14 +304,26 @@ const pickers = computed((): Picker[] => {
     });
   }
   if (showImportSources.value) {
+    const ready = props.importSourcesReady;
+    const failed = props.importSourcesFailed;
     items.push({
       key: 'sources',
       legend: 'منبع',
       mode: 'tags',
-      placeholder: 'جستجو، انتخاب یا نوشتن منبع جدید…',
+      placeholder: failed
+        ? 'فهرست منبع‌ها بارگذاری نشد'
+        : props.importSources.length
+          ? 'جستجو، انتخاب یا نوشتن منبع جدید…'
+          : 'منبعی در این محیط نیست',
       notFound: 'برای منبع جدید Enter بزنید',
-      hint: 'چند منبع را با هم انتخاب کنید. نام تازه را بنویسید و Enter بزنید.',
-      options: withSelected(sourceOptions.value, rule.sources),
+      hint: failed
+        ? 'فهرست منبع‌های این محیط خوانده نشد؛ انتخاب ذخیره‌شده دست نخورده است.'
+        : 'فقط منبع‌هایی که در مشتریان این محیط هستند. نام تازه را بنویسید و Enter بزنید.',
+      loading: !ready && !failed,
+      options: withSelected(
+        ready ? props.importSources : [],
+        ready ? visibleImportSources.value : (rule.sources ?? []),
+      ),
     });
   }
   if (showLeadSources.value) {
@@ -430,8 +475,10 @@ const filterSummary = computed(() => {
 
       <label v-for="picker in pickers" :key="picker.legend" class="pick">
         <span>{{ picker.legend }}</span>
+        <p v-if="picker.loading" class="muted">در حال بارگذاری منبع‌ها…</p>
         <a-select
-          :value="listValue(picker.key)"
+          v-else
+          :value="pickerValue(picker)"
           :mode="picker.mode"
           allow-clear
           show-search
diff --git a/apps/web/src/components/DataAccessPolicyPanel.vue b/apps/web/src/components/DataAccessPolicyPanel.vue
index 7db9d3d..869171d 100644
--- a/apps/web/src/components/DataAccessPolicyPanel.vue
+++ b/apps/web/src/components/DataAccessPolicyPanel.vue
@@ -3,6 +3,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 import type {
   DataAccessPolicy,
   DataAccessSection,
+  PersonImportSourceStatDto,
   RolePermissionKey,
   SectionDataAccess,
 } from '@mento/shared';
@@ -76,6 +77,9 @@ function setSection(key: DataAccessSection, next: SectionDataAccess) {
 }
 
 const { groups: customerGroups, load: loadCustomerGroups } = useCustomerGroups();
+const importSources = ref<Array<{ value: string; label: string }>>([]);
+const importSourcesReady = ref(false);
+const importSourcesFailed = ref(false);
 const leadStages = ref<IdOption[]>([]);
 const pipelines = ref<IdOption[]>([]);
 const dealStages = ref<IdOption[]>([]);
@@ -88,6 +92,13 @@ const routineCategories = ref<IdOption[]>([]);
 
 async function loadOptions() {
   await loadCustomerGroups().catch(() => undefined);
+  try {
+    const { data } = await api.get<PersonImportSourceStatDto[]>('/people/source-stats');
+    importSources.value = data.map((row) => ({ value: row.source, label: row.label }));
+    importSourcesReady.value = true;
+  } catch {
+    importSourcesFailed.value = true;
+  }
   try {
     const { data } = await api.get<Array<{ id: string; name: string }>>('/leads/stages');
     leadStages.value = data.map((s) => ({ id: s.id, name: s.name }));
@@ -217,6 +228,9 @@ const typesForActive = computed(() => {
         :pipelines="pipelines"
         :boards="boardsForActive"
         :activity-types="typesForActive"
+        :import-sources="importSources"
+        :import-sources-ready="importSourcesReady"
+        :import-sources-failed="importSourcesFailed"
         :disabled="disabled"
         :compact="compact"
         @update:model-value="setSection(active, $event)"
diff --git a/apps/web/src/components/dashboard/HomeHero.vue b/apps/web/src/components/dashboard/HomeHero.vue
index 583105b..40e777d 100644
--- a/apps/web/src/components/dashboard/HomeHero.vue
+++ b/apps/web/src/components/dashboard/HomeHero.vue
@@ -63,10 +63,14 @@ const shortcutLabel = computed(() =>
 </script>
 
 <template>
-  <header class="hero">
-    <div class="hero-surface" aria-hidden="true">
-      <div class="hero-glow" />
-      <div class="hero-mist" />
+  <header class="hero" style="position: relative">
+    <div
+      class="hero-surface"
+      aria-hidden="true"
+      style="position: absolute; inset: 0; overflow: hidden; pointer-events: none"
+    >
+      <div class="hero-glow" style="position: absolute" />
+      <div class="hero-mist" style="position: absolute; inset: 0" />
     </div>
 
     <div class="hero-body">
diff --git a/apps/web/src/views/LeadDetailView.vue b/apps/web/src/views/LeadDetailView.vue
index f2dec61..228e9d3 100644
--- a/apps/web/src/views/LeadDetailView.vue
+++ b/apps/web/src/views/LeadDetailView.vue
@@ -447,7 +447,7 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
     <a-col :span="24">
       <a-flex justify="space-between" align="center" wrap="wrap" :gap="token.marginSM">
         <a-space :size="12" align="start">
-          <RouterLink :to="{ name: 'leads' }" custom v-slot="{ navigate }">
+          <RouterLink :to="{ name: 'leads-board' }" custom v-slot="{ navigate }">
             <a-button @click="navigate">
               <template #icon><ArrowLeftOutlined /></template>
             </a-button>
@@ -696,7 +696,11 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
                       <div v-for="(addr, i) in lead.addresses" :key="i">{{ addr }}</div>
                     </a-descriptions-item>
                     <a-descriptions-item v-if="lead.notes" label="یادداشت" :span="2">
-                      {{ lead.notes }}
+                      <a-typography-paragraph
+                        :ellipsis="{ rows: 4, expandable: true, symbol: 'بیشتر' }"
+                        :content="lead.notes"
+                        style="margin-bottom: 0"
+                      />
                     </a-descriptions-item>
                   </a-descriptions>
                 </template>
@@ -804,7 +808,11 @@ onBeforeUnmount(() => narrowMq?.removeEventListener('change', syncNarrow));
 
             <a-col :xs="24" :lg="7" :xl="6">
               <a-affix v-if="!narrow" :offset-top="24">
-                <a-card title="اقدامات سریع" :bordered="false">
+                <a-card
+                  title="اقدامات سریع"
+                  :bordered="false"
+                  :body-style="{ maxHeight: 'calc(100vh - 140px)', overflowY: 'auto' }"
+                >
                   <a-form layout="vertical">
                     <a-divider orientation="right">پیامک</a-divider>
                     <a-button