scrum-manager/src/Kanban.tsx

import { useState } from 'react';
import type { Task, User, Status } from './data';
import { PRIORITY_COLORS, STATUS_COLORS, STATUS_LABELS } from './data';
import { Avatar, PriorityBadge, StatusBadge, ProgressBar } from './Shared';

function TaskCard({ task, onClick, onDragStart }: { task: Task; onClick: () => void; onDragStart: (e: React.DragEvent, task: Task) => void }) {
    const p = PRIORITY_COLORS[task.priority];
    const due = new Date(task.dueDate + 'T00:00:00');
    const overdue = due < new Date() && task.status !== 'done';
    const commCount = task.comments.length;
    return (
        <div className="task-card" style={{ borderLeftColor: p.color, cursor: 'grab' }}
            draggable
            onDragStart={e => onDragStart(e, task)}
            onDragEnd={e => (e.currentTarget as HTMLElement).style.opacity = '1'}
            onClick={onClick}>
            <div className="task-card-row">
                <span className="task-card-title">{task.title}</span>
                <Avatar userId={task.assignee} size={24} />
            </div>
            <div className="task-card-badges">
                <PriorityBadge level={task.priority} />
                <StatusBadge status={task.status} />
                {task.tags.slice(0, 2).map(t => <span key={t} className="tag-pill" style={{ fontSize: 9 }}>{t}</span>)}
            </div>
            {task.subtasks.length > 0 && <ProgressBar subtasks={task.subtasks} />}
            <div className="task-card-meta">
                <span className={overdue ? 'task-card-overdue' : ''}>📅 {due.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
                {commCount > 0 && <span>💬 {commCount}</span>}
            </div>
        </div>
    );
}

function KanbanColumn({ status, statusLabel, tasks, color, onTaskClick, onAddTask, onDragStart, onDrop, isDragOver, onDragOver, onDragLeave }: {
    status: Status; statusLabel: string; tasks: Task[]; color: string;
    onTaskClick: (t: Task) => void; onAddTask: (s: Status) => void;
    onDragStart: (e: React.DragEvent, task: Task) => void;
    onDrop: (e: React.DragEvent, status: Status) => void;
    isDragOver: boolean;
    onDragOver: (e: React.DragEvent, status: Status) => void;
    onDragLeave: (e: React.DragEvent) => void;
}) {
    return (
        <div className={`kanban-column ${isDragOver ? 'kanban-column-drag-over' : ''}`}
            onDragOver={e => onDragOver(e, status)}
            onDragLeave={onDragLeave}
            onDrop={e => onDrop(e, status)}>
            <div className="kanban-col-header">
                <div className="kanban-col-dot" style={{ background: color }} />
                <span className="kanban-col-label">{statusLabel}</span>
                <span className="kanban-col-count">{tasks.length}</span>
                <button className="kanban-col-add" onClick={() => onAddTask(status)}>+</button>
            </div>
            <div className="kanban-col-body">
                {tasks.length === 0 ? (
                    <div className={`kanban-empty ${isDragOver ? 'kanban-empty-active' : ''}`}>
                        {isDragOver ? '⬇ Drop task here' : 'No tasks here · Click + to add one'}
                    </div>
                ) : (
                    tasks.map(t => <TaskCard key={t.id} task={t} onClick={() => onTaskClick(t)} onDragStart={onDragStart} />)
                )}
            </div>
        </div>
    );
}

interface KanbanProps {
    tasks: Task[]; currentUser: User; onTaskClick: (t: Task) => void;
    onAddTask: (s: Status) => void; filterUser: string | null; searchQuery: string;
    onMoveTask: (taskId: string, newStatus: Status) => void;
}

export function KanbanBoard({ tasks, currentUser, onTaskClick, onAddTask, filterUser, searchQuery, onMoveTask }: KanbanProps) {
    const [dragOverColumn, setDragOverColumn] = useState<Status | null>(null);

    let filtered = tasks;
    if (currentUser.role === 'employee') filtered = filtered.filter(t => t.assignee === currentUser.id);
    if (filterUser) filtered = filtered.filter(t => t.assignee === filterUser);
    if (searchQuery) filtered = filtered.filter(t => t.title.toLowerCase().includes(searchQuery.toLowerCase()));

    const handleDragStart = (e: React.DragEvent, task: Task) => {
        e.dataTransfer.setData('text/plain', task.id);
        e.dataTransfer.effectAllowed = 'move';
        (e.currentTarget as HTMLElement).style.opacity = '0.4';
    };

    const handleDragOver = (e: React.DragEvent, status: Status) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        setDragOverColumn(status);
    };

    const handleDragLeave = (e: React.DragEvent) => {
        // Only clear if leaving the column entirely (not entering a child)
        const related = e.relatedTarget as HTMLElement | null;
        if (!related || !(e.currentTarget as HTMLElement).contains(related)) {
            setDragOverColumn(null);
        }
    };

    const handleDrop = (e: React.DragEvent, newStatus: Status) => {
        e.preventDefault();
        const taskId = e.dataTransfer.getData('text/plain');
        const task = tasks.find(t => t.id === taskId);
        if (task && task.status !== newStatus) {
            onMoveTask(taskId, newStatus);
        }
        setDragOverColumn(null);
    };

    const statuses: Status[] = ['todo', 'inprogress', 'review', 'done'];
    return (
        <div className="kanban-board">
            {statuses.map(s => (
                <KanbanColumn key={s} status={s} statusLabel={STATUS_LABELS[s]} color={STATUS_COLORS[s]}
                    tasks={filtered.filter(t => t.status === s)} onTaskClick={onTaskClick} onAddTask={onAddTask}
                    onDragStart={handleDragStart}
                    onDrop={handleDrop}
                    isDragOver={dragOverColumn === s}
                    onDragOver={handleDragOver}
                    onDragLeave={handleDragLeave} />
            ))}
        </div>
    );
}