From f82a184c97dda1a276a3abd3f01a270843bb8f62 Mon Sep 17 00:00:00 2001
From: Alma <alma@MacBook-Air-de-Alma.local>
Date: Fri, 11 Apr 2025 11:02:10 +0200
Subject: [PATCH] widget flow

---
 app/api/leantime/tasks/route.ts      |  62 ++++++++++
 app/page.tsx                         |   4 +
 components/flow.tsx                  | 165 +++++++++++++++++++++++++++
 components/parole.tsx                |  10 +-
 components/users/add-user-button.tsx |  11 +-
 5 files changed, 245 insertions(+), 7 deletions(-)
 create mode 100644 app/api/leantime/tasks/route.ts
 create mode 100644 components/flow.tsx

diff --git a/app/api/leantime/tasks/route.ts b/app/api/leantime/tasks/route.ts
new file mode 100644
index 00000000..4608ad2c
--- /dev/null
+++ b/app/api/leantime/tasks/route.ts
@@ -0,0 +1,62 @@
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  try {
+    // Get user's tasks from Leantime
+    const response = await fetch('https://agilite.slm-lab.net/api/jsonrpc', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-API-Key': process.env.LEANTIME_TOKEN || '',
+      },
+      body: JSON.stringify({
+        method: 'leantime.rpc.Tasks.Tasks.getAll',
+        jsonrpc: '2.0',
+        id: 1,
+        params: {
+          userId: session.user.id,
+          status: ['not_started', 'in_progress'],
+          limit: 10,
+          sort: 'dueDate',
+          order: 'ASC'
+        }
+      })
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch tasks from Leantime');
+    }
+
+    const data = await response.json();
+    
+    if (!data.result) {
+      return NextResponse.json({ tasks: [] });
+    }
+
+    // Transform the tasks to match our interface
+    const tasks = data.result.map((task: any) => ({
+      id: task.id,
+      headline: task.headline,
+      description: task.description,
+      status: task.status,
+      dueDate: task.dueDate,
+      priority: task.priority
+    }));
+
+    return NextResponse.json({ tasks });
+  } catch (error) {
+    console.error('Error fetching tasks:', error);
+    return NextResponse.json(
+      { error: "Failed to fetch tasks" },
+      { status: 500 }
+    );
+  }
+} 
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 62bc8e55..f6f9ed3f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,6 @@
 import { QuoteCard } from "@/components/quote-card";
 import { Parole } from "@/components/parole";
