working leantime widget 45
This commit is contained in:
Alma
parent
849480b3cf
commit
8587060112
@ -85,10 +85,19 @@ export async function GET(request: NextRequest) {
|
||||
projectId: task.projectId,
|
||||
status: task.status,
|
||||
dueDate: task.dateToFinish || null,
|
||||
milestone: task.milestoneName || null,
|
||||
milestone: task.type || null,
|
||||
details: task.description || null,
|
||||
editTo: task.editTo || null,
|
||||
dependingTicketId: task.dependingTicketId || null
|
||||
}));
|
||||
|
||||
// Sort tasks by due date
|
||||
tasks.sort((a: any, b: any) => {
|
||||
if (!a.dueDate) return 1;
|
||||
if (!b.dueDate) return -1;
|
||||
return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
|
||||
});
|
||||
|
||||
return NextResponse.json({ tasks });
|
||||
} catch (error) {
|
||||
console.error('Error in tasks route:', error);
|
||||
|
||||
@ -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 } from "lucide-react";
|
||||
import { RefreshCw, Calendar, MoreVertical } from "lucide-react";
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
@ -99,11 +99,11 @@ export function Flow() {
|
||||
}, []);
|
||||
|
||||
const formatDate = (dateString: string | null) => {
|
||||
if (!dateString) return 'No due date';
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
@ -111,32 +111,70 @@ export function Flow() {
|
||||
const getStatusInfo = (status: number): { label: string; className: string } => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return { label: 'NEW', className: 'bg-blue-100 text-blue-800' };
|
||||
return { label: 'New', className: 'bg-blue-600 text-white' };
|
||||
case 2:
|
||||
return { label: 'IN PROGRESS', className: 'bg-yellow-100 text-yellow-800' };
|
||||
return { label: 'In Progress', className: 'bg-orange-400 text-white' };
|
||||
case 3:
|
||||
return { label: 'DONE', className: 'bg-green-100 text-green-800' };
|
||||
return { label: 'Done', className: 'bg-green-600 text-white' };
|
||||
case 4:
|
||||
return { label: 'BLOCKED', className: 'bg-red-100 text-red-800' };
|
||||
case 0:
|
||||
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: 'UNKNOWN', className: 'bg-gray-100 text-gray-800' };
|
||||
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">Tasks</CardTitle>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => fetchTasks(true)}
|
||||
disabled={refreshing || !!retryTimeout}
|
||||
className={refreshing ? 'animate-spin' : ''}
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
<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 ? (
|
||||
@ -148,39 +186,50 @@ export function Flow() {
|
||||
) : projectTasks.length === 0 ? (
|
||||
<div className="text-center text-sm text-gray-500">No tasks found</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{projectTasks.map((project) => (
|
||||
<div key={project.projectName} className="space-y-2">
|
||||
<h3 className="font-medium text-gray-900">{project.projectName}</h3>
|
||||
<div className="space-y-1">
|
||||
{project.tasks.map((task) => {
|
||||
const statusInfo = getStatusInfo(task.status);
|
||||
return (
|
||||
<div key={task.id} className="flex items-center justify-between p-2 rounded-lg bg-white shadow-sm hover:bg-gray-50 transition-colors">
|
||||
<div className="flex-1 min-w-0 mr-4">
|
||||
<span className="text-sm font-medium text-gray-700 block truncate" title={task.headline}>
|
||||
{task.headline}
|
||||
</span>
|
||||
{task.milestone && (
|
||||
<span className="text-xs text-gray-500 block truncate" title={task.milestone}>
|
||||
{task.milestone}
|
||||
<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-center space-x-2 flex-shrink-0">
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${statusInfo.className}`}>
|
||||
<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>
|
||||
<span className="text-xs text-gray-500 whitespace-nowrap">
|
||||
{formatDate(task.dueDate)}
|
||||
</span>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user