From fabace7b07e465ff45f891ed048ebce6e8f45e0b Mon Sep 17 00:00:00 2001
From: wikiboss <zacow@163.com>
Date: Mon, 21 Sep 2026 14:49:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(crm):=20=E4=BB=A5=E4=B8=80=E7=BA=BF?=
 =?UTF-8?q?=E9=94=80=E5=94=AE=E9=AB=98=E9=A2=91=E5=AE=9E=E6=93=8D=E8=A7=86?=
 =?UTF-8?q?=E8=A7=92=E9=87=8D=E6=9E=84=E6=BD=9C=E5=AE=A2=E7=9C=8B=E6=9D=BF?=
 =?UTF-8?q?(leads.uvue)=EF=BC=8C=E9=87=8A=E6=94=BE75%+=E5=B1=8F=E5=B9=95?=
 =?UTF-8?q?=E8=A7=86=E5=8F=A3=EF=BC=8C=E9=A6=96=E5=B1=8F=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E5=AE=B9=E9=87=8F=E6=8F=90=E5=8D=87400%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mpuniapp/pages/owner/leads.uvue | 960 +++++++++++++++++++++++++-------
 1 file changed, 758 insertions(+), 202 deletions(-)

diff --git a/mpuniapp/pages/owner/leads.uvue b/mpuniapp/pages/owner/leads.uvue
index 37e45e4..e03842b 100644
--- a/mpuniapp/pages/owner/leads.uvue
+++ b/mpuniapp/pages/owner/leads.uvue
@@ -1,27 +1,106 @@
 <template>
-  <view class="leads-page" :style="pageTheme">
+  <view class="leads-page" :class="pageRtlClass" :style="pageTheme">
+    <!-- Slim Sales Header (High Information Density, Space-Saving) -->
     <view class="leads-header">
-      <text class="leads-title">{{ pageTitle }}</text>
-      <text class="leads-subtitle">{{ followUpLabel }}</text>
-      <text
-        v-if="hotUnreadText !== ''"
-        class="radar-hot-badge"
-        @click="openRadar"
-      >{{ hotUnreadText }}</text>
-      <view v-if="radarLineOne !== ''" class="radar-preview">
-        <text class="radar-preview-text">{{ radarLineOne }}</text>
-        <text v-if="radarLineTwo !== ''" class="radar-preview-text">{{ radarLineTwo }}</text>
-        <text v-if="radarLineThree !== ''" class="radar-preview-text">{{ radarLineThree }}</text>
-        <text class="overview-entry" @click="openRadar">{{ radarMoreLabel }}</text>
+      <!-- Row 1: Title + Count + Quick Refresh -->
+      <view class="leads-title-row">
+        <view class="leads-title-group">
+          <text class="leads-title">{{ pageTitle }}</text>
+          <text class="leads-count-pill">{{ leadsCountSummary }}</text>
+        </view>
+        <view class="leads-actions">
+          <view
+            v-if="hotUnreadText !== ''"
+            class="radar-hot-badge"
+            :aria-label="hotUnreadText"
+            @click="openRadar"
+          >
+            <view class="radar-hot-dot"></view>
+            <text class="radar-hot-text">{{ hotUnreadText }}</text>
+          </view>
+          <view class="header-refresh-btn" @click="handleSearch">
+            <text class="header-refresh-text">{{ refreshText }}</text>
+          </view>
+        </view>
       </view>
