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/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>