Fixing the size of the progress bar and newline task edit.

frontend/src/api/taskAPI.tsx

@@ -21,6 +21,25 @@ export default class TaskAPI {
     return response.data as KanbanTask;
   }
 
+  static createTaskObservable(
+    boardId: number,
+    taskData: Partial<KanbanTask>
+  ): Observable<KanbanTask> {
+    return from(TaskAPI.createTask(boardId)).pipe(
+      switchMap((task) => {
+        return from(TaskAPI.updateTask(boardId, task.id, taskData)).pipe(
+          catchError((error) => {
+            throw new TaskApiError(
+              `Error creating task with boardId ${boardId}`,
+              task,
+              error
+            );
+          })
+        );
+      })
+    );
+  }
+
   static async deleteTask(boardId: number, taskId: number): Promise<void> {
     const token = localStorage.getItem("token");
 
@@ -58,24 +77,7 @@ export default class TaskAPI {
     return response.data as KanbanTask;
   }
 
-  static createTaskObservable(
-    boardId: number,
-    taskData: Partial<KanbanTask>
-  ): Observable<KanbanTask> {
-    return from(TaskAPI.createTask(boardId)).pipe(
-      switchMap((task) => {
-        return from(TaskAPI.updateTask(boardId, task.id, taskData)).pipe(
-          catchError((error) => {
-            throw new TaskApiError(
-              `Error creating task with boardId ${boardId}`,
-              task,
-              error
-            );
-          })
-        );
-      })
-    );
-  }
+
 
   static updateTaskObservable(
     boardId: number,

frontend/src/components/forms/notification-popup.tsx

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+
+type NotificationType = "success" | "error" | "info" | undefined;
+
+interface NotificationPopupProps {
+  message: string;
+  isVisible: boolean;
+  onClose: () => void;
+  type?: NotificationType; 
+}
+
+
+
+const NotificationPopup = ({
+  message,
+  isVisible,
+  onClose,
+  type = "info",
+}: NotificationPopupProps) => {
+  useEffect(() => {
+    if (isVisible) {
+      const timer = setTimeout(onClose, 3000); // 1 second auto-close
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, onClose]);
+
+  if (!isVisible) return null;
+
+  const typeStyles = {
+    success: "bg-green-500 text-white",
+    error: "bg-red-500 text-white",
+    info: "bg-blue-500 text-white",
+  };
+
+  return (
+    <div
+      className={`fixed bottom-4 right-4 px-4 py-2 rounded shadow-lg transition-opacity duration-300 ${typeStyles[type]}`}
+      style={{ zIndex: 1000 }}
+    >
+      <span>{message}</span>
+    </div>
+  );
+};
+
+export default NotificationPopup;

frontend/src/components/kanbans/kanban-display.tsx

@@ -8,7 +8,7 @@ import { kanbanColumns } from "../../utilities/kanban-category-mapping";
 import { Droppable, DragDropContext } from "react-beautiful-dnd";
 import UserAPI from "../../api/userAPI";
 import ConfirmationModal from "../forms/confirmation-form";
-
+import NotificationPopup from "../forms/notification-popup"; 
 export default function KanbanDisplay({
   kanban,
   setKanban,
@@ -23,6 +23,12 @@ export default function KanbanDisplay({
   const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
   const [taskToDelete, setTaskToDelete] = useState<number | null>(null);
   const [addTaskError, setAddTaskError] = useState<string | null>(null);
+  const [notification, setNotification] = useState<{ message: string; isVisible: boolean; type: "success" | "error" | "info" }>({
+    message: "",
+    isVisible: false,
+    type: "info"
+  });
+
 
   useEffect(() => {
     const subscription = UserAPI.getUserObservable().subscribe({
@@ -39,6 +45,12 @@ export default function KanbanDisplay({
     };
   }, []);
 
+
+  const showNotification = (message: string, type: "success" | "error" | "info" = "info") => {
+    setNotification({ message, isVisible: true, type });
+    setTimeout(() => setNotification({ message: "", isVisible: false, type }), 3000);
+  };
+
   const handleDeleteTask = (taskId: number) => {
     setTaskToDelete(taskId);
     setIsConfirmModalOpen(true);
@@ -54,9 +66,11 @@ export default function KanbanDisplay({
           });
           setSelectedTask(null);
           setIsConfirmModalOpen(false);
+          showNotification("Task deleted successfully", "success");
         })
         .catch((error) => {
           console.error("Error deleting task:", error);
+
         });
     }
   };
@@ -105,6 +119,7 @@ export default function KanbanDisplay({
       next: (task) => {
         console.log("Task created:", task);
         setIsTaskModalOpen(false);
+        showNotification("Task created successfully", "success");
       },
       error: (error) => {
         setAddTaskError(error.error.response.data);
@@ -138,15 +153,26 @@ export default function KanbanDisplay({
       next: (updatedTask) => {
         console.log("Task updated:", updatedTask);
         setKanban({ ...kanban, tasks: updatedTasks });
+        showNotification("Task updated successfully", "success");
       },
       error: (error) => {
         console.error("Error updating task:", error);
       },
     });
   };
 
+
   return (
+
     <div style={{ padding: "0 20px" }}>
+    {/* Notification Popup */}
+    <NotificationPopup
+      message={notification.message}
+      isVisible={notification.isVisible}
+      onClose={() => setNotification({ ...notification, isVisible: false })}
+      type={notification.type || "info"}
+    />
+
       <header className="flex flex-col items-start mb-6 w-full">
         <h1 className="text-4xl font-bold break-words sm:max-w-full max-w-64">
           {kanban.name}
@@ -168,6 +194,7 @@ export default function KanbanDisplay({
           </span>
         </div>
         <ProgressBar progress={progress} />
+
 
         <div className="mt-4 w-full flex justify-start">
           <button
@@ -240,7 +267,7 @@ function ProgressBar({ progress }: { progress: number }) {
         background: "#ddd",
         borderRadius: "4px",
         width: "100%",
-        height: "10px",
+        height: "30px",
         marginTop: "5px",
       }}
     >

frontend/src/components/kanbans/kanban-task-detail.tsx

@@ -160,7 +160,7 @@ const DetailedTaskView = ({
                 name="urgency"
                 value={updatedTask.urgency}
                 onChange={handleInputChange}
-                className="p-2 rounded text-black"
+                className="block w-full p-2 rounded text-black mt-1"
               >
                 <option value="1">High</option>
                 <option value="2">Medium</option>
@@ -183,7 +183,7 @@ const DetailedTaskView = ({
                 name="dueDate"
                 value={updatedTask.dueDate}
                 onChange={handleInputChange}
-                className="p-2 rounded text-black"
+                className="block w-full p-2 rounded text-black mt-1"
               />
             ) : (
               <span className="ml-2">{task.dueDate}</span>
@@ -266,7 +266,7 @@ const DetailedTaskView = ({
                 name="taskCategory"
                 value={updatedTask.taskCategory}
                 onChange={handleInputChange}
-                className="p-2 rounded text-black"
+                className="block w-full p-2 rounded text-black mt-1"
               >
                 <option value="1">Backlog</option>
                 <option value="2">In Progress</option>