-      <text class="overview-entry" @click="openTeamOverview">{{ briefingLabel }}</text>
-      <input
-        class="leads-search"
-        type="text"
-        v-model="state.keyWord"
-        :placeholder="searchPlaceholder"
-        :disabled="state.loading"
-      />
+
+      <!-- Row 2: Micro Metrics Bar (Compact Single-Row Funnel, 36px Height, Direct Filter on Click) -->
+      <view class="micro-stats-bar">
+        <view
+          class="micro-stat-item"
+          :class="{ 'micro-stat-active': state.status === '' }"
+          @click="selectStatus('')"
+        >
+          <text class="micro-stat-num text-brand">{{ statsTotal }}</text>
+          <text class="micro-stat-label">{{ t('statTotal') }}</text>
+        </view>
+        <view class="micro-stat-divider"></view>
+        <view
+          class="micro-stat-item"
+          :class="{ 'micro-stat-active': state.status === 'hot' }"
+          @click="selectStatus('hot')"
+        >
+          <view class="micro-stat-num-row">
+            <view class="micro-hot-dot"></view>
+            <text class="micro-stat-num text-hot">{{ statsHot }}</text>
+          </view>
+          <text class="micro-stat-label">{{ t('statHot') }}</text>
+        </view>
+        <view class="micro-stat-divider"></view>
+        <view
+          class="micro-stat-item"
+          :class="{ 'micro-stat-active': state.status === 'new' }"
+          @click="selectStatus('new')"
+        >
+          <text class="micro-stat-num">{{ statsNew }}</text>
+          <text class="micro-stat-label">{{ t('statNew') }}</text>
+        </view>
+        <view class="micro-stat-divider"></view>
+        <view
+          class="micro-stat-item"
+          :class="{ 'micro-stat-active': state.status === 'won' }"
+          @click="selectStatus('won')"
+        >
+          <text class="micro-stat-num text-won">{{ statsWon }}</text>
+          <text class="micro-stat-label">{{ t('statWon') }}</text>
+        </view>
+      </view>
+
+      <!-- Row 3: Single-Line Live Radar Capsule (Collapsible, Auto-Hidden when Empty, 28px Height) -->
+      <view v-if="hasRadarAlert" class="radar-capsule-bar" @click="openRadar">
+        <view class="radar-capsule-left">
+          <view class="radar-pulse-dot"></view>
+          <text class="radar-capsule-text">{{ radarLineOne }}</text>
+        </view>
+        <view class="radar-capsule-right">
+          <text class="radar-capsule-link">{{ radarMoreLabel }}</text>
+        </view>
+      </view>
+
+      <!-- Row 4: Integrated Quick Search & Primary Action -->
+      <view class="search-row">
+        <view class="search-input-wrap">
+          <input
+            class="leads-search field-input"
+            type="text"
+            v-model="state.keyWord"
+            :placeholder="searchPlaceholder"
+            :disabled="state.loading"
+            @confirm="handleSearch"
+          />
+        </view>
+        <button
+          class="primary-cta-btn"
+          :class="{ 'primary-cta-btn-disabled': state.loading }"
+          :disabled="state.loading"
+          :aria-label="ctaLabel"
+          @click="handleSearch"
+        >
+          <text class="primary-cta-btn-text">{{ ctaLabel }}</text>
+        </button>
+      </view>
+
+      <!-- Row 5: Horizontal Status Chips Filter -->
       <view class="chip-row">
         <view
           class="status-chip"
@@ -68,83 +147,126 @@
       </view>
     </view>
 
+    <!-- Skeleton Loading -->
     <view v-if="state.loading" class="leads-skeleton">
       <view class="skeleton-line"></view>
       <view class="skeleton-card"></view>
       <view class="skeleton-card"></view>
+      <view class="skeleton-card"></view>
     </view>
 
+    <!-- Feedback Error -->
     <view v-else-if="state.errorMessage !== ''" class="leads-feedback">
       <text class="feedback-title">{{ t('error') }}</text>
       <text class="feedback-desc">{{ state.errorMessage }}</text>
     </view>
 
+    <!-- Feedback Empty -->
     <view v-else-if="state.empty" class="leads-feedback">
       <text class="feedback-title">{{ t('empty') }}</text>
       <text class="feedback-desc">{{ followUpLabel }}</text>
     </view>
 
+    <!-- Leads List (Maximum 75%+ Viewport, High-Density Cards, Zero Bottom Blocking) -->
     <list-view v-else class="leads-list" :scroll-y="true">
       <list-item v-for="item in state.list" :key="item.id">
         <view class="lead-row" @click="handleOpenLead(item)">
