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>
2026-09-05 00:18:39 +03:30
parent 4b47b753c3
commit aa3fe49ce6
11 changed files with 1519 additions and 365 deletions
@@ -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>