working leantime widget 85

components/flow.tsx

@@ -9,24 +9,33 @@ import { Badge } from "@/components/ui/badge";
 interface Task {
   id: number;
   headline: string;
-  userId: number;
+  description: string;
+  dateToFinish: string;
+  date: string;
+  projectId: number;
+  projectName: string;
   status: number;
-  editorId: string;
-  assignedTo?: any;
-  projectName?: string;
-  dateToFinish?: string;
-  date?: string;
+  editorId?: string;
+  editorFirstname?: string;
+  editorLastname?: string;
+  authorFirstname: string;
+  authorLastname: string;
+  milestoneHeadline?: string;
 }
 
-interface ApiResponse {
-  jsonrpc: string;
-  result: Task[];
+interface ProjectSummary {
+  name: string;
+  tasks: {
+    status: number;
+    count: number;
+  }[];
 }
 
 export function Flow() {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
 
   const getStatusLabel = (status: number): string => {
     switch (status) {
@@ -72,28 +81,24 @@ export function Flow() {
       if (!response.ok) {
         throw new Error('Failed to fetch tasks');
       }
-      const data: ApiResponse = await response.json();
+      const data = await response.json();
       
-      // Extract tasks from the result property
-      const tasksList = data.result || [];
-      
-      if (!Array.isArray(tasksList)) {
-        console.warn('No tasks found in response', tasksList);
+      if (!Array.isArray(data)) {
+        console.warn('No tasks found in response', data as unknown);
         setTasks([]);
         return;
       }
 
-      // Sort tasks by date and limit to 4
-      const sortedTasks = tasksList
+      // Sort tasks by due date (oldest first)
+      const sortedTasks = data
         .sort((a: Task, b: Task) => {
-          const dateA = a.dateToFinish ? new Date(a.dateToFinish).getTime() : 
-                       a.date ? new Date(a.date).getTime() : Date.now();
-          const dateB = b.dateToFinish ? new Date(b.dateToFinish).getTime() : 
-                       b.date ? new Date(b.date).getTime() : Date.now();
+          const dateA = a.dateToFinish ? new Date(a.dateToFinish).getTime() : new Date(a.date).getTime();
+          const dateB = b.dateToFinish ? new Date(b.dateToFinish).getTime() : new Date(b.date).getTime();
           return dateA - dateB;
         })
-        .slice(0, 4); // Limit to 4 tasks
+        .slice(0, 6); // Limit to 6 tasks
 
+      console.log('Sorted and filtered tasks:', sortedTasks);
       setTasks(sortedTasks);
     } catch (error) {
       console.error('Error fetching tasks:', error);
@@ -110,7 +115,7 @@ export function Flow() {
   return (
     <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/80 backdrop-blur-sm">
       <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <CardTitle className="text-lg font-medium">Flow</CardTitle>
+        <CardTitle className="text-2xl font-bold">Flow</CardTitle>
         <Button 
           variant="ghost" 
           size="icon" 
@@ -120,7 +125,7 @@ export function Flow() {
           <RefreshCw className="h-4 w-4" />
         </Button>
       </CardHeader>
-      <CardContent>
+      <CardContent className="space-y-4">
         {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" />
@@ -130,30 +135,26 @@ export function Flow() {
         ) : tasks.length === 0 ? (
           <div className="text-sm text-muted-foreground text-center">No tasks found</div>
         ) : (
-          <div className="space-y-2 max-h-[400px] overflow-y-auto pr-2">
+          <div className="space-y-3">
             {tasks.map((task) => (
               <div 
                 key={task.id}
-                className="p-3 rounded-lg bg-white/90 shadow-sm hover:shadow-md transition-all duration-200"
+                className="p-4 rounded-2xl bg-white/90 shadow-sm hover:shadow-md transition-all duration-200"
               >
-                <div className="space-y-1">
+                <div className="space-y-2">
                   <a 
                     href={`https://agilite.slm-lab.net/tickets/showTicket/${task.id}`}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-sm text-blue-500 hover:text-blue-600 font-medium block truncate"
+                    className="text-blue-500 hover:text-blue-600 font-medium block text-lg"
                   >
                     {task.headline}
                   </a>
-                  <div className="flex items-center text-gray-500 text-xs">
-                    {task.projectName && (
-                      <>
-                        <Folder className="h-3 w-3 mr-1 opacity-70" />
-                        <span className="truncate">{task.projectName}</span>
-                      </>
-                    )}
+                  <div className="flex items-center text-gray-500">
+                    <Folder className="h-4 w-4 mr-2 opacity-70" />
+                    <span className="text-sm">{task.projectName}</span>
                     {task.dateToFinish && task.dateToFinish !== '0000-00-00 00:00:00' && (
-                      <span className={task.projectName ? "ml-2" : ""}>
+                      <span className="ml-4 text-sm">
                         Due: {new Date(task.dateToFinish).toLocaleDateString()}
                       </span>
                     )}