working leantime widget 5

app/api/leantime/status-labels/route.ts

@@ -84,7 +84,20 @@ export async function GET() {
       return NextResponse.json({ statusLabels: [] });
     }
 
-    return NextResponse.json({ statusLabels: data.result });
+    // Transform the nested status labels into a flat array
+    const transformedLabels = Object.entries(data.result).flatMap(([projectId, labels]) => {
+      return Object.entries(labels).map(([id, label]: [string, any]) => ({
+        id,
+        name: label.name,
+        projectId,
+        projectName: projectId, // You might want to fetch project names separately
+        statusType: label.statusType,
+        class: label.class,
+        sortKey: label.sortKey
+      }));
+    });
+
+    return NextResponse.json({ statusLabels: transformedLabels });
   } catch (error) {
     console.error('Detailed error in status labels fetch:', error);
     return NextResponse.json(

components/flow.tsx

@@ -12,6 +12,9 @@ interface StatusLabel {
   name: string;
   projectId: string;
   projectName: string;
+  statusType: string;
+  class: string;
+  sortKey: string;
 }
 
 export function Flow() {
@@ -64,6 +67,15 @@ export function Flow() {
     }
   }, [session]);
 
+  // Group status labels by project
+  const groupedLabels = statusLabels.reduce((acc, label) => {
+    if (!acc[label.projectId]) {
+      acc[label.projectId] = [];
+    }
+    acc[label.projectId].push(label);
+    return acc;
+  }, {} as Record<string, StatusLabel[]>);
+
   return (
     <Card 
       className="transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer bg-white/50 backdrop-blur-sm h-full" 
@@ -102,22 +114,29 @@ export function Flow() {
           </div>
         )}
         {!loading && !error && (
-          <div className="space-y-2 max-h-[300px] overflow-y-auto">
-            {statusLabels.length === 0 ? (
+          <div className="space-y-4 max-h-[300px] overflow-y-auto">
+            {Object.entries(groupedLabels).length === 0 ? (
               <p className="text-center text-muted-foreground">No status labels found</p>
             ) : (
-              statusLabels.map((label) => (
-                <div 
-                  key={`${label.projectId}-${label.id}`}
-                  className="flex items-start space-x-2 hover:bg-gray-50 p-2 rounded-lg transition-colors"
-                >
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-baseline justify-between">
-                      <p className="text-sm font-medium truncate">{label.name}</p>
-                      <span className="text-xs text-gray-500">
-                        {label.projectName}
-                      </span>
-                    </div>
+              Object.entries(groupedLabels).map(([projectId, labels]) => (
+                <div key={projectId} className="space-y-2">
+                  <h3 className="text-sm font-medium text-gray-500">{projectId}</h3>
+                  <div className="space-y-1">
+                    {labels.map((label) => (
+                      <div 
+                        key={`${label.projectId}-${label.id}`}
+                        className="flex items-start space-x-2 hover:bg-gray-50 p-2 rounded-lg transition-colors"
+                      >
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-baseline justify-between">
+                            <p className="text-sm font-medium truncate">{label.name}</p>
+                            <span className={`text-xs px-2 py-1 rounded ${label.class}`}>
+                              {label.statusType}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
                   </div>
                 </div>
               ))