Redesign sales pipeline UI and reconnect it to live board APIs.

Keep the employer kanban layout while loading pipelines/deals from the server, persisting drag-and-drop moves, and seeding a Waiting pipeline with demo deals.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/DealFormView.vue

@@ -253,6 +253,13 @@ async function load() {
         companyId.value = route.query.companyId;
         if (!personId.value) contactKind.value = 'company';
       }
+      if (
+        typeof route.query.stageId === 'string' &&
+        route.query.stageId &&
+        stages.value.some((s) => s.id === route.query.stageId)
+      ) {
+        stageId.value = route.query.stageId;
+      }
     }
   } catch {
     error.value = 'بارگذاری فرم معامله ناموفق بود.';

apps/web/src/views/PipelineBoardView.vue

@@ -1,46 +1,80 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
+import { formatJalaliNumeric } from '@/lib/jalali';
+import PipelineToolbar from '@/components/pipeline/PipelineToolbar.vue';
+import type { PipelineViewMode } from '@/components/pipeline/PipelineToolbar.vue';
+import PipelineBoard from '@/components/pipeline/PipelineBoard.vue';
+import DealCardOverlay from '@/components/pipeline/DealCardOverlay.vue';
+import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
+import {
+  filterStagesByQuery,
+  mapBoardToStages,
+  updateDealStage,
+} from '@/lib/pipeline-board';
+import type { PipelineBoardDto, PipelineDto } from '@mento/shared';
 import { useAuthStore } from '@/stores/auth';
-import type { DealDto, PipelineBoardDto, PipelineDto } from '@mento/shared';
 import { canManageSettings } from '@/lib/roles';
 
 const route = useRoute();
 const router = useRouter();
 const auth = useAuthStore();
 const canCreatePipeline = computed(() => canManageSettings(auth.user?.role));
+
 const loading = ref(false);
 const saving = ref(false);
 const error = ref('');
-const board = ref<PipelineBoardDto | null>(null);
+const stages = ref<PipelineStage[]>([]);
 const pipelines = ref<PipelineDto[]>([]);
-const draggingId = ref<string | null>(null);
-const dropStageId = ref<string | null>(null);
+const boardPipelineId = ref('');
+const viewMode = ref<PipelineViewMode>('kanban');
+const search = ref('');
 const showCreate = ref(false);
 const newName = ref('');
 
-const selectedPipelineId = computed(() => {
-  const q = route.query.pipelineId;
-  if (typeof q === 'string' && q) return q;
-  return board.value?.pipeline.id ?? '';
-});
+const draggingId = ref<string | null>(null);
+const dropStageId = ref<string | null>(null);
+const overlayDeal = ref<PipelineDeal | null>(null);
+const overlayAccent = ref<PipelineStage['color']>('green');
+const overlayPos = ref({ x: 0, y: 0 });
+const menuOpenId = ref<string | null>(null);
+const moving = ref(false);
 
-const openCount = computed(
-  () =>
-    board.value?.stages
-      .filter((s) => !s.isWon && !s.isLost)
-      .reduce((n, s) => n + s.deals.length, 0) ?? 0,
+const pipelineOptions = computed(() =>
+  pipelines.value.map((p) => ({
+    id: p.id,
+    name: p.isDefault ? `${p.name} (پیش‌فرض)` : p.name,
+  })),
 );
 
-function formatAmount(amount: number | null, currency: string) {
-  if (amount == null) return '—';
-  try {
-    return new Intl.NumberFormat('fa-IR').format(amount) + (currency === 'IRR' ? ' ریال' : ` ${currency}`);
-  } catch {
-    return `${amount}`;
+const selectedPipelineId = computed({
+  get: () => {
+    const q = route.query.pipelineId;
+    if (typeof q === 'string' && q) return q;
+    return boardPipelineId.value;
+  },
+  set: (id: string) => {
+    void router.replace({ name: 'pipeline', query: { pipelineId: id } });
+  },
+});
+
+const visibleStages = computed(() =>
+  filterStagesByQuery(stages.value, search.value),
+);
+
+function formatDealDate(iso: string) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return formatJalaliNumeric(d);
+}
+
+function findAccent(dealId: string): PipelineStage['color'] {
+  for (const stage of stages.value) {
+    if (stage.deals.some((d) => d.id === dealId)) return stage.color;
   }
+  return 'green';
 }
 
 async function loadPipelines() {
@@ -54,11 +88,14 @@ async function load() {
   try {
     await loadPipelines();
     const pipelineId =
-      typeof route.query.pipelineId === 'string' ? route.query.pipelineId : undefined;
+      typeof route.query.pipelineId === 'string'
+        ? route.query.pipelineId
+        : undefined;
     const { data } = await api.get<PipelineBoardDto>('/pipelines/board', {
       params: pipelineId ? { pipelineId } : undefined,
     });
-    board.value = data;
+    boardPipelineId.value = data.pipeline.id;
+    stages.value = mapBoardToStages(data, formatDealDate);
     if (!pipelineId || pipelineId !== data.pipeline.id) {
       await router.replace({
         name: 'pipeline',
@@ -76,11 +113,6 @@ async function load() {
   }
 }
 
-function onSelectPipeline(event: Event) {
-  const id = (event.target as HTMLSelectElement).value;
-  void router.replace({ name: 'pipeline', query: { pipelineId: id } });
-}
-
 async function createPipeline() {
   const name = newName.value.trim();
   if (name.length < 2 || saving.value) return;
@@ -98,43 +130,108 @@ async function createPipeline() {
   }
 }
 
-function onDragStart(deal: DealDto, event: DragEvent) {
+function onPointerMove(event: PointerEvent | MouseEvent) {
+  if (!draggingId.value) return;
+  overlayPos.value = { x: event.clientX + 12, y: event.clientY + 12 };
+}
+
+function onDragStart(deal: PipelineDeal, event: DragEvent) {
   draggingId.value = deal.id;
+  overlayDeal.value = deal;
+  overlayAccent.value = findAccent(deal.id);
+  overlayPos.value = {
+    x: (event.clientX || 0) + 12,
+    y: (event.clientY || 0) + 12,
+  };
   event.dataTransfer?.setData('text/plain', deal.id);
   event.dataTransfer!.effectAllowed = 'move';
+  if (event.dataTransfer) {
+    const img = new Image();
+    img.src =
+      'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    event.dataTransfer.setDragImage(img, 0, 0);
+  }
 }
 
 function onDragEnd() {
   draggingId.value = null;
   dropStageId.value = null;
+  overlayDeal.value = null;
 }
 
 function onDragOver(stageId: string, event: DragEvent) {
   event.preventDefault();
   dropStageId.value = stageId;
   if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+  if (event.clientX || event.clientY) {
+    overlayPos.value = { x: event.clientX + 12, y: event.clientY + 12 };
+  }
 }
 
-async function onDrop(stageId: string, event: DragEvent) {
+async function applyUpdateDealStage(
+  dealId: string,
+  stageId: string,
+  toIndex?: number,
+) {
+  const prev = stages.value;
+  const next = updateDealStage(prev, dealId, stageId, toIndex);
+  const target = next.find((s) => s.id === stageId);
+  const position = target?.deals.findIndex((d) => d.id === dealId) ?? toIndex;
+
+  stages.value = next;
+  moving.value = true;
+  error.value = '';
+  try {
+    await api.patch(`/deals/${dealId}/move`, {
+      stageId,
+      position: position ?? undefined,
+    });
+  } catch {
+    stages.value = prev;
+    error.value = 'جابه‌جایی معامله ناموفق بود.';
+  } finally {
+    moving.value = false;
+  }
+}
+
+async function onDrop(stageId: string, event: DragEvent, index?: number) {
   event.preventDefault();
   const dealId = event.dataTransfer?.getData('text/plain') || draggingId.value;
   dropStageId.value = null;
   draggingId.value = null;
-  if (!dealId || !board.value) return;
+  overlayDeal.value = null;
+  if (!dealId || moving.value) return;
 
-  const current = board.value.stages.find((s) => s.deals.some((d) => d.id === dealId));
-  if (current?.id === stageId) return;
-
-  try {
-    await api.patch(`/deals/${dealId}/move`, { stageId });
-    await load();
-  } catch {
-    error.value = 'جابه‌جایی معامله ناموفق بود.';
+  const current = stages.value.find((s) => s.deals.some((d) => d.id === dealId));
+  const currentIndex = current?.deals.findIndex((d) => d.id === dealId) ?? -1;
+  if (current?.id === stageId && (index == null || index === currentIndex)) {
+    return;
   }
+
+  await applyUpdateDealStage(dealId, stageId, index);
 }
 
-function openDeal(id: string) {
-  void router.push({ name: 'deal-detail', params: { id } });
+function onAddDeal(stageId: string) {
+  void router.push({
+    name: 'deal-new',
+    query: {
+      pipelineId: selectedPipelineId.value || undefined,
+      stageId,
+    },
+  });
+}
+
+function onOpenDeal(dealId: string) {
+  menuOpenId.value = null;
+  void router.push({ name: 'deal-detail', params: { id: dealId } });
+}
+
+function onMenuDeal(dealId: string) {
+  menuOpenId.value = menuOpenId.value === dealId ? null : dealId;
+}
+
+function onFilter() {
+  // UI فیلتر — اتصال سیستم فیلتر پیشرفته بعداً
 }
 
 watch(
@@ -145,58 +242,52 @@ watch(
   },
 );
 
-onMounted(load);
+onMounted(() => {
+  void load();
+  window.addEventListener('drag', onPointerMove);
+  window.addEventListener('dragover', onPointerMove);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('drag', onPointerMove);
+  window.removeEventListener('dragover', onPointerMove);
+});
+
+defineExpose({ updateDealStage: applyUpdateDealStage });
 </script>
 
 <template>
-  <section class="page">
-    <header class="page-head">
-      <div>
-        <p class="eyebrow">فروش</p>
-        <h1>{{ board?.pipeline.name || 'کاریز فروش' }}</h1>
-        <p class="lead">
-          کارت‌ها را با کشیدن بین ستون‌ها جابه‌جا کنید.
-          <span v-if="board">{{ openCount }} معامله باز</span>
-        </p>
-      </div>
-      <div class="actions">
-        <button class="btn btn-ghost" type="button" :disabled="loading" @click="load">بروزرسانی</button>
-        <RouterLink
-          class="btn"
-          :to="{
-            name: 'deal-new',
-            query: selectedPipelineId ? { pipelineId: selectedPipelineId } : undefined,
-          }"
-        >
-          معامله جدید
-        </RouterLink>
-      </div>
-    </header>
+  <section class="page" dir="rtl">
+    <PipelineToolbar
+      pipeline-name="کاریز فروش"
+      :pipeline-options="pipelineOptions"
+      :selected-pipeline-id="selectedPipelineId"
+      :view-mode="viewMode"
+      :search="search"
+      @update:view-mode="viewMode = $event"
+      @update:search="search = $event"
+      @update:selected-pipeline-id="selectedPipelineId = $event"
+      @filter="onFilter"
+    />
 
-    <div class="pipeline-bar">
-      <label class="picker">
-        <span>کاریز</span>
-        <select
-          :value="selectedPipelineId"
-          :disabled="loading || !pipelines.length"
-          @change="onSelectPipeline"
-        >
-          <option v-for="p in pipelines" :key="p.id" :value="p.id">
-            {{ p.name }}{{ p.isDefault ? ' (پیش‌فرض)' : '' }}
-          </option>
-        </select>
-      </label>
+    <div v-if="canCreatePipeline" class="create-row">
       <button
-        v-if="canCreatePipeline"
-        class="btn btn-ghost"
+        class="btn-ghost-sm"
         type="button"
         @click="showCreate = !showCreate"
       >
         کاریز جدید
       </button>
+      <button class="btn-ghost-sm" type="button" :disabled="loading" @click="load">
+        بروزرسانی
+      </button>
     </div>
 
-    <form v-if="showCreate && canCreatePipeline" class="create-box" @submit.prevent="createPipeline">
+    <form
+      v-if="showCreate && canCreatePipeline"
+      class="create-box"
+      @submit.prevent="createPipeline"
+    >
       <input
         v-model="newName"
         type="text"
@@ -208,63 +299,45 @@ onMounted(load);
       <button class="btn" type="submit" :disabled="saving || newName.trim().length < 2">
         {{ saving ? 'در حال ساخت…' : 'ساخت' }}
       </button>
-      <button class="btn btn-ghost" type="button" @click="showCreate = false">انصراف</button>
+      <button class="btn-ghost-sm" type="button" @click="showCreate = false">انصراف</button>
     </form>
 
     <p v-if="error" class="error">{{ error }}</p>
-    <p v-else-if="loading && !board" class="muted">در حال بارگذاری کاریز…</p>
+    <p v-else-if="loading && !stages.length" class="muted">در حال بارگذاری کاریز…</p>
 
-    <div v-if="board" class="board">
-      <div
-        v-for="stage in board.stages"
-        :key="stage.id"
-        class="column"
-        :class="{
-          won: stage.isWon,
-          lost: stage.isLost,
-          drop: dropStageId === stage.id,
-        }"
-        @dragover="onDragOver(stage.id, $event)"
-        @dragleave="dropStageId = null"
-        @drop="onDrop(stage.id, $event)"
-      >
-        <div class="column-head">
-          <h2>{{ stage.name }}</h2>
-          <span>{{ stage.deals.length }}</span>
-        </div>
-        <p class="column-sum">
-          {{ formatAmount(stage.totalAmount, 'IRR') }}
-        </p>
-        <div class="cards">
-          <article
-            v-for="deal in stage.deals"
-            :key="deal.id"
-            class="card"
-            :class="{ dragging: draggingId === deal.id }"
-            draggable="true"
-            @dragstart="onDragStart(deal, $event)"
-            @dragend="onDragEnd"
-            @dblclick="openDeal(deal.id)"
-          >
-            <h3 @click="openDeal(deal.id)">{{ deal.title }}</h3>
-            <p class="amount">{{ formatAmount(deal.amount, deal.currency) }}</p>
-            <p v-if="deal.person || deal.company" class="meta">
-              <span v-if="deal.person">{{ deal.person.fullName }}</span>
-              <span v-if="deal.person && deal.company"> · </span>
-              <span v-if="deal.company">{{ deal.company.name }}</span>
-            </p>
-            <div class="badges">
-              <span v-if="deal.isStale" class="badge stale">راکد</span>
-              <span v-if="deal.isRotten" class="badge rotten">فاسد</span>
-              <span v-for="tag in (deal.tags ?? []).slice(0, 3)" :key="tag" class="badge tag">
-                {{ tag }}
-              </span>
-            </div>
-            <p v-if="deal.source" class="meta source">منبع: {{ deal.source }}</p>
-          </article>
-          <p v-if="!stage.deals.length" class="empty">خالی</p>
-        </div>
-      </div>
+    <div v-if="viewMode === 'list'" class="list-placeholder">
+      نمای لیست معاملات
+    </div>
+
+    <PipelineBoard
+      v-else-if="stages.length"
+      :stages="visibleStages"
+      :dragging-id="draggingId"
+      :drop-stage-id="dropStageId"
+      @drag-start="onDragStart"
+      @drag-end="onDragEnd"
+      @drag-over="onDragOver"
+      @drop="onDrop"
+      @add-deal="onAddDeal"
+      @open-deal="onOpenDeal"
+      @menu-deal="onMenuDeal"
+    />
+
+    <Teleport to="body">
+      <DealCardOverlay
+        v-if="overlayDeal && draggingId"
+        :deal="overlayDeal"
+        :accent="overlayAccent"
+        :x="overlayPos.x"
+        :y="overlayPos.y"
+      />
+    </Teleport>
+
+    <div v-if="menuOpenId" class="menu-pop" role="menu">
+      <button type="button" role="menuitem" @click="onOpenDeal(menuOpenId)">
+        مشاهده معامله
+      </button>
+      <button type="button" role="menuitem" @click="menuOpenId = null">بستن</button>
     </div>
   </section>
 </template>
@@ -272,67 +345,27 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1rem;
+  gap: 0.55rem;
   min-width: 0;
+  direction: rtl;
+  text-align: right;
 }
 
-.page-head {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
-}
-
-h1 {
-  margin: 0.2rem 0;
-  font-size: 1.85rem;
-}
-
-.lead,
-.muted {
-  color: var(--muted);
-}
-
-.actions {
+.create-row {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
 }
 
-.pipeline-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.65rem;
-  align-items: center;
-  min-width: 0;
-}
-
-.picker {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex: 1 1 200px;
-  min-width: 0;
-  color: var(--muted);
-  font-size: 0.9rem;
-}
-
-.picker select {
-  flex: 1;
-  min-width: 0;
+.btn-ghost-sm {
   border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.65rem 0.85rem;
   background: #fff;
-  font: inherit;
-  color: var(--ink);
+  color: var(--accent);
+  border-radius: 10px;
+  padding: 0.4rem 0.75rem;
+  font-weight: 700;
+  font-size: 0.85rem;
+  cursor: pointer;
 }
 
 .create-box {
@@ -340,200 +373,53 @@ h1 {
   flex-wrap: wrap;
   gap: 0.5rem;
   align-items: center;
-  min-width: 0;
 }
 
 .create-box input {
   flex: 1 1 180px;
-  min-width: 0;
   border: 1px solid var(--line);
   border-radius: 12px;
-  padding: 0.7rem 0.85rem;
+  padding: 0.65rem 0.85rem;
   background: #fff;
   font: inherit;
 }
 
-.board {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(220px, 260px);
-  gap: 0.85rem;
-  overflow-x: auto;
-  padding-bottom: 0.75rem;
-  -webkit-overflow-scrolling: touch;
-}
-
-.column {
-  background: #f4f7f5;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.75rem;
-  min-height: 420px;
-  transition: border-color 0.15s ease, background 0.15s ease;
-}
-
-.column.drop {
-  border-color: var(--accent);
-  background: var(--accent-soft);
-}
-
-.column.won {
-  background: #eef8f2;
-}
-
-.column.lost {
-  background: #f8f1f0;
-}
-
-.column-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.column-head h2 {
-  margin: 0;
-  font-size: 0.98rem;
-}
-
-.column-head span,
-.column-sum,
-.empty,
-.meta {
+.list-placeholder {
+  margin-top: 0.5rem;
+  padding: 2.5rem 1rem;
+  text-align: center;
   color: var(--muted);
-  font-size: 0.85rem;
-}
-
-.column-sum {
-  margin: 0.25rem 0 0.7rem;
-}
-
-.cards {
-  display: grid;
-  gap: 0.55rem;
-}
-
-.card {
   background: var(--surface);
+  border: 1px dashed var(--line);
+  border-radius: var(--radius);
+  font-weight: 700;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.menu-pop {
+  position: fixed;
+  inset-inline-start: 1rem;
+  bottom: 5.5rem;
+  z-index: 40;
+  background: #fff;
   border: 1px solid var(--line);
   border-radius: 12px;
-  padding: 0.8rem;
-  cursor: grab;
   box-shadow: var(--shadow);
+  padding: 0.35rem;
+  display: grid;
+  gap: 0.15rem;
 }
 
-.card:active {
-  cursor: grabbing;
-}
-
-.card.dragging {
-  opacity: 0.55;
-}
-
-.card h3 {
-  margin: 0 0 0.35rem;
-  font-size: 0.95rem;
-  line-height: 1.45;
-}
-
-.amount {
-  margin: 0;
-  font-weight: 700;
-  color: var(--accent);
-  font-size: 0.9rem;
-}
-
-.meta {
-  margin: 0.35rem 0 0;
-}
-
-.badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.3rem;
-  margin-top: 0.45rem;
-}
-
-.badge {
-  font-size: 0.72rem;
-  padding: 0.15rem 0.45rem;
-  border-radius: 999px;
-  font-weight: 600;
-}
-
-.badge.stale {
-  background: #fff4e5;
-  color: #9a6700;
-}
-
-.badge.rotten {
-  background: #fde8e8;
-  color: #b42318;
-}
-
-.badge.tag {
-  background: #eef6f2;
-  color: #0f5c63;
-}
-
-.source {
-  font-size: 0.78rem;
-}
-
-.empty {
-  margin: 0.5rem 0;
-  text-align: center;
-}
-
-@media (max-width: 700px) {
-  h1 {
-    font-size: 1.45rem;
-  }
-
-  .page-head {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .actions {
-    width: 100%;
-  }
-
-  .actions .btn {
-    flex: 1 1 auto;
-    text-align: center;
-  }
-
-  .pipeline-bar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .picker {
-    flex: 1 1 auto;
-    width: 100%;
-  }
-
-  .create-box {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .create-box input {
-    flex: 0 0 auto;
-    width: 100%;
-    height: 2.75rem;
-    max-height: 2.75rem;
-    padding: 0 0.85rem;
-  }
-
-  .board {
-    grid-auto-columns: minmax(200px, 78vw);
-  }
-
-  .column {
-    min-height: 320px;
-  }
+.menu-pop button {
+  border: 0;
+  background: transparent;
+  padding: 0.45rem 0.85rem;
+  cursor: pointer;
+  font: inherit;
+  color: var(--ink);
+  text-align: right;
 }
 </style>