466 lines
18 KiB
JavaScript
466 lines
18 KiB
JavaScript
import React, { useState, useMemo } from "react";
|
||
import { base44 } from "@/api/base44Client";
|
||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||
import { Card, CardContent } from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||
import { DragDropContext, Draggable } from "@hello-pangea/dnd";
|
||
import { Link2, Plus, Users } from "lucide-react";
|
||
import TaskCard from "@/components/tasks/TaskCard";
|
||
import TaskColumn from "@/components/tasks/TaskColumn";
|
||
import TaskDetailModal from "@/components/tasks/TaskDetailModal";
|
||
import { useToast } from "@/components/ui/use-toast";
|
||
|
||
export default function TaskBoard() {
|
||
const { toast } = useToast();
|
||
const queryClient = useQueryClient();
|
||
const [createDialog, setCreateDialog] = useState(false);
|
||
const [selectedTask, setSelectedTask] = useState(null);
|
||
const [selectedStatus, setSelectedStatus] = useState("pending");
|
||
const [newTask, setNewTask] = useState({
|
||
task_name: "",
|
||
description: "",
|
||
priority: "normal",
|
||
due_date: "",
|
||
progress: 0,
|
||
assigned_members: []
|
||
});
|
||
const [selectedMembers, setSelectedMembers] = useState([]);
|
||
|
||
const { data: user } = useQuery({
|
||
queryKey: ['current-user-taskboard'],
|
||
queryFn: () => base44.auth.me(),
|
||
});
|
||
|
||
const { data: teams = [] } = useQuery({
|
||
queryKey: ['teams'],
|
||
queryFn: () => base44.entities.Team.list(),
|
||
initialData: [],
|
||
});
|
||
|
||
const { data: teamMembers = [] } = useQuery({
|
||
queryKey: ['team-members'],
|
||
queryFn: () => base44.entities.TeamMember.list(),
|
||
initialData: [],
|
||
});
|
||
|
||
const { data: tasks = [] } = useQuery({
|
||
queryKey: ['tasks'],
|
||
queryFn: () => base44.entities.Task.list(),
|
||
initialData: [],
|
||
});
|
||
|
||
const userTeam = teams.find(t => t.owner_id === user?.id) || teams[0];
|
||
const teamTasks = tasks.filter(t => t.team_id === userTeam?.id);
|
||
const currentTeamMembers = teamMembers.filter(m => m.team_id === userTeam?.id);
|
||
|
||
const leadMembers = currentTeamMembers.filter(m => m.role === 'admin' || m.role === 'manager');
|
||
const regularMembers = currentTeamMembers.filter(m => m.role === 'member');
|
||
|
||
// Get unique departments from team members
|
||
const departments = [...new Set(currentTeamMembers.map(m => m.department).filter(Boolean))];
|
||
|
||
const tasksByStatus = useMemo(() => ({
|
||
pending: teamTasks.filter(t => t.status === 'pending').sort((a, b) => (a.order_index || 0) - (b.order_index || 0)),
|
||
in_progress: teamTasks.filter(t => t.status === 'in_progress').sort((a, b) => (a.order_index || 0) - (b.order_index || 0)),
|
||
on_hold: teamTasks.filter(t => t.status === 'on_hold').sort((a, b) => (a.order_index || 0) - (b.order_index || 0)),
|
||
completed: teamTasks.filter(t => t.status === 'completed').sort((a, b) => (a.order_index || 0) - (b.order_index || 0)),
|
||
}), [teamTasks]);
|
||
|
||
const overallProgress = useMemo(() => {
|
||
if (teamTasks.length === 0) return 0;
|
||
const totalProgress = teamTasks.reduce((sum, t) => sum + (t.progress || 0), 0);
|
||
return Math.round(totalProgress / teamTasks.length);
|
||
}, [teamTasks]);
|
||
|
||
const createTaskMutation = useMutation({
|
||
mutationFn: (taskData) => base44.entities.Task.create(taskData),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||
setCreateDialog(false);
|
||
setNewTask({
|
||
task_name: "",
|
||
description: "",
|
||
priority: "normal",
|
||
due_date: "",
|
||
progress: 0,
|
||
assigned_members: []
|
||
});
|
||
setSelectedMembers([]);
|
||
toast({
|
||
title: "✅ Task Created",
|
||
description: "New task added to the board",
|
||
});
|
||
},
|
||
});
|
||
|
||
const updateTaskMutation = useMutation({
|
||
mutationFn: ({ id, data }) => base44.entities.Task.update(id, data),
|
||
onSuccess: () => {
|
||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||
},
|
||
});
|
||
|
||
const handleDragEnd = (result) => {
|
||
if (!result.destination) return;
|
||
|
||
const { source, destination, draggableId } = result;
|
||
|
||
if (source.droppableId === destination.droppableId && source.index === destination.index) {
|
||
return;
|
||
}
|
||
|
||
const task = teamTasks.find(t => t.id === draggableId);
|
||
if (!task) return;
|
||
|
||
const newStatus = destination.droppableId;
|
||
updateTaskMutation.mutate({
|
||
id: task.id,
|
||
data: {
|
||
...task,
|
||
status: newStatus,
|
||
order_index: destination.index
|
||
}
|
||
});
|
||
};
|
||
|
||
const handleCreateTask = () => {
|
||
if (!newTask.task_name.trim()) {
|
||
toast({
|
||
title: "Task name required",
|
||
variant: "destructive",
|
||
});
|
||
return;
|
||
}
|
||
|
||
createTaskMutation.mutate({
|
||
...newTask,
|
||
team_id: userTeam?.id,
|
||
status: selectedStatus,
|
||
order_index: tasksByStatus[selectedStatus]?.length || 0,
|
||
assigned_members: selectedMembers.map(m => ({
|
||
member_id: m.id,
|
||
member_name: m.member_name,
|
||
avatar_url: m.avatar_url
|
||
})),
|
||
assigned_department: selectedMembers.length > 0 && selectedMembers[0].department ? selectedMembers[0].department : null
|
||
});
|
||
};
|
||
|
||
return (
|
||
<div className="p-6 bg-slate-50 min-h-screen">
|
||
<div className="max-w-[1800px] mx-auto">
|
||
{/* Header */}
|
||
<div className="bg-white rounded-xl p-6 mb-6 shadow-sm border border-slate-200">
|
||
<div className="flex items-center justify-between mb-5">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-slate-900 mb-2">Task Board</h1>
|
||
<div className="flex items-center gap-6">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-sm font-semibold text-slate-600">Lead</span>
|
||
<div className="flex -space-x-2">
|
||
{leadMembers.slice(0, 3).map((member, idx) => (
|
||
<Avatar key={idx} className="w-8 h-8 border-2 border-white">
|
||
<img
|
||
src={member.avatar_url || `https://i.pravatar.cc/150?u=${encodeURIComponent(member.member_name)}`}
|
||
alt={member.member_name}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</Avatar>
|
||
))}
|
||
{leadMembers.length > 3 && (
|
||
<div className="w-8 h-8 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-xs font-semibold text-slate-600">
|
||
+{leadMembers.length - 3}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-sm font-semibold text-slate-600">Team</span>
|
||
<div className="flex -space-x-2">
|
||
{regularMembers.slice(0, 3).map((member, idx) => (
|
||
<Avatar key={idx} className="w-8 h-8 border-2 border-white">
|
||
<img
|
||
src={member.avatar_url || `https://i.pravatar.cc/150?u=${encodeURIComponent(member.member_name)}`}
|
||
alt={member.member_name}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</Avatar>
|
||
))}
|
||
{regularMembers.length > 3 && (
|
||
<div className="w-8 h-8 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-xs font-semibold text-slate-600">
|
||
+{regularMembers.length - 3}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<Button variant="outline" size="sm" className="border-slate-300">
|
||
<Link2 className="w-4 h-4 mr-2" />
|
||
Share
|
||
</Button>
|
||
<Button
|
||
onClick={() => {
|
||
setSelectedStatus("pending");
|
||
setCreateDialog(true);
|
||
}}
|
||
className="bg-[#0A39DF] hover:bg-blue-700"
|
||
>
|
||
<Plus className="w-4 h-4 mr-2" />
|
||
Create List
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Overall Progress */}
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex-1 h-3 bg-slate-100 rounded-full overflow-hidden">
|
||
<div
|
||
className="h-full bg-gradient-to-r from-[#0A39DF] to-blue-600 transition-all"
|
||
style={{ width: `${overallProgress}%` }}
|
||
/>
|
||
</div>
|
||
<span className="text-sm font-bold text-slate-900 ml-4">{overallProgress}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Kanban Board */}
|
||
<DragDropContext onDragEnd={handleDragEnd}>
|
||
<div className="flex gap-4 overflow-x-auto pb-4">
|
||
{['pending', 'in_progress', 'on_hold', 'completed'].map((status) => (
|
||
<TaskColumn
|
||
key={status}
|
||
status={status}
|
||
tasks={tasksByStatus[status]}
|
||
onAddTask={(status) => {
|
||
setSelectedStatus(status);
|
||
setCreateDialog(true);
|
||
}}
|
||
>
|
||
{tasksByStatus[status].map((task, index) => (
|
||
<Draggable key={task.id} draggableId={task.id} index={index}>
|
||
{(provided) => (
|
||
<TaskCard
|
||
task={task}
|
||
provided={provided}
|
||
onClick={() => setSelectedTask(task)}
|
||
/>
|
||
)}
|
||
</Draggable>
|
||
))}
|
||
</TaskColumn>
|
||
))}
|
||
</div>
|
||
</DragDropContext>
|
||
|
||
{teamTasks.length === 0 && (
|
||
<div className="text-center py-16 bg-white rounded-xl border-2 border-dashed border-slate-300">
|
||
<div className="w-16 h-16 mx-auto mb-4 bg-slate-100 rounded-xl flex items-center justify-center">
|
||
<Plus className="w-8 h-8 text-slate-400" />
|
||
</div>
|
||
<h3 className="font-bold text-xl text-slate-900 mb-2">No tasks yet</h3>
|
||
<p className="text-slate-600 mb-5">Create your first task to get started</p>
|
||
<Button onClick={() => setCreateDialog(true)} className="bg-[#0A39DF]">
|
||
<Plus className="w-4 h-4 mr-2" />
|
||
Create Task
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Create Task Dialog */}
|
||
<Dialog open={createDialog} onOpenChange={setCreateDialog}>
|
||
<DialogContent className="max-w-2xl">
|
||
<DialogHeader>
|
||
<DialogTitle>Create New Task</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div>
|
||
<Label>Task Name *</Label>
|
||
<Input
|
||
value={newTask.task_name}
|
||
onChange={(e) => setNewTask({ ...newTask, task_name: e.target.value })}
|
||
placeholder="e.g., Website Design"
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<Label>Description</Label>
|
||
<Textarea
|
||
value={newTask.description}
|
||
onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
|
||
placeholder="Task details..."
|
||
rows={3}
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<Label>Priority</Label>
|
||
<Select value={newTask.priority} onValueChange={(val) => setNewTask({ ...newTask, priority: val })}>
|
||
<SelectTrigger className="mt-1">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="low">Low</SelectItem>
|
||
<SelectItem value="normal">Normal</SelectItem>
|
||
<SelectItem value="high">High</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
<div>
|
||
<Label>Due Date</Label>
|
||
<Input
|
||
type="date"
|
||
value={newTask.due_date}
|
||
onChange={(e) => setNewTask({ ...newTask, due_date: e.target.value })}
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<Label>Initial Progress (%)</Label>
|
||
<Input
|
||
type="number"
|
||
min="0"
|
||
max="100"
|
||
value={newTask.progress}
|
||
onChange={(e) => setNewTask({ ...newTask, progress: parseInt(e.target.value) || 0 })}
|
||
className="mt-1"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<Label>Assign Team Members</Label>
|
||
{departments.length > 0 && (
|
||
<Select onValueChange={(dept) => {
|
||
const deptMembers = currentTeamMembers.filter(m => m.department === dept);
|
||
setSelectedMembers(deptMembers);
|
||
}}>
|
||
<SelectTrigger className="w-56">
|
||
<SelectValue placeholder="Assign entire department" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{departments.map((dept) => {
|
||
const count = currentTeamMembers.filter(m => m.department === dept).length;
|
||
return (
|
||
<SelectItem key={dept} value={dept}>
|
||
<div className="flex items-center gap-2">
|
||
<Users className="w-4 h-4" />
|
||
{dept} ({count} members)
|
||
</div>
|
||
</SelectItem>
|
||
);
|
||
})}
|
||
</SelectContent>
|
||
</Select>
|
||
)}
|
||
</div>
|
||
<div className="mt-2 space-y-2">
|
||
{currentTeamMembers.length === 0 ? (
|
||
<p className="text-sm text-slate-500">No team members available</p>
|
||
) : (
|
||
<div className="max-h-48 overflow-y-auto border border-slate-200 rounded-lg p-2 space-y-1">
|
||
{currentTeamMembers.map((member) => {
|
||
const isSelected = selectedMembers.some(m => m.id === member.id);
|
||
return (
|
||
<div
|
||
key={member.id}
|
||
onClick={() => {
|
||
if (isSelected) {
|
||
setSelectedMembers(selectedMembers.filter(m => m.id !== member.id));
|
||
} else {
|
||
setSelectedMembers([...selectedMembers, member]);
|
||
}
|
||
}}
|
||
className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-all ${
|
||
isSelected ? 'bg-blue-50 border-2 border-[#0A39DF]' : 'hover:bg-slate-50 border-2 border-transparent'
|
||
}`}
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
checked={isSelected}
|
||
onChange={() => {}}
|
||
className="w-4 h-4 rounded text-[#0A39DF] focus:ring-[#0A39DF]"
|
||
/>
|
||
<Avatar className="w-8 h-8">
|
||
<img
|
||
src={member.avatar_url || `https://i.pravatar.cc/150?u=${encodeURIComponent(member.member_name)}`}
|
||
alt={member.member_name}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</Avatar>
|
||
<div className="flex-1">
|
||
<p className="text-sm font-medium text-slate-900">{member.member_name}</p>
|
||
<p className="text-xs text-slate-500">
|
||
{member.department ? `${member.department} • ` : ''}{member.role || 'Member'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
{selectedMembers.length > 0 && (
|
||
<div className="flex flex-wrap gap-2 mt-2 p-2 bg-slate-50 rounded-lg">
|
||
{selectedMembers.map((member) => (
|
||
<Badge key={member.id} className="bg-[#0A39DF] text-white flex items-center gap-1">
|
||
{member.member_name}
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setSelectedMembers(selectedMembers.filter(m => m.id !== member.id));
|
||
}}
|
||
className="ml-1 hover:bg-white/20 rounded-full p-0.5"
|
||
>
|
||
×
|
||
</button>
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setCreateDialog(false)}>
|
||
Cancel
|
||
</Button>
|
||
<Button
|
||
onClick={handleCreateTask}
|
||
disabled={createTaskMutation.isPending}
|
||
className="bg-[#0A39DF]"
|
||
>
|
||
Create Task
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* Task Detail Modal with Comments */}
|
||
<TaskDetailModal
|
||
task={selectedTask}
|
||
open={!!selectedTask}
|
||
onClose={() => setSelectedTask(null)}
|
||
/>
|
||
</div>
|
||
);
|
||
} |