working leantime widget 23

app/api/auth/[...nextauth]/route.ts

@@ -65,6 +65,22 @@ export const authOptions: NextAuthOptions = {
       }
 
       try {
+        // Token has expired, try to refresh it
+        function isNonEmptyString(value: string | undefined): value is string {
+          return typeof value === 'string' && value.length > 0;
+        }
+
+        const clientId = process.env.KEYCLOAK_CLIENT_ID;
+        const clientSecret = process.env.KEYCLOAK_CLIENT_SECRET;
+
+        if (!isNonEmptyString(clientId) || !isNonEmptyString(clientSecret)) {
+          throw new Error("Missing required environment variables for token refresh");
+        }
+
+        // After the type guard check, we can safely assert these as strings
+        const validClientId = clientId as string;
+        const validClientSecret = clientSecret as string;
+
         const response = await fetch(
           `${process.env.KEYCLOAK_BASE_URL}/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/token`,
           {
@@ -74,8 +90,8 @@ export const authOptions: NextAuthOptions = {
             },
             body: new URLSearchParams({
               grant_type: "refresh_token",
-              client_id: process.env.KEYCLOAK_CLIENT_ID!,
+              client_id: validClientId,
-              client_secret: process.env.KEYCLOAK_CLIENT_SECRET!,
+              client_secret: validClientSecret,
               refresh_token: token.refreshToken as string,
             }),
           }
@@ -83,7 +99,10 @@ export const authOptions: NextAuthOptions = {
 
         const tokens = await response.json();
 
-        if (!response.ok) throw tokens;
+        if (!response.ok) {
+          console.error("Token refresh failed:", tokens);
+          throw new Error("RefreshAccessTokenError");
+        }
 
         return {
           ...token,
@@ -93,12 +112,18 @@ export const authOptions: NextAuthOptions = {
         };
       } catch (error) {
         console.error("Error refreshing token:", error);
-        return { ...token, error: "RefreshAccessTokenError" };
+        
+        // Return token with error flag - this will trigger a redirect to sign-in
+        return {
+          ...token,
+          error: "RefreshAccessTokenError",
+        };
       }
     },
 
     async session({ session, token }) {
       if (token.error) {
+        // Force sign out if there was a refresh error
         throw new Error("RefreshAccessTokenError");
       }
 

components/flow.tsx

@@ -5,57 +5,52 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { RefreshCw } from "lucide-react";
 
-interface StatusLabel {
+interface Task {
   id: string;
-  name: string;
+  headline: string;
-  class: string;
+  projectName: string;
-  statusType: string;
+  projectId: number;
-  kanbanCol: boolean | string;
+  status: string;
-  sortKey: number | string;
+  dueDate: string | null;
-}
+  milestone?: string;
-
-interface Project {
-  id: number;
-  name: string;
-  labels: StatusLabel[];
 }
 
 export function Flow() {
-  const [projects, setProjects] = useState<Project[]>([]);
+  const [tasks, setTasks] = useState<Task[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [retryTimeout, setRetryTimeout] = useState<NodeJS.Timeout | null>(null);
 
-  const fetchStatusLabels = async (isRefresh = false) => {
+  const fetchTasks = async (isRefresh = false) => {
     try {
       if (isRefresh) {
         setRefreshing(true);
       }
-      const response = await fetch('/api/leantime/status-labels');
+      const response = await fetch('/api/leantime/tasks');
       
       if (response.status === 429) {
         const retryAfter = parseInt(response.headers.get('retry-after') || '60');
-        const timeout = setTimeout(() => fetchStatusLabels(), retryAfter * 1000);
+        const timeout = setTimeout(() => fetchTasks(), retryAfter * 1000);
         setRetryTimeout(timeout);
         setError(`Rate limit exceeded. Retrying in ${retryAfter} seconds...`);
         return;
       }
 
       if (!response.ok) {
-        throw new Error('Failed to fetch status labels');
+        throw new Error('Failed to fetch tasks');
       }
 
       const data = await response.json();
-      if (data.projects && Array.isArray(data.projects)) {
+      if (data.tasks && Array.isArray(data.tasks)) {
-        setProjects(data.projects);
+        setTasks(data.tasks);
       } else {
-        setProjects([]);
+        setTasks([]);
       }
       setError(null);
     } catch (err) {
-      console.error('Error fetching status labels:', err);
+      console.error('Error fetching tasks:', err);
-      setError('Failed to fetch status labels');
+      setError('Failed to fetch tasks');
     } finally {
       setLoading(false);
       setRefreshing(false);
@@ -63,7 +58,7 @@ export function Flow() {
   };
 
   useEffect(() => {
-    fetchStatusLabels();
+    fetchTasks();
     return () => {
       if (retryTimeout) {
         clearTimeout(retryTimeout);
@@ -71,6 +66,38 @@ 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':
+        return 'bg-blue-100 text-blue-800';
+      case 'in_progress':
+        return 'bg-yellow-100 text-yellow-800';
+      case 'completed':
+        return 'bg-green-100 text-green-800';
+      default:
+        return 'bg-gray-100 text-gray-800';
+    }
+  };
+
+  const formatDate = (dateString: string | null): string => {
+    if (!dateString) return 'No due date';
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      month: '2-digit',
+      day: '2-digit',
+      year: 'numeric'
+    });
+  };
+
   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">
@@ -78,7 +105,7 @@ export function Flow() {
         <Button
           variant="ghost"
           size="icon"
-          onClick={() => fetchStatusLabels(true)}
+          onClick={() => fetchTasks(true)}
           disabled={refreshing || !!retryTimeout}
           className={refreshing ? 'animate-spin' : ''}
         >
@@ -92,21 +119,27 @@ export function Flow() {
           </div>
         ) : error ? (
           <div className="text-center text-sm text-red-500">{error}</div>
-        ) : projects.length === 0 ? (
+        ) : Object.keys(tasksByProject).length === 0 ? (
-          <div className="text-center text-sm text-gray-500">No status labels found</div>
+          <div className="text-center text-sm text-gray-500">No tasks found</div>
         ) : (
           <div className="space-y-6">
-            {projects.map((project) => (
+            {Object.entries(tasksByProject).map(([projectName, projectTasks]) => (
-              <div key={project.id} className="space-y-2">
+              <div key={projectName} className="space-y-2">
-                <h3 className="font-medium text-sm">{project.name}</h3>
+                <h3 className="font-medium text-sm">{projectName}</h3>
                 <div className="space-y-2">
-                  {project.labels.map((label) => (
+                  {projectTasks.map((task) => (
-                    <div key={`${project.id}-${label.id}`} className="flex justify-between items-start text-sm border-b border-gray-100 pb-2">
+                    <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">{label.name}</div>
+                        <div className="font-medium">{task.headline}</div>
+                        <div className="text-xs text-gray-500 mt-1">
+                          {task.milestone && (
+                            <span className="mr-2">{task.milestone}</span>
+                          )}
+                          <span>{formatDate(task.dueDate)}</span>
+                        </div>
                       </div>
-                      <div className={`ml-4 px-2 py-1 rounded text-xs ${getLabelClass(label.class)}`}>
+                      <div className={`ml-4 px-2 py-1 rounded text-xs ${getStatusClass(task.status)}`}>
-                        {label.statusType}
+                        {task.status.toUpperCase()}
                       </div>
                     </div>
                   ))}
@@ -118,19 +151,4 @@ export function Flow() {
       </CardContent>
     </Card>
   );
-}
-
-function getLabelClass(className: string): string {
-  const classMap: Record<string, string> = {
-    'label-default': 'bg-gray-100 text-gray-800',
-    'label-success': 'bg-green-100 text-green-800',
-    'label-warning': 'bg-yellow-100 text-yellow-800',
-    'label-info': 'bg-blue-100 text-blue-800',
-    'label-blue': 'bg-blue-100 text-blue-800',
-    'label-darker-blue': 'bg-indigo-100 text-indigo-800',
-    'label-dark-green': 'bg-emerald-100 text-emerald-800',
-    'label-important': 'bg-red-100 text-red-800',
-  };
-  
-  return classMap[className] || 'bg-gray-100 text-gray-800';
 }