alma/NeahFront7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working leantime widget 25

Browse Source
This commit is contained in:
Alma 2025-04-12 14:07:30 +02:00
parent 16f20958ad
commit 96ba26a15d
1 changed files with 27 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
components/flow.tsx
View File

@ -9,11 +9,9 @@ interface Task {
id: string; id: string;
headline: string; headline: string;
projectName: string; projectName: string;
projectId: number;
status: string; status: string;
dueDate: string | null; dueDate: string | null;
milestone: string | null; milestone: string | null;
details: string | null;
} }
export function Flow() { export function Flow() {
@ -44,27 +42,7 @@ export function Flow() {
const data = await response.json(); const data = await response.json();
if (data.tasks && Array.isArray(data.tasks)) { if (data.tasks && Array.isArray(data.tasks)) {
// Sort tasks by due date (overdue first) setTasks(data.tasks);
const sortedTasks = data.tasks.sort((a: Task, b: Task) => {
// If a task has no due date, put it at the end
if (!a.dueDate) return 1;
if (!b.dueDate) return -1;
const dateA = new Date(a.dueDate);
const dateB = new Date(b.dueDate);
const now = new Date();
// If one task is overdue and the other isn't, put overdue first
const aOverdue = dateA < now;
const bOverdue = dateB < now;
if (aOverdue && !bOverdue) return -1;
if (!aOverdue && bOverdue) return 1;
// Otherwise sort by due date
return dateA.getTime() - dateB.getTime();
});
setTasks(sortedTasks);
} else { } else {
setTasks([]); setTasks([]);
} }
@ -93,10 +71,8 @@ export function Flow() {
return 'bg-blue-100 text-blue-800'; return 'bg-blue-100 text-blue-800';
case 'in_progress': case 'in_progress':
return 'bg-yellow-100 text-yellow-800'; return 'bg-yellow-100 text-yellow-800';
case 'completed': case 'done':
return 'bg-green-100 text-green-800'; return 'bg-green-100 text-green-800';
case 'overdue':
return 'bg-red-100 text-red-800';
default: default:
return 'bg-gray-100 text-gray-800'; return 'bg-gray-100 text-gray-800';
} }
@ -112,15 +88,6 @@ export function Flow() {
}); });
}; };
// Group tasks by project, maintaining the sorted order
const tasksByProject = tasks.reduce((acc, task) => {
if (!acc[task.projectName]) {
acc[task.projectName] = [];
}
acc[task.projectName].push(task);
return acc;
}, {} as Record<string, Task[]>);
return ( return (
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105"> <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105">
<CardHeader className="flex flex-row items-center justify-between pb-2"> <CardHeader className="flex flex-row items-center justify-between pb-2">
@ -145,34 +112,32 @@ export function Flow() {
) : tasks.length === 0 ? ( ) : tasks.length === 0 ? (
<div className="text-center text-sm text-gray-500">No tasks found</div> <div className="text-center text-sm text-gray-500">No tasks found</div>
) : ( ) : (
<div className="space-y-4"> <div className="space-y-6">
{Object.entries(tasksByProject).map(([projectName, projectTasks]) => ( {tasks.map((task) => (
<div key={projectName} className="space-y-2"> <div key={task.id} className="border rounded-lg p-4 bg-white shadow-sm">
<h3 className="font-medium text-sm text-gray-700">{projectName}</h3> <div className="flex items-start justify-between">
<div className="space-y-3"> <div className="space-y-1">
{projectTasks.map((task) => { <div className="text-sm font-medium text-gray-600">{task.projectName}</div>
const dueDate = task.dueDate ? new Date(task.dueDate) : null; <div className="text-base font-medium text-blue-600 hover:text-blue-800">
const isOverdue = dueDate && dueDate < new Date(); {task.headline}
</div>
return ( <div className="flex items-center space-x-3 text-sm text-gray-500">
<div key={task.id} className="flex justify-between items-start text-sm border-b border-gray-100 pb-2"> <div className="flex items-center space-x-1">
<div className="flex-1"> <span className="w-4 h-4">🗓️</span>
<div className="font-medium text-gray-900">{task.headline}</div> <span>{formatDate(task.dueDate)}</span>
{task.milestone && (
<div className="text-xs text-gray-500 mt-1">
{task.milestone}
</div>
)}
<div className="text-xs text-gray-500 mt-1">
{formatDate(task.dueDate)}
</div>
</div>
<div className={`ml-4 px-2 py-1 rounded text-xs ${getStatusClass(isOverdue ? 'overdue' : task.status)}`}>
{isOverdue ? 'OVERDUE' : task.status.toUpperCase()}
</div>
</div> </div>
); {task.milestone && (
})} <div className="flex items-center space-x-1">
<span className="px-2 py-1 rounded-full bg-gray-100">
{task.milestone}
</span>
</div>
)}
</div>
</div>
<div className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusClass(task.status)}`}>
{task.status.toUpperCase()}
</div>
</div> </div>
</div> </div>
))} ))}