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/api/prisma/seed.ts

@@ -239,6 +239,172 @@ async function main() {
     console.log('Services pipeline already seeded');
   }
 
+  // کاریز منتظر — مطابق طراحی UI (۳ مرحله + معاملات نمونه)
+  const WAITING_STAGES = [
+    { name: 'پیگیری', isWon: false, isLost: false },
+    { name: 'مذاکرات اولیه', isWon: false, isLost: false },
+    { name: 'قیمت و نهایی کردن', isWon: false, isLost: false },
+  ] as const;
+
+  const WAITING_DEALS: Array<{
+    stageName: (typeof WAITING_STAGES)[number]['name'];
+    title: string;
+    notes: string;
+    amount: number;
+    expectedCloseAt: string;
+    position: number;
+  }> = [
+    {
+      stageName: 'پیگیری',
+      title: 'نرم‌افزار حسابان',
+      notes: 'نصب سیستم یکپارچه',
+      amount: 250_000_000,
+      expectedCloseAt: '2024-07-15T00:00:00.000Z',
+      position: 0,
+    },
+    {
+      stageName: 'پیگیری',
+      title: 'همکاران سیستم',
+      notes: 'نسخه سازمانی',
+      amount: 350_000_000,
+      expectedCloseAt: '2024-07-08T00:00:00.000Z',
+      position: 1,
+    },
+    {
+      stageName: 'پیگیری',
+      title: 'بازرگانی امید',
+      notes: 'کاربران سازمانی',
+      amount: 180_000_000,
+      expectedCloseAt: '2024-07-17T00:00:00.000Z',
+      position: 2,
+    },
+    {
+      stageName: 'پیگیری',
+      title: 'کالای صنعتی پارس',
+      notes: 'ماژول انبارداری',
+      amount: 120_000_000,
+      expectedCloseAt: '2024-07-23T00:00:00.000Z',
+      position: 3,
+    },
+    {
+      stageName: 'مذاکرات اولیه',
+      title: 'فروشگاه تک‌کالا',
+      notes: 'ماژول فروش',
+      amount: 280_000_000,
+      expectedCloseAt: '2024-07-13T00:00:00.000Z',
+      position: 0,
+    },
+    {
+      stageName: 'مذاکرات اولیه',
+      title: 'شرکت داده‌پرداز',
+      notes: 'اتصال به حسابداری',
+      amount: 190_000_000,
+      expectedCloseAt: '2024-07-10T00:00:00.000Z',
+      position: 1,
+    },
+    {
+      stageName: 'مذاکرات اولیه',
+      title: 'گروه فنی مهندسی آوا',
+      notes: 'ماژول پروژه‌ها',
+      amount: 315_000_000,
+      expectedCloseAt: '2024-07-05T00:00:00.000Z',
+      position: 2,
+    },
+    {
+      stageName: 'مذاکرات اولیه',
+      title: 'رستوران زنجیره‌ای نیک',
+      notes: 'ماژول رستوران',
+      amount: 165_000_000,
+      expectedCloseAt: '2024-07-09T00:00:00.000Z',
+      position: 3,
+    },
+    {
+      stageName: 'قیمت و نهایی کردن',
+      title: 'شرکت تجارت',
+      notes: 'یکپارچه‌سازی کامل',
+      amount: 640_000_000,
+      expectedCloseAt: '2024-06-30T00:00:00.000Z',
+      position: 0,
+    },
+    {
+      stageName: 'قیمت و نهایی کردن',
+      title: 'فروشگاه اینترنتی دیجی‌خونه',
+      notes: 'فروشگاه اینترنتی',
+      amount: 420_000_000,
+      expectedCloseAt: '2024-06-28T00:00:00.000Z',
+      position: 1,
+    },
+    {
+      stageName: 'قیمت و نهایی کردن',
+      title: 'شرکت داروسازی بهداشت',
+      notes: 'ماژول مالی و انبار',
+      amount: 780_000_000,
+      expectedCloseAt: '2024-07-02T00:00:00.000Z',
+      position: 2,
+    },
+  ];
+
+  let waitingPipeline = await prisma.pipeline.findFirst({
+    where: { organizationId: org.id, name: 'کاریز منتظر' },
+    include: { stages: { orderBy: { position: 'asc' } } },
+  });
+
+  if (!waitingPipeline) {
+    waitingPipeline = await prisma.pipeline.create({
+      data: {
+        organizationId: org.id,
+        name: 'کاریز منتظر',
+        isDefault: false,
+        stages: {
+          create: WAITING_STAGES.map((s, index) => ({
+            name: s.name,
+            position: index,
+            isWon: s.isWon,
+            isLost: s.isLost,
+          })),
+        },
+      },
+      include: { stages: { orderBy: { position: 'asc' } } },
+    });
+    console.log('Seeded waiting pipeline (کاریز منتظر)');
+  } else {
+    console.log('Waiting pipeline already seeded');
+  }
+
+  const waitingDealCount = await prisma.deal.count({
+    where: { organizationId: org.id, pipelineId: waitingPipeline.id },
+  });
+
+  if (waitingDealCount === 0) {
+    const stageByName = new Map(
+      waitingPipeline.stages.map((s) => [s.name, s] as const),
+    );
+    await prisma.deal.createMany({
+      data: WAITING_DEALS.map((d) => {
+        const stage = stageByName.get(d.stageName);
+        if (!stage) {
+          throw new Error(`Missing stage ${d.stageName} on waiting pipeline`);
+        }
+        return {
+          organizationId: org.id,
+          pipelineId: waitingPipeline!.id,
+          stageId: stage.id,
+          title: d.title,
+          notes: d.notes,
+          amount: d.amount,
+          currency: 'IRR',
+          expectedCloseAt: new Date(d.expectedCloseAt),
+          ownerId: owner?.id,
+          position: d.position,
+          tags: ['دمو-کاریز'],
+        };
+      }),
+    });
+    console.log('Seeded waiting pipeline deals:', WAITING_DEALS.length);
+  } else {
+    console.log('Waiting pipeline deals already seeded');
+  }
+
   const dealsCount = await prisma.deal.count({
     where: { organizationId: org.id },
   });

