From b3474c21c05f04b1a48c8ab2f537e33f8d729ace Mon Sep 17 00:00:00 2001
From: remarkmacasieb04 <remarkmacasieb04@gmai.com>
Date: Wed, 15 Apr 2026 14:20:43 +0800
Subject: [PATCH 1/2] feat: implement drag-and-drop functionality in pipeline
 view

---
 resources/js/pages/clients/Board.vue | 104 ++++++++++++++++++++++++++-
 1 file changed, 102 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/clients/Board.vue b/resources/js/pages/clients/Board.vue
index 1f77902..8bb6367 100644
--- a/resources/js/pages/clients/Board.vue
+++ b/resources/js/pages/clients/Board.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Head, Link, router } from '@inertiajs/vue3';
+import { ref } from 'vue';
 import PageHeader from '@/components/crm/PageHeader.vue';
 import StatusBadge from '@/components/crm/StatusBadge.vue';
 import { Button } from '@/components/ui/button';
@@ -18,7 +19,7 @@ type BoardClient = {
     updated_at: string | null;
 };
 
-defineProps<{
+const props = defineProps<{
     columns: Array<{
         value: string;
         label: string;
@@ -42,6 +43,10 @@ defineOptions({
     },
 });
 
+const draggedClientId = ref<number | null>(null);
+const draggedFromColumnValue = ref<string | null>(null);
+const dragOverColumnValue = ref<string | null>(null);
+
 const moveClient = (client: BoardClient, status: string) => {
     router.patch(
         clientStatusRoutes.update.url(client.id),
@@ -49,6 +54,84 @@ const moveClient = (client: BoardClient, status: string) => {
         { preserveScroll: true },
     );
 };
+
+const handleDragStart = (e: DragEvent, clientId: number, columnValue: string) => {
+    draggedClientId.value = clientId;
+    draggedFromColumnValue.value = columnValue;
+    const target = e.currentTarget as HTMLElement;
+    if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', clientId.toString());
+    }
+    target.classList.add('opacity-50');
+};
+
+const handleDragEnd = (e: DragEvent) => {
+    const target = e.currentTarget as HTMLElement;
+    target.classList.remove('opacity-50');
+    draggedClientId.value = null;
+    draggedFromColumnValue.value = null;
+    dragOverColumnValue.value = null;
+};
+
+const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = 'move';
+    }
+};
+
+const handleDragEnter = (columnValue: string) => {
+    dragOverColumnValue.value = columnValue;
+};
+
+const handleDragLeave = (e: DragEvent) => {
+    const target = e.currentTarget as HTMLElement;
+    if (e.relatedTarget && !target.contains(e.relatedTarget as Node)) {
+        dragOverColumnValue.value = null;
+    }
+};
+
+const handleDrop = (e: DragEvent, targetColumnValue: string, client: BoardClient) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragOverColumnValue.value = null;
+
+    if (draggedClientId.value !== null && draggedClientId.value !== client.id) {
+        // If dropping on another client, use the target column
+        if (targetColumnValue !== draggedFromColumnValue.value) {
+            moveClient(
+                { ...client, id: draggedClientId.value } as BoardClient,
+                targetColumnValue,
+            );
+        }
+    } else if (draggedClientId.value === client.id && targetColumnValue !== draggedFromColumnValue.value) {
+        // If dropping the same client in a different column
+        moveClient(client, targetColumnValue);
+    }
+};
+
+const handleDropOnEmptyArea = (e: DragEvent, targetColumnValue: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragOverColumnValue.value = null;
+
+    if (
+        draggedClientId.value !== null &&
+        targetColumnValue !== draggedFromColumnValue.value
+    ) {
+        // Find the dragged client and move it
+        for (const column of props.columns) {
+            const client = column.clients.find(
+                (c) => c.id === draggedClientId.value,
+            );
+            if (client) {
+                moveClient(client, targetColumnValue);
+                break;
+            }
+        }
+    }
+};
 </script>
 
 <template>
