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

working leantime widget 24

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

84
components/flow.tsx
View File

@ -12,7 +12,8 @@ interface Task {
projectId: number;
status: string;
dueDate: string | null;
milestone?: string;
milestone: string | null;
details: string | null;
}
export function Flow() {
@ -43,7 +44,27 @@ export function Flow() {
const data = await response.json();
if (data.tasks && Array.isArray(data.tasks)) {
setTasks(data.tasks);
// Sort tasks by due date (overdue first)
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 {
setTasks([]);
}
@ -66,15 +87,6 @@ export function Flow() {
};
}, []);
// Group tasks by project
const tasksByProject = tasks.reduce((acc, task) => {
if (!acc[task.projectName]) {
acc[task.projectName] = [];
}
acc[task.projectName].push(task);
return acc;
}, {} as Record<string, Task[]>);
const getStatusClass = (status: string): string => {
switch (status.toLowerCase()) {
case 'new':
@ -83,6 +95,8 @@ export function Flow() {
return 'bg-yellow-100 text-yellow-800';
case 'completed':
return 'bg-green-100 text-green-800';
case 'overdue':
return 'bg-red-100 text-red-800';
default:
return 'bg-gray-100 text-gray-800';
}
@ -98,6 +112,15 @@ 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 (
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105">
<CardHeader className="flex flex-row items-center justify-between pb-2">
@ -119,30 +142,37 @@ export function Flow() {
</div>
) : error ? (
<div className="text-center text-sm text-red-500">{error}</div>
) : Object.keys(tasksByProject).length === 0 ? (
) : tasks.length === 0 ? (
<div className="text-center text-sm text-gray-500">No tasks found</div>
) : (
<div className="space-y-6">
<div className="space-y-4">
{Object.entries(tasksByProject).map(([projectName, projectTasks]) => (
<div key={projectName} className="space-y-2">
<h3 className="font-medium text-sm">{projectName}</h3>
<div className="space-y-2">
{projectTasks.map((task) => (
<div key={task.id} className="flex justify-between items-start text-sm border-b border-gray-100 pb-2">
<div className="flex-1">
<div className="font-medium">{task.headline}</div>
<div className="text-xs text-gray-500 mt-1">
<h3 className="font-medium text-sm text-gray-700">{projectName}</h3>
<div className="space-y-3">
{projectTasks.map((task) => {
const dueDate = task.dueDate ? new Date(task.dueDate) : null;
const isOverdue = dueDate && dueDate < new Date();
return (
<div key={task.id} className="flex justify-between items-start text-sm border-b border-gray-100 pb-2">
<div className="flex-1">
<div className="font-medium text-gray-900">{task.headline}</div>
{task.milestone && (
<span className="mr-2">{task.milestone}</span>
<div className="text-xs text-gray-500 mt-1">
{task.milestone}
</div>
)}
<span>{formatDate(task.dueDate)}</span>
<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 className={`ml-4 px-2 py-1 rounded text-xs ${getStatusClass(task.status)}`}>
{task.status.toUpperCase()}
</div>
</div>
))}
);
})}
</div>
</div>
))}