apps/web/src/components/UiIcon.vue

@@ -48,7 +48,9 @@ defineProps<{
     | 'dollar'
     | 'layers'
     | 'target'
-    | 'pencil';
+    | 'pencil'
+    | 'grid'
+    | 'list';
   size?: number;
 }>();
 </script>
@@ -275,6 +277,18 @@ defineProps<{
       <path d="M12 20h9" />
       <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
     </template>
+    <template v-else-if="name === 'grid'">
+      <rect x="3.5" y="3.5" width="7" height="7" rx="1.2" />
+      <rect x="13.5" y="3.5" width="7" height="7" rx="1.2" />
+      <rect x="3.5" y="13.5" width="7" height="7" rx="1.2" />
+      <rect x="13.5" y="13.5" width="7" height="7" rx="1.2" />
+    </template>
+    <template v-else-if="name === 'list'">
+      <path d="M8 6h12M8 12h12M8 18h12" />
+      <circle cx="4.5" cy="6" r="1" fill="currentColor" stroke="none" />
+      <circle cx="4.5" cy="12" r="1" fill="currentColor" stroke="none" />
+      <circle cx="4.5" cy="18" r="1" fill="currentColor" stroke="none" />
+    </template>
   </svg>
 </template>
 

apps/web/src/components/pipeline/AddDealButton.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import UiIcon from '@/components/UiIcon.vue';
+import type { PipelineAccent } from '@/lib/pipeline-board';
+import { PIPELINE_ACCENT } from '@/lib/pipeline-board';
+
+defineProps<{
+  accent: PipelineAccent;
+}>();
+
+const emit = defineEmits<{
+  add: [];
+}>();
+</script>
+
+<template>
+  <button
+    type="button"
+    class="add-deal"
+    :style="{
+      '--add-color': PIPELINE_ACCENT[accent].text,
+      '--add-border': PIPELINE_ACCENT[accent].border,
+      '--add-soft': PIPELINE_ACCENT[accent].soft,
+    }"
+    aria-label="افزودن معامله"
+    @click="emit('add')"
+  >
+    <UiIcon name="plus" :size="16" />
+    افزودن معامله
+  </button>
+</template>
+
+<style scoped>
+.add-deal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  width: 100%;
+  margin-top: 0.35rem;
+  padding: 0.85rem 1rem;
+  border: 1.5px dashed var(--add-border);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--add-soft) 55%, white);
+  color: var(--add-color);
+  font-weight: 700;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+}
+
+.add-deal:hover {
+  background: var(--add-soft);
+}
+
+.add-deal:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+</style>

