Commented the kanban column.

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

@@ -2,6 +2,19 @@ import { useEffect, useState } from "react";
 import KanbanCard from "./kanban-task-card";
 import { KanbanBoard, KanbanTask, UserInfo } from "../../utilities/types";
 
+/**
+ * KanbanColumn component represents a single column in a Kanban board.
+ * It displays a list of tasks for a specific category.
+ *
+ * @param {Object} props - The component props
+ * @param {string} props.title - The title of the column
+ * @param {string} props.taskCategoryId - The ID of the task category
+ * @param {KanbanBoard} props.kanban - The entire Kanban board data
+ * @param {Function} props.setActiveTaskMethod - Function to set the active task
+ * @param {UserInfo | null} props.currentUser - The current user information
+ * @param {any} props.provided - Provided props from react-beautiful-dnd
+ * @param {any} props.snapshot - Snapshot from react-beautiful-dnd
+ */
 export default function KanbanColumn({
   title,
   taskCategoryId,
@@ -19,19 +32,22 @@ export default function KanbanColumn({
   provided: any;
   snapshot: any;
 }) {
+  // State to hold the tasks for this column
   const [tasks, setTasks] = useState([] as KanbanTask[]);
 
+  // Effect to filter and sort tasks when kanban.tasks or taskCategoryId changes
   useEffect(() => {
     const tasks = kanban.tasks.filter(
       (task) => task.taskCategory === parseInt(taskCategoryId)
     );
-    // sort tasks by due date
+    // Sort tasks by due date
     tasks.sort((a, b) => {
       return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
     });
     setTasks(tasks);
   }, [kanban.tasks, taskCategoryId]);
 
+  // Render the column
   return (
     <div className="bg-yellow-400 rounded-lg p-2 shadow-md kanban-column">
       <h2 className="text-lg font-bold mb-2">{title}</h2>
@@ -47,15 +63,21 @@ export default function KanbanColumn({
         }}
       >
         {provided.placeholder}
-        {tasks.map((task, index: number) => (
-          <KanbanCard
-            key={task.id} // Add key prop with task id
-            task={task}
-            setActiveTaskMethod={setActiveTaskMethod}
-            currentUser={currentUser}
-            position={index} // Add position prop with the index
-          />
-        ))}
+        {tasks
+          .filter(
+            (task) =>
+              task.name !== undefined && task.name !== "" && task.name !== null
+          )
+          .map((task, index: number) => (
+            // Render each task as a KanbanCard component
+            <KanbanCard
+              key={task.id} // Unique key for each task
+              task={task}
+              setActiveTaskMethod={setActiveTaskMethod}
+              currentUser={currentUser}
+              position={index} // Position of the task in the list
+            />
+          ))}
       </div>
     </div>
   );