218 lines
8.8 KiB
TypeScript
218 lines
8.8 KiB
TypeScript
/**
|
|
* @file dashboard/KanbanCard.tsx
|
|
* @description Client component rendering a single kanban card with native drag-and-drop source handlers, dynamic priority styling, and mobile status dropdown.
|
|
*/
|
|
|
|
"use client";
|
|
|
|
import {
|
|
AlertCircle,
|
|
Crown,
|
|
MoreHorizontal,
|
|
CornerDownRight,
|
|
CalendarDays,
|
|
} from "lucide-react";
|
|
import { KANBAN_COLUMNS, KanbanCardProps, TaskStatus } from "@/types/tasks";
|
|
import { useState, useEffect, useRef } from "react";
|
|
|
|
/**
|
|
* Renders an interactive kanban card featuring title, description, priority levels,
|
|
* deadline alerts, team avatars, and a mobile-friendly status-shifting dropdown menu.
|
|
*
|
|
* @param {KanbanCardProps} props - The component props containing the task object and status change handler.
|
|
* @returns {JSX.Element} The rendered kanban card component.
|
|
*/
|
|
export default function KanbanCard({ task, onStatusChange }: KanbanCardProps) {
|
|
const [showMobileActions, setShowMobileActions] = useState(false);
|
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (
|
|
dropdownRef.current &&
|
|
!dropdownRef.current.contains(event.target as Node)
|
|
) {
|
|
setShowMobileActions(false);
|
|
}
|
|
};
|
|
|
|
if (showMobileActions) {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, [showMobileActions]);
|
|
|
|
const isOverdue =
|
|
task.dueDate &&
|
|
new Date(task.dueDate) < new Date() &&
|
|
task.status !== "done";
|
|
|
|
const filteredAssignees = (task.assignees || []).filter(
|
|
(a) => a !== task.creator,
|
|
);
|
|
|
|
/**
|
|
* Initiates the drag action on a task card, storing its ID and current status in the data transfer payload.
|
|
*
|
|
* @param {React.DragEvent<HTMLDivElement>} e - The drag event object.
|
|
*/
|
|
const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
|
|
e.dataTransfer.setData("text/plain", task.id);
|
|
e.dataTransfer.setData("sourceStatus", task.status);
|
|
e.dataTransfer.effectAllowed = "move";
|
|
};
|
|
|
|
/**
|
|
* Handles shifting the task to a new status category.
|
|
*
|
|
* @param {React.MouseEvent} e - The mouse event triggered by clicking a column destination.
|
|
* @param {TaskStatus} newStatus - The target task status to transition to.
|
|
*/
|
|
const handleMove = (e: React.MouseEvent, newStatus: TaskStatus) => {
|
|
e.stopPropagation();
|
|
if (onStatusChange) {
|
|
onStatusChange(task.id, newStatus);
|
|
}
|
|
setShowMobileActions(false);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
draggable
|
|
onDragStart={handleDragStart}
|
|
className="group relative bg-card/40 border border-border/80 hover:border-primary/60 p-4 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 space-y-3 cursor-grab active:cursor-grabbing hover:-translate-y-0.5 flex flex-col h-full"
|
|
>
|
|
{/* --- Card Header (Title & Priority) --- */}
|
|
<div className="flex items-start justify-between gap-2">
|
|
<h3 className="font-semibold leading-snug group-hover/card:text-primary transition-colors line-clamp-2">
|
|
{task.title}
|
|
</h3>
|
|
|
|
{task.priority && (
|
|
<span
|
|
className={`gap-1.5 px-2.5 py-1 rounded-lg text-xs font-bold border-2 shrink-0 ${
|
|
task.priority === "high"
|
|
? "bg-rose-500/10 text-rose-500 border-rose-500/20"
|
|
: task.priority === "medium"
|
|
? "bg-amber-500/10 text-amber-500 border-amber-500/20"
|
|
: "bg-zinc-500/10 text-zinc-400 border-zinc-500/20"
|
|
}`}
|
|
>
|
|
{task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Card Description */}
|
|
<p className="text-sm leading-relaxed text-foreground-muted line-clamp-3">
|
|
{task.description}
|
|
</p>
|
|
|
|
{/* --- Card Footer --- */}
|
|
<div className="flex items-center justify-between pt-3 mt-auto text-xs border-t border-border">
|
|
{/* Date Badge */}
|
|
{task.dueDate && (
|
|
<div
|
|
className={`group/date relative inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold border border-border transition-all duration-200 ease-out cursor-default ${
|
|
isOverdue
|
|
? "bg-destructive/10 text-destructive border-destructive/40 animate-pulse"
|
|
: "bg-background/50 text-foreground-muted border-border/40"
|
|
}`}
|
|
>
|
|
{isOverdue ? <AlertCircle size={13} /> : <CalendarDays size={13} />}
|
|
<span>
|
|
{new Date(task.dueDate).toLocaleDateString("de-DE", {
|
|
day: "2-digit",
|
|
month: "short",
|
|
})}
|
|
</span>
|
|
<span className="grid grid-cols-[0fr] group-hover/date:grid-cols-[1fr] transition-all duration-200 ease-out">
|
|
<span className="overflow-hidden whitespace-nowrap opacity-0 group-hover/date:opacity-100 transition-opacity duration-200">
|
|
{new Date(task.dueDate).toLocaleTimeString("de-DE", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Avatars & Mobile Switcher */}
|
|
<div className="flex items-center gap-2">
|
|
{(task.creator || filteredAssignees.length > 0) && (
|
|
<div className="flex items-center shrink-0 -space-x-2.5 group/avatars hover:space-x-0.5 transition-all duration-300">
|
|
{filteredAssignees.map((assignee, index) => (
|
|
<div
|
|
key={index}
|
|
className="w-7 h-7 rounded-full bg-primary/25 border-2 border-card flex items-center justify-center text-xs font-bold text-primary shadow-md group-hover/avatars:scale-110 transition-transform duration-200 ring-2 ring-border/50 group-hover/avatars:ring-primary/20 cursor-default"
|
|
title={`Assignee: ${assignee}`}
|
|
>
|
|
{assignee.substring(0, 2).toUpperCase()}
|
|
</div>
|
|
))}
|
|
{task.creator && (
|
|
<div
|
|
className="relative w-7 h-7 rounded-full bg-amber-500 text-white border-2 border-card flex items-center justify-center text-xs font-bold shadow-lg group-hover/avatars:scale-110 transition-transform duration-200 ring-2 ring-border/50 group-hover/avatars:ring-amber-500/20 cursor-default"
|
|
title={`Creator: ${task.creator}`}
|
|
>
|
|
{task.creator.substring(0, 2).toUpperCase()}
|
|
<span className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-amber-600 rounded-full border-2 border-card flex items-center justify-center">
|
|
<Crown size={8} className="text-white" />
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Mobile Switcher */}
|
|
<div className="relative sm:hidden" ref={dropdownRef}>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setShowMobileActions(!showMobileActions);
|
|
}}
|
|
className="p-1.5 rounded-lg border border-border bg-background/50 text-foreground-muted transition-all cursor-pointer hover:text-foreground hover:border-primary-hover flex items-center justify-center"
|
|
title="Move Task"
|
|
>
|
|
<MoreHorizontal size={14} />
|
|
</button>
|
|
|
|
<div
|
|
className={`absolute right-0 bottom-8 z-50 w-50 bg-card border border-border rounded-xl shadow-2xl p-1.5 space-y-1 text-xs origin-bottom-right transition-all duration-200 ease-out ${
|
|
showMobileActions
|
|
? "opacity-100 scale-100 pointer-events-auto"
|
|
: "opacity-0 scale-10 pointer-events-none"
|
|
}`}
|
|
>
|
|
{KANBAN_COLUMNS.map((col) => {
|
|
if (col.id === task.status) return null;
|
|
return (
|
|
<button
|
|
key={col.id}
|
|
onClick={(e) => handleMove(e, col.id)}
|
|
className="w-full text-left px-3 py-2 rounded-lg hover:bg-border flex items-center justify-between hover:text-primary group/btn transition-colors cursor-pointer"
|
|
>
|
|
<span className="flex items-center gap-2 font-medium">
|
|
<span
|
|
className={`w-2.5 h-2.5 rounded-full ${col.color}`}
|
|
/>
|
|
{col.title}
|
|
</span>
|
|
<CornerDownRight
|
|
size={12}
|
|
className="text-foreground-muted group-hover/btn:text-primary transition-all"
|
|
/>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|