apps/web/src/components/pipeline/DealCard.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import UiIcon from '@/components/UiIcon.vue';
+import type { PipelineAccent, PipelineDeal } from '@/lib/pipeline-board';
+import { formatCurrencyParts, PIPELINE_ACCENT } from '@/lib/pipeline-board';
+
+const props = defineProps<{
+  deal: PipelineDeal;
+  accent: PipelineAccent;
+  dragging?: boolean;
+}>();
+
+const emit = defineEmits<{
+  dragStart: [deal: PipelineDeal, event: DragEvent];
+  dragEnd: [];
+  open: [dealId: string];
+  menu: [dealId: string];
+}>();
+
+const money = computed(() =>
+  formatCurrencyParts(props.deal.amount, props.deal.currencyUnit ?? 'تومان'),
+);
+const colors = computed(() => PIPELINE_ACCENT[props.accent]);
+</script>
+
+<template>
+  <article
+    class="deal-card"
+    :class="{ dragging }"
+    draggable="true"
+    role="listitem"
+    :aria-grabbed="dragging ? 'true' : 'false'"
+    :style="{
+      '--badge-bg': colors.soft,
+      '--badge-fg': colors.text,
+    }"
+    @dragstart="emit('dragStart', deal, $event)"
+    @dragend="emit('dragEnd')"
+    @dblclick="emit('open', deal.id)"
+  >
+    <div class="top">
+      <div class="identity">
+        <span class="badge" aria-hidden="true">{{ deal.initials }}</span>
+        <div class="titles">
+          <h3 @click.stop="emit('open', deal.id)">{{ deal.title }}</h3>
+          <p class="desc">{{ deal.description }}</p>
+        </div>
+      </div>
+      <button
+        type="button"
+        class="menu"
+        aria-label="گزینه‌های معامله"
+        @click.stop="emit('menu', deal.id)"
+      >
+        <UiIcon name="dots-v" :size="18" />
+      </button>
+    </div>
+
+    <div class="amount" dir="ltr">
+      <strong>{{ money.number }}</strong>
+      <span>{{ money.unit }}</span>
+    </div>
+
+    <div class="foot">
+      <img
+        class="avatar"
+        src="/brand/user-avatar.png"
+        alt=""
+        width="28"
+        height="28"
+      />
+      <span class="date">
+        <UiIcon name="calendar" :size="14" />
+        {{ deal.date }}
+      </span>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.deal-card {
+  background: #fff;
+  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
+  border-radius: 16px;
+  padding: 1rem;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+  cursor: grab;
+  transition:
+    box-shadow 0.18s ease,
+    border-color 0.18s ease,
+    transform 0.18s ease,
+    opacity 0.18s ease;
+  text-align: right;
+  direction: rtl;
+}
+
+.deal-card:hover {
+  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
+}
+
+.deal-card:active {
+  cursor: grabbing;
+}
+
+.deal-card.dragging {
+  opacity: 0.95;
+  transform: scale(1.02);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
+}
+
+.deal-card:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.identity {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.badge {
+  flex: 0 0 auto;
+  width: 2.35rem;
+  height: 2.35rem;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: var(--badge-bg);
+  color: var(--badge-fg);
+  font-size: 0.72rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.titles {
+  min-width: 0;
+}
+
+.titles h3 {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 800;
+  line-height: 1.45;
+  color: var(--ink);
+  cursor: pointer;
+}
+
+.desc {
+  margin: 0.15rem 0 0;
+  color: var(--muted);
+  font-size: 0.8rem;
+  line-height: 1.4;
+}
+
+.menu {
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  padding: 0.15rem;
+  border-radius: 8px;
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+
+.menu:hover,
+.menu:focus-visible {
+  color: var(--ink);
+  background: #f1f5f9;
+}
+
+.amount {
+  margin-top: 0.85rem;
+  text-align: left;
+  display: grid;
+  justify-items: start;
+  gap: 0.05rem;
+}
+
+.amount strong {
+  font-size: 1.05rem;
+  font-weight: 800;
+  color: var(--ink);
+  letter-spacing: -0.01em;
+}
+
+.amount span {
+  font-size: 0.72rem;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.foot {
+  margin-top: 0.85rem;
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  object-fit: cover;
+  border: 1px solid var(--line);
+}
+
+.date {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+</style>

apps/web/src/components/pipeline/DealCardOverlay.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import DealCard from './DealCard.vue';
+import type { PipelineAccent, PipelineDeal } from '@/lib/pipeline-board';
+
+defineProps<{
+  deal: PipelineDeal;
+  accent: PipelineAccent;
+  x: number;
+  y: number;
+}>();
+</script>
+
+<template>
+  <div
+    class="overlay"
+    :style="{ transform: `translate3d(${x}px, ${y}px, 0)` }"
+    aria-hidden="true"
+  >
+    <DealCard :deal="deal" :accent="accent" dragging />
+  </div>
+</template>
+
+<style scoped>
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 80;
+  width: min(300px, 86vw);
+  pointer-events: none;
+  filter: drop-shadow(0 16px 28px rgba(15, 23, 42, 0.16));
+  opacity: 0.97;
+}
+</style>

apps/web/src/components/pipeline/PipelineBoard.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import PipelineColumn from './PipelineColumn.vue';
+import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
+
+defineProps<{
+  stages: PipelineStage[];
+  draggingId: string | null;
+  dropStageId: string | null;
+}>();
+
+const emit = defineEmits<{
+  dragStart: [deal: PipelineDeal, event: DragEvent];
+  dragEnd: [];
+  dragOver: [stageId: string, event: DragEvent];
+  drop: [stageId: string, event: DragEvent, index?: number];
+  addDeal: [stageId: string];
+  openDeal: [dealId: string];
+  menuDeal: [dealId: string];
+}>();
+</script>
+
+<template>
+  <div class="board" dir="rtl">
+    <PipelineColumn
+      v-for="stage in stages"
+      :key="stage.id"
+      :stage="stage"
+      :dragging-id="draggingId"
+      :drop-active="dropStageId === stage.id"
+      @drag-start="(d, e) => emit('dragStart', d, e)"
+      @drag-end="emit('dragEnd')"
+      @drag-over="(id, e) => emit('dragOver', id, e)"
+      @drop="(id, e, index) => emit('drop', id, e, index)"
+      @add-deal="emit('addDeal', $event)"
+      @open-deal="emit('openDeal', $event)"
+      @menu-deal="emit('menuDeal', $event)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.board {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  width: 100%;
+  min-width: 0;
+  align-items: stretch;
+}
+
+@media (max-width: 1024px) {
+  .board {
+    overflow-x: auto;
+    padding-bottom: 0.75rem;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .board::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

apps/web/src/components/pipeline/PipelineColumn.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import UiIcon from '@/components/UiIcon.vue';
+import AddDealButton from './AddDealButton.vue';
+import DealCard from './DealCard.vue';
+import type { PipelineDeal, PipelineStage } from '@/lib/pipeline-board';
+import { PIPELINE_ACCENT, toFaDealCount } from '@/lib/pipeline-board';
+
+defineProps<{
+  stage: PipelineStage;
+  draggingId: string | null;
+  dropActive: boolean;
+}>();
+
+const emit = defineEmits<{
+  dragStart: [deal: PipelineDeal, event: DragEvent];
+  dragEnd: [];
+  dragOver: [stageId: string, event: DragEvent];
+  drop: [stageId: string, event: DragEvent, index?: number];
+  addDeal: [stageId: string];
+  openDeal: [dealId: string];
+  menuDeal: [dealId: string];
+}>();
+
+function onCardDragOver(stageId: string, event: DragEvent) {
+  event.preventDefault();
+  event.stopPropagation();
+  emit('dragOver', stageId, event);
+}
+
+function onCardDrop(stageId: string, index: number, event: DragEvent) {
+  event.preventDefault();
+  event.stopPropagation();
+  emit('drop', stageId, event, index);
+}
+</script>
+
+<template>
+  <section
+    class="column"
+    :class="{ drop: dropActive }"
+    :style="{
+      '--stage-solid': PIPELINE_ACCENT[stage.color].solid,
+      '--stage-soft': PIPELINE_ACCENT[stage.color].soft,
+      '--stage-border': PIPELINE_ACCENT[stage.color].border,
+      '--stage-text': PIPELINE_ACCENT[stage.color].text,
+    }"
+    @dragover.prevent="emit('dragOver', stage.id, $event)"
+    @drop.prevent="emit('drop', stage.id, $event)"
+  >
+    <header class="column-head">
+      <div class="title-wrap">
+        <span class="dot" aria-hidden="true" />
+        <h2>{{ stage.title }}</h2>
+      </div>
+      <div class="head-actions">
+        <span class="count">{{ toFaDealCount(stage.deals.length) }}</span>
+        <button
+          type="button"
+          class="plus"
+          aria-label="افزودن معامله به این مرحله"
+          @click="emit('addDeal', stage.id)"
+        >
+          <UiIcon name="plus" :size="16" />
+        </button>
+      </div>
+    </header>
+
+    <div class="cards" role="list" :aria-label="stage.title">
+      <div
+        v-for="(deal, index) in stage.deals"
+        :key="deal.id"
+        class="card-slot"
+        @dragover="onCardDragOver(stage.id, $event)"
+        @drop="onCardDrop(stage.id, index, $event)"
+      >
+        <DealCard
+          :deal="deal"
+          :accent="stage.color"
+          :dragging="draggingId === deal.id"
+          @drag-start="(d, e) => emit('dragStart', d, e)"
+          @drag-end="emit('dragEnd')"
+          @open="emit('openDeal', $event)"
+          @menu="emit('menuDeal', $event)"
+        />
+      </div>
+      <p v-if="!stage.deals.length" class="empty">معامله‌ای نیست</p>
+    </div>
+
+    <AddDealButton :accent="stage.color" @add="emit('addDeal', stage.id)" />
+  </section>
+</template>
+
+<style scoped>
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+  flex: 1 1 0;
+  min-height: 420px;
+  padding: 0.35rem 0.15rem 0.5rem;
+  border-radius: 18px;
+  border: 1px solid transparent;
+  background: transparent;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.column.drop {
+  background: color-mix(in srgb, var(--stage-soft) 70%, transparent);
+  border-color: color-mix(in srgb, var(--stage-border) 80%, transparent);
+}
+
+.column-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.15rem 0.25rem;
+}
+
+.title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 999px;
+  background: var(--stage-solid);
+  flex: 0 0 auto;
+}
+
+.column-head h2 {
+  margin: 0;
+  font-size: 0.98rem;
+  font-weight: 800;
+  color: var(--ink);
+}
+
+.head-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.count {
+  font-size: 0.78rem;
+  color: var(--muted);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.plus {
+  width: 1.7rem;
+  height: 1.7rem;
+  border-radius: 999px;
+  border: 0;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--accent) 14%, white);
+  color: var(--accent);
+  cursor: pointer;
+}
+
+.plus:hover,
+.plus:focus-visible {
+  background: var(--accent-soft);
+  outline: none;
+}
+
+.cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  flex: 1;
+  min-height: 4rem;
+}
+
+.card-slot {
+  min-width: 0;
+}
+
+.empty {
+  margin: 1rem 0;
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+@media (max-width: 1024px) {
+  .column {
+    flex: 0 0 auto;
+    width: min(320px, 86vw);
+    min-width: min(320px, 86vw);
+    scroll-snap-align: start;
+  }
+}
+
+@media (max-width: 700px) {
+  .column {
+    width: 88vw;
+    min-width: 88vw;
+    min-height: 360px;
+  }
+}
+</style>

apps/web/src/components/pipeline/PipelineToolbar.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import UiIcon from '@/components/UiIcon.vue';
+
+export type PipelineViewMode = 'kanban' | 'list';
+
+defineProps<{
+  pipelineName: string;
+  pipelineOptions: Array<{ id: string; name: string }>;
+  selectedPipelineId: string;
+  viewMode: PipelineViewMode;
+  search: string;
+}>();
+
+const emit = defineEmits<{
+  'update:viewMode': [PipelineViewMode];
+  'update:search': [string];
+  'update:selectedPipelineId': [string];
+  filter: [];
+}>();
+</script>
+
+<template>
+  <header class="toolbar" dir="rtl">
+    <div class="title-block">
+      <span class="brand-ico" aria-hidden="true">
+        <UiIcon name="briefcase" :size="18" />
+      </span>
+      <h1>کاریز فروش</h1>
+    </div>
+
+    <div class="view-toggle" role="group" aria-label="نوع نمایش">
+      <button
+        type="button"
+        class="seg"
+        :class="{ on: viewMode === 'kanban' }"
+        :aria-pressed="viewMode === 'kanban'"
+        @click="emit('update:viewMode', 'kanban')"
+      >
+        <UiIcon name="grid" :size="16" />
+        نمای کاریز
+      </button>
+      <button
+        type="button"
+        class="seg"
+        :class="{ on: viewMode === 'list' }"
+        :aria-pressed="viewMode === 'list'"
+        @click="emit('update:viewMode', 'list')"
+      >
+        <UiIcon name="list" :size="16" />
+        نمای لیست
+      </button>
+    </div>
+
+    <label class="pipeline-pick">
+      <span class="sr">انتخاب کاریز</span>
+      <select
+        :value="selectedPipelineId"
+        @change="
+          emit(
+            'update:selectedPipelineId',
+            ($event.target as HTMLSelectElement).value,
+          )
+        "
+      >
+        <option
+          v-for="opt in pipelineOptions"
+          :key="opt.id"
+          :value="opt.id"
+        >
+          {{ opt.name }}
+        </option>
+      </select>
+      <UiIcon class="chev" name="chevron" :size="16" />
+    </label>
+
+    <label class="search">
+      <UiIcon name="search" :size="16" />
+      <span class="sr">جستجو</span>
+      <input
+        :value="search"
+        type="search"
+        placeholder="جستجو..."
+        @input="emit('update:search', ($event.target as HTMLInputElement).value)"
+      />
+    </label>
+
+    <button type="button" class="filter-btn" aria-label="فیلترها" @click="emit('filter')">
+      <UiIcon name="filter" :size="16" />
+      فیلترها
+    </button>
+  </header>
+</template>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
+  margin-bottom: 1rem;
+}
+
+.title-block {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  margin-inline-end: 0.25rem;
+}
+
+.brand-ico {
+  width: 2.15rem;
+  height: 2.15rem;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: #0f766e;
+  color: #fff;
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: var(--ink);
+}
+
+.view-toggle {
+  display: inline-flex;
+  background: #eef2f4;
+  border-radius: 12px;
+  padding: 0.2rem;
+  gap: 0.15rem;
+}
+
+.seg {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-weight: 700;
+  font-size: 0.82rem;
+  padding: 0.45rem 0.75rem;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.seg.on {
+  background: #fff;
+  color: var(--accent);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+}
+
+.seg:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.pipeline-pick {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 140px;
+}
+
+.pipeline-pick select {
+  appearance: none;
+  border: 1px solid var(--line);
+  background: #fff;
+  border-radius: 12px;
+  padding: 0.55rem 2rem 0.55rem 0.85rem;
+  font: inherit;
+  font-weight: 600;
+  color: var(--ink);
+  min-width: 150px;
+  cursor: pointer;
+}
+
+.pipeline-pick .chev {
+  position: absolute;
+  left: 0.65rem;
+  pointer-events: none;
+  color: var(--muted);
+  transform: rotate(-90deg);
+}
+
+.search {
+  flex: 1 1 180px;
+  min-width: 160px;
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.45rem 0.75rem;
+  color: var(--muted);
+}
+
+.search input {
+  border: 0;
+  outline: none;
+  background: transparent;
+  width: 100%;
+  color: var(--ink);
+  font: inherit;
+}
+
+.filter-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border: 0;
+  border-radius: 12px;
+  padding: 0.55rem 0.95rem;
+  background: var(--accent);
+  color: #fff;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.filter-btn:focus-visible,
+.pipeline-pick select:focus-visible,
+.search:focus-within {
+  outline: 2px solid var(--accent-soft);
+  outline-offset: 1px;
+}
+
+.sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+@media (max-width: 900px) {
+  .toolbar {
+    align-items: stretch;
+  }
+
+  .title-block {
+    width: 100%;
+  }
+
+  .view-toggle,
+  .pipeline-pick,
+  .search,
+  .filter-btn {
+    flex: 1 1 auto;
+  }
+
+  .pipeline-pick select,
+  .filter-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>

apps/web/src/lib/pipeline-board.ts

@@ -0,0 +1,227 @@
+export type PipelineAccent = 'green' | 'orange' | 'purple';
+
+export type PipelineDeal = {
+  id: string;
+  title: string;
+  description: string;
+  amount: number;
+  date: string;
+  initials: string;
+  /** شناسه مرحله فعلی — هنگام جابه‌جایی به‌روز می‌شود */
+  stageId?: string;
+  currencyUnit?: string;
+};
+
+export type PipelineStage = {
+  id: string;
+  title: string;
+  color: PipelineAccent;
+  deals: PipelineDeal[];
+  isWon?: boolean;
+  isLost?: boolean;
+};
+
+export const PIPELINE_ACCENT: Record<
+  PipelineAccent,
+  { soft: string; solid: string; text: string; border: string }
+> = {
+  green: {
+    soft: '#ecfdf5',
+    solid: '#10b981',
+    text: '#047857',
+    border: '#a7f3d0',
+  },
+  orange: {
+    soft: '#fff7ed',
+    solid: '#f59e0b',
+    text: '#b45309',
+    border: '#fde68a',
+  },
+  purple: {
+    soft: '#f5f3ff',
+    solid: '#8b5cf6',
+    text: '#6d28d9',
+    border: '#ddd6fe',
+  },
+};
+
+const ACCENT_CYCLE: PipelineAccent[] = ['green', 'orange', 'purple'];
+
+/** خروجی: ۲۵۰,۰۰۰,۰۰۰ تومان */
+export function formatCurrency(amount: number, unit = 'تومان'): string {
+  try {
+    return `${new Intl.NumberFormat('fa-IR').format(amount)} ${unit}`;
+  } catch {
+    return `${amount} ${unit}`;
+  }
+}
+
+export function formatCurrencyParts(
+  amount: number,
+  unit = 'تومان',
+): { number: string; unit: string } {
+  try {
+    return {
+      number: new Intl.NumberFormat('fa-IR').format(amount),
+      unit,
+    };
+  } catch {
+    return { number: String(amount), unit };
+  }
+}
+
+export function initialsFromTitle(title: string): string {
+  const parts = title
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean);
+  if (!parts.length) return '؟';
+  if (parts.length === 1) return parts[0]!.slice(0, 2);
+  return parts
+    .slice(0, 3)
+    .map((p) => p[0]!)
+    .join('');
+}
+
+export function currencyUnitLabel(currency: string): string {
+  if (currency === 'IRR' || currency === 'IRT') return 'تومان';
+  return currency;
+}
+
+/** نگاشت برد API به مدل UI کاریز */
+export function mapBoardToStages(
+  board: {
+    stages: Array<{
+      id: string;
+      name: string;
+      isWon: boolean;
+      isLost: boolean;
+      deals: Array<{
+        id: string;
+        title: string;
+        amount: number | null;
+        currency: string;
+        notes: string | null;
+        stageId: string;
+        expectedCloseAt: string | null;
+        createdAt: string;
+        person: { fullName: string } | null;
+        company: { name: string } | null;
+      }>;
+    }>;
+  },
+  formatDate: (iso: string) => string,
+): PipelineStage[] {
+  let openIndex = 0;
+  return board.stages.map((stage) => {
+    let color: PipelineAccent;
+    if (stage.isWon) color = 'green';
+    else if (stage.isLost) color = 'orange';
+    else {
+      color = ACCENT_CYCLE[openIndex % ACCENT_CYCLE.length]!;
+      openIndex += 1;
+    }
+
+    return {
+      id: stage.id,
+      title: stage.name,
+      color,
+      isWon: stage.isWon,
+      isLost: stage.isLost,
+      deals: stage.deals.map((deal) => {
+        const description =
+          deal.notes?.trim() ||
+          deal.company?.name ||
+          deal.person?.fullName ||
+          '';
+        const dateIso = deal.expectedCloseAt || deal.createdAt;
+        return {
+          id: deal.id,
+          title: deal.title,
+          description,
+          amount: deal.amount ?? 0,
+          date: formatDate(dateIso),
+          initials: initialsFromTitle(
+            deal.company?.name || deal.title,
+          ),
+          stageId: deal.stageId,
+          currencyUnit: currencyUnitLabel(deal.currency),
+        };
+      }),
+    };
+  });
+}
+
+
+/**
+ * جابه‌جایی معامله بین مراحل یا تغییر ترتیب داخل یک مرحله.
+ * فقط state محلی را تغییر می‌دهد — آماده اتصال به API.
+ */
+export function updateDealStage(
+  stages: PipelineStage[],
+  dealId: string,
+  stageId: string,
+  toIndex?: number,
+): PipelineStage[] {
+  let moving: PipelineDeal | null = null;
+  let fromStageId = '';
+  let fromIndex = -1;
+
+  for (const stage of stages) {
+    const idx = stage.deals.findIndex((d) => d.id === dealId);
+    if (idx !== -1) {
+      moving = stage.deals[idx]!;
+      fromStageId = stage.id;
+      fromIndex = idx;
+      break;
+    }
+  }
+  if (!moving) return stages;
+
+  const without = stages.map((stage) => {
+    if (stage.id !== fromStageId) return stage;
+    return {
+      ...stage,
+      deals: stage.deals.filter((d) => d.id !== dealId),
+    };
+  });
+
+  return without.map((stage) => {
+    if (stage.id !== stageId) return stage;
+    const next = [...stage.deals];
+    let insertAt =
+      toIndex == null || toIndex < 0 || toIndex > next.length
+        ? next.length
+        : toIndex;
+    if (
+      fromStageId === stageId &&
+      fromIndex >= 0 &&
+      toIndex != null &&
+      toIndex > fromIndex
+    ) {
+      insertAt = Math.max(0, insertAt - 1);
+    }
+    next.splice(insertAt, 0, { ...moving!, stageId });
+    return { ...stage, deals: next };
+  });
+}
+
+export function filterStagesByQuery(
+  stages: PipelineStage[],
+  query: string,
+): PipelineStage[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return stages;
+  return stages.map((stage) => ({
+    ...stage,
+    deals: stage.deals.filter(
+      (d) =>
+        d.title.toLowerCase().includes(q) ||
+        d.description.toLowerCase().includes(q),
+    ),
+  }));
+}
+
+export function toFaDealCount(n: number): string {
+  return `${new Intl.NumberFormat('fa-IR').format(n)} معامله`;
+}

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 { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
+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 boardPipelineId = ref('');
-const dropStageId = ref<string | null>(null);
+const viewMode = ref<PipelineViewMode>('kanban');
+const search = ref('');
 const showCreate = ref(false);
 const newName = ref('');
 
-const selectedPipelineId = computed(() => {
+const draggingId = ref<string | null>(null);
-  const q = route.query.pipelineId;
+const dropStageId = ref<string | null>(null);
-  if (typeof q === 'string' && q) return q;
+const overlayDeal = ref<PipelineDeal | null>(null);
-  return board.value?.pipeline.id ?? '';
+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(
+const pipelineOptions = computed(() =>
-  () =>
+  pipelines.value.map((p) => ({
-    board.value?.stages
+    id: p.id,
-      .filter((s) => !s.isWon && !s.isLost)
+    name: p.isDefault ? `${p.name} (پیش‌فرض)` : p.name,
-      .reduce((n, s) => n + s.deals.length, 0) ?? 0,
+  })),
 );
 
-function formatAmount(amount: number | null, currency: string) {
+const selectedPipelineId = computed({
-  if (amount == null) return '—';
+  get: () => {
-  try {
+    const q = route.query.pipelineId;
-    return new Intl.NumberFormat('fa-IR').format(amount) + (currency === 'IRR' ? ' ریال' : ` ${currency}`);
+    if (typeof q === 'string' && q) return q;
-  } catch {
+    return boardPipelineId.value;
-    return `${amount}`;
+  },
+  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));
+  const current = stages.value.find((s) => s.deals.some((d) => d.id === dealId));
-  if (current?.id === stageId) return;
+  const currentIndex = current?.deals.findIndex((d) => d.id === dealId) ?? -1;
-
+  if (current?.id === stageId && (index == null || index === currentIndex)) {
-  try {
+    return;
-    await api.patch(`/deals/${dealId}/move`, { stageId });
-    await load();
-  } catch {
-    error.value = 'جابه‌جایی معامله ناموفق بود.';
   }
+
+  await applyUpdateDealStage(dealId, stageId, index);
 }
 
-function openDeal(id: string) {
+function onAddDeal(stageId: string) {
-  void router.push({ name: 'deal-detail', params: { id } });
+  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">
+  <section class="page" dir="rtl">
-    <header class="page-head">
+    <PipelineToolbar
-      <div>
+      pipeline-name="کاریز فروش"
-        <p class="eyebrow">فروش</p>
+      :pipeline-options="pipelineOptions"
-        <h1>{{ board?.pipeline.name || 'کاریز فروش' }}</h1>
+      :selected-pipeline-id="selectedPipelineId"
-        <p class="lead">
+      :view-mode="viewMode"
-          کارت‌ها را با کشیدن بین ستون‌ها جابه‌جا کنید.
+      :search="search"
-          <span v-if="board">{{ openCount }} معامله باز</span>
+      @update:view-mode="viewMode = $event"
-        </p>
+      @update:search="search = $event"
-      </div>
+      @update:selected-pipeline-id="selectedPipelineId = $event"
-      <div class="actions">
+      @filter="onFilter"
-        <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>
 
-    <div class="pipeline-bar">
+    <div v-if="canCreatePipeline" class="create-row">
-      <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>
       <button
-        v-if="canCreatePipeline"
+        class="btn-ghost-sm"
-        class="btn btn-ghost"
         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-if="viewMode === 'list'" class="list-placeholder">
-      <div
+      نمای لیست معاملات
-        v-for="stage in board.stages"
+    </div>
-        :key="stage.id"
+
-        class="column"
+    <PipelineBoard
-        :class="{
+      v-else-if="stages.length"
-          won: stage.isWon,
+      :stages="visibleStages"
-          lost: stage.isLost,
+      :dragging-id="draggingId"
-          drop: dropStageId === stage.id,
+      :drop-stage-id="dropStageId"
-        }"
+      @drag-start="onDragStart"
-        @dragover="onDragOver(stage.id, $event)"
+      @drag-end="onDragEnd"
-        @dragleave="dropStageId = null"
+      @drag-over="onDragOver"
-        @drop="onDrop(stage.id, $event)"
+      @drop="onDrop"
-      >
+      @add-deal="onAddDeal"
-        <div class="column-head">
+      @open-deal="onOpenDeal"
-          <h2>{{ stage.name }}</h2>
+      @menu-deal="onMenuDeal"
-          <span>{{ stage.deals.length }}</span>
+    />
-        </div>
+
-        <p class="column-sum">
+    <Teleport to="body">
-          {{ formatAmount(stage.totalAmount, 'IRR') }}
+      <DealCardOverlay
-        </p>
+        v-if="overlayDeal && draggingId"
-        <div class="cards">
+        :deal="overlayDeal"
-          <article
+        :accent="overlayAccent"
-            v-for="deal in stage.deals"
+        :x="overlayPos.x"
-            :key="deal.id"
+        :y="overlayPos.y"
-            class="card"
+      />
-            :class="{ dragging: draggingId === deal.id }"
+    </Teleport>
-            draggable="true"
+
-            @dragstart="onDragStart(deal, $event)"
+    <div v-if="menuOpenId" class="menu-pop" role="menu">
-            @dragend="onDragEnd"
+      <button type="button" role="menuitem" @click="onOpenDeal(menuOpenId)">
-            @dblclick="openDeal(deal.id)"
+        مشاهده معامله
-          >
+      </button>
-            <h3 @click="openDeal(deal.id)">{{ deal.title }}</h3>
+      <button type="button" role="menuitem" @click="menuOpenId = null">بستن</button>
-            <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>
   </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 {
+.create-row {
-  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 {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
 }
 
-.pipeline-bar {
+.btn-ghost-sm {
-  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;
   border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.65rem 0.85rem;
   background: #fff;
-  font: inherit;
+  color: var(--accent);
-  color: var(--ink);
+  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 {
+.list-placeholder {
-  display: grid;
+  margin-top: 0.5rem;
-  grid-auto-flow: column;
+  padding: 2.5rem 1rem;
-  grid-auto-columns: minmax(220px, 260px);
+  text-align: center;
-  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 {
   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 {
+.menu-pop button {
-  cursor: grabbing;
+  border: 0;
-}
+  background: transparent;
-
+  padding: 0.45rem 0.85rem;
-.card.dragging {
+  cursor: pointer;
-  opacity: 0.55;
+  font: inherit;
-}
+  color: var(--ink);
-
+  text-align: right;
-.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;
-  }
 }
 </style>