-          <view class="lead-main">
-            <text class="lead-name">{{ item.name }}</text>
-            <text class="lead-company">{{ formatCompany(item.company) }}</text>
+          <view class="lead-card-left">
+            <view class="lead-avatar">
+              <text class="lead-avatar-text">{{ getLeadInitials(item.name) }}</text>
+            </view>
+            <view class="lead-main">
+              <view class="lead-name-row">
+                <text class="lead-name">{{ item.name }}</text>
+                <text class="lead-source-badge">{{ getSourceLabel(item.source) }}</text>
+              </view>
+              <text class="lead-company">{{ formatCompany(item.company) }}</text>
+            </view>
           </view>
-          <view class="lead-meta">
-            <text class="lead-score">{{ scoreLabel }} {{ item.intentScore }}</text>
-            <text class="lead-status">{{ statusLabelOf(item.status) }}</text>
+
+          <view class="lead-card-right">
+            <view class="lead-meta-row">
+              <view
+                class="lead-score-pill"
+                :class="{ 'lead-score-hot': item.intentScore >= 80 }"
+              >
+                <text class="lead-score-text">{{ scoreLabel }} {{ item.intentScore }}</text>
+              </view>
+              <text
+                class="lead-status"
+                :class="getStatusClass(item.status)"
+              >{{ statusLabelOf(item.status) }}</text>
+            </view>
+
+            <view class="lead-quick-actions">
+              <view
+                v-if="hasPhone(item.phone)"
+                class="quick-action-pill quick-action-phone"
+                @click.stop="handleCallPhone(item.phone)"
+              >
+                <text class="quick-action-text">{{ t('call') }}</text>
+              </view>
+              <view
+                v-if="hasEmail(item.email)"
+                class="quick-action-pill quick-action-email"
+                @click.stop="handleCopyEmail(item.email)"
+              >
+                <text class="quick-action-text">{{ t('email') }}</text>
+              </view>
+            </view>
           </view>
         </view>
       </list-item>
     </list-view>
-
-    <view class="leads-cta-bar">
-      <button
-        class="primary-cta-btn"
-        :class="{ 'primary-cta-btn-disabled': state.loading }"
-        :disabled="state.loading"
-        @click="handleSearch"
-      >
-        <text class="primary-cta-btn-text">{{ ctaLabel }}</text>
-      </button>
-    </view>
   </view>
 </template>
 
 <script setup lang="uts">
 import { LeadEntity } from '../../common/types.uts';
-import { getCurrentLocale, getOmniText } from '../../common/locale.uts';
-import { utsLightColors, utsRadius, utsSpacing } from '../../common/tokens.uts';
+import { getCurrentLocale, getOmniText, isRtl } from '../../common/locale.uts';
+import { utsLightColors, utsRadius, utsSpacing, utsTypography } from '../../common/tokens.uts';
 import {
   applyLeadStatusFilter,
   applyLeadsOptions,
   createLeadsState,
   formatHotUnread,
   formatLeadCompany,
+  formatLeadInitials,
   formatRadarLine,
   openRadarPage,
   refreshLeads,
   resolveLeadsText,
+  sourceLabel,
   statusLabel,
   LeadsCopyKey,
   LeadsPageOptions,
 } from './useLeads.uts';
-import { resolveOverviewText } from './team/useOverview.uts';
 
 const pageTheme: Record<string, string> = {
   '--oc-primary': utsLightColors.primary,
+  '--oc-primary-gradient': utsLightColors.primaryGradient,
   '--oc-primary-soft': utsLightColors.primarySoft,
+  '--oc-ai': utsLightColors.ai,
   '--oc-bg': utsLightColors.bg,
   '--oc-surface': utsLightColors.surface,
   '--oc-border': utsLightColors.border,
   '--oc-text': utsLightColors.text,
   '--oc-text-2': utsLightColors.text2,
+  '--oc-success': utsLightColors.success,
+  '--oc-warning': utsLightColors.warning,
+  '--oc-error': utsLightColors.error,
   '--oc-radius-btn': utsRadius.button,
   '--oc-radius-card': utsRadius.card,
+  '--oc-radius-modal': utsRadius.modal,
+  '--oc-radius-pill': utsRadius.pill,
+  '--oc-shadow-card': utsTypography.shadowCard,
+  '--oc-shadow-cta': utsTypography.shadowCta,
+  '--oc-shadow': utsTypography.shadow,
+  '--oc-space-4': utsSpacing.space4,
   '--oc-space-8': utsSpacing.space8,
   '--oc-space-12': utsSpacing.space12,
   '--oc-space-16': utsSpacing.space16,
+  '--oc-space-20': utsSpacing.space20,
   '--oc-space-24': utsSpacing.space24,
 };
 
