OmniCard/mpuniapp/pages/owner/leads.uvue

<template>
  <view class="leads-page" :class="pageRtlClass" :style="pageTheme">
    <!-- Slim Sales Header (High Information Density, Space-Saving) -->
    <view class="leads-header">
      <!-- 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-stats-btn" @click="openStats">
            <text class="header-stats-text">{{ statsLabel }}</text>
          </view>
          <view class="header-refresh-btn" @click="handleSearch">
            <text class="header-refresh-text">{{ refreshText }}</text>
          </view>
        </view>
      </view>

      <!-- Row 2: 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"
          :class="{ 'status-chip-active': state.status === '' }"
          @click="selectStatus('')"
        >
          <text class="status-chip-text">{{ t('statusAll') }}</text>
        </view>
        <view
          class="status-chip"
          :class="{ 'status-chip-active': state.status === 'new' }"
          @click="selectStatus('new')"
        >
          <text class="status-chip-text">{{ t('statusNew') }}</text>
        </view>
        <view
          class="status-chip"
          :class="{ 'status-chip-active': state.status === 'hot' }"
          @click="selectStatus('hot')"
        >
          <text class="status-chip-text">{{ t('statusHot') }}</text>
        </view>
        <view
          class="status-chip"
          :class="{ 'status-chip-active': state.status === 'contacted' }"
          @click="selectStatus('contacted')"
        >
          <text class="status-chip-text">{{ t('statusContacted') }}</text>
        </view>
        <view
          class="status-chip"
          :class="{ 'status-chip-active': state.status === 'won' }"
          @click="selectStatus('won')"
        >
          <text class="status-chip-text">{{ t('statusWon') }}</text>
        </view>
        <view
          class="status-chip"
          :class="{ 'status-chip-active': state.status === 'archived' }"
          @click="selectStatus('archived')"
        >
          <text class="status-chip-text">{{ t('statusArchived') }}</text>
        </view>
      </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-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-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>
</template>

<script setup lang="uts">
import { LeadEntity } from '../../common/types.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';

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,
};

const state = reactive(createLeadsState());
const pageTitle = ref(resolveLeadsText('title'));
const followUpLabel = ref(getOmniText(getCurrentLocale(), 'crm.follow_up'));
const searchPlaceholder = ref(resolveLeadsText('searchPlaceholder'));
const scoreLabel = ref(resolveLeadsText('score'));
const radarMoreLabel = ref(resolveLeadsText('radarMore'));

const refreshText = computed((): string => {
  return getOmniText(getCurrentLocale(), 'portal.retry');
});

const hotUnreadText = computed((): string => {
  return formatHotUnread(state.hotUnread);
});

const statsLabel = computed((): string => {
  return resolveLeadsText('stats');
});

const leadsCountSummary = computed((): string => {
  const count = state.total > 0 ? state.total : state.list.length;
  return `${count}`;
});

const pageRtlClass = computed((): string => {
  return isRtl(getCurrentLocale()) ? 'leads-rtl' : '';
});

const ctaLabel = computed((): string => {
  if (state.loading) {
    return resolveLeadsText('loading');
  }
  return resolveLeadsText('cta');
});

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);
}

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,
  });
}

async function selectStatus(status: string): Promise<void> {
  applyLeadStatusFilter(state, status);
  await refreshLeads(state);
}

function handleOpenLead(item: LeadEntity): void {
  uni.navigateTo({
    url: '/pages/owner/leads-detail?id=' + item.id,
  });
}

function openRadar(): void {
  openRadarPage();
}

function openStats(): void {
  uni.navigateTo({
    url: '/pages/owner/stats',
  });
}

async function handleSearch(): Promise<void> {
  await refreshLeads(state);
}

onLoad((options: LeadsPageOptions) => {
  applyLeadsOptions(state, options);
  refreshLeads(state);
});

onShow(() => {
  refreshLeads(state);
});
</script>

<style scoped>
/* Page Root */
.leads-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  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-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: 20px;
  font-weight: 700;
  color: var(--oc-text, #101828);
  line-height: 1.2;
  margin-inline-end: var(--oc-space-8, 8px);
}

.leads-count-pill {
  min-width: 22px;
  height: 20px;
  padding-inline: 7px;
  background-color: var(--oc-primary-soft, #EBF5FF);
  color: var(--oc-primary, #0B5CFF);
  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-stats-btn {
  min-height: 32px;
  padding-inline: 10px;
  background-color: var(--oc-primary-soft, #EBF5FF);
  border: 1px solid #B2DDFF;
  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-stats-btn:active {
  opacity: 0.85;
}

.header-stats-text {
  font-size: 12px;
  color: var(--oc-primary, #0B5CFF);
  font-weight: 600;
}

.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: 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: 44px;
  min-height: 44px;
  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, #EBF5FF);
  border-color: var(--oc-primary, #0B5CFF);
}

.status-chip-text {
  font-size: 12px;
  color: var(--oc-text-2, #667085);
  font-weight: 500;
}

.status-chip-active .status-chip-text {
  color: var(--oc-primary, #0B5CFF);
  font-weight: 600;
}

/* Skeleton Loading */
.leads-skeleton {
  flex: 1;
  padding: 12px 16px;
}

.skeleton-line {
  height: 20px;
  width: 50%;
  background-color: var(--oc-border, #E3E7ED);
  border-radius: 6px;
  margin-block-end: 10px;
}

.skeleton-card {
  height: 76px;
  background-color: var(--oc-border, #E3E7ED);
  border-radius: var(--oc-radius-card, 20px);
  margin-block-end: 8px;
}

/* Feedback Empty / Error */
.leads-feedback {
  flex: 1;
  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, 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: 15px;
  font-weight: 600;
  color: var(--oc-text, #101828);
  margin-block-end: 6px;
}

.feedback-desc {
  font-size: 13px;
  color: var(--oc-text-2, #667085);
  text-align: center;
  line-height: 1.5;
}

/* Leads List (75%+ Viewport Allocated) */
.leads-list {
  flex: 1;
  padding-inline: var(--oc-space-16, 16px);
  padding-top: var(--oc-space-8, 8px);
  padding-bottom: calc(var(--oc-space-8, 8px) + var(--window-bottom, 0px) + env(safe-area-inset-bottom, 0px));
}

/* High-Density Lead Row (76px Height, Fast Scan for Sales) */
.lead-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  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 {
  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;
  overflow: hidden;
}

.lead-name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-block-end: 2px;
}

.lead-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--oc-text, #101828);
  line-height: 1.25;
  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: 12px;
  color: var(--oc-text-2, #667085);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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-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);
}

.lead-score-hot .lead-score-text {
  color: var(--oc-error, #F04438);
}

.lead-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--oc-primary, #0B5CFF);
}

.lead-status-hot {
  color: var(--oc-error, #F04438);
}

.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;
  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.quick-action-pill:active {
  opacity: 0.85;
}

.quick-action-phone {
  background-color: #ECFDF3;
  border: 1px solid #A6F4C5;
}

.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;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
</style>