From 0d5840341fc004d24a164913142255ce01291885 Mon Sep 17 00:00:00 2001
From: manideepyelugam <yelugammanideep@gmail.com>
Date: Mon, 9 Feb 2026 10:52:59 +0530
Subject: [PATCH 1/2] resolved : FAIR-60, FAIR-28, FAIR-20, attachment preview
 bug fixed,

---
 src/components/navigation.tsx                 |  9 ++--
 src/components/project-tools.tsx              | 31 +++++-------
 src/components/projects.tsx                   |  6 +--
 src/components/spaces.tsx                     |  6 +--
 src/components/tools.tsx                      | 14 +++---
 src/components/ui/badge.tsx                   | 10 ++--
 .../components/attachment-list.tsx            |  7 ++-
 .../components/task-attachments.tsx           | 27 ++++++----
 .../components/enhanced-data-kanban.tsx       | 24 +++++----
 .../components/enhanced-backlog-screen.tsx    | 50 +++++++++++++------
 src/features/tasks/components/data-kanban.tsx | 21 ++++++--
 .../tasks/components/task-view-switcher.tsx   |  3 ++
 12 files changed, 126 insertions(+), 82 deletions(-)

diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index 59e3c382..64be0b63 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -187,8 +187,9 @@ export const Navigation = ({
   });
 
   return (
-    <div className="p-3 border-sidebar-border flex-shrink-0">
-      <ul className="flex flex-col ">
+    <div className="px-3 pt-4 pb-2 flex-shrink-0">
+      <p className="text-[11px] font-semibold tracking-wider uppercase text-sidebar-foreground/50 pl-2.5 mb-2">Core Pages</p>
+      <ul className="flex flex-col gap-0.5">
         {visibleRoutes.map((item) => {
           // Determine the correct href based on route type
           let fullHref: string;
@@ -219,11 +220,11 @@ export const Navigation = ({
               <Link href={fullHref}>
                 <div
                   className={cn(
-                    "flex items-center gap-2.5 p-2.5 rounded-md font-medium hover:bg-sidebar-accent hover:text-sidebar-foreground transition text-sidebar-foreground/70",
+                    "flex items-center gap-2.5 px-2.5 py-2 rounded-md font-medium hover:bg-sidebar-accent hover:text-sidebar-foreground transition text-sidebar-foreground/70",
                     isActive && "bg-sidebar-accent shadow-sm hover:opacity-100 text-sidebar-foreground"
                   )}
                 >
-                  <Icon className={cn("size-5 ", isActive && "text-primary")} />
+                  <Icon className={cn("size-[17px]", isActive && "text-primary")} />
                   <p className="text-[12px] tracking-tight font-medium">
                     {item.label}
                   </p>
diff --git a/src/components/project-tools.tsx b/src/components/project-tools.tsx
index b86e1480..eb5f53d7 100644
--- a/src/components/project-tools.tsx
+++ b/src/components/project-tools.tsx
@@ -265,25 +265,18 @@ export const ProjectTools = () => {
   };
 
   return (
-    <div className="flex flex-col px-3 py-2 border-t border-sidebar-border">
+    <div className="flex flex-col px-3 py-3 border-t border-sidebar-border">
       {/* Project Header with Toggle */}
-      <div className="flex items-center mt-2  justify-between">
+      <div className="flex items-center justify-between">
         <button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="flex items-center gap-2 text-[13px] tracking-normal font-medium pl-2 text-sidebar-foreground/90 hover:text-sidebar-foreground w-full"
+          className="flex items-center gap-1.5 text-[11px] tracking-wider uppercase font-semibold pl-2.5 text-sidebar-foreground/50 hover:text-sidebar-foreground/70 transition-colors w-full"
         >
-          <span className="flex items-center gap-1">
-            {isExpanded ? (
-              <ChevronDown className="size-3" />
-            ) : (
-              <ChevronRight className="size-3" />
-            )}
-          </span>
-          {/* <ProjectAvatar
-            name={project.name}
-            image={project.imageUrl}
-            className="size-5"
-          /> */}
+          {isExpanded ? (
+            <ChevronDown className="size-3" />
+          ) : (
+            <ChevronRight className="size-3" />
+          )}
           <span className="truncate max-w-[170px]" title={project.name}>
             {project.name} Project Tools
           </span>
@@ -297,7 +290,7 @@ export const ProjectTools = () => {
           isExpanded ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0"
         )}
       >
-        <div className="space-y-0.5 mt-2 pl-4 pt-1">
+        <div className="space-y-0.5 mt-2 pl-3">
           {visibleTools.map((tool) => {
             const isActive = isToolActive(tool);
             return (
@@ -305,15 +298,15 @@ export const ProjectTools = () => {
                 key={tool.id}
                 onClick={() => handleToolClick(tool)}
                 className={cn(
-                  "flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer text-sm transition-colors w-full",
+                  "flex items-center gap-2.5 px-2.5 py-2 rounded-md cursor-pointer transition-colors w-full",
                   isActive
                     ? "bg-sidebar-accent text-sidebar-foreground font-medium"
                     : "hover:bg-sidebar-accent/50 text-sidebar-foreground/70"
                 )}
               >
                 <span className={cn(
-                  "transition-colors",
-                  isActive && "text-primary"
+                  "flex-shrink-0 transition-colors",
+                  isActive ? "text-primary" : "text-sidebar-foreground/60"
                 )}>
                   {tool.icon}
                 </span>
diff --git a/src/components/projects.tsx b/src/components/projects.tsx
index 38446b79..22c38749 100644
--- a/src/components/projects.tsx
+++ b/src/components/projects.tsx
@@ -48,11 +48,11 @@ export const Projects = () => {
   };
 
   return (
-    <div className="flex flex-col px-3 py-2 border-t border-sidebar-border">
-      <div className="flex items-center justify-between ">
+    <div className="flex flex-col px-3 py-3 border-t border-sidebar-border">
+      <div className="flex items-center justify-between">
         <button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="flex items-center gap-1  text-[13px] tracking-normal font-medium pl-2 text-sidebar-foreground/80 hover:text-sidebar-foreground"
+          className="flex items-center gap-1.5 text-[11px] tracking-wider uppercase font-semibold pl-2.5 text-sidebar-foreground/50 hover:text-sidebar-foreground/70 transition-colors"
         >
           {isExpanded ? (
             <ChevronDown className="size-3" />
diff --git a/src/components/spaces.tsx b/src/components/spaces.tsx
index e76b69f9..ec695004 100644
--- a/src/components/spaces.tsx
+++ b/src/components/spaces.tsx
@@ -54,11 +54,11 @@ export const Spaces = () => {
   }, {} as Record<string, typeof spaces>);
 
   return (
-    <div className="flex flex-col px-3 py-4 border-t border-sidebar-border">
-      <div className="flex items-center justify-between ">
+    <div className="flex flex-col px-3 py-3 border-t border-sidebar-border">
+      <div className="flex items-center justify-between">
         <button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="flex items-center gap-1 text-[13px] tracking-normal font-medium pl-2 text-sidebar-foreground/90 hover:text-sidebar-foreground"
+          className="flex items-center gap-1.5 text-[11px] tracking-wider uppercase font-semibold pl-2.5 text-sidebar-foreground/50 hover:text-sidebar-foreground/70 transition-colors"
         >
           {isExpanded ? (
             <ChevronDown className="size-3" />
diff --git a/src/components/tools.tsx b/src/components/tools.tsx
index a922a2bc..34ed88db 100644
--- a/src/components/tools.tsx
+++ b/src/components/tools.tsx
@@ -127,11 +127,11 @@ export const Tools = () => {
   };
 
   return (
-    <div className="flex flex-col px-3 py-4 border-t border-sidebar-border">
+    <div className="flex flex-col px-3 py-3 border-t border-sidebar-border">
       <div className="flex items-center justify-between">
         <button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="flex items-center gap-1 text-[13px] tracking-normal font-medium pl-2 text-sidebar-foreground/90 hover:text-sidebar-foreground"
+          className="flex items-center gap-1.5 text-[11px] tracking-wider uppercase font-semibold pl-2.5 text-sidebar-foreground/50 hover:text-sidebar-foreground/70 transition-colors"
         >
           {isExpanded ? (
             <ChevronDown className="size-3" />
@@ -142,8 +142,8 @@ export const Tools = () => {
         </button>
       </div>
 
-      <div className={`transition-all duration-1000 overflow-hidden ${isExpanded ? 'max-h-96' : 'max-h-0'}`}>
-        <div className="space-y-1 mt-2  pl-4 pt-2">
+      <div className={`transition-all duration-300 overflow-hidden ${isExpanded ? 'max-h-96' : 'max-h-0'}`}>
+        <div className="space-y-0.5 mt-2 pl-3">
           {visibleTools.map((tool) => {
             const isActive = isToolActive(tool);
             return (
@@ -151,13 +151,13 @@ export const Tools = () => {
                 key={tool.label}
                 onClick={() => handleToolClick(tool)}
                 className={cn(
-                  "flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer text-sm transition-colors w-full",
+                  "flex items-center gap-2.5 px-2.5 py-2 rounded-md cursor-pointer transition-colors w-full",
                   isActive
                     ? "bg-sidebar-accent text-sidebar-foreground"
-                    : "hover:bg-sidebar-accent text-sidebar-foreground/70"
+                    : "hover:bg-sidebar-accent/50 text-sidebar-foreground/70"
                 )}
               >
-                <span className={cn(isActive ? "text-primary" : "text-sidebar-foreground/70")}>
+                <span className={cn("flex-shrink-0", isActive ? "text-primary" : "text-sidebar-foreground/60")}>
                   {tool.icon}
                 </span>
                 <span className="truncate text-xs font-medium">{tool.label}</span>
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 4e250328..06885e3e 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -18,15 +18,15 @@ const badgeVariants = cva(
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
         outline: "text-foreground",
         [TaskStatus.TODO]:
-          "border-transparent bg-gray-400 text-primary hover:bg-gray-400/80",
+          "border-transparent bg-gray-400 text-gray-900 dark:bg-gray-500 dark:text-gray-50 hover:bg-gray-400/80 dark:hover:bg-gray-500/80",
         [TaskStatus.ASSIGNED]:
-          "border-transparent bg-red-400 text-primary hover:bg-red-400/80",
+          "border-transparent bg-red-400 text-red-900 dark:bg-red-500 dark:text-red-50 hover:bg-red-400/80 dark:hover:bg-red-500/80",
         [TaskStatus.IN_PROGRESS]:
-          "border-transparent bg-yellow-400 text-primary hover:bg-yellow-400/80",
+          "border-transparent bg-yellow-400 text-yellow-900 dark:bg-yellow-500 dark:text-yellow-50 hover:bg-yellow-400/80 dark:hover:bg-yellow-500/80",
         [TaskStatus.IN_REVIEW]:
-          "border-transparent bg-blue-400 text-primary hover:bg-blue-400/80",
+          "border-transparent bg-blue-400 text-blue-900 dark:bg-blue-500 dark:text-blue-50 hover:bg-blue-400/80 dark:hover:bg-blue-500/80",
         [TaskStatus.DONE]:
-          "border-transparent bg-emerald-400 text-primary hover:bg-emerald-400/80",
+          "border-transparent bg-emerald-400 text-emerald-900 dark:bg-emerald-500 dark:text-emerald-50 hover:bg-emerald-400/80 dark:hover:bg-emerald-500/80",
       },
     },
     defaultVariants: {
diff --git a/src/features/attachments/components/attachment-list.tsx b/src/features/attachments/components/attachment-list.tsx
index b9fc13bf..ba277754 100644
--- a/src/features/attachments/components/attachment-list.tsx
+++ b/src/features/attachments/components/attachment-list.tsx
@@ -88,7 +88,10 @@ const AttachmentItem = ({ attachment, workspaceId }: AttachmentItemProps) => {
       <Card className="hover:bg-gray-50 transition-colors">
         <CardContent className="p-4">
           <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-3 flex-1 min-w-0">
+            <button
+              onClick={isPreviewable ? handlePreview : handleDownload}
+              className="flex items-center space-x-3 flex-1 min-w-0 text-left cursor-pointer hover:opacity-80 transition-opacity"
+            >
               <div className="flex-shrink-0">
                 {getFileIcon(attachment.mimeType)}
               </div>
@@ -101,7 +104,7 @@ const AttachmentItem = ({ attachment, workspaceId }: AttachmentItemProps) => {
                   </Badge>
                 </div>
               </div>
-            </div>
+            </button>
             <div className="flex items-center space-x-2">
               {isPreviewable && (
                 <Button
diff --git a/src/features/attachments/components/task-attachments.tsx b/src/features/attachments/components/task-attachments.tsx
index 92294807..577a07e9 100644
--- a/src/features/attachments/components/task-attachments.tsx
+++ b/src/features/attachments/components/task-attachments.tsx
@@ -121,17 +121,22 @@ const AttachmentItem = ({ attachment, workspaceId, onPreview }: AttachmentItemPr
     <>
       <ConfirmDialog />
       <div className="group flex items-center gap-2 px-2 py-1.5 hover:bg-accent rounded-md transition-colors">
-        <div className="flex-shrink-0">
-          {getFileIcon(attachment.mimeType)}
-        </div>
-        <div className="flex-1 min-w-0">
-          <p className="text-[13px] font-normal text-foreground truncate leading-tight">
-            {attachment.name}
-          </p>
-          <p className="text-[11px] text-muted-foreground leading-tight">
-            {formatFileSize(attachment.size)} · {getFileExtension(attachment.name)}
-          </p>
-        </div>
+        <button
+          onClick={isPreviewable ? handlePreview : handleDownload}
+          className="flex items-center gap-2 flex-1 min-w-0 text-left cursor-pointer hover:opacity-80 transition-opacity"
+        >
+          <div className="flex-shrink-0">
+            {getFileIcon(attachment.mimeType)}
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-[13px] font-normal text-foreground truncate leading-tight">
+              {attachment.name}
+            </p>
+            <p className="text-[11px] text-muted-foreground leading-tight">
+              {formatFileSize(attachment.size)} · {getFileExtension(attachment.name)}
+            </p>
+          </div>
+        </button>
         <div className="flex items-center opactiy-100">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
diff --git a/src/features/custom-columns/components/enhanced-data-kanban.tsx b/src/features/custom-columns/components/enhanced-data-kanban.tsx
index 75968a32..58c5ecb9 100644
--- a/src/features/custom-columns/components/enhanced-data-kanban.tsx
+++ b/src/features/custom-columns/components/enhanced-data-kanban.tsx
@@ -356,11 +356,8 @@ export const EnhancedDataKanban = ({
       const sourceColumnId = source.droppableId;
       const destColumnId = destination.droppableId;
 
-      // If dropped in the same position, do nothing
-      if (
-        sourceColumnId === destColumnId &&
-        source.index === destination.index
-      ) {
+      // Early return if no actual movement
+      if (sourceColumnId === destColumnId && source.index === destination.index) {
         return;
       }
 
@@ -370,10 +367,13 @@ export const EnhancedDataKanban = ({
         position: number;
       }[] = [];
 
+      // Store previous state for potential rollback
+      const previousTasks = tasks;
+
       setTasks((prevTasks) => {
         const newTasks = { ...prevTasks };
 
-        const sourceColumn = [...newTasks[sourceColumnId]];
+        const sourceColumn = [...(newTasks[sourceColumnId] || [])];
         const [movedTask] = sourceColumn.splice(source.index, 1);
 
         if (!movedTask) {
@@ -387,7 +387,7 @@ export const EnhancedDataKanban = ({
 
         newTasks[sourceColumnId] = sourceColumn;
 
-        const destColumn = [...newTasks[destColumnId]];
+        const destColumn = [...(newTasks[destColumnId] || [])];
         destColumn.splice(destination.index, 0, updatedMovedTask);
         newTasks[destColumnId] = destColumn;
 
@@ -432,10 +432,16 @@ export const EnhancedDataKanban = ({
 
       // Only call onChange if we have valid updates
       if (Array.isArray(updatesPayload) && updatesPayload.length > 0) {
-        onChange(updatesPayload);
+        try {
+          onChange(updatesPayload);
+        } catch (error) {
+          // Rollback on error
+          console.error('Failed to update task positions:', error);
+          setTasks(previousTasks);
+        }
       }
     },
-    [orderedColumns, onChange, updateColumnOrder, workspaceId, projectId]
+    [orderedColumns, onChange, updateColumnOrder, workspaceId, projectId, tasks]
   );
 
   // Derive body content states (keep hooks above regardless of state)
diff --git a/src/features/sprints/components/enhanced-backlog-screen.tsx b/src/features/sprints/components/enhanced-backlog-screen.tsx
index d564b980..07a2e2c5 100644
--- a/src/features/sprints/components/enhanced-backlog-screen.tsx
+++ b/src/features/sprints/components/enhanced-backlog-screen.tsx
@@ -873,7 +873,7 @@ export default function EnhancedBacklogScreen({ workspaceId, projectId }: Enhanc
                           ) : (
                             <div className="divide-y divide-border">
                               {/* Column Header Row */}
-                              <div className="px-4 py-2 bg-muted/50 border-b border-border">
+                              {/* <div className="px-4 py-2 bg-muted/50 border-b border-border">
                                 <div className="flex items-center gap-4">
                                   <div className="flex items-center gap-3">
                                     <div className="w-5" />
@@ -889,7 +889,7 @@ export default function EnhancedBacklogScreen({ workspaceId, projectId }: Enhanc
                                     <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider w-[120px]">Assignee</span>
                                   </div>
                                 </div>
-                              </div>
+                              </div> */}
                               {sprintItems.map((item, index) => (
                                 <Draggable key={item.$id} draggableId={item.$id} index={index}>
                                   {(provided, snapshot) => (
@@ -1191,13 +1191,22 @@ export default function EnhancedBacklogScreen({ workspaceId, projectId }: Enhanc
                             </div>
                           ) : (
                             canCreateWorkItems && (
-                              <button
-                                onClick={() => setIsCreatingInSprint(sprint.$id)}
-                                className="w-full px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent transition-colors flex items-center gap-2 border-t border-border"
-                              >
-                                <Plus className="size-4" />
-                                Create work item
-                              </button>
+                              <div className="flex items-center gap-0 border-t border-border">
+                                <button
+                                  onClick={() => setIsCreatingInSprint(sprint.$id)}
+                                  className="w-1/2 px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent transition-colors flex items-center gap-2 border-r border-border"
+                                >
+                                  <Plus className="size-4" />
+                                  Create work item
+                                </button>
+                                <button
+                                  onClick={openCreateTaskModal}
+                                  className="w-1/2 px-4 py-3 text-left text-sm text-muted-foreground hover:bg-accent transition-colors flex items-center gap-2"
+                                >
+                                  <Plus className="size-4" />
+                                  Create full work item
+                                </button>
+                              </div>
                             )
                           )}
 
@@ -1590,13 +1599,22 @@ export default function EnhancedBacklogScreen({ workspaceId, projectId }: Enhanc
                       </div>
                     ) : (
                       canCreateWorkItems && (
-                        <button
-                          onClick={() => setIsCreatingInBacklog(true)}
-                          className="w-full px-4 py-3 text-left text-sm text-muted-foreground hover:bg-muted transition-colors flex items-center gap-2 border-t border-border"
-                        >
-                          <Plus className="size-4" />
-                          Create work item
-                        </button>
+                        <div className="flex items-center gap-0 border-t border-border">
+                          <button
+                            onClick={() => setIsCreatingInBacklog(true)}
+                            className="w-1/2 px-4 py-3 text-left text-sm text-muted-foreground hover:bg-muted transition-colors flex items-center gap-2 border-r border-border"
+                          >
+                            <Plus className="size-4" />
+                            Create work item
+                          </button>
+                          <button
+                            onClick={openCreateTaskModal}
+                            className="w-1/2 px-4 py-3 text-left text-sm text-muted-foreground hover:bg-muted transition-colors flex items-center gap-2"
+                          >
+                            <Plus className="size-4" />
+                            Create full work item
+                          </button>
+                        </div>
                       )
                     )}
 
diff --git a/src/features/tasks/components/data-kanban.tsx b/src/features/tasks/components/data-kanban.tsx
index f1069e65..89c6a4d7 100644
--- a/src/features/tasks/components/data-kanban.tsx
+++ b/src/features/tasks/components/data-kanban.tsx
@@ -306,6 +306,11 @@ export const DataKanban = ({
       const sourceStatus = source.droppableId as TaskStatus;
       const destStatus = destination.droppableId as TaskStatus;
 
+      // Early return if no actual movement
+      if (sourceStatus === destStatus && source.index === destination.index) {
+        return;
+      }
+
       // Get the task being moved
       const movedTask = tasks[sourceStatus][source.index];
       if (!movedTask) {
@@ -355,11 +360,14 @@ export const DataKanban = ({
         position: number;
       }[] = [];
 
+      // Store previous state for potential rollback
+      const previousTasks = tasks;
+
       setTasks((prevTasks) => {
         const newTasks = { ...prevTasks };
 
         // Safely remove the task from the source column
-        const sourceColumn = [...newTasks[sourceStatus]];
+        const sourceColumn = [...(newTasks[sourceStatus] || [])];
         const [draggedTask] = sourceColumn.splice(source.index, 1);
 
         // If there's no moved task (shouldn't happen, but just in case), return the previous state
@@ -377,7 +385,7 @@ export const DataKanban = ({
         newTasks[sourceStatus] = sourceColumn;
 
         // Add the task to the destination column
-        const destColumn = [...newTasks[destStatus]];
+        const destColumn = [...(newTasks[destStatus] || [])];
         destColumn.splice(destination.index, 0, updatedMovedTask);
         newTasks[destStatus] = destColumn;
 
@@ -424,7 +432,14 @@ export const DataKanban = ({
         return newTasks;
       });
 
-      onChange(updatesPayload);
+      // Call onChange and handle errors with rollback
+      try {
+        onChange(updatesPayload);
+      } catch (error) {
+        console.error('Failed to update task positions:', error);
+        // Rollback to previous state on error
+        setTasks(previousTasks);
+      }
     },
     [onChange, project?.workflowId, statusKeyToIdMap, tasks, validateTransition]
   );
diff --git a/src/features/tasks/components/task-view-switcher.tsx b/src/features/tasks/components/task-view-switcher.tsx
index 2e39a9a7..8284cb04 100644
--- a/src/features/tasks/components/task-view-switcher.tsx
+++ b/src/features/tasks/components/task-view-switcher.tsx
@@ -28,6 +28,7 @@ import EnhancedBacklogScreen from "@/features/sprints/components/enhanced-backlo
 import { ProjectSetupOverlay } from "@/features/sprints/components/project-setup-overlay";
 import { useGetWorkItems, useGetSprints, SprintStatus, WorkItemStatus, WorkItemPriority, PopulatedWorkItem, useBulkUpdateWorkItems } from "@/features/sprints";
 import { CompleteSprintModal } from "@/features/sprints/components/complete-sprint-modal";
+import { CreateWorkItemModal } from "@/features/sprints";
 
 
 import { useTaskFilters } from "../hooks/use-task-filters";
@@ -403,6 +404,7 @@ export const TaskViewSwitcher = ({
               Complete Sprint {setupState.activeSprint.name}
             </Button>
           )}
+      
         </div>
 
 
@@ -543,6 +545,7 @@ export const TaskViewSwitcher = ({
           />
         )
       }
+      <CreateWorkItemModal />
     </Tabs >
   );
 };

From 743c099b4b03b42cdef7dfbc5022e9161600a6f9 Mon Sep 17 00:00:00 2001
From: manideepyelugam <yelugammanideep@gmail.com>
Date: Tue, 10 Feb 2026 10:58:17 +0530
Subject: [PATCH 2/2] fixed issues

---
 .../projects/[projectId]/sprints/client.tsx   |  17 ++-
 src/features/tasks/components/kanban-card.tsx |  55 +++++----
 .../tasks/components/task-actions.tsx         |  31 +++++-
 .../tasks/components/task-preview-modal.tsx   |  17 ++-
 .../permissions/resolveUserProjectAccess.ts   |  50 +++++++--
 src/lib/project-rbac.ts                       | 104 ++++++++++++++++--
 6 files changed, 232 insertions(+), 42 deletions(-)

diff --git a/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/sprints/client.tsx b/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/sprints/client.tsx
index 8dce224d..9028aff1 100644
--- a/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/sprints/client.tsx
+++ b/src/app/(dashboard)/workspaces/[workspaceId]/projects/[projectId]/sprints/client.tsx
@@ -3,11 +3,26 @@
 import { useParams } from "next/navigation";
 
 import { SprintBoard } from "@/features/sprints/components/sprint-board";
+import { ProjectPermissionGuard } from "@/components/project-permission-guard";
+import { ProjectPermissionKey } from "@/lib/permissions/types";
 
 export const SprintClient = () => {
   const params = useParams();
   const workspaceId = params.workspaceId as string;
   const projectId = params.projectId as string;
 
-  return <SprintBoard workspaceId={workspaceId} projectId={projectId} />;
+  return (
+    <ProjectPermissionGuard
+      permission={ProjectPermissionKey.VIEW_SPRINTS}
+      projectId={projectId}
+      workspaceId={workspaceId}
+      fallback={
+        <div className="flex items-center justify-center h-[50vh]">
+          <p className="text-muted-foreground text-sm">You don&apos;t have permission to view the Sprint Board.</p>
+        </div>
+      }
+    >
+      <SprintBoard workspaceId={workspaceId} projectId={projectId} />
+    </ProjectPermissionGuard>
+  );
 };
diff --git a/src/features/tasks/components/kanban-card.tsx b/src/features/tasks/components/kanban-card.tsx
index f99fb91e..c74da7bb 100644
--- a/src/features/tasks/components/kanban-card.tsx
+++ b/src/features/tasks/components/kanban-card.tsx
@@ -59,10 +59,9 @@ export const KanbanCard = ({
         >
             <div className="flex p-4 flex-col items-start justify-between gap-x-2">
 
-                <div className="flex-1 flex w-full justify-between items-start">
-
+                {/* Row 1: Work Item Type + Priority + Actions */}
+                <div className="flex w-full justify-between items-center">
                     <div className="flex gap-2 items-center">
-
                         {task.type && (
                             <WorkItemIcon
                                 type={task.type}
@@ -70,7 +69,6 @@ export const KanbanCard = ({
                                 project={project}
                             />
                         )}
-
                         {task.priority && (
                             <PriorityBadge
                                 className="px-1"
@@ -78,26 +76,8 @@ export const KanbanCard = ({
                                 color={customPriority?.color}
                             />
                         )}
-
-                        {task.labels && task.labels.length > 0 && (
-                            <div className="flex  gap-1 ">
-                                {task.labels.slice(0, 2).map((label, index) => {
-                                    const customLabel = customLabels.find(l => l.name === label);
-                                    return (
-                                        <LabelBadge
-                                            key={index}
-                                            label={label}
-                                            color={customLabel?.color}
-                                        />
-                                    );
-                                })}
-
-                            </div>
-                        )}
-
                     </div>
 
-
                     <div className="flex items-center gap-1">
                         <TaskActions
                             id={task.$id}
@@ -112,9 +92,38 @@ export const KanbanCard = ({
                             />
                         </TaskActions>
                     </div>
-
                 </div>
 
+                {/* Row 2-3: Labels (max 2 rows with overflow +N) */}
+                {task.labels && task.labels.length > 0 && (
+                    <div className="flex flex-wrap gap-1 mt-2 max-h-[3.25rem] overflow-hidden items-start w-full">
+                        {(() => {
+                            const maxVisible = 4; // Show up to 4 labels across 2 rows
+                            const visibleLabels = task.labels.slice(0, maxVisible);
+                            const hiddenCount = task.labels.length - maxVisible;
+                            return (
+                                <>
+                                    {visibleLabels.map((label, index) => {
+                                        const customLabel = customLabels.find(l => l.name === label);
+                                        return (
+                                            <LabelBadge
+                                                key={index}
+                                                label={label}
+                                                color={customLabel?.color}
+                                            />
+                                        );
+                                    })}
+                                    {hiddenCount > 0 && (
+                                        <span className="text-[10px] text-muted-foreground bg-muted rounded-full px-1.5 py-0.5 border border-border whitespace-nowrap">
+                                            +{hiddenCount}
+                                        </span>
+                                    )}
+                                </>
+                            );
+                        })()}
+                    </div>
+                )}
+
                 <div className="flex items-start gap-2 mt-4 cursor-pointer">
                     {task.flagged && (
                         <FlagIcon className="size-4 fill-red-500 text-red-500 shrink-0 mt-0.5" />
diff --git a/src/features/tasks/components/task-actions.tsx b/src/features/tasks/components/task-actions.tsx
index 66e312be..37f67724 100644
--- a/src/features/tasks/components/task-actions.tsx
+++ b/src/features/tasks/components/task-actions.tsx
@@ -1,5 +1,6 @@
-import { ExternalLink, TrashIcon, FlagIcon } from "lucide-react";
+import { ExternalLink, TrashIcon, FlagIcon, Share2 } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { toast } from "sonner";
 
 import { useConfirm } from "@/hooks/use-confirm";
 import {
@@ -76,6 +77,27 @@ export const TaskActions = ({
     router.push(`/workspaces/${workspaceId}/tasks/${id}`);
   };
 
+  const onShare = async () => {
+    const url = typeof window !== "undefined"
+      ? `${window.location.origin}/workspaces/${workspaceId}/tasks/${id}`
+      : `/workspaces/${workspaceId}/tasks/${id}`;
+    try {
+      if (navigator.share) {
+        await navigator.share({ title: "Work Item", url });
+      } else {
+        await navigator.clipboard.writeText(url);
+        toast.success("Link copied to clipboard");
+      }
+    } catch {
+      try {
+        await navigator.clipboard.writeText(url);
+        toast.success("Link copied to clipboard");
+      } catch {
+        toast.error("Failed to share");
+      }
+    }
+  };
+
   const canEditTask = canEdit && (isWorkspaceAdmin || canEditTasksProject || can(PERMISSIONS.WORKITEM_UPDATE));
   const canDeleteTask = canDelete && (isWorkspaceAdmin || canDeleteTasksProject || can(PERMISSIONS.WORKITEM_DELETE));
 
@@ -92,6 +114,13 @@ export const TaskActions = ({
             <ExternalLink className="size-4 mr-2 stroke-2" />
             Work Item Details
           </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={onShare}
+            className="font-medium p-[10px]"
+          >
+            <Share2 className="size-4 mr-2 stroke-2" />
+            Share Work Item
+          </DropdownMenuItem>
           {canEditTask && (
             <DropdownMenuItem
               onClick={onToggleFlag}
diff --git a/src/features/tasks/components/task-preview-modal.tsx b/src/features/tasks/components/task-preview-modal.tsx
index d3ddabb0..66511d5e 100644
--- a/src/features/tasks/components/task-preview-modal.tsx
+++ b/src/features/tasks/components/task-preview-modal.tsx
@@ -49,6 +49,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { WorkItemIcon } from "@/features/timeline/components/work-item-icon";
 import { Badge } from "@/components/ui/badge";
 import { RichTextEditor, setMentionMembers } from "@/components/editor";
+import { LabelSelector } from "./label-management";
 
 // Default work item type labels
 const typeLabels: Record<string, string> = {
@@ -488,7 +489,21 @@ const TaskPreviewContent = ({ task, workspaceId, onEdit, onClose, onAttachmentPr
               </div>
 
               {/* Labels */}
-              {/* If we want to support labels, we need LabelSelector. Skipping for now to keep it simpler unless requested, as it requires complex project label fetching */}
+              <div>
+                <label className="text-xs text-muted-foreground mb-1.5 block">Labels</label>
+                <LabelSelector
+                  selectedLabels={task.labels || []}
+                  onLabelsChange={canEdit ? (labels) => handleUpdate({ labels }) : () => {}}
+                  availableLabels={[
+                    ...(project?.customLabels?.map((l: { name: string }) => l.name) || []),
+                    "Bug", "Feature", "Improvement", "Documentation", "Design", "Research",
+                    "Frontend", "Backend",
+                  ].filter((v, i, a) => a.indexOf(v) === i)}
+                  placeholder="Add label..."
+                  className="h-8 text-xs w-full"
+                  disabled={!canEdit}
+                />
+              </div>
 
               {/* Time Estimate */}
               <div>
diff --git a/src/lib/permissions/resolveUserProjectAccess.ts b/src/lib/permissions/resolveUserProjectAccess.ts
index dfb8d097..be3fc7b0 100644
--- a/src/lib/permissions/resolveUserProjectAccess.ts
+++ b/src/lib/permissions/resolveUserProjectAccess.ts
@@ -257,12 +257,48 @@ export async function resolveUserProjectAccess(
         }
 
         const membership = memberships.documents[0];
-        // Handle both patterns: inline role enum or roleId reference
-        // If role field is set, use it directly; otherwise default to MEMBER
-        const role = (membership.role as ProjectMemberRole) || ProjectMemberRole.MEMBER;
+        
+        // Handle BOTH patterns for role resolution:
+        // Pattern A: `role` field has ProjectMemberRole enum value ("PROJECT_OWNER", "PROJECT_ADMIN", etc.)
+        // Pattern B: `roleId` references a role document, `roleName` is denormalized ("OWNER", "ADMIN", etc.)
+        let role: ProjectMemberRole = ProjectMemberRole.MEMBER; // safe default
+        
+        // 1) Try the `role` enum field first
+        const rawRole = membership.role as string | undefined;
+        if (rawRole && Object.values(ProjectMemberRole).includes(rawRole as ProjectMemberRole)) {
+            role = rawRole as ProjectMemberRole;
+        }
+        // 2) Fallback: map `roleName` to ProjectMemberRole
+        else {
+            const roleName = (membership as unknown as { roleName?: string }).roleName;
+            if (roleName) {
+                const roleNameMap: Record<string, ProjectMemberRole> = {
+                    "OWNER": ProjectMemberRole.PROJECT_OWNER,
+                    "ADMIN": ProjectMemberRole.PROJECT_ADMIN,
+                    "MEMBER": ProjectMemberRole.MEMBER,
+                    "VIEWER": ProjectMemberRole.VIEWER,
+                };
+                role = roleNameMap[roleName.toUpperCase()] || ProjectMemberRole.MEMBER;
+            }
+        }
 
-        // 2. Get role-based permissions
-        const rolePermissions = ROLE_PERMISSIONS[role] || [];
+        // Get role-based permissions from the enum mapping
+        let rolePermissions: string[] = [...(ROLE_PERMISSIONS[role] || [])];
+        
+        // Also fetch permissions from the roleId-referenced role document (if it exists)
+        const roleId = (membership as unknown as { roleId?: string }).roleId;
+        if (roleId) {
+            try {
+                const { PROJECT_ROLES_ID } = await import("@/config");
+                const roleDoc = await databases.getDocument(DATABASE_ID, PROJECT_ROLES_ID, roleId);
+                const docPermissions = roleDoc.permissions as string[] | undefined;
+                if (docPermissions && Array.isArray(docPermissions)) {
+                    rolePermissions = [...new Set([...rolePermissions, ...docPermissions])];
+                }
+            } catch {
+                // Role document fetch failed - continue with enum-based permissions
+            }
+        }
 
         // 3. Get team memberships
         const teamMemberships = await databases.listDocuments<ProjectTeamMember>(
@@ -373,8 +409,8 @@ export function hasProjectPermission(
     access: ProjectAccessResult,
     permission: ProjectPermissionKey | string
 ): boolean {
-    // Owner always has access
-    if (access.isOwner) return true;
+    // Owner or Admin always has access
+    if (access.isOwner || access.isAdmin) return true;
 
     return access.permissions.includes(permission);
 }
diff --git a/src/lib/project-rbac.ts b/src/lib/project-rbac.ts
index b2e84291..e7f06c41 100644
--- a/src/lib/project-rbac.ts
+++ b/src/lib/project-rbac.ts
@@ -3,6 +3,7 @@ import { DATABASE_ID, PROJECT_MEMBERS_ID, PROJECT_ROLES_ID, MEMBERS_ID, PROJECT_
 import { ProjectMember, ProjectRole, ProjectPermissionResult } from "@/features/project-members/types";
 import { PROJECT_PERMISSIONS, DEFAULT_PROJECT_ROLES } from "./project-permissions";
 import { MemberRole } from "@/features/members/types";
+import { ROLE_PERMISSIONS } from "@/lib/permissions/resolveUserProjectAccess";
 
 /**
  * @deprecated This module is deprecated.
@@ -145,6 +146,60 @@ export async function getProjectPermissionResult(
     projectId: string
 ): Promise<ProjectPermissionResult> {
     try {
+        // --- Workspace Admin / Org Admin Override ---
+        // Check if user is a workspace admin or org admin and grant full permissions
+        try {
+            const { PROJECTS_ID, WORKSPACES_ID, ORGANIZATION_MEMBERS_ID } = await import("@/config");
+            const project = await databases.getDocument(DATABASE_ID, PROJECTS_ID, projectId);
+            const workspaceId = project.workspaceId;
+
+            // Check workspace admin
+            const isWsAdmin = await checkWorkspaceAdmin(databases, workspaceId, userId);
+            if (isWsAdmin) {
+                return {
+                    projectId,
+                    userId,
+                    permissions: Object.values(PROJECT_PERMISSIONS),
+                    roles: [{ roleId: "ws-admin", roleName: "Workspace Admin", teamId: "", teamName: "" }],
+                    isProjectAdmin: true,
+                };
+            }
+
+            // Check org admin
+            let organizationId: string | null = null;
+            try {
+                const workspace = await databases.getDocument(DATABASE_ID, WORKSPACES_ID, workspaceId);
+                organizationId = workspace.organizationId || null;
+            } catch { /* ignore */ }
+
+            if (organizationId) {
+                try {
+                    const orgMembers = await databases.listDocuments(
+                        DATABASE_ID,
+                        ORGANIZATION_MEMBERS_ID,
+                        [
+                            Query.equal("organizationId", organizationId),
+                            Query.equal("userId", userId),
+                            Query.equal("status", "ACTIVE"),
+                        ]
+                    );
+                    if (orgMembers.total > 0) {
+                        const orgRole = orgMembers.documents[0].role;
+                        if (["OWNER", "ADMIN", "MODERATOR"].includes(orgRole)) {
+                            return {
+                                projectId,
+                                userId,
+                                permissions: Object.values(PROJECT_PERMISSIONS),
+                                roles: [{ roleId: "org-admin", roleName: `Org ${orgRole}`, teamId: "", teamName: "" }],
+                                isProjectAdmin: true,
+                            };
+                        }
+                    }
+                } catch { /* ignore */ }
+            }
+        } catch { /* project fetch failed, continue with member-based resolution */ }
+
+        // --- Standard member-based resolution ---
         // Fetch all project memberships
         let memberships;
         try {
@@ -177,15 +232,22 @@ export async function getProjectPermissionResult(
             };
         }
 
-        // Collect role IDs
-        const roleIds = [...new Set(memberships.documents.map((m) => m.roleId))];
+        // Collect role IDs (filter out empty/undefined)
+        const roleIds = [...new Set(memberships.documents.map((m) => m.roleId).filter(Boolean))];
 
-        // Fetch roles
-        const roles = await databases.listDocuments<ProjectRole>(
-            DATABASE_ID,
-            PROJECT_ROLES_ID,
-            [Query.equal("$id", roleIds)]
-        );
+        // Fetch roles (only if there are valid roleIds)
+        let roles: { documents: ProjectRole[] } = { documents: [] };
+        if (roleIds.length > 0) {
+            try {
+                roles = await databases.listDocuments<ProjectRole>(
+                    DATABASE_ID,
+                    PROJECT_ROLES_ID,
+                    [Query.equal("$id", roleIds)]
+                );
+            } catch {
+                // Role fetch failed - continue with fallback
+            }
+        }
 
         // Build role-to-team mapping and collect role permissions
         const roleInfos: ProjectPermissionResult["roles"] = [];
@@ -204,6 +266,18 @@ export async function getProjectPermissionResult(
                     allPermissions.add(permission);
                 }
             }
+
+            // Fallback: Also check the `role` field (PROJECT_OWNER, PROJECT_ADMIN, MEMBER, VIEWER)
+            // This handles cases where members have a direct role but no roleId
+            const memberRole = (membership as unknown as { role?: string }).role;
+            if (memberRole) {
+                const rolePerms = ROLE_PERMISSIONS[memberRole as keyof typeof ROLE_PERMISSIONS];
+                if (rolePerms) {
+                    for (const perm of rolePerms) {
+                        allPermissions.add(perm);
+                    }
+                }
+            }
         }
 
         // ============================================================
@@ -259,8 +333,20 @@ export async function getProjectPermissionResult(
         }
 
         // Check if user is a project admin (has all permissions from default Project Admin role)
+        // Also check role field, roleName field, and role document name for OWNER/ADMIN
         const projectAdminPermissions = DEFAULT_PROJECT_ROLES.PROJECT_ADMIN.permissions;
-        const isProjectAdmin = projectAdminPermissions.every((p) => allPermissions.has(p));
+        const hasAdminPerms = projectAdminPermissions.every((p) => allPermissions.has(p));
+        const hasOwnerOrAdminRole = memberships.documents.some((m) => {
+            const mRole = (m as unknown as { role?: string }).role;
+            const mRoleName = (m as unknown as { roleName?: string }).roleName;
+            return mRole === "PROJECT_OWNER" || mRole === "PROJECT_ADMIN" ||
+                   mRoleName === "OWNER" || mRoleName === "ADMIN";
+        });
+        // Also check from role documents
+        const hasOwnerOrAdminRoleDoc = roleInfos.some(
+            (r) => r.roleName === "OWNER" || r.roleName === "ADMIN"
+        );
+        const isProjectAdmin = hasAdminPerms || hasOwnerOrAdminRole || hasOwnerOrAdminRoleDoc;
 
         return {
             projectId,