@@ -72,6 +155,14 @@ const moveClient = (client: BoardClient, status: string) => {
                 v-for="column in columns"
                 :key="column.value"
                 class="crm-panel crm-panel-body flex min-h-[24rem] flex-col gap-4"
+                :class="{
+                    'ring-2 ring-emerald-400 dark:ring-emerald-500':
+                        dragOverColumnValue === column.value,
+                }"
+                @dragover="handleDragOver"
+                @dragenter="handleDragEnter(column.value)"
+                @dragleave="handleDragLeave"
+                @drop="handleDropOnEmptyArea($event, column.value)"
             >
                 <div class="flex items-center justify-between gap-3">
                     <div>
@@ -92,7 +183,16 @@ const moveClient = (client: BoardClient, status: string) => {
                     <div
                         v-for="client in column.clients"
                         :key="client.id"
-                        class="rounded-[1.4rem] border border-slate-200/80 bg-white/85 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950/65"
+                        draggable="true"
+                        class="rounded-[1.4rem] border border-slate-200/80 bg-white/85 p-4 shadow-sm transition-all dark:border-slate-800 dark:bg-slate-950/65"
+                        :class="{
+                            'cursor-move opacity-75 ring-2 ring-emerald-400 dark:ring-emerald-500':
+                                draggedClientId === client.id,
+                        }"
+                        @dragstart="handleDragStart($event, client.id, column.value)"
+                        @dragend="handleDragEnd"
+                        @dragover="handleDragOver"
+                        @drop="handleDrop($event, column.value, client)"
                     >
                         <div class="space-y-3">
                             <div>

From be4339df95666b99d75029b5a769f8c8a93614af Mon Sep 17 00:00:00 2001
From: remarkmacasieb04 <remarkmacasieb04@gmai.com>
Date: Wed, 15 Apr 2026 14:34:53 +0800
Subject: [PATCH 2/2] refactor: improve formatting of drag-and-drop event
 handlers in Board.vue

---
 resources/js/pages/clients/Board.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/resources/js/pages/clients/Board.vue b/resources/js/pages/clients/Board.vue
index 8bb6367..a170273 100644
--- a/resources/js/pages/clients/Board.vue
+++ b/resources/js/pages/clients/Board.vue
@@ -55,7 +55,11 @@ const moveClient = (client: BoardClient, status: string) => {
     );
 };
 
-const handleDragStart = (e: DragEvent, clientId: number, columnValue: string) => {
+const handleDragStart = (
+    e: DragEvent,
+    clientId: number,
+    columnValue: string,
+) => {
     draggedClientId.value = clientId;
     draggedFromColumnValue.value = columnValue;
     const target = e.currentTarget as HTMLElement;
@@ -92,7 +96,11 @@ const handleDragLeave = (e: DragEvent) => {
     }
 };
 
-const handleDrop = (e: DragEvent, targetColumnValue: string, client: BoardClient) => {
+const handleDrop = (
+    e: DragEvent,
+    targetColumnValue: string,
+    client: BoardClient,
+) => {
     e.preventDefault();
     e.stopPropagation();
     dragOverColumnValue.value = null;
@@ -105,7 +113,10 @@ const handleDrop = (e: DragEvent, targetColumnValue: string, client: BoardClient
                 targetColumnValue,
             );
         }
-    } else if (draggedClientId.value === client.id && targetColumnValue !== draggedFromColumnValue.value) {
+    } else if (
+        draggedClientId.value === client.id &&
+        targetColumnValue !== draggedFromColumnValue.value
+    ) {
         // If dropping the same client in a different column
         moveClient(client, targetColumnValue);
     }
@@ -189,7 +200,9 @@ const handleDropOnEmptyArea = (e: DragEvent, targetColumnValue: string) => {
                             'cursor-move opacity-75 ring-2 ring-emerald-400 dark:ring-emerald-500':
                                 draggedClientId === client.id,
                         }"
-                        @dragstart="handleDragStart($event, client.id, column.value)"
+                        @dragstart="
+                            handleDragStart($event, client.id, column.value)
+                        "
                         @dragend="handleDragEnd"
                         @dragover="handleDragOver"
                         @drop="handleDrop($event, column.value, client)"