From b06e449246f2ee08a61d36cc04c46da70c528551 Mon Sep 17 00:00:00 2001
From: JM-Flores <jmiguelflores19@gmail.com>
Date: Tue, 12 Aug 2025 05:27:38 +0800
Subject: [PATCH 1/3] show sprint number and sprint name in kanban sprints

---
 .../app/home/kanban/[projectId]/page.tsx      | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/codebility/app/home/kanban/[projectId]/page.tsx b/apps/codebility/app/home/kanban/[projectId]/page.tsx
index 13bfd1151..458d3c00b 100644
--- a/apps/codebility/app/home/kanban/[projectId]/page.tsx
+++ b/apps/codebility/app/home/kanban/[projectId]/page.tsx
@@ -193,11 +193,21 @@ export default async function KanbanSprintPage(props: PageProps) {
         );
       }
 
-      return sprints.map((sprint) => (
-        <TableRow key={sprint.id} className="grid grid-cols-1 md:table-row hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all duration-200 border-l-4 border-customBlue-500">
+      return sprints.map((sprint, index) => (
+        <TableRow
+          key={sprint.id}
+          className="border-customBlue-500 grid grid-cols-1 border-l-4 transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800/50 md:table-row"
+        >
           <TableCell className="md:table-cell">
             <div className="flex flex-col">
-              <span className="font-medium text-gray-900 dark:text-white">{sprint.name}</span>
+              <span className="font-medium text-gray-900 dark:text-white">
+                Sprint {index + 1}
+              </span>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-gray-700 dark:text-gray-300">
+                {sprint.name}
+              </span>
             </div>
           </TableCell>
           <TableCell className="md:table-cell">
@@ -211,7 +221,7 @@ export default async function KanbanSprintPage(props: PageProps) {
             >
               <Button
                 variant="hollow"
-                className="inline-flex items-center gap-2 bg-customBlue-600 text-white hover:bg-customBlue-700 dark:bg-customBlue-600 dark:hover:bg-customBlue-700 shadow-sm"
+                className="bg-customBlue-600 hover:bg-customBlue-700 dark:bg-customBlue-600 dark:hover:bg-customBlue-700 inline-flex items-center gap-2 text-white shadow-sm"
               >
                 <IconKanban className="h-4 w-4 text-white" />
                 <span className="hidden sm:inline">View Board</span>
@@ -232,10 +242,10 @@ export default async function KanbanSprintPage(props: PageProps) {
           </div>
         </div>
 
-        <div className="rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden shadow-sm">
+        <div className="overflow-hidden rounded-lg border border-gray-200 shadow-sm dark:border-gray-700">
           <Table>
             <TableHeader className="hidden md:table-header-group">
-              <TableRow className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border-0">
+              <TableRow className="border-0 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
                 <TableHead className="w-[45%] font-semibold text-gray-900 dark:text-white">
                   🏃‍♂️ Sprint
                 </TableHead>

From 61b106eeff1cdb6c0f53cf692df2c4ab9a1348f2 Mon Sep 17 00:00:00 2001
From: JM-Flores <jmiguelflores19@gmail.com>
Date: Tue, 19 Aug 2025 00:05:59 +0800
Subject: [PATCH 2/3] fix kanban projects page. Fetch from projects table
 instead of kanban board

---
 apps/codebility/app/home/kanban/page.tsx | 210 +++++++++--------------
 1 file changed, 77 insertions(+), 133 deletions(-)

diff --git a/apps/codebility/app/home/kanban/page.tsx b/apps/codebility/app/home/kanban/page.tsx
index fb79eecb4..e6bd91536 100644
--- a/apps/codebility/app/home/kanban/page.tsx
+++ b/apps/codebility/app/home/kanban/page.tsx
@@ -1,4 +1,3 @@
-// page.tsx
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
@@ -36,7 +35,7 @@ interface CodevData {
 }
 
 interface ProjectMemberData {
-  codev?: CodevData;
+  codev?: CodevData | null;
   role?: string;
 }
 
@@ -44,23 +43,12 @@ interface ProjectData {
   id: string;
   name: string;
   client_id?: string;
-  team_leader_id?: string;
-  project_members?: ProjectMemberData[];
-  codev?: CodevData;
+  team_leader?: CodevData | null;
   kanban_display: boolean;
+  project_members: ProjectMemberData[];
   isUserInvolved?: boolean;
 }
 
-interface KanbanBoardData {
-  id: string;
-  name: string;
-  description?: string | null;
-  created_at?: string;
-  updated_at?: string;
-  project_id?: string;
-  projects?: ProjectData | null;
-}
-
 interface PageProps {
   searchParams: Promise<SearchParams>;
 }
@@ -76,64 +64,44 @@ export default async function KanbanPage(props: PageProps) {
 
   const currentUserId = sessionUser?.id;
 
-  // Construct the initial board query
-  let boardQuery = supabase.from("kanban_boards").select(`
-    id,
-    name,
-    description,
-    created_at,
-    updated_at,
-    project_id,
-    projects (
+  let projectQuery = supabase.from("projects").select(
+    `
       id,
       name,
-      client_id,
+      description,
       kanban_display,
-      project_members (
+      project_members!inner (
         role,
-        codev (
+        codev:codev_id (
           id,
           first_name,
           last_name,
           image_url
-          
         )
       )
-    )
-  `);
+    `,
+  );
 
-  // Apply search filter if query exists
   if (searchParams.query) {
-    boardQuery = boardQuery.ilike("name", `%${searchParams.query}%`);
+    projectQuery = projectQuery.ilike("name", `%${searchParams.query}%`);
   }
 
-  // Execute the query
-  const { data: boards, error } = await boardQuery;
-  const typedBoards = boards as KanbanBoardData[] | null;
-
-  // Fetch team leads for each board
-  const boardsWithTeamLeads = (typedBoards || []).map((board) => {
-    const project = board.projects;
-
-    if (!project || !project.project_members) return board;
+  const { data: projects, error } = await projectQuery;
+  const typedProjects = projects as unknown as ProjectData[];
 
+  // Extended type for the new array
+  const projectsWithTeamLead: ProjectData[] = typedProjects?.map((project) => {
     const teamLeader = project.project_members.find(
-      (member) => member.role === "team_leader" && member.codev,
+      (member) => member.role === "team_leader",
     );
 
-    const isUserInvolved = Array.isArray(board.projects?.project_members)
-      ? board.projects.project_members.some(
-          (member) => member.codev?.id === currentUserId,
-        )
-      : false;
-
     return {
-      ...board,
-      projects: {
-        ...(board.projects || {}),
-        codev: teamLeader?.codev || null,
-        isUserInvolved,
-      },
+      ...project,
+
+      team_leader: teamLeader ? teamLeader.codev : null,
+      isUserInvolved: project.project_members.some(
+        (member) => member.codev?.id === currentUserId,
+      ),
     };
   });
 
@@ -151,7 +119,7 @@ export default async function KanbanPage(props: PageProps) {
     }
 
     // Loading state
-    if (!typedBoards) {
+    if (!typedProjects) {
       return Array.from({ length: 3 }).map((_, index) => (
         <TableRow key={`loading-${index}`}>
           <TableCell colSpan={4}>
@@ -166,7 +134,7 @@ export default async function KanbanPage(props: PageProps) {
     }
 
     // Empty state
-    if (!typedBoards || typedBoards.length === 0) {
+    if (!typedProjects || typedProjects.length === 0) {
       return (
         <TableRow>
           <TableCell
@@ -179,88 +147,62 @@ export default async function KanbanPage(props: PageProps) {
       );
     }
 
-    const view_sprint: React.ReactNode = (
-      <Button
-        variant="hollow"
-        className="inline-flex items-center gap-2 bg-[#000000] text-white hover:opacity-100 dark:bg-[#000000]"
-      >
-        <IconKanban className="h-4 w-4 text-white" />
-        <span className="hidden sm:inline">View Sprint</span>
-      </Button>
-    );
-
     // Render boards
-    return boardsWithTeamLeads.map((board) => (
+    return projectsWithTeamLead.map((project) => (
       <TableRow
-        key={board.id}
-        className={`grid grid-cols-1 md:table-row transition-all duration-200 ${
-          board.projects?.isUserInvolved 
-            ? "bg-gradient-to-r from-customBlue-50 via-white to-purple-50 dark:from-customBlue-950/50 dark:via-gray-900 dark:to-purple-950/50 hover:from-customBlue-100 hover:via-customBlue-50 hover:to-purple-100 dark:hover:from-customBlue-900/70 dark:hover:via-gray-800 dark:hover:to-purple-900/70 border-l-4 border-customBlue-500 shadow-sm" 
-            : "bg-gray-50 dark:bg-gray-800/30 text-gray-500 dark:text-gray-400 border-l-4 border-gray-300 dark:border-gray-600"
+        key={project.id}
+        className={`grid grid-cols-1 transition-all duration-200 md:table-row ${
+          project.isUserInvolved
+            ? "from-customBlue-50 dark:from-customBlue-950/50 hover:from-customBlue-100 hover:via-customBlue-50 dark:hover:from-customBlue-900/70 border-customBlue-500 border-l-4 bg-gradient-to-r via-white to-purple-50 shadow-sm hover:to-purple-100 dark:via-gray-900 dark:to-purple-950/50 dark:hover:via-gray-800 dark:hover:to-purple-900/70"
+            : "border-l-4 border-gray-300 bg-gray-50 text-gray-500 dark:border-gray-600 dark:bg-gray-800/30 dark:text-gray-400"
         }`}
       >
-        {board.projects?.kanban_display && (
+        {project.kanban_display && (
           <>
-            {/* Board Name */}
-            <TableCell className="md:table-cell">
-              <div className="flex flex-col">
-                <span className={`font-medium ${
-                  board.projects?.isUserInvolved 
-                    ? "text-gray-900 dark:text-white" 
-                    : "text-gray-500 dark:text-gray-400"
-                }`}>
-                  {board.name}
-                </span>
-                {board.description && (
-                  <span className={`text-sm ${
-                    board.projects?.isUserInvolved 
-                      ? "text-gray-600 dark:text-gray-300" 
-                      : "text-gray-400 dark:text-gray-500"
-                  }`}>
-                    {board.description}
-                  </span>
-                )}
-              </div>
-            </TableCell>
-
             {/* Project Name */}
             <TableCell className="md:table-cell">
-              <span className={
-                board.projects?.isUserInvolved 
-                  ? "text-gray-800 dark:text-gray-200" 
-                  : "text-gray-500 dark:text-gray-400"
-              }>
-                {board.projects?.name || "No project assigned"}
+              <span
+                className={
+                  project.isUserInvolved
+                    ? "text-gray-800 dark:text-gray-200"
+                    : "text-gray-500 dark:text-gray-400"
+                }
+              >
+                {project.name || "No project assigned"}
               </span>
             </TableCell>
 
             {/* Team Lead */}
             <TableCell className="md:table-cell">
-              {board.projects?.codev ? (
+              {project.team_leader ? (
                 <div className="flex items-center gap-2">
-                  {board.projects.codev.image_url && (
+                  {project.team_leader.image_url && (
                     <img
-                      src={board.projects.codev.image_url}
-                      alt={`${board.projects.codev.first_name}'s avatar`}
+                      src={project.team_leader.image_url}
+                      alt={`${project.team_leader.first_name}'s avatar`}
                       className={`h-8 w-8 rounded-full object-cover ${
-                        board.projects?.isUserInvolved ? "" : "opacity-50 grayscale"
+                        project.isUserInvolved ? "" : "opacity-50 grayscale"
                       }`}
                     />
                   )}
-                  <span className={`capitalize ${
-                    board.projects?.isUserInvolved 
-                      ? "text-gray-800 dark:text-gray-200" 
-                      : "text-gray-500 dark:text-gray-400"
-                  }`}>
-                    {`${board.projects.codev.first_name} ${board.projects.codev.last_name}`}
+                  <span
+                    className={`capitalize ${
+                      project.isUserInvolved
+                        ? "text-gray-800 dark:text-gray-200"
+                        : "text-gray-500 dark:text-gray-400"
+                    }`}
+                  >
+                    {`${project.team_leader.first_name} ${project.team_leader.last_name}`}
                   </span>
                 </div>
               ) : (
-                <span className={
-                  board.projects?.isUserInvolved 
-                    ? "text-gray-600 dark:text-gray-300" 
-                    : "text-gray-500 dark:text-gray-400"
-                }>
+                <span
+                  className={
+                    project.isUserInvolved
+                      ? "text-gray-600 dark:text-gray-300"
+                      : "text-gray-500 dark:text-gray-400"
+                  }
+                >
                   No team lead assigned
                 </span>
               )}
@@ -268,11 +210,11 @@ export default async function KanbanPage(props: PageProps) {
 
             {/* Actions */}
             <TableCell className="text-center md:table-cell">
-              {board.projects?.isUserInvolved ? (
-                <Link href={`${pathsConfig.app.kanban}/${board.projects.id}`}>
+              {project.isUserInvolved ? (
+                <Link href={`${pathsConfig.app.kanban}/${project.id}`}>
                   <Button
                     variant="hollow"
-                    className="inline-flex items-center gap-2 bg-customBlue-600 text-white hover:bg-customBlue-700 dark:bg-customBlue-600 dark:hover:bg-customBlue-700 shadow-sm"
+                    className="bg-customBlue-600 hover:bg-customBlue-700 dark:bg-customBlue-600 dark:hover:bg-customBlue-700 inline-flex items-center gap-2 text-white shadow-sm"
                   >
                     <IconKanban className="h-4 w-4 text-white" />
                     <span className="hidden sm:inline">View Sprint</span>
@@ -282,7 +224,7 @@ export default async function KanbanPage(props: PageProps) {
                 <Button
                   variant="hollow"
                   disabled
-                  className="inline-flex items-center gap-2 bg-gray-300 text-gray-500 cursor-not-allowed dark:bg-gray-600 dark:text-gray-400"
+                  className="inline-flex cursor-not-allowed items-center gap-2 bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400"
                 >
                   <IconKanban className="h-4 w-4" />
                   <span className="hidden sm:inline">No Access</span>
@@ -301,9 +243,12 @@ export default async function KanbanPage(props: PageProps) {
       fallback={
         <div className="flex min-h-[400px] flex-col items-center justify-center p-8 text-center">
           <div className="mb-4 text-4xl">📋</div>
-          <h2 className="mb-2 text-xl font-semibold">Unable to load Kanban boards</h2>
+          <h2 className="mb-2 text-xl font-semibold">
+            Unable to load Kanban boards
+          </h2>
           <p className="text-gray-600 dark:text-gray-400">
-            There was an issue loading your Kanban boards. Please try refreshing the page.
+            There was an issue loading your Kanban boards. Please try refreshing
+            the page.
           </p>
         </div>
       }
@@ -311,33 +256,32 @@ export default async function KanbanPage(props: PageProps) {
       <div className="mx-auto flex max-w-7xl flex-col gap-6 p-4">
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div className="flex items-center gap-3">
-            <div className="h-12 w-12 rounded-full bg-gradient-to-br from-customBlue-500 to-purple-500 flex items-center justify-center shadow-lg">
-              <IconKanban className="h-5 w-5 text-white transform translate-x-0.5" />
+            <div className="from-customBlue-500 flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br to-purple-500 shadow-lg">
+              <IconKanban className="h-5 w-5 translate-x-0.5 transform text-white" />
             </div>
             <div>
-              <H1 className="text-3xl font-bold bg-gradient-to-r from-purple-600 to-customBlue-600 bg-clip-text text-transparent">
+              <H1 className="to-customBlue-600 bg-gradient-to-r from-purple-600 bg-clip-text text-3xl font-bold text-transparent">
                 📋 Kanban Projects
               </H1>
-              <p className="text-gray-600 dark:text-gray-400">Manage your project boards and sprints</p>
+              <p className="text-gray-600 dark:text-gray-400">
+                Manage your project boards and sprints
+              </p>
             </div>
           </div>
           <div className="flex flex-col items-end gap-4 md:flex-row md:items-center">
             <div className="relative">
               <KanbanBoardsSearch
-                className="h-10 w-full rounded-full border border-gray-200 bg-white dark:bg-gray-800 dark:border-gray-600 px-5 text-sm focus:outline-none focus:ring-2 focus:ring-customBlue-500 focus:border-transparent shadow-sm md:w-80"
+                className="focus:ring-customBlue-500 h-10 w-full rounded-full border border-gray-200 bg-white px-5 text-sm shadow-sm focus:border-transparent focus:outline-none focus:ring-2 dark:border-gray-600 dark:bg-gray-800 md:w-80"
                 placeholder="🔍 Search boards..."
               />
             </div>
           </div>
         </div>
 
-        <div className="rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden shadow-sm">
+        <div className="overflow-hidden rounded-lg border border-gray-200 shadow-sm dark:border-gray-700">
           <Table>
             <TableHeader className="hidden md:table-header-group">
-              <TableRow className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border-0">
-                <TableHead className="w-[30%] font-semibold text-gray-900 dark:text-white">
-                  📋 Board Name
-                </TableHead>
+              <TableRow className="border-0 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
                 <TableHead className="w-[30%] font-semibold text-gray-900 dark:text-white">
                   🚀 Project
                 </TableHead>

From 65b6af20a5ee495cf13fae3fd4e8ace429534c43 Mon Sep 17 00:00:00 2001
From: JM-Flores <jmiguelflores19@gmail.com>
Date: Tue, 19 Aug 2025 00:17:15 +0800
Subject: [PATCH 3/3] Fix sprint/board name and connect new boards to project
 id

---
 apps/codebility/app/home/kanban/[projectId]/actions.ts | 3 +--
 apps/codebility/app/home/kanban/[projectId]/page.tsx   | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/apps/codebility/app/home/kanban/[projectId]/actions.ts b/apps/codebility/app/home/kanban/[projectId]/actions.ts
index 1ce954ac7..03948169f 100644
--- a/apps/codebility/app/home/kanban/[projectId]/actions.ts
+++ b/apps/codebility/app/home/kanban/[projectId]/actions.ts
@@ -29,14 +29,13 @@ export async function createNewSprint(formData: FormData) {
 			return { success: false, error: "Failed to generate sprint name" };
 		}
 
-		// TODO: Also add creating a new board for the sprint
-
     // Insert the new board
 		const board = await supabase
 			.from("kanban_boards")
 			.insert({
 				name: boardName,
 				description: boardDescription,
+				project_id: projectId,
 			})
 			.select()
 			.single();
diff --git a/apps/codebility/app/home/kanban/[projectId]/page.tsx b/apps/codebility/app/home/kanban/[projectId]/page.tsx
index 458d3c00b..f01054aa4 100644
--- a/apps/codebility/app/home/kanban/[projectId]/page.tsx
+++ b/apps/codebility/app/home/kanban/[projectId]/page.tsx
@@ -201,12 +201,12 @@ export default async function KanbanSprintPage(props: PageProps) {
           <TableCell className="md:table-cell">
             <div className="flex flex-col">
               <span className="font-medium text-gray-900 dark:text-white">
-                Sprint {index + 1}
+                {sprint.name}
               </span>
             </div>
             <div className="flex flex-col">
               <span className="text-gray-700 dark:text-gray-300">
-                {sprint.name}
+                {sprint.kanban_board?.name}
               </span>
             </div>
           </TableCell>