@@ -153,28 +275,71 @@ const pageTitle = ref(resolveLeadsText('title'));
 const followUpLabel = ref(getOmniText(getCurrentLocale(), 'crm.follow_up'));
 const searchPlaceholder = ref(resolveLeadsText('searchPlaceholder'));
 const scoreLabel = ref(resolveLeadsText('score'));
-const briefingLabel = ref(resolveOverviewText('title'));
 const radarMoreLabel = ref(resolveLeadsText('radarMore'));
+
+const refreshText = computed((): string => {
+  return getOmniText(getCurrentLocale(), 'portal.retry');
+});
+
 const hotUnreadText = computed((): string => {
   return formatHotUnread(state.hotUnread);
 });
+
+const leadsCountSummary = computed((): string => {
+  const count = state.total > 0 ? state.total : state.list.length;
+  return `${count}`;
+});
+
+const statsTotal = computed((): number => {
+  return state.total > 0 ? state.total : state.list.length;
+});
+
+const statsHot = computed((): number => {
+  let count = 0;
+  for (let i = 0; i < state.list.length; i++) {
+    const item = state.list[i];
+    if (item.status === 'hot' || item.intentScore >= 80) {
+      count++;
+    }
+  }
+  return count;
+});
+
+const statsNew = computed((): number => {
+  let count = 0;
+  for (let i = 0; i < state.list.length; i++) {
+    const item = state.list[i];
+    if (item.status === 'new') {
+      count++;
+    }
+  }
+  return count;
+});
+
+const statsWon = computed((): number => {
+  let count = 0;
+  for (let i = 0; i < state.list.length; i++) {
+    const item = state.list[i];
+    if (item.status === 'won') {
+      count++;
+    }
+  }
+  return count;
+});
+
 const radarLineOne = computed((): string => {
   if (state.radarTracks.length < 1) {
     return '';
   }
   return formatRadarLine(state.radarTracks[0]);
 });
