CRM_Montzar/apps/web/src/views/LeadBoardView.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { RouterLink, useRouter } from 'vue-router';
import axios from 'axios';
import {
  Alert as AAlert,
  Avatar as AAvatar,
  Button as AButton,
  Card as ACard,
  Empty as AEmpty,
  Flex as AFlex,
  Space as ASpace,
  Spin as ASpin,
  Tag as ATag,
  Typography,
  theme,
} from 'ant-design-vue';
import {
  CalendarOutlined,
  HolderOutlined,
  PhoneOutlined,
  ReloadOutlined,
  UnorderedListOutlined,
} from '@ant-design/icons-vue';
import { api } from '@/lib/api';
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
import type { LeadBoardColumnDto, LeadDto } from '@mento/shared';

const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
const { token } = theme.useToken();
const router = useRouter();

const GAP = 16;
const COL_WIDTH = 280;

const loading = ref(false);
const moving = ref(false);
const error = ref('');
const columns = ref<LeadBoardColumnDto[]>([]);
const draggingId = ref<string | null>(null);
const dropStageId = ref<string | null>(null);
/** بعد از درگ، کلیک باز شدن جزئیات را یک فریم نادیده بگیر */
let suppressCardClick = false;

/**
 * ارتفاع کامل زیر topbar شل.
 * height:0 + flex:1 روی فرزند، زنجیرهٔ کشش را اجباری می‌کند.
 */
const pageStyle = computed(() => ({
  boxSizing: 'border-box' as const,
  display: 'flex',
  flexDirection: 'column' as const,
  gap: `${GAP}px`,
  height: 'calc(100dvh - 120px)',
  maxHeight: 'calc(100dvh - 120px)',
  minHeight: '420px',
  minWidth: 0,
}));

const boardShellStyle = computed(() => ({
  boxSizing: 'border-box' as const,
  flex: '1 1 auto',
  height: 0,
  minHeight: 0,
  display: 'flex',
  flexDirection: 'column' as const,
  padding: `${GAP}px`,
  background: token.value.colorBgContainer,
  border: `1px solid ${token.value.colorBorderSecondary}`,
  borderRadius: `${token.value.borderRadiusLG}px`,
  position: 'relative' as const,
  overflow: 'hidden',
}));

const boardTrackStyle = computed(() => ({
  boxSizing: 'border-box' as const,
  flex: '1 1 auto',
  height: 0,
  minHeight: 0,
  display: 'flex',
  flexDirection: 'row' as const,
  alignItems: 'stretch',
  gap: `${GAP}px`,
  width: '100%',
  overflowX: 'auto' as const,
  overflowY: 'hidden' as const,
  paddingBottom: '4px',
}));

function columnStyle(stageId: string) {
  const active = dropStageId.value === stageId;
  return {
    boxSizing: 'border-box' as const,
    flex: `0 0 ${COL_WIDTH}px`,
    width: `${COL_WIDTH}px`,
    alignSelf: 'stretch',
    display: 'flex',
    flexDirection: 'column' as const,
    minHeight: 0,
    background: token.value.colorFillAlter,
    border: `1px solid ${
      active ? token.value.colorPrimary : token.value.colorBorderSecondary
    }`,
    borderRadius: `${token.value.borderRadiusLG}px`,
    boxShadow: active ? `0 0 0 2px ${token.value.colorPrimaryBg}` : undefined,
    overflow: 'hidden',
  };
}

const columnHeadStyle = computed(() => ({
  boxSizing: 'border-box' as const,
  flexShrink: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  gap: `${GAP}px`,
  padding: `${GAP}px`,
  borderBottom: `1px solid ${token.value.colorBorderSecondary}`,
  background: token.value.colorBgContainer,
}));

const columnBodyStyle = computed(() => ({
  boxSizing: 'border-box' as const,
  flex: '1 1 auto',
  height: 0,
  minHeight: 0,
  overflowY: 'auto' as const,
  display: 'flex',
  flexDirection: 'column' as const,
  gap: '12px',
  padding: '12px',
  margin: 0,
}));

const cardBodyStyle = computed(() => ({
  padding: '12px 14px',
  margin: 0,
}));

function leadInitials(lead: LeadDto) {
  const raw = (lead.contactName || lead.title || '?').trim();
  const parts = raw.split(/\s+/).filter(Boolean);
  if (!parts.length) return '؟';
  if (parts.length === 1) return parts[0]!.slice(0, 1);
  return `${parts[0]!.slice(0, 1)}${parts[parts.length - 1]!.slice(0, 1)}`;
}

function leadSubtitle(lead: LeadDto) {
  return [lead.contactName, lead.city].filter(Boolean).join(' · ') || '';
}

function formatDate(value: string | null) {
  if (!value) return '';
  try {
    return formatJalaliNumeric(new Date(value));
  } catch {
    return value;
  }
}

