238 lines
8.6 KiB
TypeScript
238 lines
8.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { RefreshCw, Calendar, MoreVertical } from "lucide-react";
|
|
|
|
interface Task {
|
|
id: string;
|
|
headline: string;
|
|
projectName: string;
|
|
projectId: number;
|
|
status: number;
|
|
dueDate: string | null;
|
|
milestone: string | null;
|
|
details: string | null;
|
|
}
|
|
|
|
interface ProjectTasks {
|
|
projectName: string;
|
|
tasks: Task[];
|
|
}
|
|
|
|
export function Flow() {
|
|
const [projectTasks, setProjectTasks] = useState<ProjectTasks[]>([]);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [retryTimeout, setRetryTimeout] = useState<NodeJS.Timeout | null>(null);
|
|
|
|
const fetchTasks = async (isRefresh = false) => {
|
|
try {
|
|
if (isRefresh) {
|
|
setRefreshing(true);
|
|
}
|
|
const response = await fetch('/api/leantime/tasks');
|
|
|
|
if (response.status === 429) {
|
|
const retryAfter = parseInt(response.headers.get('retry-after') || '60');
|
|
const timeout = setTimeout(() => fetchTasks(), retryAfter * 1000);
|
|
setRetryTimeout(timeout);
|
|
setError(`Rate limit exceeded. Retrying in ${retryAfter} seconds...`);
|
|
return;
|
|
}
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch tasks');
|
|
}
|
|
|
|
const data = await response.json();
|
|
if (data.tasks && Array.isArray(data.tasks)) {
|
|
// Group tasks by project
|
|
const groupedTasks = data.tasks.reduce((acc: { [key: string]: Task[] }, task: Task) => {
|
|
if (!acc[task.projectName]) {
|
|
acc[task.projectName] = [];
|
|
}
|
|
acc[task.projectName].push(task);
|
|
return acc;
|
|
}, {});
|
|
|
|
// Convert to array and sort tasks by due date within each project
|
|
const sortedProjectTasks = Object.entries(groupedTasks as { [key: string]: Task[] }).map(([projectName, tasks]) => ({
|
|
projectName,
|
|
tasks: tasks.sort((a: Task, b: Task) => {
|
|
if (!a.dueDate) return 1;
|
|
if (!b.dueDate) return -1;
|
|
return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
|
|
}).slice(0, 6) // Limit to 6 tasks per project
|
|
}));
|
|
|
|
// Sort projects by earliest due date
|
|
sortedProjectTasks.sort((a, b) => {
|
|
const aEarliest = a.tasks[0]?.dueDate ? new Date(a.tasks[0].dueDate).getTime() : Infinity;
|
|
const bEarliest = b.tasks[0]?.dueDate ? new Date(b.tasks[0].dueDate).getTime() : Infinity;
|
|
return aEarliest - bEarliest;
|
|
});
|
|
|
|
setProjectTasks(sortedProjectTasks);
|
|
} else {
|
|
setProjectTasks([]);
|
|
}
|
|
setError(null);
|
|
} catch (err) {
|
|
console.error('Error fetching tasks:', err);
|
|
setError('Failed to fetch tasks');
|
|
} finally {
|
|
setLoading(false);
|
|
setRefreshing(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchTasks();
|
|
return () => {
|
|
if (retryTimeout) {
|
|
clearTimeout(retryTimeout);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
const formatDate = (dateString: string | null) => {
|
|
if (!dateString) return '';
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString('en-US', {
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
|
|
const getStatusInfo = (status: number): { label: string; className: string } => {
|
|
switch (status) {
|
|
case 1:
|
|
return { label: 'New', className: 'bg-blue-600 text-white' };
|
|
case 2:
|
|
return { label: 'In Progress', className: 'bg-orange-400 text-white' };
|
|
case 3:
|
|
return { label: 'Done', className: 'bg-green-600 text-white' };
|
|
case 4:
|
|
return { label: 'Blocked', className: 'bg-red-600 text-white' };
|
|
case 5:
|
|
return { label: 'In Review', className: 'bg-purple-600 text-white' };
|
|
case 6:
|
|
return { label: 'To Be Validated', className: 'bg-yellow-600 text-white' };
|
|
default:
|
|
return { label: 'No Status', className: 'bg-gray-400 text-white' };
|
|
}
|
|
};
|
|
|
|
const getMilestoneInfo = (milestone: string | null): { label: string; className: string } => {
|
|
if (!milestone) return { label: 'No Milestone', className: 'bg-gray-200 text-gray-700' };
|
|
|
|
// Map milestone/type to display names
|
|
const milestoneMap: { [key: string]: string } = {
|
|
'Marketing': 'Marketing',
|
|
'Publication': 'Publication',
|
|
'Development': 'Development',
|
|
'Design': 'Design',
|
|
'Research': 'Research'
|
|
};
|
|
|
|
return {
|
|
label: milestoneMap[milestone] || milestone,
|
|
className: 'bg-gray-200 text-gray-700'
|
|
};
|
|
};
|
|
|
|
const isOverdue = (dueDate: string | null): boolean => {
|
|
if (!dueDate) return false;
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
const taskDate = new Date(dueDate);
|
|
taskDate.setHours(0, 0, 0, 0);
|
|
return taskDate < today;
|
|
};
|
|
|
|
return (
|
|
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-lg font-medium">My ToDos</CardTitle>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" size="sm">
|
|
Group By: Due Date
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
Filters
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => fetchTasks(true)}
|
|
disabled={refreshing || !!retryTimeout}
|
|
className={refreshing ? 'animate-spin' : ''}
|
|
>
|
|
<RefreshCw className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-4">
|
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
|
</div>
|
|
) : error ? (
|
|
<div className="text-center text-sm text-red-500">{error}</div>
|
|
) : projectTasks.length === 0 ? (
|
|
<div className="text-center text-sm text-gray-500">No tasks found</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-2 text-red-500 font-medium">
|
|
<span>🔥 Overdue</span>
|
|
<span className="text-sm">({projectTasks.reduce((count, project) =>
|
|
count + project.tasks.filter(task => isOverdue(task.dueDate)).length, 0
|
|
)})</span>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{projectTasks.map((project) => (
|
|
project.tasks.map((task) => {
|
|
const statusInfo = getStatusInfo(task.status);
|
|
const milestoneInfo = getMilestoneInfo(task.milestone);
|
|
if (!isOverdue(task.dueDate)) return null;
|
|
|
|
return (
|
|
<div key={task.id} className="p-4 rounded-lg bg-white shadow-sm hover:bg-gray-50 transition-colors border-l-4 border-red-500">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="font-medium text-gray-900 mb-1">{project.projectName}</div>
|
|
<div className="text-sm text-blue-600">{task.headline}</div>
|
|
<div className="flex items-center gap-2 mt-2">
|
|
<span className="flex items-center gap-1 text-gray-500">
|
|
<Calendar className="h-4 w-4" />
|
|
{formatDate(task.dueDate)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-2">
|
|
<span className={`px-3 py-1 rounded-full text-xs font-medium ${milestoneInfo.className}`}>
|
|
{milestoneInfo.label}
|
|
</span>
|
|
<span className={`px-3 py-1 rounded-full text-xs font-medium ${statusInfo.className}`}>
|
|
{statusInfo.label}
|
|
</span>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
|
<MoreVertical className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |