Merge branch 'develop' of github.com:makeplane/plane into chore/url_patterns

apiserver/plane/api/views/cycle.py

@@ -80,7 +80,7 @@ class CycleViewSet(BaseViewSet):
             issue_id=str(self.kwargs.get("pk", None)),
             project_id=str(self.kwargs.get("project_id", None)),
             current_instance=None,
-            epoch = int(timezone.now().timestamp())
+            epoch=int(timezone.now().timestamp())
         )
 
         return super().perform_destroy(instance)
@@ -102,48 +102,84 @@ class CycleViewSet(BaseViewSet):
             .select_related("workspace")
             .select_related("owned_by")
             .annotate(is_favorite=Exists(subquery))
-            .annotate(total_issues=Count("issue_cycle"))
+            .annotate(
+                total_issues=Count(
+                    "issue_cycle",
+                    filter=Q(
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
             .annotate(
                 completed_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="completed"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 cancelled_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="cancelled"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="cancelled",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 started_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="started"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 unstarted_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="unstarted"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="unstarted",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 backlog_issues=Count(
                     "issue_cycle__issue__state__group",
-                    filter=Q(issue_cycle__issue__state__group="backlog"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="backlog",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(total_estimates=Sum("issue_cycle__issue__estimate_point"))
             .annotate(
                 completed_estimates=Sum(
                     "issue_cycle__issue__estimate_point",
-                    filter=Q(issue_cycle__issue__state__group="completed"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 started_estimates=Sum(
                     "issue_cycle__issue__estimate_point",
-                    filter=Q(issue_cycle__issue__state__group="started"),
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
                 )
             )
             .prefetch_related(
@@ -196,17 +232,30 @@ class CycleViewSet(BaseViewSet):
                         .annotate(assignee_id=F("assignees__id"))
                         .annotate(avatar=F("assignees__avatar"))
                         .values("display_name", "assignee_id", "avatar")
-                        .annotate(total_issues=Count("assignee_id"))
+                        .annotate(
+                            total_issues=Count(
+                                "assignee_id",
+                                filter=Q(archived_at__isnull=True, is_draft=False),
+                            ),
+                        )
                         .annotate(
                             completed_issues=Count(
                                 "assignee_id",
-                                filter=Q(completed_at__isnull=False),
+                                filter=Q(
+                                    completed_at__isnull=False,
+                                    archived_at__isnull=True,
+                                    is_draft=False,
+                                ),
                             )
                         )
                         .annotate(
                             pending_issues=Count(
                                 "assignee_id",
-                                filter=Q(completed_at__isnull=True),
+                                filter=Q(
+                                    completed_at__isnull=True,
+                                    archived_at__isnull=True,
+                                    is_draft=False,
+                                ),
                             )
                         )
                         .order_by("display_name")
@@ -222,17 +271,30 @@ class CycleViewSet(BaseViewSet):
                         .annotate(color=F("labels__color"))
                         .annotate(label_id=F("labels__id"))
                         .values("label_name", "color", "label_id")
-                        .annotate(total_issues=Count("label_id"))
+                        .annotate(
+                            total_issues=Count(
+                                "label_id",
+                                filter=Q(archived_at__isnull=True, is_draft=False),
+                            )
+                        )
                         .annotate(
                             completed_issues=Count(
                                 "label_id",
-                                filter=Q(completed_at__isnull=False),
+                                filter=Q(
+                                    completed_at__isnull=False,
+                                    archived_at__isnull=True,
+                                    is_draft=False,
+                                ),
                             )
                         )
                         .annotate(
                             pending_issues=Count(
                                 "label_id",
-                                filter=Q(completed_at__isnull=True),
+                                filter=Q(
+                                    completed_at__isnull=True,
+                                    archived_at__isnull=True,
+                                    is_draft=False,
+                                ),
                             )
                         )
                         .order_by("label_name")
@@ -385,17 +447,30 @@ class CycleViewSet(BaseViewSet):
                 .values(
                     "first_name", "last_name", "assignee_id", "avatar", "display_name"
                 )
-                .annotate(total_issues=Count("assignee_id"))
+                .annotate(
+                    total_issues=Count(
+                        "assignee_id",
+                        filter=Q(archived_at__isnull=True, is_draft=False),
+                    ),
+                )
                 .annotate(
                     completed_issues=Count(
                         "assignee_id",
-                        filter=Q(completed_at__isnull=False),
+                        filter=Q(
+                            completed_at__isnull=False,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .annotate(
                     pending_issues=Count(
                         "assignee_id",
-                        filter=Q(completed_at__isnull=True),
+                        filter=Q(
+                            completed_at__isnull=True,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .order_by("first_name", "last_name")
@@ -412,17 +487,30 @@ class CycleViewSet(BaseViewSet):
                 .annotate(color=F("labels__color"))
                 .annotate(label_id=F("labels__id"))
                 .values("label_name", "color", "label_id")
-                .annotate(total_issues=Count("label_id"))
+                .annotate(
+                    total_issues=Count(
+                        "label_id",
+                        filter=Q(archived_at__isnull=True, is_draft=False),
+                    ),
+                )
                 .annotate(
                     completed_issues=Count(
                         "label_id",
-                        filter=Q(completed_at__isnull=False),
+                        filter=Q(
+                            completed_at__isnull=False,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .annotate(
                     pending_issues=Count(
                         "label_id",
-                        filter=Q(completed_at__isnull=True),
+                        filter=Q(
+                            completed_at__isnull=True,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .order_by("label_name")
@@ -488,7 +576,7 @@ class CycleIssueViewSet(BaseViewSet):
             issue_id=str(self.kwargs.get("pk", None)),
             project_id=str(self.kwargs.get("project_id", None)),
             current_instance=None,
-            epoch = int(timezone.now().timestamp())
+            epoch=int(timezone.now().timestamp())
         )
         return super().perform_destroy(instance)
 
@@ -664,7 +752,7 @@ class CycleIssueViewSet(BaseViewSet):
                         ),
                     }
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
 
             # Return all Cycle Issues

apiserver/plane/api/views/importer.py

@@ -384,7 +384,7 @@ class BulkImportIssuesEndpoint(BaseAPIView):
                         sort_order=largest_sort_order,
                         start_date=issue_data.get("start_date", None),
                         target_date=issue_data.get("target_date", None),
-                        priority=issue_data.get("priority", None),
+                        priority=issue_data.get("priority", "none"),
                         created_by=request.user,
                     )
                 )

apiserver/plane/api/views/inbox.py

@@ -173,12 +173,12 @@ class InboxIssueViewSet(BaseViewSet):
                 )
 
             # Check for valid priority
-            if not request.data.get("issue", {}).get("priority", None) in [
+            if not request.data.get("issue", {}).get("priority", "none") in [
                 "low",
                 "medium",
                 "high",
                 "urgent",
-                None,
+                "none",
             ]:
                 return Response(
                     {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
@@ -213,7 +213,7 @@ class InboxIssueViewSet(BaseViewSet):
                 issue_id=str(issue.id),
                 project_id=str(project_id),
                 current_instance=None,
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
             # create an inbox issue
             InboxIssue.objects.create(
@@ -278,7 +278,7 @@ class InboxIssueViewSet(BaseViewSet):
                                 IssueSerializer(current_instance).data,
                                 cls=DjangoJSONEncoder,
                             ),
-                            epoch = int(timezone.now().timestamp())
+                            epoch=int(timezone.now().timestamp())
                         )
                     issue_serializer.save()
                 else:
@@ -480,12 +480,12 @@ class InboxIssuePublicViewSet(BaseViewSet):
                 )
 
             # Check for valid priority
-            if not request.data.get("issue", {}).get("priority", None) in [
+            if not request.data.get("issue", {}).get("priority", "none") in [
                 "low",
                 "medium",
                 "high",
                 "urgent",
-                None,
+                "none",
             ]:
                 return Response(
                     {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
@@ -520,7 +520,7 @@ class InboxIssuePublicViewSet(BaseViewSet):
                 issue_id=str(issue.id),
                 project_id=str(project_id),
                 current_instance=None,
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
             # create an inbox issue
             InboxIssue.objects.create(
@@ -585,7 +585,7 @@ class InboxIssuePublicViewSet(BaseViewSet):
                             IssueSerializer(current_instance).data,
                             cls=DjangoJSONEncoder,
                         ),
-                        epoch = int(timezone.now().timestamp())
+                        epoch=int(timezone.now().timestamp())
                     )
                 issue_serializer.save()
                 return Response(issue_serializer.data, status=status.HTTP_200_OK)

apiserver/plane/api/views/issue.py

@@ -130,7 +130,7 @@ class IssueViewSet(BaseViewSet):
                 current_instance=json.dumps(
                     IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
                 ),
-                epoch  = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
 
         return super().perform_update(serializer)
@@ -151,7 +151,7 @@ class IssueViewSet(BaseViewSet):
                 current_instance=json.dumps(
                     IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
         return super().perform_destroy(instance)
 
@@ -318,7 +318,7 @@ class IssueViewSet(BaseViewSet):
                     issue_id=str(serializer.data.get("id", None)),
                     project_id=str(project_id),
                     current_instance=None,
-                    epoch = int(timezone.now().timestamp())
+                    epoch=int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -330,7 +330,12 @@ class IssueViewSet(BaseViewSet):
 
     def retrieve(self, request, slug, project_id, pk=None):
         try:
-            issue = Issue.issue_objects.get(
+            issue = Issue.issue_objects.annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            ).get(
                 workspace__slug=slug, project_id=project_id, pk=pk
             )
             return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
@@ -572,7 +577,7 @@ class IssueCommentViewSet(BaseViewSet):
             issue_id=str(self.kwargs.get("issue_id")),
             project_id=str(self.kwargs.get("project_id")),
             current_instance=None,
-            epoch = int(timezone.now().timestamp())
+            epoch=int(timezone.now().timestamp())
         )
 
     def perform_update(self, serializer):
@@ -591,7 +596,7 @@ class IssueCommentViewSet(BaseViewSet):
                     IssueCommentSerializer(current_instance).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
 
         return super().perform_update(serializer)
@@ -613,7 +618,7 @@ class IssueCommentViewSet(BaseViewSet):
                     IssueCommentSerializer(current_instance).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
         return super().perform_destroy(instance)
 
@@ -897,7 +902,7 @@ class IssueLinkViewSet(BaseViewSet):
             issue_id=str(self.kwargs.get("issue_id")),
             project_id=str(self.kwargs.get("project_id")),
             current_instance=None,
-            epoch = int(timezone.now().timestamp())
+            epoch=int(timezone.now().timestamp())
         )
 
     def perform_update(self, serializer):
@@ -916,7 +921,7 @@ class IssueLinkViewSet(BaseViewSet):
                     IssueLinkSerializer(current_instance).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
 
         return super().perform_update(serializer)
@@ -938,7 +943,7 @@ class IssueLinkViewSet(BaseViewSet):
                     IssueLinkSerializer(current_instance).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
         return super().perform_destroy(instance)
 
@@ -1017,7 +1022,7 @@ class IssueAttachmentEndpoint(BaseAPIView):
                         serializer.data,
                         cls=DjangoJSONEncoder,
                     ),
-                    epoch = int(timezone.now().timestamp())
+                    epoch=int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -1040,7 +1045,7 @@ class IssueAttachmentEndpoint(BaseAPIView):
                 issue_id=str(self.kwargs.get("issue_id", None)),
                 project_id=str(self.kwargs.get("project_id", None)),
                 current_instance=None,
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
 
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -1243,7 +1248,7 @@ class IssueArchiveViewSet(BaseViewSet):
                 issue_id=str(issue.id),
                 project_id=str(project_id),
                 current_instance=None,
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
 
             return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
@@ -1448,7 +1453,7 @@ class IssueReactionViewSet(BaseViewSet):
             issue_id=str(self.kwargs.get("issue_id", None)),
             project_id=str(self.kwargs.get("project_id", None)),
             current_instance=None,
-            epoch = int(timezone.now().timestamp())
+            epoch=int(timezone.now().timestamp())
         )
 
     def destroy(self, request, slug, project_id, issue_id, reaction_code):
@@ -1472,7 +1477,7 @@ class IssueReactionViewSet(BaseViewSet):
                         "identifier": str(issue_reaction.id),
                     }
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
             issue_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -1521,7 +1526,7 @@ class CommentReactionViewSet(BaseViewSet):
             issue_id=None,
             project_id=str(self.kwargs.get("project_id", None)),
             current_instance=None,
-            epoch = int(timezone.now().timestamp())
+            epoch=int(timezone.now().timestamp())
         )
 
     def destroy(self, request, slug, project_id, comment_id, reaction_code):
@@ -1546,7 +1551,7 @@ class CommentReactionViewSet(BaseViewSet):
                         "comment_id": str(comment_id),
                     }
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
             comment_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -1643,7 +1648,7 @@ class IssueCommentPublicViewSet(BaseViewSet):
                     issue_id=str(issue_id),
                     project_id=str(project_id),
                     current_instance=None,
-                    epoch = int(timezone.now().timestamp())
+                    epoch=int(timezone.now().timestamp())
                 )
                 if not ProjectMember.objects.filter(
                     project_id=project_id,
@@ -1693,7 +1698,7 @@ class IssueCommentPublicViewSet(BaseViewSet):
                         IssueCommentSerializer(comment).data,
                         cls=DjangoJSONEncoder,
                     ),
-                    epoch = int(timezone.now().timestamp())
+                    epoch=int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -1727,7 +1732,7 @@ class IssueCommentPublicViewSet(BaseViewSet):
                     IssueCommentSerializer(comment).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
             comment.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -1802,7 +1807,7 @@ class IssueReactionPublicViewSet(BaseViewSet):
                     issue_id=str(self.kwargs.get("issue_id", None)),
                     project_id=str(self.kwargs.get("project_id", None)),
                     current_instance=None,
-                    epoch = int(timezone.now().timestamp())
+                    epoch=int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -1847,7 +1852,7 @@ class IssueReactionPublicViewSet(BaseViewSet):
                         "identifier": str(issue_reaction.id),
                     }
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
             issue_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -1921,7 +1926,7 @@ class CommentReactionPublicViewSet(BaseViewSet):
                     issue_id=None,
                     project_id=str(self.kwargs.get("project_id", None)),
                     current_instance=None,
-                    epoch = int(timezone.now().timestamp())
+                    epoch=int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -1973,7 +1978,7 @@ class CommentReactionPublicViewSet(BaseViewSet):
                         "comment_id": str(comment_id),
                     }
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
             comment_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -2037,7 +2042,7 @@ class IssueVotePublicViewSet(BaseViewSet):
                 issue_id=str(self.kwargs.get("issue_id", None)),
                 project_id=str(self.kwargs.get("project_id", None)),
                 current_instance=None,
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
             serializer = IssueVoteSerializer(issue_vote)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
@@ -2072,7 +2077,7 @@ class IssueVotePublicViewSet(BaseViewSet):
                         "identifier": str(issue_vote.id),
                     }
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
             issue_vote.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -2106,7 +2111,7 @@ class IssueRelationViewSet(BaseViewSet):
                     IssueRelationSerializer(current_instance).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
         return super().perform_destroy(instance)
 
@@ -2140,7 +2145,7 @@ class IssueRelationViewSet(BaseViewSet):
                 issue_id=str(issue_id),
                 project_id=str(project_id),
                 current_instance=None,
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
             
             if relation == "blocking":
@@ -2412,7 +2417,7 @@ class IssueDraftViewSet(BaseViewSet):
                 current_instance=json.dumps(
                     IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
                 ),
-                epoch  = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
 
         return super().perform_update(serializer)
@@ -2434,6 +2439,7 @@ class IssueDraftViewSet(BaseViewSet):
                 current_instance=json.dumps(
                     IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
                 ),
+                epoch=int(timezone.now().timestamp())
             )
         return super().perform_destroy(instance)
 
@@ -2597,7 +2603,7 @@ class IssueDraftViewSet(BaseViewSet):
                     issue_id=str(serializer.data.get("id", None)),
                     project_id=str(project_id),
                     current_instance=None,
-                    epoch = int(timezone.now().timestamp())
+                    epoch=int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

apiserver/plane/api/views/module.py

@@ -40,6 +40,7 @@ from plane.utils.grouper import group_results
 from plane.utils.issue_filters import issue_filters
 from plane.utils.analytics_plot import burndown_plot
 
+
 class ModuleViewSet(BaseViewSet):
     model = Module
     permission_classes = [
@@ -78,35 +79,63 @@ class ModuleViewSet(BaseViewSet):
                     queryset=ModuleLink.objects.select_related("module", "created_by"),
                 )
             )
-            .annotate(total_issues=Count("issue_module"))
+            .annotate(
+                total_issues=Count(
+                    "issue_module",
+                    filter=Q(
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
+                ),
+            )
             .annotate(
                 completed_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="completed"),
+                    filter=Q(
+                        issue_module__issue__state__group="completed",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 cancelled_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="cancelled"),
+                    filter=Q(
+                        issue_module__issue__state__group="cancelled",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 started_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="started"),
+                    filter=Q(
+                        issue_module__issue__state__group="started",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 unstarted_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="unstarted"),
+                    filter=Q(
+                        issue_module__issue__state__group="unstarted",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .annotate(
                 backlog_issues=Count(
                     "issue_module__issue__state__group",
-                    filter=Q(issue_module__issue__state__group="backlog"),
+                    filter=Q(
+                        issue_module__issue__state__group="backlog",
+                        issue_module__issue__archived_at__isnull=True,
+                        issue_module__issue__is_draft=False,
+                    ),
                 )
             )
             .order_by(order_by, "name")
@@ -130,7 +159,7 @@ class ModuleViewSet(BaseViewSet):
             issue_id=str(self.kwargs.get("pk", None)),
             project_id=str(self.kwargs.get("project_id", None)),
             current_instance=None,
-            epoch = int(timezone.now().timestamp())
+            epoch=int(timezone.now().timestamp())
         )
 
         return super().perform_destroy(instance)
@@ -179,18 +208,36 @@ class ModuleViewSet(BaseViewSet):
                 .annotate(assignee_id=F("assignees__id"))
                 .annotate(display_name=F("assignees__display_name"))
                 .annotate(avatar=F("assignees__avatar"))
-                .values("first_name", "last_name", "assignee_id", "avatar", "display_name")
-                .annotate(total_issues=Count("assignee_id"))
+                .values(
+                    "first_name", "last_name", "assignee_id", "avatar", "display_name"
+                )
+                .annotate(
+                    total_issues=Count(
+                        "assignee_id",
+                        filter=Q(
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
+                    )
+                )
                 .annotate(
                     completed_issues=Count(
                         "assignee_id",
-                        filter=Q(completed_at__isnull=False),
+                        filter=Q(
+                            completed_at__isnull=False,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .annotate(
                     pending_issues=Count(
                         "assignee_id",
-                        filter=Q(completed_at__isnull=True),
+                        filter=Q(
+                            completed_at__isnull=True,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .order_by("first_name", "last_name")
@@ -206,17 +253,33 @@ class ModuleViewSet(BaseViewSet):
                 .annotate(color=F("labels__color"))
                 .annotate(label_id=F("labels__id"))
                 .values("label_name", "color", "label_id")
-                .annotate(total_issues=Count("label_id"))
+                .annotate(
+                    total_issues=Count(
+                        "label_id",
+                        filter=Q(
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
+                    ),
+                )
                 .annotate(
                     completed_issues=Count(
                         "label_id",
-                        filter=Q(completed_at__isnull=False),
+                        filter=Q(
+                            completed_at__isnull=False,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .annotate(
                     pending_issues=Count(
                         "label_id",
-                        filter=Q(completed_at__isnull=True),
+                        filter=Q(
+                            completed_at__isnull=True,
+                            archived_at__isnull=True,
+                            is_draft=False,
+                        ),
                     )
                 )
                 .order_by("label_name")
@@ -279,7 +342,7 @@ class ModuleIssueViewSet(BaseViewSet):
             issue_id=str(self.kwargs.get("pk", None)),
             project_id=str(self.kwargs.get("project_id", None)),
             current_instance=None,
-            epoch = int(timezone.now().timestamp())
+            epoch=int(timezone.now().timestamp())
         )
         return super().perform_destroy(instance)
 
@@ -447,7 +510,7 @@ class ModuleIssueViewSet(BaseViewSet):
                         ),
                     }
                 ),
-                epoch = int(timezone.now().timestamp())
+                epoch=int(timezone.now().timestamp())
             )
 
             return Response(
@@ -494,7 +557,6 @@ class ModuleLinkViewSet(BaseViewSet):
 
 
 class ModuleFavoriteViewSet(BaseViewSet):
-
     serializer_class = ModuleFavoriteSerializer
     model = ModuleFavorite
 

apiserver/plane/api/views/workspace.py

@@ -1239,13 +1239,21 @@ class WorkspaceUserProfileEndpoint(BaseAPIView):
                     .annotate(
                         created_issues=Count(
                             "project_issue",
-                            filter=Q(project_issue__created_by_id=user_id),
+                            filter=Q(
+                                project_issue__created_by_id=user_id,
+                                project_issue__archived_at__isnull=True,
+                                project_issue__is_draft=False,
+                            ),
                         )
                     )
                     .annotate(
                         assigned_issues=Count(
                             "project_issue",
-                            filter=Q(project_issue__assignees__in=[user_id]),
+                            filter=Q(
+                                project_issue__assignees__in=[user_id],
+                                project_issue__archived_at__isnull=True,
+                                project_issue__is_draft=False,
+                            ),
                         )
                     )
                     .annotate(
@@ -1254,6 +1262,8 @@ class WorkspaceUserProfileEndpoint(BaseAPIView):
                             filter=Q(
                                 project_issue__completed_at__isnull=False,
                                 project_issue__assignees__in=[user_id],
+                                project_issue__archived_at__isnull=True,
+                                project_issue__is_draft=False,
                             ),
                         )
                     )
@@ -1267,6 +1277,8 @@ class WorkspaceUserProfileEndpoint(BaseAPIView):
                                     "started",
                                 ],
                                 project_issue__assignees__in=[user_id],
+                                project_issue__archived_at__isnull=True,
+                                project_issue__is_draft=False,
                             ),
                         )
                     )
@@ -1317,6 +1329,11 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
     def get(self, request, slug, user_id):
         try:
             filters = issue_filters(request.query_params, "GET")
+
+            # Custom ordering for priority and state
+            priority_order = ["urgent", "high", "medium", "low", "none"]
+            state_order = ["backlog", "unstarted", "started", "completed", "cancelled"]
+
             order_by_param = request.GET.get("order_by", "-created_at")
             issue_queryset = (
                 Issue.issue_objects.filter(

apiserver/plane/bgtasks/exporter_expired_task.py

@@ -32,7 +32,7 @@ def delete_old_s3_link():
     else:
         s3 = boto3.client(
             "s3",
-            region_name="ap-south-1",
+            region_name=settings.AWS_REGION,
             aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
             aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
             config=Config(signature_version="s3v4"),

apiserver/plane/bgtasks/issue_activites_task.py

@@ -121,36 +121,20 @@ def track_priority(
     epoch
 ):
     if current_instance.get("priority") != requested_data.get("priority"):
-        if requested_data.get("priority") == None:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("priority"),
-                    new_value=None,
-                    field="priority",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the priority to None",
-                    epoch=epoch,
-                )
-            )
-        else:
-            issue_activities.append(
-                IssueActivity(
-                    issue_id=issue_id,
-                    actor=actor,
-                    verb="updated",
-                    old_value=current_instance.get("priority"),
-                    new_value=requested_data.get("priority"),
-                    field="priority",
-                    project=project,
-                    workspace=project.workspace,
-                    comment=f"updated the priority to {requested_data.get('priority')}",
-                    epoch=epoch,
-                )
+        issue_activities.append(
+            IssueActivity(
+                issue_id=issue_id,
+                actor=actor,
+                verb="updated",
+                old_value=current_instance.get("priority"),
+                new_value=requested_data.get("priority"),
+                field="priority",
+                project=project,
+                workspace=project.workspace,
+                comment=f"updated the priority to {requested_data.get('priority')}",
+                epoch=epoch,
             )
+        )
 
 
 # Track chnages in state of the issue

apiserver/plane/bgtasks/issue_automation_task.py

@@ -77,7 +77,7 @@ def archive_old_issues():
                             project_id=project_id,
                             current_instance=None,
                             subscriber=False,
-                            epoch = int(timezone.now().timestamp())
+                            epoch=int(timezone.now().timestamp())
                         )
                         for issue in updated_issues
                     ]
@@ -149,7 +149,7 @@ def close_old_issues():
                             project_id=project_id,
                             current_instance=None,
                             subscriber=False,
-                            epoch = int(timezone.now().timestamp())
+                            epoch=int(timezone.now().timestamp())
                         )
                         for issue in updated_issues
                     ]

apiserver/plane/db/migrations/0047_auto_20230921_0758.py

@@ -0,0 +1,27 @@
+# Generated by Django 4.2.3 on 2023-09-21 07:58
+
+
+from django.db import migrations
+
+
+def update_priority_history(apps, schema_editor):
+    IssueActivity = apps.get_model("db", "IssueActivity")
+    updated_issue_activity = []
+    for obj in IssueActivity.objects.all():
+        if obj.field == "priority":
+            obj.new_value = obj.new_value or "none"
+            obj.old_value = obj.old_value or "none"
+        updated_issue_activity.append(obj)
+    IssueActivity.objects.bulk_update(
+        updated_issue_activity, ["new_value", "old_value"], batch_size=100
+    )
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("db", "0046_auto_20230919_1421"),
+    ]
+
+    operations = [
+        migrations.RunPython(update_priority_history),
+    ]

apiserver/plane/utils/analytics_plot.py

@@ -74,10 +74,10 @@ def build_graph_plot(queryset, x_axis, y_axis, segment=None):
 
     sorted_data = grouped_data
     if temp_axis == "priority":
-        order = ["low", "medium", "high", "urgent", "None"]
+        order = ["low", "medium", "high", "urgent", "none"]
         sorted_data = {key: grouped_data[key] for key in order if key in grouped_data}
     else:
-        sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] == "None", x[0])))
+        sorted_data = dict(sorted(grouped_data.items(), key=lambda x: (x[0] == "none", x[0])))
     return sorted_data
 
 

apiserver/plane/utils/issue_filters.py

@@ -40,9 +40,6 @@ def filter_priority(params, filter, method):
         priorities = params.get("priority").split(",")
         if len(priorities) and "" not in priorities:
             filter["priority__in"] = priorities
-    else:
-        if params.get("priority", None) and len(params.get("priority")):
-            filter["priority__in"] = params.get("priority")
     return filter
 
 

docker-compose-hub.yml

@@ -1,113 +1,61 @@
 version: "3.8"
 
-x-api-and-worker-env:
-        &api-and-worker-env
-        DEBUG: ${DEBUG}
-        SENTRY_DSN: ${SENTRY_DSN}
-        DJANGO_SETTINGS_MODULE: plane.settings.selfhosted
-        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
-        REDIS_URL: redis://plane-redis:6379/
-        EMAIL_HOST: ${EMAIL_HOST}
-        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
-        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
-        EMAIL_PORT: ${EMAIL_PORT}
-        EMAIL_FROM: ${EMAIL_FROM}
-        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
-        EMAIL_USE_SSL: ${EMAIL_USE_SSL}
-        AWS_REGION: ${AWS_REGION}
-        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
-        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
-        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-        AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
-        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
-        WEB_URL: ${WEB_URL}
-        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
-        DISABLE_COLLECTSTATIC: 1
-        DOCKERIZED: 1
-        OPENAI_API_BASE: ${OPENAI_API_BASE}
-        OPENAI_API_KEY: ${OPENAI_API_KEY}
-        GPT_ENGINE: ${GPT_ENGINE}
-        SECRET_KEY: ${SECRET_KEY}
-        DEFAULT_EMAIL: ${DEFAULT_EMAIL}
-        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
-        USE_MINIO: ${USE_MINIO}
-        ENABLE_SIGNUP: ${ENABLE_SIGNUP}
-
 services:
-        plane-web:
-                container_name: planefrontend
+        web:
+                container_name: web
                 image: makeplane/plane-frontend:latest
                 restart: always
                 command: /usr/local/bin/start.sh web/server.js web
                 env_file:
-                        - .env
-                environment:
-                        NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
-                        NEXT_PUBLIC_DEPLOY_URL: ${NEXT_PUBLIC_DEPLOY_URL}
-                        NEXT_PUBLIC_GOOGLE_CLIENTID: "0"
-                        NEXT_PUBLIC_GITHUB_APP_NAME: "0"
-                        NEXT_PUBLIC_GITHUB_ID: "0"
-                        NEXT_PUBLIC_SENTRY_DSN: "0"
-                        NEXT_PUBLIC_ENABLE_OAUTH: "0"
-                        NEXT_PUBLIC_ENABLE_SENTRY: "0"
-                        NEXT_PUBLIC_ENABLE_SESSION_RECORDER: "0"
-                        NEXT_PUBLIC_TRACK_EVENTS: "0"
+                        - ./web/.env
                 depends_on:
-                        - plane-api
-                        - plane-worker
+                        - api
+                        - worker
 
-        plane-deploy:
-                container_name: planedeploy
-                image: makeplane/plane-deploy:latest
+        space:
+                container_name: space
+                image: makeplane/plane-space:latest
                 restart: always
                 command: /usr/local/bin/start.sh space/server.js space
                 env_file:
-                        - .env
-                environment:
-                        NEXT_PUBLIC_API_BASE_URL: ${NEXT_PUBLIC_API_BASE_URL}
+                        - ./space/.env
                 depends_on:
-                        - plane-api
-                        - plane-worker
-                        - plane-web
+                        - api
+                        - worker
+                        - web
 
-        plane-api:
-                container_name: planebackend
+        api:
+                container_name: api
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/takeoff
                 env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
+                        - ./apiserver/.env
                 depends_on:
                         - plane-db
                         - plane-redis
 
-        plane-worker:
-                container_name: planebgworker
+        worker:
+                container_name: bgworker
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/worker
                 env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
+                        - ./apiserver/.env
                 depends_on:
-                        - plane-api
+                        - api
                         - plane-db
                         - plane-redis
 
-        plane-beat-worker:
-                container_name: planebeatworker
+        beat-worker:
+                container_name: beatworker
                 image: makeplane/plane-backend:latest
                 restart: always
                 command: ./bin/beat
                 env_file:
-                        - .env
-                environment:
-                        <<: *api-and-worker-env
+                        - ./apiserver/.env
                 depends_on:
-                        - plane-api
+                        - api
                         - plane-db
                         - plane-redis
 
@@ -157,8 +105,8 @@ services:
                         - plane-minio
 
         # Comment this if you already have a reverse proxy running
-        plane-proxy:
-                container_name: planeproxy
+        proxy:
+                container_name: proxy
                 image: makeplane/plane-proxy:latest
                 ports:
                         - ${NGINX_PORT}:80
@@ -168,8 +116,9 @@ services:
                         FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
                         BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
                 depends_on:
-                        - plane-web
-                        - plane-api
+                        - web
+                        - api
+                        - space
 
 volumes:
         pgdata:

docker-compose.yml

@@ -1,8 +1,8 @@
 version: "3.8"
 
 services:
-  plane-web:
-    container_name: planefrontend
+  web:
+    container_name: web
     build:
       context: .
       dockerfile: ./web/Dockerfile.web
@@ -11,11 +11,11 @@ services:
     restart: always
     command: /usr/local/bin/start.sh web/server.js web
     depends_on:
-      - plane-api
-      - plane-worker
+      - api
+      - worker
 
-  plane-deploy:
-    container_name: planedeploy
+  space:
+    container_name: space
     build:
       context: .
       dockerfile: ./space/Dockerfile.space
@@ -24,12 +24,12 @@ services:
     restart: always
     command: /usr/local/bin/start.sh space/server.js space
     depends_on:
-      - plane-api
-      - plane-worker
-      - plane-web
+      - api
+      - worker
+      - web
 
-  plane-api:
-    container_name: planebackend
+  api:
+    container_name: api
     build:
       context: ./apiserver
       dockerfile: Dockerfile.api
@@ -43,8 +43,8 @@ services:
       - plane-db
       - plane-redis
 
-  plane-worker:
-    container_name: planebgworker
+  worker:
+    container_name: bgworker
     build:
       context: ./apiserver
       dockerfile: Dockerfile.api
@@ -55,12 +55,12 @@ services:
     env_file:
       - ./apiserver/.env
     depends_on:
-      - plane-api
+      - api
       - plane-db
       - plane-redis
 
-  plane-beat-worker:
-    container_name: planebeatworker
+  beat-worker:
+    container_name: beatworker
     build:
       context: ./apiserver
       dockerfile: Dockerfile.api
@@ -71,7 +71,7 @@ services:
     env_file:
       - ./apiserver/.env
     depends_on:
-      - plane-api
+      - api
       - plane-db
       - plane-redis
 
@@ -118,8 +118,8 @@ services:
       - plane-minio
 
   # Comment this if you already have a reverse proxy running
-  plane-proxy:
-    container_name: planeproxy
+  proxy:
+    container_name: proxy
     build:
       context: ./nginx
       dockerfile: Dockerfile
@@ -130,8 +130,9 @@ services:
       FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
       BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
     depends_on:
-      - plane-web
-      - plane-api
+      - web
+      - api
+      - space
 
 volumes:
   pgdata:

nginx/nginx.conf.template

@@ -1,25 +1,26 @@
-events { }
+events {
+}
 
 http {
     sendfile on;
 
     server {
-        listen       80;
-        root   /www/data/;
+        listen 80;
+        root /www/data/;
         access_log /var/log/nginx/access.log;
 
         client_max_body_size ${FILE_SIZE_LIMIT};
 
         location / {
-            proxy_pass http://planefrontend:3000/;       
+            proxy_pass http://web:3000/;
         }
 
         location /api/ {
-            proxy_pass http://planebackend:8000/api/;
+            proxy_pass http://api:8000/api/;
         }
 
         location /spaces/ {
-            proxy_pass http://planedeploy:3000/spaces/;
+            proxy_pass http://space:3000/spaces/;
         }
 
         location /${BUCKET_NAME}/ {

space/.env.example

@@ -1,4 +1,2 @@
-# Google Client ID for Google OAuth
-NEXT_PUBLIC_GOOGLE_CLIENTID=""
 # Flag to toggle OAuth
 NEXT_PUBLIC_ENABLE_OAUTH=0

web/.env.example

@@ -1,24 +1,4 @@
-# Extra image domains that need to be added for Next Image
-NEXT_PUBLIC_EXTRA_IMAGE_DOMAINS=
-# Google Client ID for Google OAuth
-NEXT_PUBLIC_GOOGLE_CLIENTID=""
-# GitHub App ID for GitHub OAuth
-NEXT_PUBLIC_GITHUB_ID=""
-# GitHub App Name for GitHub Integration
-NEXT_PUBLIC_GITHUB_APP_NAME=""
-# Sentry DSN for error monitoring
-NEXT_PUBLIC_SENTRY_DSN=""
 # Enable/Disable OAUTH - default 0 for selfhosted instance
 NEXT_PUBLIC_ENABLE_OAUTH=0
-# Enable/Disable Sentry
-NEXT_PUBLIC_ENABLE_SENTRY=0
-# Enable/Disable session recording
-NEXT_PUBLIC_ENABLE_SESSION_RECORDER=0
-# Enable/Disable event tracking
-NEXT_PUBLIC_TRACK_EVENTS=0
-# Slack Client ID for Slack Integration
-NEXT_PUBLIC_SLACK_CLIENT_ID=""
-# For Telemetry, set it to "app.plane.so"
-NEXT_PUBLIC_PLAUSIBLE_DOMAIN=""
 # Public boards deploy URL
-NEXT_PUBLIC_DEPLOY_URL="http://localhost:3000/spaces"
+NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"

web/components/analytics/custom-analytics/graph/index.tsx

@@ -9,7 +9,6 @@ import { findStringWithMostCharacters } from "helpers/array.helper";
 import { generateBarColor } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse } from "types";
-// constants
 
 type Props = {
   analytics: IAnalyticsResponse;

web/components/analytics/scope-and-demand/scope.tsx

@@ -15,17 +15,19 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
     <div className="divide-y divide-custom-border-200">
       <div>
         <h6 className="px-3 text-base font-medium">Pending issues</h6>
-        {defaultAnalytics.pending_issue_user.length > 0 ? (
+        {defaultAnalytics.pending_issue_user && defaultAnalytics.pending_issue_user.length > 0 ? (
           <BarGraph
             data={defaultAnalytics.pending_issue_user}
-            indexBy="assignees__display_name"
+            indexBy="assignees__id"
             keys={["count"]}
             height="250px"
             colors={() => `#f97316`}
-            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => d.count)}
+            customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) =>
+              d.count > 0 ? d.count : 50
+            )}
             tooltip={(datum) => {
               const assignee = defaultAnalytics.pending_issue_user.find(
-                (a) => a.assignees__display_name === `${datum.indexValue}`
+                (a) => a.assignees__id === `${datum.indexValue}`
               );
 
               return (
@@ -39,10 +41,9 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
             }}
             axisBottom={{
               renderTick: (datum) => {
-                const avatar =
-                  defaultAnalytics.pending_issue_user[datum.tickIndex]?.assignees__avatar ?? "";
+                const assignee = defaultAnalytics.pending_issue_user[datum.tickIndex] ?? "";
 
-                if (avatar && avatar !== "")
+                if (assignee && assignee?.assignees__avatar && assignee?.assignees__avatar !== "")
                   return (
                     <g transform={`translate(${datum.x},${datum.y})`}>
                       <image
@@ -50,7 +51,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
                         y={10}
                         width={16}
                         height={16}
-                        xlinkHref={avatar}
+                        xlinkHref={assignee?.assignees__avatar}
                         style={{ clipPath: "circle(50%)" }}
                       />
                     </g>
@@ -60,7 +61,7 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
                     <g transform={`translate(${datum.x},${datum.y})`}>
                       <circle cy={18} r={8} fill="#374151" />
                       <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
-                        {datum.value ? `${datum.value}`.toUpperCase()[0] : "?"}
+                        {datum.value ? `${assignee.assignees__display_name}`.toUpperCase()[0] : "?"}
                       </text>
                     </g>
                   );

web/components/core/activity.tsx

@@ -1,5 +1,9 @@
 import { useRouter } from "next/router";
 
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
 // icons
 import { Icon, Tooltip } from "components/ui";
 import { CopyPlus } from "lucide-react";
@@ -10,6 +14,8 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
 import { IIssueActivity } from "types";
+// fetch-keys
+import { WORKSPACE_LABELS } from "constants/fetch-keys";
 
 const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   const router = useRouter();
@@ -52,6 +58,26 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
   );
 };
 
+const LabelPill = ({ labelId }: { labelId: string }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { data: labels } = useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  return (
+    <span
+      className="h-1.5 w-1.5 rounded-full"
+      style={{
+        backgroundColor: labels?.find((l) => l.id === labelId)?.color ?? "#000000",
+      }}
+      aria-hidden="true"
+    />
+  );
+};
+
 const activityDetails: {
   [key: string]: {
     message: (
@@ -325,14 +351,8 @@ const activityDetails: {
         return (
           <>
             added a new label{" "}
-            <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-              <span
-                className="h-1.5 w-1.5 rounded-full"
-                style={{
-                  backgroundColor: "#000000",
-                }}
-                aria-hidden="true"
-              />
+            <span className="inline-flex items-center gap-2 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
+              <LabelPill labelId={activity.new_identifier ?? ""} />
               <span className="font-medium text-custom-text-100">{activity.new_value}</span>
             </span>
             {showIssue && (
@@ -348,13 +368,7 @@ const activityDetails: {
           <>
             removed the label{" "}
             <span className="inline-flex items-center gap-3 rounded-full border border-custom-border-300 px-2 py-0.5 text-xs">
-              <span
-                className="h-1.5 w-1.5 rounded-full"
-                style={{
-                  backgroundColor: "#000000",
-                }}
-                aria-hidden="true"
-              />
+              <LabelPill labelId={activity.old_identifier ?? ""} />
               <span className="font-medium text-custom-text-100">{activity.old_value}</span>
             </span>
             {showIssue && (

web/components/core/filters/issues-view-filter.tsx

@@ -93,7 +93,7 @@ export const IssuesFilterView: React.FC = () => {
             <Tooltip
               key={option.type}
               tooltipContent={
-                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
+                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>
               }
               position="bottom"
             >

web/components/core/views/board-view/all-boards.tsx

@@ -76,7 +76,7 @@ export const AllBoards: React.FC<Props> = ({
         readOnly={disableUserActions}
       />
       {groupedIssues ? (
-        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
+        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8 bg-custom-background-90">
           {Object.keys(groupedIssues).map((singleGroup, index) => {
             const currentState =
               displayFilters?.group_by === "state"

web/components/core/views/board-view/index.ts

@@ -2,3 +2,4 @@ export * from "./all-boards";
 export * from "./board-header";
 export * from "./single-board";
 export * from "./single-issue";
+export * from "./inline-create-issue-form";

web/components/core/views/board-view/inline-create-issue-form.tsx

@@ -0,0 +1,62 @@
+import { useEffect } from "react";
+
+// react hook form
+import { useFormContext } from "react-hook-form";
+
+// components
+import { InlineCreateIssueFormWrapper } from "components/core";
+
+// hooks
+import useProjectDetails from "hooks/use-project-details";
+
+// types
+import { IIssue } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+  prePopulatedData?: Partial<IIssue>;
+};
+
+const InlineInput = () => {
+  const { projectDetails } = useProjectDetails();
+
+  const { register, setFocus } = useFormContext();
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <div>
+      <h4 className="text-sm font-medium leading-5 text-custom-text-300">
+        {projectDetails?.identifier ?? "..."}
+      </h4>
+      <input
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full px-2 pl-0 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </div>
+  );
+};
+
+export const BoardInlineCreateIssueForm: React.FC<Props> = (props) => (
+  <>
+    <InlineCreateIssueFormWrapper
+      className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow"
+      {...props}
+    >
+      <InlineInput />
+    </InlineCreateIssueFormWrapper>
+    {props.isOpen && (
+      <p className="text-xs ml-3 italic text-custom-text-200">
+        Press {"'"}Enter{"'"} to add another issue
+      </p>
+    )}
+  </>
+);

web/components/core/views/board-view/single-board.tsx

@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { Draggable } from "react-beautiful-dnd";
 // components
-import { BoardHeader, SingleBoardIssue } from "components/core";
+import { BoardHeader, SingleBoardIssue, BoardInlineCreateIssueForm } from "components/core";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
@@ -34,26 +34,30 @@ type Props = {
   viewProps: IIssueViewProps;
 };
 
-export const SingleBoard: React.FC<Props> = ({
-  addIssueToGroup,
-  currentState,
-  groupTitle,
-  disableUserActions,
-  disableAddIssueOption = false,
-  dragDisabled,
-  handleIssueAction,
-  handleDraftIssueAction,
-  handleTrashBox,
-  openIssuesListModal,
-  handleMyIssueOpen,
-  removeIssue,
-  user,
-  userAuth,
-  viewProps,
-}) => {
+export const SingleBoard: React.FC<Props> = (props) => {
+  const {
+    addIssueToGroup,
+    currentState,
+    groupTitle,
+    disableUserActions,
+    disableAddIssueOption = false,
+    dragDisabled,
+    handleIssueAction,
+    handleDraftIssueAction,
+    handleTrashBox,
+    openIssuesListModal,
+    handleMyIssueOpen,
+    removeIssue,
+    user,
+    userAuth,
+    viewProps,
+  } = props;
+
   // collapse/expand
   const [isCollapsed, setIsCollapsed] = useState(true);
 
+  const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
+
   const { displayFilters, groupedIssues } = viewProps;
 
   const router = useRouter();
@@ -67,6 +71,24 @@ export const SingleBoard: React.FC<Props> = ({
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
 
+  const onCreateClick = () => {
+    setIsInlineCreateIssueFormOpen(true);
+
+    const boardListElement = document.getElementById(`board-list-${groupTitle}`);
+
+    // timeout is needed because the animation
+    // takes time to complete & we can scroll only after that
+    const timeoutId = setTimeout(() => {
+      if (boardListElement)
+        boardListElement.scrollBy({
+          top: boardListElement.scrollHeight,
+          left: 0,
+          behavior: "smooth",
+        });
+      clearTimeout(timeoutId);
+    }, 10);
+  };
+
   return (
     <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
       <BoardHeader
@@ -115,6 +137,7 @@ export const SingleBoard: React.FC<Props> = ({
                 </>
               )}
               <div
+                id={`board-list-${groupTitle}`}
                 className={`pt-3 ${
                   hasMinimumNumberOfCards ? "overflow-hidden overflow-y-scroll" : ""
                 } `}
@@ -134,6 +157,7 @@ export const SingleBoard: React.FC<Props> = ({
                         type={type}
                         index={index}
                         issue={issue}
+                        projectId={issue.project_detail.id}
                         groupTitle={groupTitle}
                         editIssue={() => handleIssueAction(issue, "edit")}
                         makeIssueCopy={() => handleIssueAction(issue, "copy")}
@@ -169,6 +193,19 @@ export const SingleBoard: React.FC<Props> = ({
                 >
                   <>{provided.placeholder}</>
                 </span>
+
+                <BoardInlineCreateIssueForm
+                  isOpen={isInlineCreateIssueFormOpen}
+                  handleClose={() => setIsInlineCreateIssueFormOpen(false)}
+                  prePopulatedData={{
+                    ...(cycleId && { cycle: cycleId.toString() }),
+                    ...(moduleId && { module: moduleId.toString() }),
+                    [displayFilters?.group_by! === "labels"
+                      ? "labels_list"
+                      : displayFilters?.group_by!]:
+                      displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
+                  }}
+                />
               </div>
               {displayFilters?.group_by !== "created_by" && (
                 <div>
@@ -177,7 +214,7 @@ export const SingleBoard: React.FC<Props> = ({
                         <button
                           type="button"
                           className="flex items-center gap-2 font-medium text-custom-primary outline-none p-1"
-                          onClick={addIssueToGroup}
+                          onClick={() => onCreateClick()}
                         >
                           <PlusIcon className="h-4 w-4" />
                           Add Issue
@@ -197,7 +234,7 @@ export const SingleBoard: React.FC<Props> = ({
                           position="left"
                           noBorder
                         >
-                          <CustomMenu.MenuItem onClick={addIssueToGroup}>
+                          <CustomMenu.MenuItem onClick={() => onCreateClick()}>
                             Create new
                           </CustomMenu.MenuItem>
                           {openIssuesListModal && (

web/components/core/views/board-view/single-issue.tsx

@@ -56,6 +56,7 @@ type Props = {
   provided: DraggableProvided;
   snapshot: DraggableStateSnapshot;
   issue: IIssue;
+  projectId: string;
   groupTitle?: string;
   index: number;
   editIssue: () => void;
@@ -77,6 +78,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
   provided,
   snapshot,
   issue,
+  projectId,
   index,
   editIssue,
   makeIssueCopy,
@@ -104,7 +106,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
   const { displayFilters, properties, mutateIssues } = viewProps;
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+  const { workspaceSlug, cycleId, moduleId } = router.query;
 
   const isDraftIssue = router.pathname.includes("draft-issues");
 
@@ -452,6 +454,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               <StateSelect
                 value={issue.state_detail}
                 onChange={handleStateChange}
+                projectId={projectId}
                 hideDropdownArrow
                 disabled={isNotAllowed}
               />
@@ -479,6 +482,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
             {properties.labels && issue.labels.length > 0 && (
               <LabelSelect
                 value={issue.labels}
+                projectId={projectId}
                 onChange={handleLabelChange}
                 labelsDetails={issue.label_details}
                 hideDropdownArrow
@@ -489,6 +493,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
             {properties.assignee && (
               <MembersSelect
                 value={issue.assignees}
+                projectId={projectId}
                 onChange={handleAssigneeChange}
                 membersDetails={issue.assignee_details}
                 hideDropdownArrow

web/components/core/views/calendar-view/index.ts

@@ -2,3 +2,4 @@ export * from "./calendar-header";
 export * from "./calendar";
 export * from "./single-date";
 export * from "./single-issue";
+export * from "./inline-create-issue-form";

web/components/core/views/calendar-view/inline-create-issue-form.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from "react";
+
+// react hook form
+import { useFormContext } from "react-hook-form";
+
+import { InlineCreateIssueFormWrapper } from "components/core";
+
+// hooks
+import useProjectDetails from "hooks/use-project-details";
+
+// types
+import { IIssue } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+  prePopulatedData?: Partial<IIssue>;
+};
+
+const useCheckIfThereIsSpaceOnRight = (ref: React.RefObject<HTMLDivElement>) => {
+  const [isThereSpaceOnRight, setIsThereSpaceOnRight] = useState(true);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const { right } = ref.current.getBoundingClientRect();
+
+    const width = right + 250;
+
+    if (width > window.innerWidth) setIsThereSpaceOnRight(false);
+    else setIsThereSpaceOnRight(true);
+  }, [ref]);
+
+  return isThereSpaceOnRight;
+};
+
+const InlineInput = () => {
+  const { projectDetails } = useProjectDetails();
+
+  const { register, setFocus } = useFormContext();
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-sm font-medium leading-5 text-custom-text-400">
+        {projectDetails?.identifier ?? "..."}
+      </h4>
+      <input
+        type="text"
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full px-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
+  const { isOpen } = props;
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  const isSpaceOnRight = useCheckIfThereIsSpaceOnRight(ref);
+
+  return (
+    <>
+      <div
+        ref={ref}
+        className={`absolute -translate-x-1 top-5 transition-all z-20 ${
+          isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
+        } ${isSpaceOnRight ? "left-full" : "right-0"}`}
+      >
+        <InlineCreateIssueFormWrapper
+          {...props}
+          className="flex w-60 p-1 px-1.5 rounded items-center gap-x-3 bg-custom-background-100 shadow-custom-shadow-md transition-opacity"
+        >
+          <InlineInput />
+        </InlineCreateIssueFormWrapper>
+      </div>
+      {/* Added to make any other element as outside click. This will make input also to be outside. */}
+      {isOpen && <div className="w-screen h-screen fixed inset-0 z-10" />}
+    </>
+  );
+};

web/components/core/views/calendar-view/single-date.tsx

@@ -1,10 +1,14 @@
 import React, { useState } from "react";
 
+// next
+import { useRouter } from "next/router";
+
 // react-beautiful-dnd
 import { Draggable } from "react-beautiful-dnd";
 // component
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { SingleCalendarIssue } from "./single-issue";
+import { CalendarInlineCreateIssueForm } from "./inline-create-issue-form";
 // icons
 import { PlusSmallIcon } from "@heroicons/react/24/outline";
 // helper
@@ -26,17 +30,14 @@ type Props = {
   isNotAllowed: boolean;
 };
 
-export const SingleCalendarDate: React.FC<Props> = ({
-  handleIssueAction,
-  date,
-  index,
-  addIssueToDate,
-  isMonthlyView,
-  showWeekEnds,
-  user,
-  isNotAllowed,
-}) => {
+export const SingleCalendarDate: React.FC<Props> = (props) => {
+  const { handleIssueAction, date, index, isMonthlyView, showWeekEnds, user, isNotAllowed } = props;
+
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
   const [showAllIssues, setShowAllIssues] = useState(false);
+  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
 
   const totalIssues = date.issues.length;
 
@@ -70,6 +71,7 @@ export const SingleCalendarDate: React.FC<Props> = ({
                     provided={provided}
                     snapshot={snapshot}
                     issue={issue}
+                    projectId={issue.project_detail.id}
                     handleEditIssue={() => handleIssueAction(issue, "edit")}
                     handleDeleteIssue={() => handleIssueAction(issue, "delete")}
                     user={user}
@@ -78,6 +80,17 @@ export const SingleCalendarDate: React.FC<Props> = ({
                 )}
               </Draggable>
             ))}
+
+          <CalendarInlineCreateIssueForm
+            isOpen={isCreateIssueFormOpen}
+            handleClose={() => setIsCreateIssueFormOpen(false)}
+            prePopulatedData={{
+              target_date: date.date,
+              ...(cycleId && { cycle: cycleId.toString() }),
+              ...(moduleId && { module: moduleId.toString() }),
+            }}
+          />
+
           {totalIssues > 4 && (
             <button
               type="button"
@@ -93,7 +106,7 @@ export const SingleCalendarDate: React.FC<Props> = ({
           >
             <button
               className="flex items-center justify-center gap-1 text-center"
-              onClick={() => addIssueToDate(date.date)}
+              onClick={() => setIsCreateIssueFormOpen(true)}
             >
               <PlusSmallIcon className="h-4 w-4 text-custom-text-200" />
               Add issue

web/components/core/views/calendar-view/single-issue.tsx

@@ -41,6 +41,7 @@ type Props = {
   provided: DraggableProvided;
   snapshot: DraggableStateSnapshot;
   issue: IIssue;
+  projectId: string;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
 };
@@ -52,11 +53,12 @@ export const SingleCalendarIssue: React.FC<Props> = ({
   provided,
   snapshot,
   issue,
+  projectId,
   user,
   isNotAllowed,
 }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+  const { workspaceSlug, cycleId, moduleId, viewId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -310,6 +312,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
             {properties.state && (
               <StateSelect
                 value={issue.state_detail}
+                projectId={projectId}
                 onChange={handleStateChange}
                 hideDropdownArrow
                 disabled={isNotAllowed}
@@ -334,6 +337,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
             {properties.labels && issue.labels.length > 0 && (
               <LabelSelect
                 value={issue.labels}
+                projectId={projectId}
                 onChange={handleLabelChange}
                 labelsDetails={issue.label_details}
                 hideDropdownArrow
@@ -345,6 +349,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
             {properties.assignee && (
               <MembersSelect
                 value={issue.assignees}
+                projectId={projectId}
                 onChange={handleAssigneeChange}
                 membersDetails={issue.assignee_details}
                 hideDropdownArrow

web/components/core/views/gantt-chart-view/inline-create-issue-form.tsx

@@ -0,0 +1,62 @@
+import { useEffect } from "react";
+
+// react hook form
+import { useFormContext } from "react-hook-form";
+
+// hooks
+import useProjectDetails from "hooks/use-project-details";
+
+// components
+import { InlineCreateIssueFormWrapper } from "components/core";
+
+// types
+import { IIssue } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+  prePopulatedData?: Partial<IIssue>;
+};
+
+const InlineInput = () => {
+  const { projectDetails } = useProjectDetails();
+
+  const { register, setFocus } = useFormContext();
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <div className="w-[14px] h-[14px] rounded-full border border-custom-border-1000 flex-shrink-0" />
+      <h4 className="text-sm text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <input
+        type="text"
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full px-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const GanttInlineCreateIssueForm: React.FC<Props> = (props) => (
+  <>
+    <InlineCreateIssueFormWrapper
+      className="flex py-3 px-4 mr-2.5 items-center rounded gap-x-2 border bg-custom-background-100 shadow-custom-shadow-sm"
+      {...props}
+    >
+      <InlineInput />
+    </InlineCreateIssueFormWrapper>
+    {props.isOpen && (
+      <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+        Press {"'"}Enter{"'"} to add another issue
+      </p>
+    )}
+  </>
+);

web/components/core/views/index.ts

@@ -5,3 +5,4 @@ export * from "./list-view";
 export * from "./spreadsheet-view";
 export * from "./all-views";
 export * from "./issues-view";
+export * from "./inline-issue-create-wrapper";

web/components/core/views/inline-issue-create-wrapper.tsx

@@ -0,0 +1,270 @@
+import { useEffect, useRef } from "react";
+
+// next
+import { useRouter } from "next/router";
+
+// swr
+import { mutate } from "swr";
+
+// react hook form
+import { useForm, FormProvider } from "react-hook-form";
+
+// headless ui
+import { Transition } from "@headlessui/react";
+
+// services
+import modulesService from "services/modules.service";
+import issuesService from "services/issues.service";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+import useKeypress from "hooks/use-keypress";
+import useIssuesView from "hooks/use-issues-view";
+import useMyIssues from "hooks/my-issues/use-my-issues";
+import useGanttChartIssues from "hooks/gantt-chart/issue-view";
+import useCalendarIssuesView from "hooks/use-calendar-issues-view";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
+
+// helpers
+import { getFetchKeysForIssueMutation } from "helpers/string.helper";
+
+// fetch-keys
+import {
+  USER_ISSUE,
+  SUB_ISSUES,
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_ISSUES_WITH_PARAMS,
+  CYCLE_DETAILS,
+  MODULE_DETAILS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+} from "constants/fetch-keys";
+
+// types
+import { IIssue } from "types";
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+  prePopulatedData?: Partial<IIssue>;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export const addIssueToCycle = async (
+  workspaceSlug: string,
+  projectId: string,
+  issueId: string,
+  cycleId: string,
+  user: any,
+  params: any
+) => {
+  if (!workspaceSlug || !projectId) return;
+
+  await issuesService
+    .addIssueToCycle(
+      workspaceSlug as string,
+      projectId.toString(),
+      cycleId,
+      {
+        issues: [issueId],
+      },
+      user
+    )
+    .then(() => {
+      if (cycleId) {
+        mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
+        mutate(CYCLE_DETAILS(cycleId as string));
+      }
+    });
+};
+
+export const addIssueToModule = async (
+  workspaceSlug: string,
+  projectId: string,
+  issueId: string,
+  moduleId: string,
+  user: any,
+  params: any
+) => {
+  await modulesService
+    .addIssuesToModule(
+      workspaceSlug as string,
+      projectId.toString(),
+      moduleId as string,
+      {
+        issues: [issueId],
+      },
+      user
+    )
+    .then(() => {
+      if (moduleId) {
+        mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+        mutate(MODULE_DETAILS(moduleId as string));
+      }
+    });
+};
+
+export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
+  const { isOpen, handleClose, onSuccess, prePopulatedData, children, className } = props;
+
+  const ref = useRef<HTMLFormElement>(null);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const { displayFilters, params } = useIssuesView();
+  const { params: calendarParams } = useCalendarIssuesView();
+  const { ...viewGanttParams } = params;
+  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
+  const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
+  const { params: ganttParams } = useGanttChartIssues(
+    workspaceSlug?.toString(),
+    projectId?.toString()
+  );
+
+  const method = useForm<IIssue>({ defaultValues });
+  const {
+    reset,
+    handleSubmit,
+    getValues,
+    formState: { errors, isSubmitting },
+  } = method;
+
+  useOutsideClickDetector(ref, handleClose);
+  useKeypress("Escape", handleClose);
+
+  useEffect(() => {
+    const values = getValues();
+
+    if (prePopulatedData) reset({ ...defaultValues, ...values, ...prePopulatedData });
+  }, [reset, prePopulatedData, getValues]);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (isSubmitting)
+      setToastAlert({
+        type: "info",
+        title: "Creating issue...",
+        message: "Please wait while we create your issue.",
+      });
+  }, [isSubmitting, setToastAlert]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const { calendarFetchKey, ganttFetchKey, spreadsheetFetchKey } = getFetchKeysForIssueMutation({
+    cycleId: cycleId,
+    moduleId: moduleId,
+    viewId: viewId,
+    projectId: projectId?.toString() ?? "",
+    calendarParams,
+    spreadsheetParams,
+    viewGanttParams,
+    ganttParams,
+  });
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (!workspaceSlug || !projectId || !user || isSubmitting) return;
+
+    reset({ ...defaultValues });
+
+    await issuesService
+      .createIssues(workspaceSlug.toString(), projectId.toString(), formData, user)
+      .then(async (res) => {
+        mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params));
+        if (formData.cycle && formData.cycle !== "")
+          await addIssueToCycle(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            res.id,
+            formData.cycle,
+            user,
+            params
+          );
+        if (formData.module && formData.module !== "")
+          await addIssueToModule(
+            workspaceSlug.toString(),
+            projectId.toString(),
+            res.id,
+            formData.module,
+            user,
+            params
+          );
+
+        if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
+        if (displayFilters.layout === "gantt_chart") mutate(ganttFetchKey);
+        if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
+        if (groupedIssues) mutateMyIssues();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue created successfully.",
+        });
+
+        if (onSuccess) await onSuccess(res);
+
+        if (formData.assignees_list?.some((assignee) => assignee === user?.id))
+          mutate(USER_ISSUE(workspaceSlug as string));
+
+        if (formData.parent && formData.parent !== "") mutate(SUB_ISSUES(formData.parent));
+      })
+      .catch((err) => {
+        Object.keys(err || {}).forEach((key) => {
+          const error = err?.[key];
+          const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: errorTitle || "Some error occurred. Please try again.",
+          });
+        });
+      });
+  };
+
+  return (
+    <>
+      <Transition
+        show={isOpen}
+        enter="transition ease-in-out duration-200 transform"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in-out duration-200 transform"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <FormProvider {...method}>
+          <form ref={ref} className={className} onSubmit={handleSubmit(onSubmitHandler)}>
+            {children}
+          </form>
+        </FormProvider>
+      </Transition>
+    </>
+  );
+};

web/components/core/views/issues-view.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -87,8 +87,16 @@ export const IssuesView: React.FC<Props> = ({
 
   const { setToastAlert } = useToast();
 
-  const { groupedByIssues, mutateIssues, displayFilters, filters, isEmpty, setFilters, params } =
-    useIssuesView();
+  const {
+    groupedByIssues,
+    mutateIssues,
+    displayFilters,
+    filters,
+    isEmpty,
+    setFilters,
+    params,
+    setDisplayFilters,
+  } = useIssuesView();
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
   const { data: stateGroups } = useSWR(
@@ -108,6 +116,17 @@ export const IssuesView: React.FC<Props> = ({
 
   const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
 
+  useEffect(() => {
+    if (!isDraftIssues) return;
+
+    if (
+      displayFilters.layout === "calendar" ||
+      displayFilters.layout === "gantt_chart" ||
+      displayFilters.layout === "spreadsheet"
+    )
+      setDisplayFilters({ layout: "list" });
+  }, [isDraftIssues, displayFilters, setDisplayFilters]);
+
   const handleDeleteIssue = useCallback(
     (issue: IIssue) => {
       setDeleteIssueModal(true);

web/components/core/views/list-view/index.ts

@@ -1,3 +1,4 @@
 export * from "./all-lists";
 export * from "./single-issue";
 export * from "./single-list";
+export * from "./inline-create-issue-form";

web/components/core/views/list-view/inline-create-issue-form.tsx

@@ -0,0 +1,55 @@
+import { useEffect } from "react";
+// react hook form
+import { useFormContext } from "react-hook-form";
+
+// hooks
+import useProjectDetails from "hooks/use-project-details";
+
+// components
+import { InlineCreateIssueFormWrapper } from "../inline-issue-create-wrapper";
+
+// types
+import { IIssue } from "types";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+  prePopulatedData?: Partial<IIssue>;
+};
+
+const InlineInput = () => {
+  const { projectDetails } = useProjectDetails();
+
+  const { register, setFocus } = useFormContext();
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-sm font-medium leading-5 text-custom-text-400">
+        {projectDetails?.identifier ?? "..."}
+      </h4>
+      <input
+        type="text"
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full px-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const ListInlineCreateIssueForm: React.FC<Props> = (props) => (
+  <InlineCreateIssueFormWrapper
+    className="flex py-3 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-md"
+    {...props}
+  >
+    <InlineInput />
+  </InlineCreateIssueFormWrapper>
+);

web/components/core/views/list-view/single-issue.tsx

@@ -51,6 +51,7 @@ import {
 type Props = {
   type?: string;
   issue: IIssue;
+  projectId: string;
   groupTitle?: string;
   editIssue: () => void;
   index: number;
@@ -69,6 +70,7 @@ type Props = {
 export const SingleListIssue: React.FC<Props> = ({
   type,
   issue,
+  projectId,
   editIssue,
   index,
   makeIssueCopy,
@@ -88,7 +90,7 @@ export const SingleListIssue: React.FC<Props> = ({
   const [contextMenuPosition, setContextMenuPosition] = useState<React.MouseEvent | null>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, userId } = router.query;
+  const { workspaceSlug, cycleId, moduleId, userId } = router.query;
   const isArchivedIssues = router.pathname.includes("archived-issues");
   const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
 
@@ -376,6 +378,7 @@ export const SingleListIssue: React.FC<Props> = ({
           {properties.state && (
             <StateSelect
               value={issue.state_detail}
+              projectId={projectId}
               onChange={handleStateChange}
               hideDropdownArrow
               disabled={isNotAllowed}
@@ -400,6 +403,7 @@ export const SingleListIssue: React.FC<Props> = ({
           {properties.labels && (
             <LabelSelect
               value={issue.labels}
+              projectId={projectId}
               onChange={handleLabelChange}
               labelsDetails={issue.label_details}
               hideDropdownArrow
@@ -411,6 +415,7 @@ export const SingleListIssue: React.FC<Props> = ({
           {properties.assignee && (
             <MembersSelect
               value={issue.assignees}
+              projectId={projectId}
               onChange={handleAssigneeChange}
               membersDetails={issue.assignee_details}
               hideDropdownArrow

web/components/core/views/list-view/single-list.tsx

@@ -1,3 +1,6 @@
+import { useState } from "react";
+
+// next
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
@@ -10,7 +13,7 @@ import projectService from "services/project.service";
 // hooks
 import useProjects from "hooks/use-projects";
 // components
-import { SingleListIssue } from "components/core";
+import { SingleListIssue, ListInlineCreateIssueForm } from "components/core";
 // ui
 import { Avatar, CustomMenu } from "components/ui";
 // icons
@@ -51,24 +54,27 @@ type Props = {
   viewProps: IIssueViewProps;
 };
 
-export const SingleList: React.FC<Props> = ({
-  currentState,
-  groupTitle,
-  addIssueToGroup,
-  handleIssueAction,
-  openIssuesListModal,
-  handleDraftIssueAction,
-  handleMyIssueOpen,
-  removeIssue,
-  disableUserActions,
-  disableAddIssueOption = false,
-  user,
-  userAuth,
-  viewProps,
-}) => {
+export const SingleList: React.FC<Props> = (props) => {
+  const {
+    currentState,
+    groupTitle,
+    handleIssueAction,
+    openIssuesListModal,
+    handleDraftIssueAction,
+    handleMyIssueOpen,
+    removeIssue,
+    disableUserActions,
+    disableAddIssueOption = false,
+    user,
+    userAuth,
+    viewProps,
+  } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
+  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
+
   const isArchivedIssues = router.pathname.includes("archived-issues");
 
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
@@ -207,7 +213,7 @@ export const SingleList: React.FC<Props> = ({
                 <button
                   type="button"
                   className="p-1  text-custom-text-200 hover:bg-custom-background-80"
-                  onClick={addIssueToGroup}
+                  onClick={() => setIsCreateIssueFormOpen(true)}
                 >
                   <PlusIcon className="h-4 w-4" />
                 </button>
@@ -224,7 +230,9 @@ export const SingleList: React.FC<Props> = ({
                 position="right"
                 noBorder
               >
-                <CustomMenu.MenuItem onClick={addIssueToGroup}>Create new</CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={() => setIsCreateIssueFormOpen(true)}>
+                  Create new
+                </CustomMenu.MenuItem>
                 {openIssuesListModal && (
                   <CustomMenu.MenuItem onClick={openIssuesListModal}>
                     Add an existing issue
@@ -250,6 +258,7 @@ export const SingleList: React.FC<Props> = ({
                       key={issue.id}
                       type={type}
                       issue={issue}
+                      projectId={issue.project_detail.id}
                       groupTitle={groupTitle}
                       index={index}
                       editIssue={() => handleIssueAction(issue, "edit")}
@@ -284,6 +293,29 @@ export const SingleList: React.FC<Props> = ({
               ) : (
                 <div className="flex h-full w-full items-center justify-center">Loading...</div>
               )}
+
+              <ListInlineCreateIssueForm
+                isOpen={isCreateIssueFormOpen}
+                handleClose={() => setIsCreateIssueFormOpen(false)}
+                prePopulatedData={{
+                  ...(cycleId && { cycle: cycleId.toString() }),
+                  ...(moduleId && { module: moduleId.toString() }),
+                  [displayFilters?.group_by!]: groupTitle,
+                }}
+              />
+
+              {!isCreateIssueFormOpen && (
+                <div className="w-full bg-custom-background-100 px-6 py-3">
+                  <button
+                    type="button"
+                    onClick={() => setIsCreateIssueFormOpen(true)}
+                    className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+                  </button>
+                </div>
+              )}
             </Disclosure.Panel>
           </Transition>
         </div>

web/components/core/views/spreadsheet-view/single-issue.tsx

@@ -49,6 +49,7 @@ import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 
 type Props = {
   issue: IIssue;
+  projectId: string;
   index: number;
   expanded: boolean;
   handleToggleExpand: (issueId: string) => void;
@@ -64,6 +65,7 @@ type Props = {
 
 export const SingleSpreadsheetIssue: React.FC<Props> = ({
   issue,
+  projectId,
   index,
   expanded,
   handleToggleExpand,
@@ -80,7 +82,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   const router = useRouter();
 
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+  const { workspaceSlug, cycleId, moduleId, viewId } = router.query;
 
   const { params } = useSpreadsheetIssuesView();
 
@@ -96,7 +98,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
         : viewId
         ? VIEW_ISSUES(viewId.toString(), params)
-        : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
+        : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId, params);
 
       if (issue.parent)
         mutate<ISubIssueResponse>(
@@ -136,13 +138,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         );
 
       issuesService
-        .patchIssue(
-          workspaceSlug as string,
-          projectId as string,
-          issue.id as string,
-          formData,
-          user
-        )
+        .patchIssue(workspaceSlug as string, projectId, issue.id as string, formData, user)
         .then(() => {
           if (issue.parent) {
             mutate(SUB_ISSUES(issue.parent as string));
@@ -368,6 +364,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
             <StateSelect
               value={issue.state_detail}
+              projectId={projectId}
               onChange={handleStateChange}
               buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
               hideDropdownArrow
@@ -390,6 +387,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
             <MembersSelect
               value={issue.assignees}
+              projectId={projectId}
               onChange={handleAssigneeChange}
               membersDetails={issue.assignee_details}
               buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
@@ -402,6 +400,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
             <LabelSelect
               value={issue.labels}
+              projectId={projectId}
               onChange={handleLabelChange}
               labelsDetails={issue.label_details}
               hideDropdownArrow

web/components/core/views/spreadsheet-view/spreadsheet-issues.tsx

@@ -55,6 +55,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
     <div>
       <SingleSpreadsheetIssue
         issue={issue}
+        projectId={issue.project_detail.id}
         index={index}
         expanded={isExpanded}
         handleToggleExpand={handleToggleExpand}

web/components/core/views/spreadsheet-view/spreadsheet-view.tsx

@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 
 // components
-import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
+import { SpreadsheetColumns, SpreadsheetIssues, ListInlineCreateIssueForm } from "components/core";
 import { CustomMenu, Spinner } from "components/ui";
 import { IssuePeekOverview } from "components/issues";
 // hooks
@@ -33,6 +33,7 @@ export const SpreadsheetView: React.FC<Props> = ({
   userAuth,
 }) => {
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+  const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
@@ -88,53 +89,59 @@ export const SpreadsheetView: React.FC<Props> = ({
                 userAuth={userAuth}
               />
             ))}
+
+            <ListInlineCreateIssueForm
+              isOpen={isInlineCreateIssueFormOpen}
+              handleClose={() => setIsInlineCreateIssueFormOpen(false)}
+              prePopulatedData={{
+                ...(cycleId && { cycle: cycleId.toString() }),
+                ...(moduleId && { module: moduleId.toString() }),
+              }}
+            />
+
             <div
               className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
               style={{ gridTemplateColumns }}
             >
-              {type === "issue" ? (
-                <button
-                  className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
-                  onClick={() => {
-                    const e = new KeyboardEvent("keydown", { key: "c" });
-                    document.dispatchEvent(e);
-                  }}
-                >
-                  <PlusIcon className="h-4 w-4" />
-                  Add Issue
-                </button>
-              ) : (
-                !disableUserActions && (
-                  <CustomMenu
-                    className="sticky left-0 z-[1]"
-                    customButton={
-                      <button
-                        className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
-                        type="button"
-                      >
-                        <PlusIcon className="h-4 w-4" />
-                        Add Issue
-                      </button>
-                    }
-                    position="left"
-                    optionsClassName="left-5 !w-36"
-                    noBorder
-                  >
-                    <CustomMenu.MenuItem
-                      onClick={() => {
-                        const e = new KeyboardEvent("keydown", { key: "c" });
-                        document.dispatchEvent(e);
-                      }}
+              {!isInlineCreateIssueFormOpen && (
+                <>
+                  {type === "issue" ? (
+                    <button
+                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                      onClick={() => setIsInlineCreateIssueFormOpen(true)}
                     >
-                      Create new
-                    </CustomMenu.MenuItem>
-                    {openIssuesListModal && (
-                      <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                        Add an existing issue
-                      </CustomMenu.MenuItem>
-                    )}
-                  </CustomMenu>
-                )
+                      <PlusIcon className="h-4 w-4" />
+                      Add Issue
+                    </button>
+                  ) : (
+                    !disableUserActions && (
+                      <CustomMenu
+                        className="sticky left-0 z-[1]"
+                        customButton={
+                          <button
+                            className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                            type="button"
+                          >
+                            <PlusIcon className="h-4 w-4" />
+                            Add Issue
+                          </button>
+                        }
+                        position="left"
+                        optionsClassName="left-5 !w-36"
+                        noBorder
+                      >
+                        <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
+                          Create new
+                        </CustomMenu.MenuItem>
+                        {openIssuesListModal && (
+                          <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                            Add an existing issue
+                          </CustomMenu.MenuItem>
+                        )}
+                      </CustomMenu>
+                    )
+                  )}
+                </>
               )}
             </div>
           </div>

web/components/cycles/single-cycle-list.tsx

@@ -149,6 +149,10 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
     color: group.color,
   }));
 
+  const completedIssues = cycle.completed_issues + cycle.cancelled_issues;
+
+  const percentage = cycle.total_issues > 0 ? (completedIssues / cycle.total_issues) * 100 : 0;
+
   return (
     <div>
       <div className="flex flex-col text-xs hover:bg-custom-background-80">
@@ -307,7 +311,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                       ) : cycleStatus === "completed" ? (
                         <span className="flex gap-1">
                           <RadialProgressBar progress={100} />
-                          <span>{100} %</span>
+                          <span>{Math.round(percentage)} %</span>
                         </span>
                       ) : (
                         <span className="flex gap-1">

web/components/gantt-chart/sidebar.tsx

@@ -1,3 +1,6 @@
+import { useState } from "react";
+// next
+import { useRouter } from "next/router";
 // react-beautiful-dnd
 import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
@@ -7,6 +10,9 @@ import { useChart } from "./hooks";
 import { Loader } from "components/ui";
 // icons
 import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "lucide-react";
+// components
+import { GanttInlineCreateIssueForm } from "components/core/views/gantt-chart-view/inline-create-issue-form";
 // types
 import { IBlockUpdateData, IGanttBlock } from "./types";
 
@@ -18,15 +24,16 @@ type Props = {
   enableReorder: boolean;
 };
 
-export const GanttSidebar: React.FC<Props> = ({
-  title,
-  blockUpdateHandler,
-  blocks,
-  SidebarBlockRender,
-  enableReorder,
-}) => {
+export const GanttSidebar: React.FC<Props> = (props) => {
+  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+
+  const router = useRouter();
+  const { cycleId, moduleId } = router.query;
+
   const { activeBlock, dispatch } = useChart();
 
+  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
+
   // update the active block on hover
   const updateActiveBlock = (block: IGanttBlock | null) => {
     dispatch({
@@ -148,6 +155,28 @@ export const GanttSidebar: React.FC<Props> = ({
               )}
               {droppableProvided.placeholder}
             </>
+
+            <GanttInlineCreateIssueForm
+              isOpen={isCreateIssueFormOpen}
+              handleClose={() => setIsCreateIssueFormOpen(false)}
+              prePopulatedData={{
+                start_date: new Date(Date.now()).toISOString().split("T")[0],
+                target_date: new Date(Date.now() + 86400000).toISOString().split("T")[0],
+                ...(cycleId && { cycle: cycleId.toString() }),
+                ...(moduleId && { module: moduleId.toString() }),
+              }}
+            />
+
+            {!isCreateIssueFormOpen && (
+              <button
+                type="button"
+                onClick={() => setIsCreateIssueFormOpen(true)}
+                className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md mt-3"
+              >
+                <PlusIcon className="h-4 w-4" />
+                <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+              </button>
+            )}
           </div>
         )}
       </StrictModeDroppable>

web/components/issues/confirm-issue-discard.tsx

@@ -57,7 +57,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <div className="mt-3 text-center sm:mt-0 sm:text-left">
                       <Dialog.Title
                         as="h3"
                         className="text-lg font-medium leading-6 text-custom-text-100"

web/components/issues/delete-issue-modal.tsx

@@ -35,6 +35,7 @@ type Props = {
   data: IIssue | null;
   user: ICurrentUserResponse | undefined;
   onSubmit?: () => Promise<void>;
+  redirection?: boolean;
 };
 
 export const DeleteIssueModal: React.FC<Props> = ({
@@ -43,6 +44,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
   data,
   user,
   onSubmit,
+  redirection = true,
 }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
@@ -132,7 +134,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
           message: "Issue deleted successfully",
         });
 
-        if (issueId) router.back();
+        if (issueId && redirection) router.back();
       })
       .catch((error) => {
         console.log(error);

web/components/issues/draft-issue-form.tsx

@@ -55,7 +55,10 @@ const defaultValues: Partial<IIssue> = {
 };
 
 interface IssueFormProps {
-  handleFormSubmit: (formData: Partial<IIssue>) => Promise<void>;
+  handleFormSubmit: (
+    formData: Partial<IIssue>,
+    action?: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue"
+  ) => Promise<void>;
   data?: Partial<IIssue> | null;
   prePopulatedData?: Partial<IIssue> | null;
   projectId: string;
@@ -134,12 +137,16 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
 
   const handleCreateUpdateIssue = async (
     formData: Partial<IIssue>,
-    action: "saveDraft" | "createToNewIssue" = "saveDraft"
+    action: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue" = "createDraft"
   ) => {
-    await handleFormSubmit({
-      ...formData,
-      is_draft: action === "saveDraft",
-    });
+    await handleFormSubmit(
+      {
+        ...(data ?? {}),
+        ...formData,
+        is_draft: action === "createDraft" || action === "updateDraft",
+      },
+      action
+    );
 
     setGptAssistantModal(false);
 
@@ -263,7 +270,9 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
         </>
       )}
       <form
-        onSubmit={handleSubmit((formData) => handleCreateUpdateIssue(formData, "createToNewIssue"))}
+        onSubmit={handleSubmit((formData) =>
+          handleCreateUpdateIssue(formData, "convertToNewIssue")
+        )}
       >
         <div className="space-y-5">
           <div className="flex items-center gap-x-2">
@@ -563,15 +572,20 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
             <SecondaryButton onClick={onClose}>Discard</SecondaryButton>
             <SecondaryButton
               loading={isSubmitting}
-              onClick={handleSubmit((formData) => handleCreateUpdateIssue(formData, "saveDraft"))}
+              onClick={handleSubmit((formData) =>
+                handleCreateUpdateIssue(formData, data?.id ? "updateDraft" : "createDraft")
+              )}
             >
               {isSubmitting ? "Saving..." : "Save Draft"}
             </SecondaryButton>
-            {data && (
-              <PrimaryButton type="submit" loading={isSubmitting}>
-                {isSubmitting ? "Saving..." : "Add Issue"}
-              </PrimaryButton>
-            )}
+            <PrimaryButton
+              loading={isSubmitting}
+              onClick={handleSubmit((formData) =>
+                handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createNewIssue")
+              )}
+            >
+              {isSubmitting ? "Saving..." : "Add Issue"}
+            </PrimaryButton>
           </div>
         </div>
       </form>

web/components/issues/draft-issue-modal.tsx

@@ -31,7 +31,10 @@ import {
   MODULE_ISSUES_WITH_PARAMS,
   VIEW_ISSUES,
   PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
+  CYCLE_DETAILS,
+  MODULE_DETAILS,
 } from "constants/fetch-keys";
+import modulesService from "services/modules.service";
 
 interface IssuesModalProps {
   data?: IIssue | null;
@@ -56,18 +59,21 @@ interface IssuesModalProps {
   onSubmit?: (data: Partial<IIssue>) => Promise<void> | void;
 }
 
-export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = ({
-  data,
-  handleClose,
-  isOpen,
-  isUpdatingSingleIssue = false,
-  prePopulateData,
-  fieldsToShow = ["all"],
-  onSubmit,
-}) => {
+export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) => {
+  const {
+    data,
+    handleClose,
+    isOpen,
+    isUpdatingSingleIssue = false,
+    prePopulateData: prePopulateDataProps,
+    fieldsToShow = ["all"],
+    onSubmit,
+  } = props;
+
   // states
   const [createMore, setCreateMore] = useState(false);
   const [activeProject, setActiveProject] = useState<string | null>(null);
+  const [prePopulateData, setPreloadedData] = useState<Partial<IIssue> | undefined>(undefined);
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
@@ -86,19 +92,40 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = ({
 
   const { setToastAlert } = useToast();
 
-  if (cycleId) prePopulateData = { ...prePopulateData, cycle: cycleId as string };
-  if (moduleId) prePopulateData = { ...prePopulateData, module: moduleId as string };
-  if (router.asPath.includes("my-issues") || router.asPath.includes("assigned"))
-    prePopulateData = {
-      ...prePopulateData,
-      assignees: [...(prePopulateData?.assignees ?? []), user?.id ?? ""],
-    };
-
   const onClose = () => {
     handleClose();
     setActiveProject(null);
   };
 
+  useEffect(() => {
+    setPreloadedData(prePopulateDataProps ?? {});
+
+    if (cycleId && !prePopulateDataProps?.cycle) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        cycle: cycleId.toString(),
+      }));
+    }
+    if (moduleId && !prePopulateDataProps?.module) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        module: moduleId.toString(),
+      }));
+    }
+    if (
+      (router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
+      !prePopulateDataProps?.assignees
+    ) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        assignees: prePopulateDataProps?.assignees ?? [user?.id ?? ""],
+      }));
+    }
+  }, [prePopulateDataProps, cycleId, moduleId, router.asPath, user?.id]);
+
   useEffect(() => {
     // if modal is closed, reset active project to null
     // and return to avoid activeProject being set to some other project
@@ -109,10 +136,10 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = ({
 
     // if data is present, set active project to the project of the
     // issue. This has more priority than the project in the url.
-    if (data && data.project) {
-      setActiveProject(data.project);
-      return;
-    }
+    if (data && data.project) return setActiveProject(data.project);
+
+    if (prePopulateData && prePopulateData.project && !activeProject)
+      return setActiveProject(prePopulateData.project);
 
     if (prePopulateData && prePopulateData.project)
       return setActiveProject(prePopulateData.project);
@@ -147,7 +174,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = ({
     ? VIEW_ISSUES(viewId.toString(), viewGanttParams)
     : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "");
 
-  const createIssue = async (payload: Partial<IIssue>) => {
+  const createDraftIssue = async (payload: Partial<IIssue>) => {
     if (!workspaceSlug || !activeProject || !user) return;
 
     await issuesService
@@ -187,7 +214,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = ({
     if (!createMore) onClose();
   };
 
-  const updateIssue = async (payload: Partial<IIssue>) => {
+  const updateDraftIssue = async (payload: Partial<IIssue>) => {
     if (!user) return;
 
     await issuesService
@@ -203,6 +230,11 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = ({
           mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
         }
 
+        if (!payload.is_draft) {
+          if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
+          if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
+        }
+
         if (!createMore) onClose();
 
         setToastAlert({
@@ -220,7 +252,93 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = ({
       });
   };
 
-  const handleFormSubmit = async (formData: Partial<IIssue>) => {
+  const addIssueToCycle = async (issueId: string, cycleId: string) => {
+    if (!workspaceSlug || !activeProject) return;
+
+    await issuesService
+      .addIssueToCycle(
+        workspaceSlug as string,
+        activeProject ?? "",
+        cycleId,
+        {
+          issues: [issueId],
+        },
+        user
+      )
+      .then(() => {
+        if (cycleId) {
+          mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId, params));
+          mutate(CYCLE_DETAILS(cycleId as string));
+        }
+      });
+  };
+
+  const addIssueToModule = async (issueId: string, moduleId: string) => {
+    if (!workspaceSlug || !activeProject) return;
+
+    await modulesService
+      .addIssuesToModule(
+        workspaceSlug as string,
+        activeProject ?? "",
+        moduleId as string,
+        {
+          issues: [issueId],
+        },
+        user
+      )
+      .then(() => {
+        if (moduleId) {
+          mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+          mutate(MODULE_DETAILS(moduleId as string));
+        }
+      });
+  };
+
+  const createIssue = async (payload: Partial<IIssue>) => {
+    if (!workspaceSlug || !activeProject) return;
+
+    await issuesService
+      .createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
+      .then(async (res) => {
+        mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
+        if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
+        if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
+
+        if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
+        if (displayFilters.layout === "gantt_chart")
+          mutate(ganttFetchKey, {
+            start_target_date: true,
+            order_by: "sort_order",
+          });
+        if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
+        if (groupedIssues) mutateMyIssues();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Issue created successfully.",
+        });
+
+        if (!createMore) onClose();
+
+        if (payload.assignees_list?.some((assignee) => assignee === user?.id))
+          mutate(USER_ISSUE(workspaceSlug as string));
+
+        if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Issue could not be created. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (
+    formData: Partial<IIssue>,
+    action: "createDraft" | "createNewIssue" | "updateDraft" | "convertToNewIssue" = "createDraft"
+  ) => {
     if (!workspaceSlug || !activeProject) return;
 
     const payload: Partial<IIssue> = {
@@ -231,8 +349,10 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = ({
       description_html: formData.description_html ?? "<p></p>",
     };
 
-    if (!data) await createIssue(payload);
-    else await updateIssue(payload);
+    if (action === "createDraft") await createDraftIssue(payload);
+    else if (action === "updateDraft" || action === "convertToNewIssue")
+      await updateDraftIssue(payload);
+    else if (action === "createNewIssue") await createIssue(payload);
 
     clearDraftIssueLocalStorage();
 

web/components/issues/form.tsx

@@ -139,6 +139,8 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
     target_date: getValues("target_date"),
     project: getValues("project"),
     parent: getValues("parent"),
+    cycle: getValues("cycle"),
+    module: getValues("module"),
   };
 
   useEffect(() => {

web/components/issues/index.ts

@@ -12,7 +12,6 @@ export * from "./main-content";
 export * from "./modal";
 export * from "./parent-issues-list-modal";
 export * from "./sidebar";
-export * from "./sub-issues-list";
 export * from "./label";
 export * from "./issue-reaction";
 export * from "./peek-overview";

web/components/issues/main-content.tsx

@@ -18,9 +18,9 @@ import {
   IssueAttachmentUpload,
   IssueAttachments,
   IssueDescriptionForm,
-  SubIssuesList,
   IssueReaction,
 } from "components/issues";
+import { SubIssuesRoot } from "./sub-issues";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
@@ -43,7 +43,7 @@ export const IssueMainContent: React.FC<Props> = ({
   uneditable = false,
 }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId, issueId, archivedIssueId } = router.query;
+  const { workspaceSlug, projectId, issueId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -206,7 +206,7 @@ export const IssueMainContent: React.FC<Props> = ({
         <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
 
         <div className="mt-2 space-y-2">
-          <SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} />
+          <SubIssuesRoot parentIssue={issueDetails} user={user} />
         </div>
       </div>
       <div className="flex flex-col gap-3 py-3">

web/components/issues/modal.tsx

@@ -69,7 +69,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   handleClose,
   isOpen,
   isUpdatingSingleIssue = false,
-  prePopulateData,
+  prePopulateData: prePopulateDataProps,
   fieldsToShow = ["all"],
   onSubmit,
 }) => {
@@ -78,6 +78,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const [formDirtyState, setFormDirtyState] = useState<any>(null);
   const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
   const [activeProject, setActiveProject] = useState<string | null>(null);
+  const [prePopulateData, setPreloadedData] = useState<Partial<IIssue>>({});
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
@@ -98,11 +99,40 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
   const { setToastAlert } = useToast();
 
-  if (router.asPath.includes("my-issues") || router.asPath.includes("assigned"))
-    prePopulateData = {
-      ...prePopulateData,
-      assignees: [...(prePopulateData?.assignees ?? []), user?.id ?? ""],
-    };
+  useEffect(() => {
+    setPreloadedData(prePopulateDataProps ?? {});
+
+    if (cycleId && !prePopulateDataProps?.cycle) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        cycle: cycleId.toString(),
+      }));
+    }
+    if (moduleId && !prePopulateDataProps?.module) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        module: moduleId.toString(),
+      }));
+    }
+    if (
+      (router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
+      !prePopulateDataProps?.assignees
+    ) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        assignees: prePopulateDataProps?.assignees ?? [user?.id ?? ""],
+      }));
+    }
+  }, [prePopulateDataProps, cycleId, moduleId, router.asPath, user?.id]);
+
+  /**
+   *
+   * @description This function is used to close the modals. This function will show a confirm discard modal if the form is dirty.
+   * @returns void
+   */
 
   const onClose = () => {
     if (!showConfirmDiscard) handleClose();
@@ -111,6 +141,22 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
     setValueInLocalStorage(data);
   };
 
+  /**
+   * @description This function is used to close the modals. This function is to be used when the form is submitted,
+   * meaning we don't need to show the confirm discard modal or store the form data in local storage.
+   */
+
+  const onFormSubmitClose = () => {
+    setFormDirtyState(null);
+    handleClose();
+  };
+
+  /**
+   * @description This function is used to close the modals. This function is to be used when we click outside the modal,
+   * meaning we don't need to show the confirm discard modal but will store the form data in local storage.
+   * Use this function when you want to store the form data in local storage.
+   */
+
   const onDiscardClose = () => {
     if (formDirtyState !== null) {
       setShowConfirmDiscard(true);
@@ -295,7 +341,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
           });
         });
 
-    if (!createMore) onDiscardClose();
+    if (!createMore) onFormSubmitClose();
   };
 
   const createDraftIssue = async () => {
@@ -354,7 +400,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
         if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
 
-        if (!createMore) onDiscardClose();
+        if (!createMore) onFormSubmitClose();
 
         setToastAlert({
           type: "success",

web/components/issues/my-issues/my-issues-view-options.tsx

@@ -49,7 +49,7 @@ export const MyIssuesViewOptions: React.FC = () => {
           <Tooltip
             key={option.type}
             tooltipContent={
-              <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
+              <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>
             }
             position="bottom"
           >

web/components/issues/sub-issues-list.tsx

@@ -1,251 +0,0 @@
-import { FC, useState } from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
-// contexts
-import { useProjectMyMembership } from "contexts/project-member.context";
-// components
-import { ExistingIssuesListModal } from "components/core";
-import { CreateUpdateIssueModal } from "components/issues";
-// ui
-import { CustomMenu } from "components/ui";
-// icons
-import { ChevronRightIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
-// types
-import { ICurrentUserResponse, IIssue, ISearchIssueResponse, ISubIssueResponse } from "types";
-// fetch-keys
-import { SUB_ISSUES } from "constants/fetch-keys";
-
-type Props = {
-  parentIssue: IIssue;
-  user: ICurrentUserResponse | undefined;
-  disabled?: boolean;
-};
-
-export const SubIssuesList: FC<Props> = ({ parentIssue, user, disabled = false }) => {
-  // states
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [subIssuesListModal, setSubIssuesListModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<Partial<IIssue> | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { memberRole } = useProjectMyMembership();
-
-  const { data: subIssuesResponse } = useSWR(
-    workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
-    workspaceSlug && parentIssue
-      ? () => issuesService.subIssues(workspaceSlug as string, parentIssue.project, parentIssue.id)
-      : null
-  );
-
-  const addAsSubIssue = async (data: ISearchIssueResponse[]) => {
-    if (!workspaceSlug || !parentIssue) return;
-
-    const payload = {
-      sub_issue_ids: data.map((i) => i.id),
-    };
-
-    await issuesService
-      .addSubIssues(workspaceSlug as string, parentIssue.project, parentIssue.id, payload)
-      .finally(() => mutate(SUB_ISSUES(parentIssue.id)));
-  };
-
-  const handleSubIssueRemove = (issue: IIssue) => {
-    if (!workspaceSlug || !parentIssue) return;
-
-    mutate<ISubIssueResponse>(
-      SUB_ISSUES(parentIssue.id),
-      (prevData) => {
-        if (!prevData) return prevData;
-
-        const stateDistribution = { ...prevData.state_distribution };
-
-        const issueGroup = issue.state_detail.group;
-        stateDistribution[issueGroup] = stateDistribution[issueGroup] - 1;
-
-        return {
-          state_distribution: stateDistribution,
-          sub_issues: prevData.sub_issues.filter((i) => i.id !== issue.id),
-        };
-      },
-      false
-    );
-
-    issuesService
-      .patchIssue(workspaceSlug.toString(), issue.project, issue.id, { parent: null }, user)
-      .finally(() => mutate(SUB_ISSUES(parentIssue.id)));
-  };
-
-  const handleCreateIssueModal = () => {
-    setCreateIssueModal(true);
-
-    setPreloadedData({
-      parent: parentIssue.id,
-    });
-  };
-
-  const completedSubIssue = subIssuesResponse?.state_distribution.completed ?? 0;
-  const cancelledSubIssue = subIssuesResponse?.state_distribution.cancelled ?? 0;
-
-  const totalCompletedSubIssues = completedSubIssue + cancelledSubIssue;
-
-  const totalSubIssues = subIssuesResponse ? subIssuesResponse.sub_issues.length : 0;
-
-  const completionPercentage = (totalCompletedSubIssues / totalSubIssues) * 100;
-
-  const isNotAllowed = memberRole.isGuest || memberRole.isViewer || disabled;
-
-  return (
-    <>
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal}
-        prePopulateData={{ ...preloadedData }}
-        handleClose={() => setCreateIssueModal(false)}
-      />
-      <ExistingIssuesListModal
-        isOpen={subIssuesListModal}
-        handleClose={() => setSubIssuesListModal(false)}
-        searchParams={{ sub_issue: true, issue_id: parentIssue?.id }}
-        handleOnSubmit={addAsSubIssue}
-        workspaceLevelToggle
-      />
-      {subIssuesResponse && subIssuesResponse.sub_issues.length > 0 ? (
-        <Disclosure defaultOpen={true}>
-          {({ open }) => (
-            <>
-              <div className="flex items-center justify-between">
-                <div className="flex items-center justify-start gap-3 text-custom-text-200">
-                  <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs text-custom-text-100 hover:bg-custom-background-80">
-                    <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
-                    Sub-issues{" "}
-                    <span className="ml-1 text-custom-text-200">
-                      {subIssuesResponse.sub_issues.length}
-                    </span>
-                  </Disclosure.Button>
-                  <div className="flex w-60 items-center gap-2">
-                    <div className="bar relative h-1.5 w-full rounded bg-custom-background-80">
-                      <div
-                        className="absolute top-0 left-0 h-1.5 rounded bg-green-500 duration-300"
-                        style={{
-                          width: `${
-                            isNaN(completionPercentage)
-                              ? 0
-                              : completionPercentage > 100
-                              ? 100
-                              : completionPercentage.toFixed(0)
-                          }%`,
-                        }}
-                      />
-                    </div>
-                    <span className="whitespace-nowrap text-xs">
-                      {isNaN(completionPercentage)
-                        ? 0
-                        : completionPercentage > 100
-                        ? 100
-                        : completionPercentage.toFixed(0)}
-                      % Done
-                    </span>
-                  </div>
-                </div>
-
-                {open && !isNotAllowed ? (
-                  <div className="flex items-center">
-                    <button
-                      type="button"
-                      className="flex items-center gap-1 rounded px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80"
-                      onClick={handleCreateIssueModal}
-                    >
-                      <PlusIcon className="h-3 w-3" />
-                      Create new
-                    </button>
-
-                    <CustomMenu ellipsis>
-                      <CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
-                        Add an existing issue
-                      </CustomMenu.MenuItem>
-                    </CustomMenu>
-                  </div>
-                ) : null}
-              </div>
-              <Transition
-                enter="transition duration-100 ease-out"
-                enterFrom="transform scale-95 opacity-0"
-                enterTo="transform scale-100 opacity-100"
-                leave="transition duration-75 ease-out"
-                leaveFrom="transform scale-100 opacity-100"
-                leaveTo="transform scale-95 opacity-0"
-              >
-                <Disclosure.Panel className="mt-3 flex flex-col gap-y-1">
-                  {subIssuesResponse.sub_issues.map((issue) => (
-                    <Link
-                      key={issue.id}
-                      href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}
-                    >
-                      <a className="group flex items-center justify-between gap-2 rounded p-2 hover:bg-custom-background-90">
-                        <div className="flex items-center gap-2 rounded text-xs">
-                          <span
-                            className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                            style={{
-                              backgroundColor: issue.state_detail.color,
-                            }}
-                          />
-                          <span className="flex-shrink-0 text-custom-text-200">
-                            {issue.project_detail.identifier}-{issue.sequence_id}
-                          </span>
-                          <span className="max-w-sm break-words font-medium">{issue.name}</span>
-                        </div>
-
-                        {!isNotAllowed && (
-                          <button
-                            type="button"
-                            className="cursor-pointer opacity-0 group-hover:opacity-100"
-                            onClick={(e) => {
-                              e.preventDefault();
-                              e.stopPropagation();
-                              handleSubIssueRemove(issue);
-                            }}
-                          >
-                            <XMarkIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
-                          </button>
-                        )}
-                      </a>
-                    </Link>
-                  ))}
-                </Disclosure.Panel>
-              </Transition>
-            </>
-          )}
-        </Disclosure>
-      ) : (
-        !isNotAllowed && (
-          <CustomMenu
-            label={
-              <>
-                <PlusIcon className="h-3 w-3" />
-                Add sub-issue
-              </>
-            }
-            buttonClassName="whitespace-nowrap"
-            position="left"
-            noBorder
-            noChevron
-          >
-            <CustomMenu.MenuItem onClick={handleCreateIssueModal}>Create new</CustomMenu.MenuItem>
-            <CustomMenu.MenuItem onClick={() => setSubIssuesListModal(true)}>
-              Add an existing issue
-            </CustomMenu.MenuItem>
-          </CustomMenu>
-        )
-      )}
-    </>
-  );
-};

web/components/issues/sub-issues/index.ts

@@ -0,0 +1 @@
+export * from "./root";

web/components/issues/sub-issues/issue.tsx

@@ -0,0 +1,188 @@
+import React from "react";
+// next imports
+import Link from "next/link";
+// lucide icons
+import {
+  ChevronDown,
+  ChevronRight,
+  X,
+  Pencil,
+  Trash,
+  Link as LinkIcon,
+  Loader,
+} from "lucide-react";
+// components
+import { SubIssuesRootList } from "./issues-list";
+import { IssueProperty } from "./properties";
+// ui
+import { Tooltip, CustomMenu } from "components/ui";
+// types
+import { ICurrentUserResponse, IIssue } from "types";
+import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
+
+export interface ISubIssues {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssue: IIssue;
+  issue: any;
+  spacingLeft?: number;
+  user: ICurrentUserResponse | undefined;
+  editable: boolean;
+  removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
+  issuesLoader: ISubIssuesRootLoaders;
+  handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
+  copyText: (text: string) => void;
+  handleIssueCrudOperation: (
+    key: "create" | "existing" | "edit" | "delete",
+    issueId: string,
+    issue?: IIssue | null
+  ) => void;
+}
+
+export const SubIssues: React.FC<ISubIssues> = ({
+  workspaceSlug,
+  projectId,
+  parentIssue,
+  issue,
+  spacingLeft = 0,
+  user,
+  editable,
+  removeIssueFromSubIssues,
+  issuesLoader,
+  handleIssuesLoader,
+  copyText,
+  handleIssueCrudOperation,
+}) => (
+  <div>
+    {issue && (
+      <div
+        className="relative flex items-center gap-2 py-1 px-2 w-full h-full hover:bg-custom-background-90 group transition-all border-b border-custom-border-100"
+        style={{ paddingLeft: `${spacingLeft}px` }}
+      >
+        <div className="flex-shrink-0 w-[22px] h-[22px]">
+          {issue?.sub_issues_count > 0 && (
+            <>
+              {issuesLoader.sub_issues.includes(issue?.id) ? (
+                <div className="w-full h-full flex justify-center items-center rounded-sm bg-custom-background-80 transition-all cursor-not-allowed">
+                  <Loader width={14} strokeWidth={2} className="animate-spin" />
+                </div>
+              ) : (
+                <div
+                  className="w-full h-full flex justify-center items-center rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer"
+                  onClick={() => handleIssuesLoader({ key: "visibility", issueId: issue?.id })}
+                >
+                  {issuesLoader && issuesLoader.visibility.includes(issue?.id) ? (
+                    <ChevronDown width={14} strokeWidth={2} />
+                  ) : (
+                    <ChevronRight width={14} strokeWidth={2} />
+                  )}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
+          <a className="w-full flex items-center gap-2">
+            <div
+              className="flex-shrink-0 w-[6px] h-[6px] rounded-full"
+              style={{
+                backgroundColor: issue.state_detail.color,
+              }}
+            />
+            <div className="flex-shrink-0 text-xs text-custom-text-200">
+              {issue.project_detail.identifier}-{issue?.sequence_id}
+            </div>
+            <Tooltip tooltipHeading="Title" tooltipContent={`${issue?.name}`}>
+              <div className="line-clamp-1 text-xs text-custom-text-100 pr-2">{issue?.name}</div>
+            </Tooltip>
+          </a>
+        </Link>
+
+        <div className="flex-shrink-0 text-sm">
+          <IssueProperty
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            parentIssue={parentIssue}
+            issue={issue}
+            user={user}
+            editable={editable}
+          />
+        </div>
+
+        <div className="flex-shrink-0 text-sm">
+          <CustomMenu width="auto" ellipsis>
+            {editable && (
+              <CustomMenu.MenuItem
+                onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}
+              >
+                <div className="flex items-center justify-start gap-2">
+                  <Pencil width={14} strokeWidth={2} />
+                  <span>Edit issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+
+            {editable && (
+              <CustomMenu.MenuItem
+                onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}
+              >
+                <div className="flex items-center justify-start gap-2">
+                  <Trash width={14} strokeWidth={2} />
+                  <span>Delete issue</span>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+
+            <CustomMenu.MenuItem
+              onClick={() =>
+                copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)
+              }
+            >
+              <div className="flex items-center justify-start gap-2">
+                <LinkIcon width={14} strokeWidth={2} />
+                <span>Copy issue link</span>
+              </div>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
+
+        {editable && (
+          <>
+            {issuesLoader.delete.includes(issue?.id) ? (
+              <div className="flex-shrink-0 w-[22px] h-[22px] rounded-sm bg-red-200/10 text-red-500 transition-all cursor-not-allowed overflow-hidden flex justify-center items-center">
+                <Loader width={14} strokeWidth={2} className="animate-spin" />
+              </div>
+            ) : (
+              <div
+                className="flex-shrink-0 invisible group-hover:visible w-[22px] h-[22px] rounded-sm hover:bg-custom-background-80 transition-all cursor-pointer overflow-hidden flex justify-center items-center"
+                onClick={() => {
+                  handleIssuesLoader({ key: "delete", issueId: issue?.id });
+                  removeIssueFromSubIssues(parentIssue?.id, issue);
+                }}
+              >
+                <X width={14} strokeWidth={2} />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    )}
+
+    {issuesLoader.visibility.includes(issue?.id) && issue?.sub_issues_count > 0 && (
+      <SubIssuesRootList
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        parentIssue={issue}
+        spacingLeft={spacingLeft + 22}
+        user={user}
+        editable={editable}
+        removeIssueFromSubIssues={removeIssueFromSubIssues}
+        issuesLoader={issuesLoader}
+        handleIssuesLoader={handleIssuesLoader}
+        copyText={copyText}
+        handleIssueCrudOperation={handleIssueCrudOperation}
+      />
+    )}
+  </div>
+);

web/components/issues/sub-issues/issues-list.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+// swr
+import useSWR from "swr";
+// components
+import { SubIssues } from "./issue";
+// types
+import { ICurrentUserResponse, IIssue } from "types";
+import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
+// services
+import issuesService from "services/issues.service";
+// fetch keys
+import { SUB_ISSUES } from "constants/fetch-keys";
+
+export interface ISubIssuesRootList {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssue: IIssue;
+  spacingLeft?: number;
+  user: ICurrentUserResponse | undefined;
+  editable: boolean;
+  removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
+  issuesLoader: ISubIssuesRootLoaders;
+  handleIssuesLoader: ({ key, issueId }: ISubIssuesRootLoadersHandler) => void;
+  copyText: (text: string) => void;
+  handleIssueCrudOperation: (
+    key: "create" | "existing" | "edit" | "delete",
+    issueId: string,
+    issue?: IIssue | null
+  ) => void;
+}
+
+export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
+  workspaceSlug,
+  projectId,
+  parentIssue,
+  spacingLeft = 10,
+  user,
+  editable,
+  removeIssueFromSubIssues,
+  issuesLoader,
+  handleIssuesLoader,
+  copyText,
+  handleIssueCrudOperation,
+}) => {
+  const { data: issues, isLoading } = useSWR(
+    workspaceSlug && projectId && parentIssue && parentIssue?.id
+      ? SUB_ISSUES(parentIssue?.id)
+      : null,
+    workspaceSlug && projectId && parentIssue && parentIssue?.id
+      ? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id)
+      : null
+  );
+
+  React.useEffect(() => {
+    if (isLoading) {
+      handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
+    } else {
+      if (issuesLoader.sub_issues.includes(parentIssue?.id)) {
+        handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
+      }
+    }
+  }, [isLoading]);
+
+  return (
+    <div className="relative">
+      {issues &&
+        issues.sub_issues &&
+        issues.sub_issues.length > 0 &&
+        issues.sub_issues.map((issue: IIssue) => (
+          <SubIssues
+            key={`${issue?.id}`}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            parentIssue={parentIssue}
+            issue={issue}
+            spacingLeft={spacingLeft}
+            user={user}
+            editable={editable}
+            removeIssueFromSubIssues={removeIssueFromSubIssues}
+            issuesLoader={issuesLoader}
+            handleIssuesLoader={handleIssuesLoader}
+            copyText={copyText}
+            handleIssueCrudOperation={handleIssueCrudOperation}
+          />
+        ))}
+
+      <div
+        className={`absolute top-0 bottom-0  ${
+          spacingLeft > 10 ? `border-l border-custom-border-100` : ``
+        }`}
+        style={{ left: `${spacingLeft - 12}px` }}
+      />
+    </div>
+  );
+};

web/components/issues/sub-issues/progressbar.tsx

@@ -0,0 +1,25 @@
+export interface IProgressBar {
+  total: number;
+  done: number;
+}
+
+export const ProgressBar = ({ total = 0, done = 0 }: IProgressBar) => {
+  const calPercentage = (doneValue: number, totalValue: number): string => {
+    if (doneValue === 0 || totalValue === 0) return (0).toFixed(0);
+    return ((100 * doneValue) / totalValue).toFixed(0);
+  };
+
+  return (
+    <div className="relative flex items-center gap-2">
+      <div className="w-full">
+        <div className="w-full rounded-full bg-custom-background-80 overflow-hidden shadow">
+          <div
+            className="bg-green-500 h-[6px] rounded-full transition-all"
+            style={{ width: `${calPercentage(done, total)}%` }}
+          />
+        </div>
+      </div>
+      <div className="flex-shrink-0 text-xs font-medium">{calPercentage(done, total)}% Done</div>
+    </div>
+  );
+};

web/components/issues/sub-issues/properties.tsx

@@ -0,0 +1,208 @@
+import React from "react";
+// swr
+import { mutate } from "swr";
+// components
+import { ViewDueDateSelect, ViewStartDateSelect } from "components/issues";
+import { MembersSelect, PrioritySelect } from "components/project";
+import { StateSelect } from "components/states";
+// hooks
+import useIssuesProperties from "hooks/use-issue-properties";
+// types
+import { ICurrentUserResponse, IIssue, IState } from "types";
+// fetch-keys
+import { SUB_ISSUES } from "constants/fetch-keys";
+// services
+import issuesService from "services/issues.service";
+import trackEventServices from "services/track-event.service";
+
+export interface IIssueProperty {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssue: IIssue;
+  issue: IIssue;
+  user: ICurrentUserResponse | undefined;
+  editable: boolean;
+}
+
+export const IssueProperty: React.FC<IIssueProperty> = ({
+  workspaceSlug,
+  projectId,
+  parentIssue,
+  issue,
+  user,
+  editable,
+}) => {
+  const [properties] = useIssuesProperties(workspaceSlug, projectId);
+
+  const handlePriorityChange = (data: any) => {
+    partialUpdateIssue({ priority: data });
+    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_PRIORITY",
+      user
+    );
+  };
+
+  const handleStateChange = (data: string, states: IState[] | undefined) => {
+    const oldState = states?.find((s) => s.id === issue.state);
+    const newState = states?.find((s) => s.id === data);
+
+    partialUpdateIssue({
+      state: data,
+      state_detail: newState,
+    });
+    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_STATE",
+      user
+    );
+    if (oldState?.group !== "completed" && newState?.group !== "completed") {
+      trackEventServices.trackIssueMarkedAsDoneEvent(
+        {
+          workspaceSlug: issue.workspace_detail.slug,
+          workspaceId: issue.workspace_detail.id,
+          projectId: issue.project_detail.id,
+          projectIdentifier: issue.project_detail.identifier,
+          projectName: issue.project_detail.name,
+          issueId: issue.id,
+        },
+        user
+      );
+    }
+  };
+
+  const handleAssigneeChange = (data: any) => {
+    let newData = issue.assignees ?? [];
+
+    if (newData && newData.length > 0) {
+      if (newData.includes(data)) newData = newData.splice(newData.indexOf(data), 1);
+      else newData = [...newData, data];
+    } else newData = [...newData, data];
+
+    partialUpdateIssue({ assignees_list: data, assignees: data });
+
+    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+      {
+        workspaceSlug,
+        workspaceId: issue.workspace,
+        projectId: issue.project_detail.id,
+        projectIdentifier: issue.project_detail.identifier,
+        projectName: issue.project_detail.name,
+        issueId: issue.id,
+      },
+      "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
+      user
+    );
+  };
+
+  const partialUpdateIssue = async (data: Partial<IIssue>) => {
+    mutate(
+      workspaceSlug && parentIssue ? SUB_ISSUES(parentIssue.id) : null,
+      (elements: any) => {
+        const _elements = { ...elements };
+        const _issues = _elements.sub_issues.map((element: IIssue) =>
+          element.id === issue.id ? { ...element, ...data } : element
+        );
+        _elements["sub_issues"] = [..._issues];
+        return _elements;
+      },
+      false
+    );
+
+    const issueResponse = await issuesService.patchIssue(
+      workspaceSlug as string,
+      issue.project,
+      issue.id,
+      data,
+      user
+    );
+
+    mutate(
+      SUB_ISSUES(parentIssue.id),
+      (elements: any) => {
+        const _elements = elements.sub_issues.map((element: IIssue) =>
+          element.id === issue.id ? issueResponse : element
+        );
+        elements["sub_issues"] = _elements;
+        return elements;
+      },
+      true
+    );
+  };
+
+  return (
+    <div className="relative flex items-center gap-1">
+      {properties.priority && (
+        <div className="flex-shrink-0">
+          <PrioritySelect
+            value={issue.priority}
+            onChange={handlePriorityChange}
+            hideDropdownArrow
+            disabled={!editable}
+          />
+        </div>
+      )}
+
+      {properties.state && (
+        <div className="flex-shrink-0">
+          <StateSelect
+            value={issue.state_detail}
+            projectId={issue.project_detail.id}
+            onChange={handleStateChange}
+            hideDropdownArrow
+            disabled={!editable}
+          />
+        </div>
+      )}
+
+      {properties.start_date && issue.start_date && (
+        <div className="flex-shrink-0 w-[104px]">
+          <ViewStartDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            user={user}
+            isNotAllowed={!editable}
+          />
+        </div>
+      )}
+
+      {properties.due_date && issue.target_date && (
+        <div className="flex-shrink-0 w-[104px]">
+          <ViewDueDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            user={user}
+            isNotAllowed={!editable}
+          />
+        </div>
+      )}
+
+      {properties.assignee && (
+        <div className="flex-shrink-0">
+          <MembersSelect
+            value={issue.assignees}
+            projectId={issue.project_detail.id}
+            onChange={handleAssigneeChange}
+            membersDetails={issue.assignee_details}
+            hideDropdownArrow
+            disabled={!editable}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

web/components/issues/sub-issues/root.tsx

@@ -0,0 +1,328 @@
+import React from "react";
+// next imports
+import { useRouter } from "next/router";
+// swr
+import useSWR, { mutate } from "swr";
+// lucide icons
+import { Plus, ChevronRight, ChevronDown } from "lucide-react";
+// components
+import { ExistingIssuesListModal } from "components/core";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
+import { SubIssuesRootList } from "./issues-list";
+import { ProgressBar } from "./progressbar";
+// ui
+import { CustomMenu } from "components/ui";
+// hooks
+import { useProjectMyMembership } from "contexts/project-member.context";
+import useToast from "hooks/use-toast";
+// helpers
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
+// services
+import issuesService from "services/issues.service";
+// fetch keys
+import { SUB_ISSUES } from "constants/fetch-keys";
+
+export interface ISubIssuesRoot {
+  parentIssue: IIssue;
+  user: ICurrentUserResponse | undefined;
+}
+
+export interface ISubIssuesRootLoaders {
+  visibility: string[];
+  delete: string[];
+  sub_issues: string[];
+}
+export interface ISubIssuesRootLoadersHandler {
+  key: "visibility" | "delete" | "sub_issues";
+  issueId: string;
+}
+
+export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
+
+  const { memberRole } = useProjectMyMembership();
+  const { setToastAlert } = useToast();
+
+  const { data: issues, isLoading } = useSWR(
+    workspaceSlug && projectId && parentIssue && parentIssue?.id
+      ? SUB_ISSUES(parentIssue?.id)
+      : null,
+    workspaceSlug && projectId && parentIssue && parentIssue?.id
+      ? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id)
+      : null
+  );
+
+  const [issuesLoader, setIssuesLoader] = React.useState<ISubIssuesRootLoaders>({
+    visibility: [parentIssue?.id],
+    delete: [],
+    sub_issues: [],
+  });
+  const handleIssuesLoader = ({ key, issueId }: ISubIssuesRootLoadersHandler) => {
+    setIssuesLoader((previousData: ISubIssuesRootLoaders) => ({
+      ...previousData,
+      [key]: previousData[key].includes(issueId)
+        ? previousData[key].filter((i: string) => i !== issueId)
+        : [...previousData[key], issueId],
+    }));
+  };
+
+  const [issueCrudOperation, setIssueCrudOperation] = React.useState<{
+    create: { toggle: boolean; issueId: string | null };
+    existing: { toggle: boolean; issueId: string | null };
+    edit: { toggle: boolean; issueId: string | null; issue: IIssue | null };
+    delete: { toggle: boolean; issueId: string | null; issue: IIssue | null };
+  }>({
+    create: {
+      toggle: false,
+      issueId: null,
+    },
+    existing: {
+      toggle: false,
+      issueId: null,
+    },
+    edit: {
+      toggle: false,
+      issueId: null, // parent issue id for mutation
+      issue: null,
+    },
+    delete: {
+      toggle: false,
+      issueId: null, // parent issue id for mutation
+      issue: null,
+    },
+  });
+  const handleIssueCrudOperation = (
+    key: "create" | "existing" | "edit" | "delete",
+    issueId: string | null,
+    issue: IIssue | null = null
+  ) => {
+    setIssueCrudOperation({
+      ...issueCrudOperation,
+      [key]: {
+        toggle: !issueCrudOperation[key].toggle,
+        issueId: issueId,
+        issue: issue,
+      },
+    });
+  };
+
+  const addAsSubIssueFromExistingIssues = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !parentIssue || issueCrudOperation?.existing?.issueId === null) return;
+    const issueId = issueCrudOperation?.existing?.issueId;
+    const payload = {
+      sub_issue_ids: data.map((i) => i.id),
+    };
+    await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
+      if (issueId) mutate(SUB_ISSUES(issueId));
+    });
+  };
+
+  const removeIssueFromSubIssues = async (parentIssueId: string, issue: IIssue) => {
+    if (!workspaceSlug || !parentIssue || !issue?.id) return;
+    issuesService
+      .patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user)
+      .then(async () => {
+        if (parentIssueId) await mutate(SUB_ISSUES(parentIssueId));
+        handleIssuesLoader({ key: "delete", issueId: issue?.id });
+        setToastAlert({
+          type: "success",
+          title: `Issue removed!`,
+          message: `Issue removed successfully.`,
+        });
+      })
+      .catch(() => {
+        handleIssuesLoader({ key: "delete", issueId: issue?.id });
+        setToastAlert({
+          type: "warning",
+          title: `Error!`,
+          message: `Error, Please try again later.`,
+        });
+      });
+  };
+
+  const copyText = (text: string) => {
+    const originURL =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${text}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const isEditable = memberRole?.isGuest || memberRole?.isViewer ? false : true;
+
+  const mutateSubIssues = (parentIssueId: string | null) => {
+    if (parentIssueId) mutate(SUB_ISSUES(parentIssueId));
+  };
+
+  return (
+    <div className="w-full h-full space-y-2">
+      {!issues && isLoading ? (
+        <div className="py-3 text-center text-sm  text-custom-text-300 font-medium">Loading...</div>
+      ) : (
+        <>
+          {issues && issues?.sub_issues && issues?.sub_issues?.length > 0 ? (
+            <>
+              {/* header */}
+              <div className="relative flex items-center gap-4 text-xs">
+                <div
+                  className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
+                  onClick={() =>
+                    handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })
+                  }
+                >
+                  <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                    {issuesLoader.visibility.includes(parentIssue?.id) ? (
+                      <ChevronDown width={16} strokeWidth={2} />
+                    ) : (
+                      <ChevronRight width={14} strokeWidth={2} />
+                    )}
+                  </div>
+                  <div>Sub-issues</div>
+                  <div>({issues?.sub_issues?.length || 0})</div>
+                </div>
+
+                <div className="w-full max-w-[250px] select-none">
+                  <ProgressBar
+                    total={issues?.sub_issues?.length || 0}
+                    done={
+                      (issues?.state_distribution?.cancelled || 0) +
+                      (issues?.state_distribution?.completed || 0)
+                    }
+                  />
+                </div>
+
+                {isEditable && issuesLoader.visibility.includes(parentIssue?.id) && (
+                  <div className="ml-auto flex-shrink-0 flex items-center gap-2 select-none">
+                    <div
+                      className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
+                      onClick={() => handleIssueCrudOperation("create", parentIssue?.id)}
+                    >
+                      Add sub-issue
+                    </div>
+                    <div
+                      className="hover:bg-custom-background-80 transition-all cursor-pointer p-1.5 px-2 rounded border border-custom-border-100 shadow"
+                      onClick={() => handleIssueCrudOperation("existing", parentIssue?.id)}
+                    >
+                      Add an existing issue
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* issues */}
+              {issuesLoader.visibility.includes(parentIssue?.id) && (
+                <div className="border border-b-0 border-custom-border-100">
+                  <SubIssuesRootList
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    parentIssue={parentIssue}
+                    user={undefined}
+                    editable={isEditable}
+                    removeIssueFromSubIssues={removeIssueFromSubIssues}
+                    issuesLoader={issuesLoader}
+                    handleIssuesLoader={handleIssuesLoader}
+                    copyText={copyText}
+                    handleIssueCrudOperation={handleIssueCrudOperation}
+                  />
+                </div>
+              )}
+            </>
+          ) : (
+            isEditable && (
+              <div className="text-xs py-2 text-custom-text-300 font-medium">
+                <div className="py-3 text-center">No sub issues are available</div>
+                <>
+                  <CustomMenu
+                    label={
+                      <>
+                        <Plus className="h-3 w-3" />
+                        Add sub-issue
+                      </>
+                    }
+                    buttonClassName="whitespace-nowrap"
+                    position="left"
+                    noBorder
+                    noChevron
+                  >
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        mutateSubIssues(parentIssue?.id);
+                        handleIssueCrudOperation("create", parentIssue?.id);
+                      }}
+                    >
+                      Create new
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        mutateSubIssues(parentIssue?.id);
+                        handleIssueCrudOperation("existing", parentIssue?.id);
+                      }}
+                    >
+                      Add an existing issue
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </>
+              </div>
+            )
+          )}
+          {isEditable && issueCrudOperation?.create?.toggle && (
+            <CreateUpdateIssueModal
+              isOpen={issueCrudOperation?.create?.toggle}
+              prePopulateData={{
+                parent: issueCrudOperation?.create?.issueId,
+              }}
+              handleClose={() => {
+                mutateSubIssues(issueCrudOperation?.create?.issueId);
+                handleIssueCrudOperation("create", null);
+              }}
+            />
+          )}
+          {isEditable &&
+            issueCrudOperation?.existing?.toggle &&
+            issueCrudOperation?.existing?.issueId && (
+              <ExistingIssuesListModal
+                isOpen={issueCrudOperation?.existing?.toggle}
+                handleClose={() => handleIssueCrudOperation("existing", null)}
+                searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
+                handleOnSubmit={addAsSubIssueFromExistingIssues}
+                workspaceLevelToggle
+              />
+            )}
+          {isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
+            <>
+              <CreateUpdateIssueModal
+                isOpen={issueCrudOperation?.edit?.toggle}
+                handleClose={() => {
+                  mutateSubIssues(issueCrudOperation?.edit?.issueId);
+                  handleIssueCrudOperation("edit", null, null);
+                }}
+                data={issueCrudOperation?.edit?.issue}
+              />
+            </>
+          )}
+          {isEditable &&
+            issueCrudOperation?.delete?.toggle &&
+            issueCrudOperation?.delete?.issueId && (
+              <DeleteIssueModal
+                isOpen={issueCrudOperation?.delete?.toggle}
+                handleClose={() => {
+                  mutateSubIssues(issueCrudOperation?.delete?.issueId);
+                  handleIssueCrudOperation("delete", null, null);
+                }}
+                data={issueCrudOperation?.delete?.issue}
+                user={user}
+                redirection={false}
+              />
+            )}
+        </>
+      )}
+    </div>
+  );
+};

web/components/labels/single-label.tsx

@@ -1,11 +1,13 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 
+//hook
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
 import { CustomMenu } from "components/ui";
 // types
 import { IIssueLabels } from "types";
 //icons
-import { RectangleGroupIcon, PencilIcon } from "@heroicons/react/24/outline";
+import { PencilIcon } from "@heroicons/react/24/outline";
 import { Component, X } from "lucide-react";
 
 type Props = {
@@ -20,9 +22,14 @@ export const SingleLabel: React.FC<Props> = ({
   addLabelToGroup,
   editLabel,
   handleLabelDelete,
-}) => (
-  <div className="gap-2 space-y-3 divide-y divide-custom-border-200 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
-    <div className="group flex items-center justify-between">
+}) => {
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
+  return (
+    <div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
       <div className="flex items-center gap-3">
         <span
           className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
@@ -32,36 +39,41 @@ export const SingleLabel: React.FC<Props> = ({
         />
         <h6 className="text-sm">{label.name}</h6>
       </div>
-      <div className="flex items-center gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
-        <div className="h-4 w-4">
-          <CustomMenu
-            customButton={
-              <div className="h-4 w-4">
-                <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
-              </div>
-            }
+      <div
+        ref={actionSectionRef}
+        className={`absolute -top-0.5 right-3 flex items-start gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${
+          isMenuActive ? "opacity-100" : ""
+        }`}
+      >
+        <CustomMenu
+          customButton={
+            <div className="h-4 w-4" onClick={() => setIsMenuActive(!isMenuActive)}>
+              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
+            </div>
+          }
+        >
+          <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
+            <span className="flex items-center justify-start gap-2">
+              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
+              <span>Convert to group</span>
+            </span>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem onClick={() => editLabel(label)}>
+            <span className="flex items-center justify-start gap-2">
+              <PencilIcon className="h-4 w-4" />
+              <span>Edit label</span>
+            </span>
+          </CustomMenu.MenuItem>
+        </CustomMenu>
+        <div className="py-0.5">
+          <button
+            className="flex h-4 w-4 items-center justify-start gap-2"
+            onClick={handleLabelDelete}
           >
-            <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
-              <span className="flex items-center justify-start gap-2">
-                <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
-                <span>Convert to group</span>
-              </span>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem onClick={() => editLabel(label)}>
-              <span className="flex items-center justify-start gap-2">
-                <PencilIcon className="h-4 w-4" />
-                <span>Edit label</span>
-              </span>
-            </CustomMenu.MenuItem>
-          </CustomMenu>
-        </div>
-
-        <div className="flex items-center">
-          <button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
-            <X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
+            <X className="h-4 w-4  text-custom-sidebar-text-400 flex-shrink-0" />
           </button>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+};

web/components/profile/profile-issues-view-options.tsx

@@ -81,7 +81,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
           <Tooltip
             key={option.type}
             tooltipContent={
-              <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
+              <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>
             }
             position="bottom"
           >

web/components/profile/profile-issues-view.tsx

@@ -51,7 +51,6 @@ export const ProfileIssuesView = () => {
     groupedIssues,
     mutateProfileIssues,
     displayFilters,
-    setDisplayFilters,
     isEmpty,
     filters,
     setFilters,

web/components/project/label-select.tsx

@@ -24,6 +24,7 @@ import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   value: string[];
+  projectId: string;
   onChange: (data: any) => void;
   labelsDetails: any[];
   className?: string;
@@ -37,6 +38,7 @@ type Props = {
 
 export const LabelSelect: React.FC<Props> = ({
   value,
+  projectId,
   onChange,
   labelsDetails,
   className = "",
@@ -54,15 +56,15 @@ export const LabelSelect: React.FC<Props> = ({
   const [labelModal, setLabelModal] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
   const dropdownBtn = useRef<any>(null);
   const dropdownOptions = useRef<any>(null);
 
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
-    projectId && fetchStates ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
+    projectId && fetchStates ? PROJECT_ISSUE_LABELS(projectId) : null,
     workspaceSlug && projectId && fetchStates
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId)
       : null
   );
 
@@ -150,7 +152,7 @@ export const LabelSelect: React.FC<Props> = ({
         <CreateLabelModal
           isOpen={labelModal}
           handleClose={() => setLabelModal(false)}
-          projectId={projectId.toString()}
+          projectId={projectId}
           user={user}
         />
       )}

web/components/project/members-select.tsx

@@ -18,6 +18,7 @@ import { IUser } from "types";
 
 type Props = {
   value: string | string[];
+  projectId: string;
   onChange: (data: any) => void;
   membersDetails: IUser[];
   renderWorkspaceMembers?: boolean;
@@ -30,6 +31,7 @@ type Props = {
 
 export const MembersSelect: React.FC<Props> = ({
   value,
+  projectId,
   onChange,
   membersDetails,
   renderWorkspaceMembers = false,
@@ -44,14 +46,14 @@ export const MembersSelect: React.FC<Props> = ({
   const [fetchStates, setFetchStates] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
   const dropdownBtn = useRef<any>(null);
   const dropdownOptions = useRef<any>(null);
 
   const { members } = useProjectMembers(
     workspaceSlug?.toString(),
-    projectId?.toString(),
+    projectId,
     fetchStates && !renderWorkspaceMembers
   );
 
@@ -82,7 +84,7 @@ export const MembersSelect: React.FC<Props> = ({
     <Tooltip
       tooltipHeading="Assignee"
       tooltipContent={
-        membersDetails.length > 0
+        membersDetails && membersDetails.length > 0
           ? membersDetails.map((assignee) => assignee?.display_name).join(", ")
           : "No Assignee"
       }

web/components/project/single-project-card.tsx

@@ -149,7 +149,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                   </button>
                 ) : (
                   <span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">
-                    Member
+                    Joined
                   </span>
                 )}
                 {project.is_favorite && (

web/components/states/state-select.tsx

@@ -25,6 +25,7 @@ import { getStatesList } from "helpers/state.helper";
 type Props = {
   value: IState;
   onChange: (data: any, states: IState[] | undefined) => void;
+  projectId: string;
   className?: string;
   buttonClassName?: string;
   optionsClassName?: string;
@@ -35,6 +36,7 @@ type Props = {
 export const StateSelect: React.FC<Props> = ({
   value,
   onChange,
+  projectId,
   className = "",
   buttonClassName = "",
   optionsClassName = "",
@@ -50,12 +52,12 @@ export const StateSelect: React.FC<Props> = ({
   const [fetchStates, setFetchStates] = useState<boolean>(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
   const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId && fetchStates ? STATES_LIST(projectId as string) : null,
+    workspaceSlug && projectId && fetchStates ? STATES_LIST(projectId) : null,
     workspaceSlug && projectId && fetchStates
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      ? () => stateService.getStates(workspaceSlug as string, projectId)
       : null
   );
 

web/components/ui/product-updates-modal.tsx

@@ -1,15 +1,16 @@
 import React from "react";
+
 import useSWR from "swr";
 
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// component
-import { MarkdownRenderer, Spinner } from "components/ui";
-// icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
 // services
 import workspaceService from "services/workspace.service";
-// helper
+// components
+import { Loader, MarkdownRenderer } from "components/ui";
+// icons
+import { XMarkIcon } from "@heroicons/react/20/solid";
+// helpers
 import { renderLongDateFormat } from "helpers/date-time.helper";
 
 type Props = {
@@ -34,8 +35,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
           <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="grid place-items-center min-h-full text-center p-4">
+        <div className="fixed inset-0 z-20 h-full w-full">
+          <div className="grid place-items-center h-full w-full p-4">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -45,49 +46,62 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all grid place-items-center sm:w-full sm:max-w-2xl">
-                <div className="max-h-[90vh] overflow-y-auto p-5">
-                  <div className="sm:flex sm:items-start">
-                    <div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="flex justify-between text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        <span>Product Updates</span>
-                        <span>
-                          <button type="button" onClick={() => setIsOpen(false)}>
-                            <XMarkIcon
-                              className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
-                              aria-hidden="true"
-                            />
-                          </button>
-                        </span>
-                      </Dialog.Title>
-                      {updates && updates.length > 0 ? (
-                        updates.map((item, index) => (
-                          <React.Fragment key={item.id}>
-                            <div className="flex items-center gap-3 text-xs text-custom-text-200">
-                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
-                                {item.tag_name}
+              <Dialog.Panel className="relative overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 shadow-custom-shadow-rg] min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
+                <div className="flex flex-col p-4 max-h-[90vh] w-full">
+                  <Dialog.Title
+                    as="h3"
+                    className="flex items-center justify-between text-lg font-semibold"
+                  >
+                    <span>Product Updates</span>
+                    <span>
+                      <button type="button" onClick={() => setIsOpen(false)}>
+                        <XMarkIcon
+                          className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </span>
+                  </Dialog.Title>
+                  {updates && updates.length > 0 ? (
+                    <div className="h-full overflow-y-auto mt-4 space-y-4">
+                      {updates.map((item, index) => (
+                        <React.Fragment key={item.id}>
+                          <div className="flex items-center gap-3 text-xs text-custom-text-200">
+                            <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
+                              {item.tag_name}
+                            </span>
+                            <span>{renderLongDateFormat(item.published_at)}</span>
+                            {index === 0 && (
+                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
+                                New
                               </span>
-                              <span>{renderLongDateFormat(item.published_at)}</span>
-                              {index === 0 && (
-                                <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
-                                  New
-                                </span>
-                              )}
-                            </div>
-                            <MarkdownRenderer markdown={item.body} />
-                          </React.Fragment>
-                        ))
-                      ) : (
-                        <div className="flex h-full w-full items-center justify-center">
-                          <Spinner />
-                          Loading...
-                        </div>
-                      )}
+                            )}
+                          </div>
+                          <MarkdownRenderer markdown={item.body} />
+                        </React.Fragment>
+                      ))}
                     </div>
-                  </div>
+                  ) : (
+                    <div className="grid place-items-center w-full mt-4">
+                      <Loader className="space-y-6 w-full">
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                      </Loader>
+                    </div>
+                  )}
                 </div>
               </Dialog.Panel>
             </Transition.Child>

web/components/ui/toggle-switch.tsx

@@ -35,7 +35,7 @@ export const ToggleSwitch: React.FC<Props> = (props) => {
                 : size === "md"
                 ? "translate-x-4"
                 : "translate-x-5") + " bg-white"
-            : "translate-x-1 bg-custom-background-90"
+            : "translate-x-0.5 bg-custom-background-90"
         }`}
       />
     </Switch>

web/components/workspace/sidebar-quick-action.tsx

@@ -3,8 +3,6 @@ import React, { useState } from "react";
 // ui
 import { Icon } from "components/ui";
 import { ChevronDown, PenSquare } from "lucide-react";
-// headless ui
-import { Menu, Transition } from "@headlessui/react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -17,10 +15,7 @@ export const WorkspaceSidebarQuickAction = () => {
 
   const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
 
-  const { storedValue, clearValue } = useLocalStorage<any>(
-    "draftedIssue",
-    JSON.stringify(undefined)
-  );
+  const { storedValue, clearValue } = useLocalStorage<any>("draftedIssue", JSON.stringify({}));
 
   return (
     <>
@@ -31,18 +26,17 @@ export const WorkspaceSidebarQuickAction = () => {
         onSubmit={() => {
           localStorage.removeItem("draftedIssue");
           clearValue();
-          setIsDraftIssueModalOpen(false);
         }}
         fieldsToShow={["all"]}
       />
 
       <div
-        className={`relative flex items-center justify-between w-full cursor-pointer px-4 mt-4 ${
+        className={`flex items-center justify-between w-full cursor-pointer px-4 mt-4 ${
           store?.theme?.sidebarCollapsed ? "flex-col gap-1" : "gap-2"
         }`}
       >
         <div
-          className={`flex items-center justify-between w-full rounded cursor-pointer px-2 gap-1 group ${
+          className={`relative flex items-center justify-between w-full rounded cursor-pointer px-2 gap-1 group ${
             store?.theme?.sidebarCollapsed
               ? "px-2 hover:bg-custom-sidebar-background-80"
               : "px-3 shadow border-[0.5px] border-custom-border-300"
@@ -50,7 +44,7 @@ export const WorkspaceSidebarQuickAction = () => {
         >
           <button
             type="button"
-            className="flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5"
+            className="relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5"
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "c" });
               document.dispatchEvent(e);
@@ -65,56 +59,35 @@ export const WorkspaceSidebarQuickAction = () => {
             )}
           </button>
 
-          {storedValue && <div className="h-8 w-0.5 bg-custom-sidebar-background-80" />}
+          {storedValue && Object.keys(JSON.parse(storedValue)).length > 0 && (
+            <>
+              <div className="h-8 w-0.5 bg-custom-sidebar-background-80" />
 
-          {storedValue && (
-            <div className="relative">
-              <Menu as={React.Fragment}>
-                {({ open }) => (
-                  <>
-                    <div>
-                      <Menu.Button
-                        type="button"
-                        className={`flex items-center justify-center rounded flex-shrink-0 p-1.5 ${
-                          open ? "rotate-180 pl-0" : "rotate-0 pr-0"
-                        }`}
-                      >
-                        <ChevronDown
-                          size={16}
-                          className="!text-custom-sidebar-text-300 transform transition-transform duration-300"
-                        />
-                      </Menu.Button>
-                    </div>
-                    <Transition
-                      as={React.Fragment}
-                      enter="transition ease-out duration-100"
-                      enterFrom="transform opacity-0 scale-95"
-                      enterTo="transform opacity-100 scale-100"
-                      leave="transition ease-in duration-75"
-                      leaveFrom="transform opacity-100 scale-100"
-                      leaveTo="transform opacity-0 scale-95"
-                    >
-                      <Menu.Items className="absolute -right-4 mt-1 w-52 bg-custom-background-300">
-                        <div className="px-1 py-1 ">
-                          <Menu.Item>
-                            <button
-                              onClick={() => setIsDraftIssueModalOpen(true)}
-                              className="w-full flex text-sm items-center rounded flex-shrink-0 py-[10px] px-3 bg-custom-background-100 shadow border-[0.5px] border-custom-border-300 text-custom-text-300"
-                            >
-                              <PenSquare
-                                size={16}
-                                className="!text-lg !leading-4 text-custom-sidebar-text-300 mr-2"
-                              />
-                              Last Drafted Issue
-                            </button>
-                          </Menu.Item>
-                        </div>
-                      </Menu.Items>
-                    </Transition>
-                  </>
-                )}
-              </Menu>
-            </div>
+              <button
+                type="button"
+                className="flex items-center justify-center rounded flex-shrink-0 py-1.5 ml-1.5"
+              >
+                <ChevronDown
+                  size={16}
+                  className="!text-custom-sidebar-text-300 transform transition-transform duration-300 group-hover:rotate-180 rotate-0"
+                />
+              </button>
+
+              <div className="absolute w-full h-10 pt-2 top-full left-0 opacity-0 group-hover:opacity-100 mt-0 pointer-events-none group-hover:pointer-events-auto">
+                <div className="w-full h-full">
+                  <button
+                    onClick={() => setIsDraftIssueModalOpen(true)}
+                    className="w-full flex text-sm items-center rounded flex-shrink-0 py-[10px] px-3 bg-custom-background-100 shadow border-[0.5px] border-custom-border-300 text-custom-text-300"
+                  >
+                    <PenSquare
+                      size={16}
+                      className="!text-lg !leading-4 text-custom-sidebar-text-300 mr-2"
+                    />
+                    Last Drafted Issue
+                  </button>
+                </div>
+              </div>
+            </>
           )}
         </div>
 

web/contexts/profile-issues-context.tsx

@@ -71,9 +71,8 @@ export const reducer: ReducerFunctionType = (state, action) => {
         ...state,
         display_filters: {
           ...state.display_filters,
-          ...payload,
+          ...payload?.display_filters,
         },
-        issueView: payload?.display_filters?.layout || "list",
       };
 
       return {
@@ -100,7 +99,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
     case "SET_PROPERTIES": {
       const newState = {
         ...state,
-        properties: {
+        display_properties: {
           ...state.display_properties,
           ...payload?.display_properties,
         },
@@ -129,7 +128,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
         type: "SET_DISPLAY_FILTERS",
         payload: {
           display_filters: {
-            ...state.display_filters,
             ...displayFilter,
           },
         },
@@ -179,7 +177,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
         type: "SET_PROPERTIES",
         payload: {
           display_properties: {
-            ...state.display_properties,
             [key]: !state.display_properties[key],
           },
         },

web/helpers/array.helper.ts

@@ -38,10 +38,13 @@ export const orderArrayBy = (
 
 export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length;
 
-export const findStringWithMostCharacters = (strings: string[]) =>
-  strings.reduce((longestString, currentString) =>
+export const findStringWithMostCharacters = (strings: string[]): string => {
+  if (!strings || strings.length === 0) return "";
+
+  return strings.reduce((longestString, currentString) =>
     currentString.length > longestString.length ? currentString : longestString
   );
+};
 
 export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] | null): boolean => {
   if (!arr1 || !arr2) return false;

web/helpers/string.helper.ts

@@ -1,3 +1,10 @@
+import {
+  CYCLE_ISSUES_WITH_PARAMS,
+  MODULE_ISSUES_WITH_PARAMS,
+  PROJECT_ISSUES_LIST_WITH_PARAMS,
+  VIEW_ISSUES,
+} from "constants/fetch-keys";
+
 export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2");
 
 export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
@@ -122,3 +129,65 @@ export const objToQueryParams = (obj: any) => {
 
   return params.toString();
 };
+
+export const getFetchKeysForIssueMutation = (options: {
+  cycleId?: string | string[];
+  moduleId?: string | string[];
+  viewId?: string | string[];
+  projectId: string;
+  calendarParams: any;
+  spreadsheetParams: any;
+  viewGanttParams: any;
+  ganttParams: any;
+}) => {
+  const {
+    cycleId,
+    moduleId,
+    viewId,
+    projectId,
+    calendarParams,
+    spreadsheetParams,
+    viewGanttParams,
+    ganttParams,
+  } = options;
+
+  const calendarFetchKey = cycleId
+    ? { calendarFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams) }
+    : moduleId
+    ? { calendarFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams) }
+    : viewId
+    ? { calendarFetchKey: VIEW_ISSUES(viewId.toString(), calendarParams) }
+    : {
+        calendarFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(
+          projectId?.toString() ?? "",
+          calendarParams
+        ),
+      };
+
+  const spreadsheetFetchKey = cycleId
+    ? { spreadsheetFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams) }
+    : moduleId
+    ? { spreadsheetFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams) }
+    : viewId
+    ? { spreadsheetFetchKey: VIEW_ISSUES(viewId.toString(), spreadsheetParams) }
+    : {
+        spreadsheetFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(
+          projectId?.toString() ?? "",
+          spreadsheetParams
+        ),
+      };
+
+  const ganttFetchKey = cycleId
+    ? { ganttFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), ganttParams) }
+    : moduleId
+    ? { ganttFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), ganttParams) }
+    : viewId
+    ? { ganttFetchKey: VIEW_ISSUES(viewId.toString(), viewGanttParams) }
+    : { ganttFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", ganttParams) };
+
+  return {
+    ...calendarFetchKey,
+    ...spreadsheetFetchKey,
+    ...ganttFetchKey,
+  };
+};

web/hooks/gantt-chart/issue-view.tsx

@@ -36,6 +36,7 @@ const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: strin
   return {
     ganttIssues,
     mutateGanttIssues,
+    params,
   };
 };
 

web/hooks/use-keypress.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+const useKeypress = (key: string, callback: () => void) => {
+  useEffect(() => {
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === key) {
+        callback();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeydown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  });
+};
+
+export default useKeypress;

web/pages/[workspaceSlug]/index.tsx

@@ -127,9 +127,21 @@ const WorkspacePage: NextPage = () => {
           />
         </div>
       )}
-      {projects ? (
-        projects.length > 0 ? (
-          <div className="p-8">
+      <div className="p-8 space-y-8">
+        <div>
+          <h3 className="text-2xl font-semibold">
+            Good {greeting}, {user?.first_name} {user?.last_name}
+          </h3>
+          <h6 className="text-custom-text-400 font-medium flex items-center gap-2">
+            <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
+            <div>
+              {DAYS[today.getDay()]}, {renderShortDate(today)} {render12HourFormatTime(today)}
+            </div>
+          </h6>
+        </div>
+
+        {projects ? (
+          projects.length > 0 ? (
             <div className="flex flex-col gap-8">
               <IssuesStats data={workspaceDashboardData} />
               <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
@@ -143,17 +155,8 @@ const WorkspacePage: NextPage = () => {
                 />
               </div>
             </div>
-          </div>
-        ) : (
-          <div className="p-8">
-            <h3 className="text-2xl font-semibold">
-              Good {greeting}, {user?.first_name} {user?.last_name}
-            </h3>
-            <h6 className="text-custom-text-400 font-medium">
-              {greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}
-              {DAYS[today.getDay()]}, {renderShortDate(today)} {render12HourFormatTime(today)}
-            </h6>
-            <div className="mt-7 bg-custom-primary-100/5 flex justify-between gap-5 md:gap-8">
+          ) : (
+            <div className="bg-custom-primary-100/5 flex justify-between gap-5 md:gap-8">
               <div className="p-5 md:p-8 pr-0">
                 <h5 className="text-xl font-semibold">Create a project</h5>
                 <p className="mt-2 mb-5">
@@ -174,9 +177,9 @@ const WorkspacePage: NextPage = () => {
                 <Image src={emptyDashboard} alt="Empty Dashboard" />
               </div>
             </div>
-          </div>
-        )
-      ) : null}
+          )
+        ) : null}
+      </div>
     </WorkspaceAuthorizationLayout>
   );
 };

web/pages/[workspaceSlug]/me/profile/activity.tsx

@@ -46,7 +46,7 @@ const ProfileActivity = () => {
         {userActivity ? (
           <section className="pr-9 py-8 w-full overflow-y-auto">
             <div className="flex items-center py-3.5 border-b border-custom-border-200">
-              <h3 className="text-xl font-medium">Acitivity</h3>
+              <h3 className="text-xl font-medium">Activity</h3>
             </div>
             <div className={`flex flex-col gap-2 py-4 w-full`}>
               <ul role="list" className="-mb-4">

web/pages/[workspaceSlug]/me/profile/index.tsx

@@ -253,6 +253,7 @@ const Profile: NextPage = () => {
                     placeholder="Enter your first name"
                     className="!px-3 !py-2 rounded-md font-medium"
                     autoComplete="off"
+                    maxLength={24}
                   />
                 </div>
 
@@ -266,6 +267,7 @@ const Profile: NextPage = () => {
                     placeholder="Enter your last name"
                     autoComplete="off"
                     className="!px-3 !py-2 rounded-md font-medium"
+                    maxLength={24}
                   />
                 </div>
 

web/pages/[workspaceSlug]/me/profile/preferences.tsx

@@ -66,7 +66,7 @@ const ProfilePreferences = observer(() => {
 
           <div className="pr-9 py-8 w-full overflow-y-auto">
             <div className="flex items-center py-3.5 border-b border-custom-border-200">
-              <h3 className="text-xl font-medium">Acitivity</h3>
+              <h3 className="text-xl font-medium">Preferences</h3>
             </div>
             <div className="grid grid-cols-12 gap-4 sm:gap-16 py-6">
               <div className="col-span-12 sm:col-span-6">

web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx

@@ -96,7 +96,7 @@ const ProjectModules: NextPage = () => {
             <Tooltip
               key={option.type}
               tooltipContent={
-                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
+                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>
               }
               position="bottom"
             >

web/pages/[workspaceSlug]/settings/billing.tsx

@@ -50,7 +50,7 @@ const BillingSettings: NextPage = () => {
         <section className="pr-9 py-8 w-full overflow-y-auto">
           <div>
             <div className="flex  items-center py-3.5 border-b border-custom-border-200">
-              <h3 className="text-xl font-medium">Billing & Plan</h3>
+              <h3 className="text-xl font-medium">Billing & Plans</h3>
             </div>
           </div>
           <div className="px-4 py-6">

web/pages/[workspaceSlug]/settings/index.tsx

@@ -337,10 +337,10 @@ const WorkspaceSettings: NextPage = () => {
                     <Disclosure.Panel>
                       <div className="flex flex-col gap-8">
                         <span className="text-sm tracking-tight">
-                          The danger zone of the project delete page is a critical area that
-                          requires careful consideration and attention. When deleting a project, all
-                          of the data and resources within that project will be permanently removed
-                          and cannot be recovered.
+                          The danger zone of the workspace delete page is a critical area that
+                          requires careful consideration and attention. When deleting a workspace,
+                          all of the data and resources within that workspace will be permanently
+                          removed and cannot be recovered.
                         </span>
                         <div>
                           <DangerButton
@@ -348,7 +348,7 @@ const WorkspaceSettings: NextPage = () => {
                             className="!text-sm"
                             outline
                           >
-                            Delete my project
+                            Delete my workspace
                           </DangerButton>
                         </div>
                       </div>