async function load() {
  loading.value = true;
  error.value = '';
  try {
    const { data } = await api.get<LeadBoardColumnDto[]>('/leads/board');
    columns.value = data;
  } catch (e) {
    error.value =
      axios.isAxiosError(e) && !e.response
        ? 'اتصال به API برقرار نشد.'
        : 'بارگذاری مسیر لیدها ناموفق بود.';
  } finally {
    loading.value = false;
  }
}

function openLead(lead: LeadDto) {
  if (suppressCardClick || draggingId.value || moving.value) return;
  void router.push({ name: 'lead-detail', params: { id: lead.id } });
}

function onDragStart(lead: LeadDto, event: DragEvent) {
  suppressCardClick = true;
  draggingId.value = lead.id;
  event.dataTransfer?.setData('text/plain', lead.id);
  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
}

function onDragEnd() {
  draggingId.value = null;
  dropStageId.value = null;
  window.setTimeout(() => {
    suppressCardClick = false;
  }, 0);
}

function onDragOver(stageId: string, event: DragEvent) {
  event.preventDefault();
  dropStageId.value = stageId;
  if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
}

async function onDrop(stageId: string, event: DragEvent) {
  event.preventDefault();
  const leadId =
    event.dataTransfer?.getData('text/plain') || draggingId.value || '';
  draggingId.value = null;
  dropStageId.value = null;
  if (!leadId) return;

  const fromCol = columns.value.find((c) =>
    c.leads.some((l) => l.id === leadId),
  );
  if (!fromCol || fromCol.stage.id === stageId) return;

  const lead = fromCol.leads.find((l) => l.id === leadId);
  if (!lead) return;

  const prev = columns.value.map((c) => ({
    ...c,
    leads: [...c.leads],
  }));

  columns.value = columns.value.map((c) => {
    if (c.stage.id === fromCol.stage.id) {
      return { ...c, leads: c.leads.filter((l) => l.id !== leadId) };
    }
    if (c.stage.id === stageId) {
      return {
        ...c,
        leads: [{ ...lead, stageId, stageName: c.stage.name }, ...c.leads],
      };
    }
    return c;
  });

  moving.value = true;
  error.value = '';
  try {
    await api.patch(`/leads/${leadId}/move`, { stageId });
  } catch {
    columns.value = prev;
    error.value = 'جابه‌جایی لید ناموفق بود.';
  } finally {
    moving.value = false;
  }
}

onMounted(load);
</script>