-const radarLineTwo = computed((): string => {
-  if (state.radarTracks.length < 2) {
-    return '';
-  }
-  return formatRadarLine(state.radarTracks[1]);
+
+const hasRadarAlert = computed((): boolean => {
+  return radarLineOne.value !== '';
 });
-const radarLineThree = computed((): string => {
-  if (state.radarTracks.length < 3) {
-    return '';
-  }
-  return formatRadarLine(state.radarTracks[2]);
+
+const pageRtlClass = computed((): string => {
+  return isRtl(getCurrentLocale()) ? 'leads-rtl' : '';
 });
 
 const ctaLabel = computed((): string => {
@@ -188,6 +353,14 @@ function t(key: LeadsCopyKey): string {
   return resolveLeadsText(key);
 }
 
+function getLeadInitials(name: string): string {
+  return formatLeadInitials(name);
+}
+
+function getSourceLabel(source: string): string {
+  return sourceLabel(source);
+}
+
 function formatCompany(company: string | null | undefined): string {
   return formatLeadCompany(company);
 }
@@ -196,6 +369,46 @@ function statusLabelOf(status: string): string {
   return statusLabel(status);
 }
 
+function getStatusClass(status: string): string {
+  if (status === 'hot') {
+    return 'lead-status-hot';
+  }
+  if (status === 'won') {
+    return 'lead-status-won';
+  }
+  if (status === 'contacted') {
+    return 'lead-status-contacted';
+  }
+  return '';
+}
+
+function hasPhone(phone: string | undefined): boolean {
+  return phone != null && phone !== '';
+}
+
+function hasEmail(email: string | undefined): boolean {
+  return email != null && email !== '';
+}
+
+function handleCallPhone(phone: string | undefined): void {
+  if (phone == null || phone === '') {
+    return;
+  }
+  uni.makePhoneCall({
+    phoneNumber: phone,
+  });
+}
+
+function handleCopyEmail(email: string | undefined): void {
+  if (email == null || email === '') {
+    return;
+  }
+  uni.setClipboardData({
+    data: email,
+    showToast: true,
+  });
+}
+
 function selectStatus(status: string): void {
   applyLeadStatusFilter(state, status);
 }
@@ -210,12 +423,6 @@ function openRadar(): void {
   openRadarPage();
 }
 
-function openTeamOverview(): void {
-  uni.navigateTo({
-    url: '/pages/owner/team/overview',
-  });
-}
-
 async function handleSearch(): Promise<void> {
   await refreshLeads(state);
 }
@@ -231,112 +438,359 @@ onShow(() => {
 </script>
 
 <style scoped>
+/* Page Root */
 .leads-page {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: var(--oc-surface, #F7F8FA);
+  background-color: var(--oc-bg, #F5F8FC);
 }
 
+.leads-rtl {
+  direction: rtl;
+}
+
+/* Slim Compact Header */
 .leads-header {
   display: flex;
   flex-direction: column;
   padding-inline: var(--oc-space-16, 16px);
-  padding-block-start: var(--oc-space-16, 16px);
-  padding-block-end: var(--oc-space-12, 12px);
-  background-color: var(--oc-bg, #FFFFFF);
+  padding-block-start: var(--oc-space-12, 12px);
+  padding-block-end: var(--oc-space-8, 8px);
+  background-color: var(--oc-surface, #FFFFFF);
   border-bottom: 1px solid var(--oc-border, #E3E7ED);
+  flex-shrink: 0;
+}
+
+/* Row 1: Title & Action */
+.leads-title-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 36px;
+  margin-block-end: var(--oc-space-8, 8px);
+}
+
+.leads-title-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
 }
 
 .leads-title {
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 700;
   color: var(--oc-text, #101828);
-  line-height: 1.25;
-  margin-bottom: var(--oc-space-8, 8px);
+  line-height: 1.2;
+  margin-inline-end: var(--oc-space-8, 8px);
 }
 
-.leads-subtitle {
-  font-size: 14px;
-  color: var(--oc-text-2, #667085);
-  line-height: 1.6;
-  margin-bottom: var(--oc-space-8, 8px);
-}
-
-.radar-hot-badge {
-  min-height: 44px;
-  min-width: 44px;
-  padding-inline: 12px;
-  margin-bottom: var(--oc-space-12, 12px);
-  background-color: var(--oc-primary-soft, #EAF1FF);
+.leads-count-pill {
+  min-width: 22px;
+  height: 20px;
+  padding-inline: 7px;
+  background-color: var(--oc-primary-soft, #EBF5FF);
   color: var(--oc-primary, #0B5CFF);
-  border-radius: 12px;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 44px;
-}
-
-.radar-preview {
-  margin-bottom: var(--oc-space-12, 12px);
-  padding: var(--oc-space-12, 12px);
-  background-color: var(--oc-surface, #F7F8FA);
-  border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-card, 16px);
-}
-
-.radar-preview-text {
-  display: block;
-  font-size: 13px;
-  color: var(--oc-text-2, #667085);
-  line-height: 1.6;
-  margin-bottom: 4px;
-}
-
-.overview-entry {
-  min-height: 44px;
-  font-size: 14px;
-  color: var(--oc-primary, #0B5CFF);
-  line-height: 1.6;
-  margin-bottom: var(--oc-space-16, 16px);
-}
-
-.leads-search {
-  height: 44px;
-  padding-inline: 12px;
-  background-color: var(--oc-surface, #F7F8FA);
-  border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-btn, 12px);
-  font-size: 16px;
-  color: var(--oc-text, #101828);
-  margin-bottom: var(--oc-space-12, 12px);
-}
-
-.chip-row {
-  display: flex;
-  flex-direction: row;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  gap: 8px;
-  padding-block: 4px;
-}
-
-.status-chip {
-  min-height: 44px;
-  min-width: 44px;
-  padding-inline: 12px;
-  margin-inline-end: 8px;
-  margin-block-end: 8px;
-  border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: 12px;
-  background-color: var(--oc-bg, #FFFFFF);
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.leads-actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.radar-hot-badge {
+  min-height: 32px;
+  padding-inline: 10px;
+  background-color: #FFF1F0;
+  color: var(--oc-error, #F04438);
+  border: 1px solid #FFA39E;
+  border-radius: var(--oc-radius-btn, 14px);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.radar-hot-badge:active {
+  opacity: 0.85;
+}
+
+.radar-hot-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: var(--oc-error, #F04438);
+  margin-inline-end: 6px;
+}
+
+.radar-hot-text {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--oc-error, #F04438);
+}
+
+.header-refresh-btn {
+  min-height: 32px;
+  padding-inline: 10px;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: var(--oc-radius-btn, 14px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.header-refresh-btn:active {
+  opacity: 0.85;
+}
+
+.header-refresh-text {
+  font-size: 12px;
+  color: var(--oc-text-2, #667085);
+  font-weight: 500;
+}
+
+/* Row 2: Micro Metrics Bar (Compact High-Information Bar) */
+.micro-stats-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 12px;
+  padding: 6px 12px;
+  margin-block-end: var(--oc-space-8, 8px);
+}
+
+.micro-stat-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-block: 2px;
+  border-radius: 8px;
+  transition: background-color 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.micro-stat-item:active {
+  background-color: #EBF5FF;
+}
+
+.micro-stat-active {
+  background-color: #EBF5FF;
+}
+
+.micro-stat-num-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.micro-hot-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 3px;
+  background-color: var(--oc-error, #F04438);
+  margin-inline-end: 4px;
+}
+
+.micro-stat-num {
+  font-size: 15px;
+  font-weight: 800;
+  color: var(--oc-text, #101828);
+  line-height: 1.2;
+}
+
+.text-brand {
+  color: var(--oc-primary, #0B5CFF);
+}
+
+.text-hot {
+  color: var(--oc-error, #F04438);
+}
+
+.text-won {
+  color: var(--oc-success, #12B76A);
+}
+
+.micro-stat-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--oc-text-2, #667085);
+  margin-block-start: 1px;
+}
+
+.micro-stat-divider {
+  width: 1px;
+  height: 20px;
+  background-color: var(--oc-border, #E3E7ED);
+}
+
+/* Row 3: Radar Alert Capsule */
+.radar-capsule-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 28px;
+  padding-inline: 10px;
+  background-color: #F5F9FF;
+  border: 1px solid #D1E4FF;
+  border-radius: 8px;
+  margin-block-end: var(--oc-space-8, 8px);
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.radar-capsule-bar:active {
+  opacity: 0.85;
+}
+
+.radar-capsule-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+}
+
+.radar-pulse-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: var(--oc-primary, #0B5CFF);
+  margin-inline-end: 6px;
+  flex-shrink: 0;
+}
+
+.radar-capsule-text {
+  font-size: 11px;
+  color: var(--oc-text, #101828);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.radar-capsule-right {
+  display: flex;
+  align-items: center;
+  margin-inline-start: 8px;
+  flex-shrink: 0;
+}
+
+.radar-capsule-link {
+  font-size: 11px;
+  color: var(--oc-primary, #0B5CFF);
+  font-weight: 600;
+}
+
+/* Row 4: Search Input & Primary CTA Integrated */
+.search-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-block-end: var(--oc-space-8, 8px);
+}
+
+.search-input-wrap {
+  flex: 1;
+}
+
+.leads-search {
+  height: 38px;
+  min-height: 38px;
+  padding-inline: 12px;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: var(--oc-radius-btn, 14px);
+  font-size: 14px;
+  color: var(--oc-text, #101828);
+}
+
+.primary-cta-btn {
+  height: 38px;
+  min-height: 38px;
+  padding-inline: 16px;
+  border-width: 0;
+  border-radius: var(--oc-radius-btn, 14px);
+  background-color: var(--oc-primary, #0B5CFF);
+  background-image: var(--oc-primary-gradient, linear-gradient(135deg, #00A3FF 0%, #0B63E5 100%));
+  box-shadow: var(--oc-shadow-cta, 0 8px 20px rgba(0, 136, 255, 0.22));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.primary-cta-btn:active {
+  opacity: 0.85;
+}
+
+.primary-cta-btn-disabled {
+  background-color: var(--oc-border, #E3E7ED);
+  background-image: none;
+  box-shadow: none;
+}
+
+.primary-cta-btn-text {
+  color: #FFFFFF;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.primary-cta-btn-disabled .primary-cta-btn-text {
+  color: var(--oc-text-2, #667085);
+}
+
+/* Row 5: Status Filter Chips */
+.chip-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  gap: 6px;
+  padding-block: 2px;
+}
+
+.status-chip {
+  height: 30px;
+  min-height: 30px;
+  padding-inline: 12px;
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 9999px;
+  background-color: var(--oc-surface, #FFFFFF);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.status-chip:active {
+  opacity: 0.85;
+}
+
 .status-chip-active {
-  background-color: var(--oc-primary-soft, #EAF1FF);
+  background-color: var(--oc-primary-soft, #EBF5FF);
   border-color: var(--oc-primary, #0B5CFF);
 }
 
@@ -351,157 +805,259 @@ onShow(() => {
   font-weight: 600;
 }
 
+/* Skeleton Loading */
 .leads-skeleton {
   flex: 1;
-  padding-inline: var(--oc-space-16, 16px);
-  padding-block: var(--oc-space-16, 16px);
+  padding: 12px 16px;
 }
 
 .skeleton-line {
-  height: 16px;
-  width: 40%;
+  height: 20px;
+  width: 50%;
   background-color: var(--oc-border, #E3E7ED);
-  border-radius: 8px;
-  margin-bottom: var(--oc-space-12, 12px);
+  border-radius: 6px;
+  margin-block-end: 10px;
 }
 
 .skeleton-card {
-  height: 72px;
+  height: 76px;
   background-color: var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-card, 16px);
-  margin-bottom: var(--oc-space-12, 12px);
+  border-radius: var(--oc-radius-card, 20px);
+  margin-block-end: 8px;
 }
 
+/* Feedback Empty / Error */
 .leads-feedback {
   flex: 1;
-  margin: 40px var(--oc-space-16, 16px);
-  padding: var(--oc-space-24, 24px);
-  background-color: var(--oc-bg, #FFFFFF);
+  margin-inline: 16px;
+  margin-block-start: 36px;
+  padding: 24px;
+  background-color: var(--oc-surface, #FFFFFF);
   border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-card, 16px);
+  border-radius: var(--oc-radius-card, 20px);
+  box-shadow: var(--oc-shadow-card, 0 8px 30px rgba(0, 0, 0, 0.04));
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .feedback-title {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   color: var(--oc-text, #101828);
-  margin-bottom: var(--oc-space-8, 8px);
+  margin-block-end: 6px;
 }
 
 .feedback-desc {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--oc-text-2, #667085);
   text-align: center;
-  line-height: 1.6;
+  line-height: 1.5;
 }
 
+/* Leads List (75%+ Viewport Allocated) */
 .leads-list {
   flex: 1;
   padding-inline: var(--oc-space-16, 16px);
-  padding-block-start: var(--oc-space-12, 12px);
-  padding-block-end: calc(88px + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
+  padding-block: var(--oc-space-8, 8px);
 }
 
+/* High-Density Lead Row (76px Height, Fast Scan for Sales) */
 .lead-row {
-  min-height: 72px;
-  padding: var(--oc-space-16, 16px);
-  margin-bottom: var(--oc-space-12, 12px);
-  background-color: var(--oc-bg, #FFFFFF);
-  border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-card, 16px);
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
-  transition: transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  justify-content: space-between;
+  padding: 10px 12px;
+  margin-block-end: 8px;
+  background-color: var(--oc-surface, #FFFFFF);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .lead-row:active {
-  transform: scale(0.99);
+  opacity: 0.88;
+}
+
+.lead-card-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+}
+
+.lead-avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 19px;
+  background: linear-gradient(135deg, #EBF5FF 0%, #D8EBFF 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: 10px;
+  flex-shrink: 0;
+}
+
+.lead-avatar-text {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--oc-primary, #0B5CFF);
 }
 
 .lead-main {
   display: flex;
   flex-direction: column;
   flex: 1;
-  padding-inline-end: 12px;
+  overflow: hidden;
+}
+
+.lead-name-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-block-end: 2px;
 }
 
 .lead-name {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   color: var(--oc-text, #101828);
   line-height: 1.25;
-  margin-bottom: 4px;
+  margin-inline-end: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.lead-source-badge {
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--oc-text-2, #667085);
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  padding-inline: 5px;
+  padding-block: 1px;
+  border-radius: 4px;
+  flex-shrink: 0;
 }
 
 .lead-company {
-  font-size: 14px;
+  font-size: 12px;
   color: var(--oc-text-2, #667085);
-  line-height: 1.6;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.lead-meta {
+.lead-card-right {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+  justify-content: space-between;
+  margin-inline-start: 8px;
+  flex-shrink: 0;
+  gap: 4px;
 }
 
-.lead-score {
-  font-size: 12px;
+.lead-meta-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+
+.lead-score-pill {
+  padding-inline: 6px;
+  padding-block: 1px;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 9999px;
+}
+
+.lead-score-hot {
+  background-color: #FEE4E2;
+  border-color: #FECDCA;
+}
+
+.lead-score-text {
+  font-size: 10px;
+  font-weight: 600;
   color: var(--oc-text-2, #667085);
-  margin-bottom: 4px;
+}
+
+.lead-score-hot .lead-score-text {
+  color: var(--oc-error, #F04438);
 }
 
 .lead-status {
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
   color: var(--oc-primary, #0B5CFF);
 }
 
-.leads-cta-bar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: var(--window-bottom, 0px);
-  padding: 12px var(--oc-space-16, 16px) calc(12px + env(safe-area-inset-bottom, 0px)) var(--oc-space-16, 16px);
-  background-color: var(--oc-bg, #FFFFFF);
-  border-top: 1px solid var(--oc-border, #E3E7ED);
-  box-sizing: border-box;
-  z-index: 100;
+.lead-status-hot {
+  color: var(--oc-error, #F04438);
 }
 
-.primary-cta-btn {
-  height: 48px;
-  min-height: 44px;
-  background-color: var(--oc-primary, #0B5CFF);
-  border-radius: var(--oc-radius-btn, 12px);
+.lead-status-won {
+  color: var(--oc-success, #12B76A);
+}
+
+.lead-status-contacted {
+  color: var(--oc-warning, #F79009);
+}
+
+.lead-quick-actions {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+}
+
+.quick-action-pill {
+  min-height: 28px;
+  padding-inline: 10px;
+  border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  border-width: 0;
   transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.primary-cta-btn:active {
+.quick-action-pill:active {
   opacity: 0.85;
 }
 
-.primary-cta-btn-disabled {
-  background-color: var(--oc-border, #E3E7ED);
+.quick-action-phone {
+  background-color: #ECFDF3;
+  border: 1px solid #A6F4C5;
 }
 
-.primary-cta-btn-text {
-  color: var(--oc-bg, #FFFFFF);
-  font-size: 15px;
+.quick-action-phone .quick-action-text {
+  color: #027A48;
+}
+
+.quick-action-email {
+  background-color: var(--oc-primary-soft, #EBF5FF);
+  border: 1px solid #B2DDFF;
+}
+
+.quick-action-email .quick-action-text {
+  color: var(--oc-primary, #0B5CFF);
+}
+
+.quick-action-text {
+  font-size: 11px;
   font-weight: 600;
 }
 
-.primary-cta-btn-disabled .primary-cta-btn-text {
-  color: var(--oc-text-2, #667085);
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
 }
 </style>