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

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { RouterLink } from 'vue-router';
import axios from 'axios';
import { api } from '@/lib/api';
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
import { UiButton, UiEmptyState, UiPageHeader } from '@/components/ui';
import type { LeadBoardColumnDto, LeadDto } from '@mento/shared';

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

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 onDragStart(lead: LeadDto, event: DragEvent) {
  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;
}

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>
  <section class="page">
    <UiPageHeader title="کاریز لیدها" lead="کشیدن و رها کردن برای تغییر وضعیت">
      <template #actions>
        <RouterLink :to="{ name: 'leads' }" class="link-btn">
          <UiButton variant="ghost" size="sm">فهرست لیدها</UiButton>
        </RouterLink>
        <UiButton variant="ghost" size="sm" :disabled="loading || moving" @click="load">
          بروزرسانی
        </UiButton>
      </template>
    </UiPageHeader>

    <p v-if="error" class="error">{{ error }}</p>
    <p v-else-if="loading" class="muted">در حال بارگذاری…</p>

    <div v-else-if="columns.length" class="board">
      <section
        v-for="col in columns"
        :key="col.stage.id"
        class="column"
        :class="{ drop: dropStageId === col.stage.id }"
        @dragover="onDragOver(col.stage.id, $event)"
        @drop="onDrop(col.stage.id, $event)"
      >
        <header class="col-head">
          <span
            class="dot"
            :style="{ background: col.stage.color || 'var(--accent)' }"
          />
          <h2>{{ col.stage.name }}</h2>
          <em>{{ toFaDigits(col.leads.length) }}</em>
        </header>

        <div class="cards">
          <article
            v-for="lead in col.leads"
            :key="lead.id"
            class="card"
            :class="{ dragging: draggingId === lead.id }"
            draggable="true"
            @dragstart="onDragStart(lead, $event)"
            @dragend="onDragEnd"
          >
            <RouterLink class="title" :to="{ name: 'lead-detail', params: { id: lead.id } }">
              {{ lead.title }}
            </RouterLink>
            <p v-if="lead.mobile" class="line" dir="ltr">{{ lead.mobile }}</p>
            <p v-if="lead.city" class="line">{{ lead.city }}</p>
            <p v-if="lead.assigneeName" class="line muted">{{ lead.assigneeName }}</p>
            <p v-if="lead.nextFollowUpAt" class="line muted">
              پیگیری: {{ formatDate(lead.nextFollowUpAt) }}
            </p>
          </article>
          <p v-if="!col.leads.length" class="empty-col">خالی</p>
        </div>
      </section>
    </div>

    <UiEmptyState
      v-else-if="!loading"
      title="مرحله‌ای برای کاریز نیست."
      description="در تنظیمات مراحل لید، نمایش روی کاریز را فعال کنید."
    />
  </section>
</template>

<style scoped>
.page {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.link-btn {
  text-decoration: none;
}

.board {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  align-items: flex-start;
  min-height: 24rem;
}

.column {
  flex: 0 0 16.5rem;
  background: color-mix(in srgb, var(--surface-2, #f8fafc) 85%, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: calc(100vh - 12rem);
}

.column.drop {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.col-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

.col-head h2 {
  margin: 0;
  font-size: 0.95rem;
  flex: 1;
}

.col-head em {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--muted);
}

.dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.cards {
  padding: 0.55rem;
  display: grid;
  gap: 0.5rem;
  overflow-y: auto;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  padding: 0.65rem 0.7rem;
  display: grid;
  gap: 0.2rem;
  cursor: grab;
}

.card.dragging {
  opacity: 0.45;
}

.title {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.title:hover {
  color: var(--accent);
}

.line {
  margin: 0;
  font-size: 0.82rem;
}

.muted,
.empty-col {
  color: var(--muted);
}

.empty-col {
  margin: 0.5rem;
  text-align: center;
  font-size: 0.85rem;
}

.error {
  color: #b91c1c;
  margin: 0;
}
</style>