<template>
  <div class="lead-board-page" :style="pageStyle">
    <a-flex justify="space-between" align="center" wrap="wrap" :gap="GAP">
      <div>
        <a-typography-title :level="3" :style="{ margin: 0 }">
          مسیر لیدها
        </a-typography-title>
        <a-typography-text type="secondary">
          کشیدن و رها کردن برای تغییر وضعیت
        </a-typography-text>
      </div>
      <a-space :size="GAP">
        <RouterLink :to="{ name: 'leads' }" custom v-slot="{ navigate }">
          <a-button @click="navigate">
            <template #icon><UnorderedListOutlined /></template>
            فهرست لیدها
          </a-button>
        </RouterLink>
        <a-button
          :disabled="loading || moving"
          :loading="loading"
          @click="load"
        >
          <template #icon><ReloadOutlined /></template>
          بروزرسانی
        </a-button>
      </a-space>
    </a-flex>

    <a-alert v-if="error" type="error" show-icon :message="error" />

    <div :style="boardShellStyle">
      <div
        v-if="loading || moving"
        :style="{
          position: 'absolute',
          inset: 0,
          zIndex: 2,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          background: token.colorBgMask,
        }"
      >
        <a-spin />
      </div>

      <a-empty
        v-if="!loading && !columns.length"
        description="مرحله‌ای برای نمایش در مسیر لیدها نیست. در تنظیمات مراحل لید، «نمایش روی مسیر» را فعال کنید."
        :style="{ margin: 'auto' }"
      />

      <div
        v-else-if="columns.length"
        class="lead-board-track"
        :style="boardTrackStyle"
      >
        <div
          v-for="col in columns"
          :key="col.stage.id"
          :style="columnStyle(col.stage.id)"
          @dragover="onDragOver(col.stage.id, $event)"
          @drop="onDrop(col.stage.id, $event)"
        >
          <div :style="columnHeadStyle">
            <a-space :size="8">
              <span
                :style="{
                  width: '8px',
                  height: '8px',
                  borderRadius: '50%',
                  background: col.stage.color || token.colorPrimary,
                  display: 'inline-block',
                  flexShrink: 0,
                }"
              />
              <a-typography-text strong>{{ col.stage.name }}</a-typography-text>
            </a-space>
            <a-typography-text type="secondary">
              {{ toFaDigits(col.leads.length) }}
            </a-typography-text>
          </div>

          <div :style="columnBodyStyle">
            <a-card
              v-for="lead in col.leads"
              :key="lead.id"
              hoverable
              :bordered="true"
              :body-style="cardBodyStyle"
              :style="{
                cursor: 'pointer',
                opacity: draggingId === lead.id ? 0.45 : 1,
                flexShrink: 0,
                margin: 0,
                background: token.colorBgContainer,
                boxShadow: token.boxShadow,
              }"
              @click="openLead(lead)"
            >
              <a-flex vertical :gap="10" :style="{ width: '100%', minWidth: 0 }">
                <a-flex :gap="10" align="center" :style="{ minWidth: 0 }">
                  <span
                    role="button"
                    tabindex="0"
                    aria-label="جابه‌جایی لید"
                    title="برای جابه‌جایی بکشید"
                    draggable="true"
                    :style="{
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: '28px',
                      height: '28px',
                      flexShrink: 0,
                      borderRadius: `${token.borderRadiusSM}px`,
                      color: token.colorTextTertiary,
                      cursor: 'grab',
                      background: token.colorFillQuaternary,
                    }"
                    @click.stop
                    @dragstart.stop="onDragStart(lead, $event)"
                    @dragend.stop="onDragEnd"
                  >
                    <HolderOutlined />
                  </span>
                  <a-avatar
                    :style="{
                      background: token.colorPrimaryBg,
                      color: token.colorPrimary,
                      flexShrink: 0,
                      fontWeight: 700,
                    }"
                  >
                    {{ leadInitials(lead) }}
                  </a-avatar>
                  <div :style="{ flex: 1, minWidth: 0 }">
                    <a-typography-text
                      strong
                      ellipsis
                      :style="{ display: 'block', margin: 0, lineHeight: 1.35 }"
                      :title="lead.title"
                    >
                      {{ lead.title }}
                    </a-typography-text>
                    <a-typography-text
                      v-if="leadSubtitle(lead)"
                      type="secondary"
                      ellipsis
                      :style="{
                        display: 'block',
                        margin: 0,
                        marginTop: '2px',
                        fontSize: `${token.fontSizeSM}px`,
                        lineHeight: 1.35,
                      }"
                      :title="leadSubtitle(lead)"
                    >
                      {{ leadSubtitle(lead) }}
                    </a-typography-text>
                  </div>
                </a-flex>

                <a-flex
                  justify="space-between"
                  align="center"
                  :gap="8"
                  :style="{ minWidth: 0 }"
                >
                  <a-flex
                    v-if="lead.mobile"
                    align="center"
                    :gap="6"
                    dir="ltr"
                    :style="{ minWidth: 0 }"
                  >
                    <PhoneOutlined
                      :style="{
                        color: token.colorPrimary,
                        fontSize: `${token.fontSizeSM}px`,
                      }"
                    />
                    <a-typography-text
                      :style="{
                        margin: 0,
                        fontSize: `${token.fontSizeSM}px`,
                        fontVariantNumeric: 'tabular-nums',
                        color: token.colorText,
                      }"
                    >
                      {{ lead.mobile }}
                    </a-typography-text>
                  </a-flex>
                  <a-tag
                    v-if="lead.assigneeName"
                    :bordered="false"
                    :style="{
                      margin: 0,
                      maxWidth: '46%',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      background: token.colorFillSecondary,
                    }"
                    :title="lead.assigneeName"
                  >
                    {{ lead.assigneeName }}
                  </a-tag>
                </a-flex>

                <a-flex
                  v-if="lead.nextFollowUpAt"
                  align="center"
                  :gap="6"
                  :style="{
                    paddingTop: '8px',
                    borderTop: `1px solid ${token.colorSplit}`,
                  }"
                >
                  <CalendarOutlined
                    :style="{
                      color: token.colorTextSecondary,
                      fontSize: `${token.fontSizeSM}px`,
                    }"
                  />
                  <a-typography-text
                    type="secondary"
                    :style="{
                      margin: 0,
                      fontSize: `${token.fontSizeSM}px`,
                    }"
                  >
                    پیگیری {{ formatDate(lead.nextFollowUpAt) }}
                  </a-typography-text>
                </a-flex>
              </a-flex>
            </a-card>

            <a-typography-text
              v-if="!col.leads.length"
              type="secondary"
              :style="{
                textAlign: 'center',
                display: 'block',
                margin: 'auto',
                padding: `${GAP}px`,
              }"
            >
              خالی
            </a-typography-text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* فقط ارتفاع/اسکرول ساختاری — بدون رنگ/ری‌اسکین Ant */
.lead-board-page {
  width: 100%;
}

.lead-board-track {
  scrollbar-width: thin;
}

.lead-board-track::-webkit-scrollbar {
  height: 8px;
}

.lead-board-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 28%, transparent);
}
</style>