working leantime widget 46
This commit is contained in:
Alma
parent
8587060112
commit
05d33daaed
@ -3,7 +3,7 @@
|
||||
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";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
@ -11,74 +11,72 @@ interface Task {
|
||||
projectName: string;
|
||||
projectId: number;
|
||||
status: number;
|
||||
dueDate: string | null;
|
||||
milestone: string | null;
|
||||
details: string | null;
|
||||
type: string;
|
||||
dateToFinish: string | null;
|
||||
}
|
||||
|
||||
interface ProjectTasks {
|
||||
projectName: string;
|
||||
tasks: Task[];
|
||||
interface ProjectSummary {
|
||||
name: string;
|
||||
tasks: {
|
||||
status: number;
|
||||
count: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
export function Flow() {
|
||||
const [projectTasks, setProjectTasks] = useState<ProjectTasks[]>([]);
|
||||
const [projects, setProjects] = useState<ProjectSummary[]>([]);
|
||||
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 getStatusLabel = (status: number): string => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return 'NEW';
|
||||
case 2:
|
||||
return 'INPROGRESS';
|
||||
case 3:
|
||||
return 'DONE';
|
||||
default:
|
||||
return 'UNKNOWN';
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTasks = async (isRefresh = false) => {
|
||||
try {
|
||||
if (isRefresh) {
|
||||
setRefreshing(true);
|
||||
}
|
||||
const response = await fetch('/api/leantime/tasks');
|
||||
if (isRefresh) setRefreshing(true);
|
||||
|
||||
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...`);
|
||||
const response = await fetch('/api/leantime/tasks');
|
||||
if (!response.ok) throw new Error('Failed to fetch tasks');
|
||||
|
||||
const data = await response.json();
|
||||
if (!data.tasks || !Array.isArray(data.tasks)) {
|
||||
setProjects([]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch tasks');
|
||||
}
|
||||
// Group tasks by project and count statuses
|
||||
const projectMap = new Map<string, Map<number, number>>();
|
||||
|
||||
data.tasks.forEach((task: Task) => {
|
||||
if (!projectMap.has(task.projectName)) {
|
||||
projectMap.set(task.projectName, new Map());
|
||||
}
|
||||
const statusMap = projectMap.get(task.projectName)!;
|
||||
statusMap.set(task.status, (statusMap.get(task.status) || 0) + 1);
|
||||
});
|
||||
|
||||
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
|
||||
// Convert to array format
|
||||
const projectSummaries: ProjectSummary[] = Array.from(projectMap.entries())
|
||||
.map(([name, statusMap]) => ({
|
||||
name,
|
||||
tasks: Array.from(statusMap.entries()).map(([status, count]) => ({
|
||||
status,
|
||||
count
|
||||
}))
|
||||
}));
|
||||
|
||||
// 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([]);
|
||||
}
|
||||
setProjects(projectSummaries);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error('Error fetching tasks:', err);
|
||||
@ -91,90 +89,21 @@ export function Flow() {
|
||||
|
||||
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>
|
||||
<CardTitle className="text-lg font-medium">Flow</CardTitle>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => fetchTasks(true)}
|
||||
disabled={refreshing}
|
||||
className={refreshing ? 'animate-spin' : ''}
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
@ -183,53 +112,29 @@ export function Flow() {
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center text-sm text-red-500">{error}</div>
|
||||
) : projectTasks.length === 0 ? (
|
||||
) : projects.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 className="space-y-6">
|
||||
{projects.map((project) => (
|
||||
<div key={project.name} className="space-y-2">
|
||||
<h3 className="text-xl font-medium">{project.name}</h3>
|
||||
<div className="space-y-2">
|
||||
{project.tasks.map(({ status, count }) => (
|
||||
<div key={status} className="flex items-center justify-between p-2 rounded-lg bg-white shadow-sm">
|
||||
<span className="text-lg font-medium">{count}</span>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${
|
||||
status === 3 ? 'bg-green-100 text-green-800' :
|
||||
status === 2 ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{getStatusLabel(status)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user