+import { Flow } from "@/components/flow";
 
 export const metadata = {
   title: "Enkun - Dashboard",
@@ -15,6 +16,9 @@ export default function DashboardPage() {
         <div className='col-span-6'>
           <Parole />
         </div>
+        <div className='col-span-3'>
+          <Flow />
+        </div>
       </div>
     </div>
   );
diff --git a/components/flow.tsx b/components/flow.tsx
new file mode 100644
index 00000000..573e6eef
--- /dev/null
+++ b/components/flow.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { RefreshCw, Calendar, CheckCircle2, Clock } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+
+interface Task {
+  id: string;
+  headline: string;
+  description: string;
+  status: string;
+  dueDate: string;
+  priority: number;
+}
+
+export function Flow() {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const router = useRouter();
+  const { data: session } = useSession();
+
+  const fetchTasks = async (isRefresh = false) => {
+    try {
+      if (isRefresh) {
+        setRefreshing(true);
+      }
+      const response = await fetch('/api/leantime/tasks', {
+        cache: 'no-store',
+        next: { revalidate: 0 },
+      });
+      
+      if (response.status === 401) {
+        setError('Session expired. Please sign in again.');
+        return;
+      }
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to fetch tasks');
+      }
+
+      const data = await response.json();
+      setTasks(data.tasks);
+      setError(null);
+    } catch (err) {
+      console.error('Error fetching tasks:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch tasks';
+      setError(errorMessage);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    if (session) {
+      fetchTasks();
+      // Set up polling every 5 minutes
+      const interval = setInterval(() => fetchTasks(), 300000);
+      return () => clearInterval(interval);
+    }
+  }, [session]);
+
+  const getPriorityColor = (priority: number) => {
+    switch (priority) {
+      case 1:
+        return 'text-red-500';
+      case 2:
+        return 'text-yellow-500';
+      case 3:
+        return 'text-green-500';
+      default:
+        return 'text-gray-500';
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'done':
+        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+      case 'in progress':
+        return <Clock className="h-4 w-4 text-yellow-500" />;
+      default:
+        return <Calendar className="h-4 w-4 text-blue-500" />;
+    }
+  };
+
+  return (
+    <Card 
+      className="transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer bg-white/50 backdrop-blur-sm h-full" 
+      onClick={() => router.push('/flow')}
+    >
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-lg font-semibold">My Tasks</CardTitle>
+        <Button 
+          variant="ghost" 
+          size="icon"
+          onClick={(e) => {
+            e.stopPropagation();
+            fetchTasks(true);
+          }}
+          disabled={refreshing}
+          className={refreshing ? 'animate-spin' : ''}
+        >
+          <RefreshCw className="h-4 w-4" />
+        </Button>
+      </CardHeader>
+      <CardContent className="p-4">
+        {loading && <p className="text-center text-muted-foreground">Loading tasks...</p>}
+        {error && (
+          <div className="text-center">
+            <p className="text-red-500">Error: {error}</p>
+            <Button 
+              variant="outline" 
+              onClick={(e) => {
+                e.stopPropagation();
+                fetchTasks(true);
+              }}
+              className="mt-2"
+            >
+              Try Again
+            </Button>
+          </div>
+        )}
+        {!loading && !error && (
+          <div className="space-y-2 max-h-[300px] overflow-y-auto">
+            {tasks.length === 0 ? (
+              <p className="text-center text-muted-foreground">No tasks found</p>
+            ) : (
+              tasks.map((task) => (
+                <div 
+                  key={task.id} 
+                  className="flex items-start space-x-2 hover:bg-gray-50 p-2 rounded-lg transition-colors"
+                >
+                  <div className="flex-shrink-0">
+                    {getStatusIcon(task.status)}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-baseline justify-between">
+                      <p className="text-sm font-medium truncate">{task.headline}</p>
+                      <span className={`text-xs ${getPriorityColor(task.priority)}`}>
+                        {task.priority === 1 ? 'High' : task.priority === 2 ? 'Medium' : 'Low'}
+                      </span>
+                    </div>
+                    <p className="text-xs text-gray-600 line-clamp-2">{task.description}</p>
+                    {task.dueDate && (
+                      <p className="text-xs text-gray-500 mt-1">
+                        Due: {new Date(task.dueDate).toLocaleDateString()}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+} 
\ No newline at end of file
diff --git a/components/parole.tsx b/components/parole.tsx
index 93a390b4..90c66afd 100644
--- a/components/parole.tsx
+++ b/components/parole.tsx
@@ -115,7 +115,7 @@ export function Parole() {
 
   return (
     <Card 
-      className="transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer bg-white/50 backdrop-blur-sm" 
+      className="transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer bg-white/50 backdrop-blur-sm h-full" 
       onClick={() => router.push('/parole')}
     >
       <CardHeader className="flex flex-row items-center justify-between pb-2">
@@ -133,7 +133,7 @@ export function Parole() {
           <RefreshCw className="h-4 w-4" />
         </Button>
       </CardHeader>
-      <CardContent>
+      <CardContent className="p-4">
         {loading && <p className="text-center text-muted-foreground">Loading messages...</p>}
         {error && (
           <div className="text-center">
@@ -151,13 +151,13 @@ export function Parole() {
           </div>
         )}
         {!loading && !error && (
-          <div className="space-y-3 max-h-[400px] overflow-y-auto">
+          <div className="space-y-2 max-h-[300px] overflow-y-auto">
             {messages.length === 0 ? (
               <p className="text-center text-muted-foreground">No messages found</p>
             ) : (
               messages.map((message) => (
-                <div key={message._id} className="flex items-start space-x-3 hover:bg-gray-50 p-2 rounded-lg transition-colors">
-                  <Avatar className="h-8 w-8">
+                <div key={message._id} className="flex items-start space-x-2 hover:bg-gray-50 p-2 rounded-lg transition-colors">
+                  <Avatar className="h-6 w-6">
                     <AvatarImage src={`https://ui-avatars.com/api/?name=${encodeURIComponent(message.u.name || message.u.username)}&background=random`} />
                     <AvatarFallback>{(message.u.name || message.u.username).substring(0, 2).toUpperCase()}</AvatarFallback>
                   </Avatar>
diff --git a/components/users/add-user-button.tsx b/components/users/add-user-button.tsx
index 131c5778..d45d8806 100644
--- a/components/users/add-user-button.tsx
+++ b/components/users/add-user-button.tsx
@@ -137,8 +137,15 @@ export function AddUserButton({ userRole, handleAddUser }: AddUserButtonProps) {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="Admin">Admin</SelectItem>
-                <SelectItem value="Teacher">Enseignant</SelectItem>
-                <SelectItem value="Students">Étudiant</SelectItem>
+                <SelectItem value="Apprentices">Apprentices</SelectItem>
+                <SelectItem value="Coding">Coding</SelectItem>
+                <SelectItem value="DataIntelligence">Data Intelligence</SelectItem>
+                <SelectItem value="Entrepreneurship">Entrepreneurship</SelectItem>
+                <SelectItem value="Expression">Expression</SelectItem>
+                <SelectItem value="Investigation">Investigation</SelectItem>
+                <SelectItem value="Lean">Lean</SelectItem>
+                <SelectItem value="Mediation">Mediation</SelectItem>
+                <SelectItem value="Mentors">Mentors</SelectItem>
               </SelectContent>
             </Select>
           </div>