fix: merge conflict

.gitignore

@@ -16,7 +16,8 @@ node_modules
 
 # Production
 /build
-dist
+dist/
+out/
 
 # Misc
 .DS_Store

apiserver/plane/api/serializers/issue.py

@@ -75,13 +75,13 @@ class IssueCreateSerializer(BaseSerializer):
     project_detail = ProjectLiteSerializer(read_only=True, source="project")
     workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
 
-    assignees_list = serializers.ListField(
+    assignees = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
         write_only=True,
         required=False,
     )
 
-    labels_list = serializers.ListField(
+    labels = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=Label.objects.all()),
         write_only=True,
         required=False,
@@ -99,6 +99,12 @@ class IssueCreateSerializer(BaseSerializer):
             "updated_at",
         ]
 
+    def to_representation(self, instance):
+        data = super().to_representation(instance)
+        data['assignees'] = [str(assignee.id) for assignee in instance.assignees.all()]
+        data['labels'] = [str(label.id) for label in instance.labels.all()]
+        return data
+
     def validate(self, data):
         if (
             data.get("start_date", None) is not None
@@ -109,8 +115,8 @@ class IssueCreateSerializer(BaseSerializer):
         return data
 
     def create(self, validated_data):
-        assignees = validated_data.pop("assignees_list", None)
-        labels = validated_data.pop("labels_list", None)
+        assignees = validated_data.pop("assignees", None)
+        labels = validated_data.pop("labels", None)
 
         project_id = self.context["project_id"]
         workspace_id = self.context["workspace_id"]
@@ -168,8 +174,8 @@ class IssueCreateSerializer(BaseSerializer):
         return issue
 
     def update(self, instance, validated_data):
-        assignees = validated_data.pop("assignees_list", None)
-        labels = validated_data.pop("labels_list", None)
+        assignees = validated_data.pop("assignees", None)
+        labels = validated_data.pop("labels", None)
 
         # Related models
         project_id = instance.project_id

apiserver/plane/api/urls/issue.py

@@ -17,7 +17,7 @@ from plane.api.views import (
     IssueSubscriberViewSet,
     IssueReactionViewSet,
     CommentReactionViewSet,
-    IssuePropertyViewSet,
+    IssueUserDisplayPropertyEndpoint,
     IssueArchiveViewSet,
     IssueRelationViewSet,
     IssueDraftViewSet,
@@ -235,28 +235,11 @@ urlpatterns = [
     ## End Comment Reactions
     ## IssueProperty
     path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/",
-        IssuePropertyViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-roadmap",
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-display-properties/",
+        IssueUserDisplayPropertyEndpoint.as_view(),
+        name="project-issue-display-properties",
     ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/<uuid:pk>/",
-        IssuePropertyViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-roadmap",
-    ),
-    ## IssueProperty Ebd
+    ## IssueProperty End
     ## Issue Archives
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/",

apiserver/plane/api/urls_deprecated.py

@@ -82,7 +82,7 @@ from plane.api.views import (
     BulkDeleteIssuesEndpoint,
     BulkImportIssuesEndpoint,
     ProjectUserViewsEndpoint,
-    IssuePropertyViewSet,
+    IssueUserDisplayPropertyEndpoint,
     LabelViewSet,
     SubIssuesEndpoint,
     IssueLinkViewSet,
@@ -1008,26 +1008,9 @@ urlpatterns = [
     ## End Comment Reactions
     ## IssueProperty
     path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/",
-        IssuePropertyViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-roadmap",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/<uuid:pk>/",
-        IssuePropertyViewSet.as_view(
-            {
-                "get": "retrieve",
-                "put": "update",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-roadmap",
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-display-properties/",
+        IssueUserDisplayPropertyEndpoint.as_view(),
+        name="project-issue-display-properties",
     ),
     ## IssueProperty Ebd
     ## Issue Archives

apiserver/plane/api/views/__init__.py

@@ -71,7 +71,7 @@ from .issue import (
     WorkSpaceIssuesEndpoint,
     IssueActivityEndpoint,
     IssueCommentViewSet,
-    IssuePropertyViewSet,
+    IssueUserDisplayPropertyEndpoint,
     LabelViewSet,
     BulkDeleteIssuesEndpoint,
     UserWorkSpaceIssues,

apiserver/plane/api/views/base.py

@@ -84,6 +84,7 @@ class BaseViewSet(TimezoneMixin, ModelViewSet, BasePaginator):
                 capture_exception(e)
                 return Response({"error": f"key {e} does not exist"}, status=status.HTTP_400_BAD_REQUEST)
             
+            print(e) if settings.DEBUG else print("Server Error")
             capture_exception(e)
             return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
 
@@ -161,6 +162,7 @@ class BaseAPIView(TimezoneMixin, APIView, BasePaginator):
             if isinstance(e, KeyError):
                 return Response({"error": f"key {e} does not exist"}, status=status.HTTP_400_BAD_REQUEST)
             
+            print(e) if settings.DEBUG else print("Server Error")
             capture_exception(e)
             return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
 

apiserver/plane/api/views/cycle.py

@@ -579,6 +579,7 @@ class CycleIssueViewSet(BaseViewSet):
             )
         )
 
+        total_issues = issues.count()
         issues_data = IssueStateSerializer(issues, many=True).data
 
         if sub_group_by and sub_group_by == group_by:
@@ -588,14 +589,14 @@ class CycleIssueViewSet(BaseViewSet):
             )
 
         if group_by:
+            grouped_results = group_results(issues_data, group_by, sub_group_by)
             return Response(
-                group_results(issues_data, group_by, sub_group_by),
+                {"data": grouped_results, "total_issues": total_issues},
                 status=status.HTTP_200_OK,
             )
 
         return Response(
-            issues_data,
-            status=status.HTTP_200_OK,
+            {"data": issues_data, "total_issues": total_issues}, status=status.HTTP_200_OK
         )
 
     def create(self, request, slug, project_id, cycle_id):

apiserver/plane/api/views/issue.py

@@ -130,7 +130,7 @@ class IssueViewSet(BaseViewSet):
                     queryset=IssueReaction.objects.select_related("actor"),
                 )
             )
-        )
+        ).distinct()
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id):
@@ -217,6 +217,7 @@ class IssueViewSet(BaseViewSet):
         else:
             issue_queryset = issue_queryset.order_by(order_by_param)
 
+        total_issues = issue_queryset.count()
         issues = IssueLiteSerializer(issue_queryset, many=True).data
 
         ## Grouping the results
@@ -229,12 +230,16 @@ class IssueViewSet(BaseViewSet):
             )
 
         if group_by:
+            grouped_results = group_results(issues, group_by, sub_group_by)
             return Response(
-                group_results(issues, group_by, sub_group_by),
+                {"data": grouped_results, "total_issues": total_issues},
                 status=status.HTTP_200_OK,
             )
 
-        return Response(issues, status=status.HTTP_200_OK)
+        return Response(
+            {"data": issues, "total_issues": total_issues}, status=status.HTTP_200_OK
+        )
+
 
     def create(self, request, slug, project_id):
         project = Project.objects.get(pk=project_id)
@@ -421,6 +426,7 @@ class UserWorkSpaceIssues(BaseAPIView):
         else:
             issue_queryset = issue_queryset.order_by(order_by_param)
 
+        total_issues = issue_queryset.count()
         issues = IssueLiteSerializer(issue_queryset, many=True).data
 
         ## Grouping the results
@@ -433,12 +439,15 @@ class UserWorkSpaceIssues(BaseAPIView):
             )
 
         if group_by:
+            grouped_results = group_results(issues, group_by, sub_group_by)
             return Response(
-                group_results(issues, group_by, sub_group_by),
+                {"data": grouped_results, "total_issues": total_issues},
                 status=status.HTTP_200_OK,
             )
 
-        return Response(issues, status=status.HTTP_200_OK)
+        return Response(
+            {"data": issues, "total_issues": total_issues}, status=status.HTTP_200_OK
+        )
 
 
 class WorkSpaceIssuesEndpoint(BaseAPIView):
@@ -597,41 +606,12 @@ class IssueCommentViewSet(BaseViewSet):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
-class IssuePropertyViewSet(BaseViewSet):
-    serializer_class = IssuePropertySerializer
-    model = IssueProperty
+class IssueUserDisplayPropertyEndpoint(BaseAPIView):
     permission_classes = [
-        ProjectEntityPermission,
+        ProjectLitePermission,
     ]
 
-    filterset_fields = []
-
-    def perform_create(self, serializer):
-        serializer.save(
-            project_id=self.kwargs.get("project_id"), user=self.request.user
-        )
-
-    def get_queryset(self):
-        return self.filter_queryset(
-            super()
-            .get_queryset()
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(project_id=self.kwargs.get("project_id"))
-            .filter(user=self.request.user)
-            .filter(project__project_projectmember__member=self.request.user)
-            .select_related("project")
-            .select_related("workspace")
-        )
-
-    def list(self, request, slug, project_id):
-        queryset = self.get_queryset()
-        serializer = IssuePropertySerializer(queryset, many=True)
-        return Response(
-            serializer.data[0] if len(serializer.data) > 0 else [],
-            status=status.HTTP_200_OK,
-        )
-
-    def create(self, request, slug, project_id):
+    def post(self, request, slug, project_id):
         issue_property, created = IssueProperty.objects.get_or_create(
             user=request.user,
             project_id=project_id,
@@ -640,16 +620,20 @@ class IssuePropertyViewSet(BaseViewSet):
         if not created:
             issue_property.properties = request.data.get("properties", {})
             issue_property.save()
-
-            serializer = IssuePropertySerializer(issue_property)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-
         issue_property.properties = request.data.get("properties", {})
         issue_property.save()
         serializer = IssuePropertySerializer(issue_property)
         return Response(serializer.data, status=status.HTTP_201_CREATED)
 
 
+    def get(self, request, slug, project_id):
+            issue_property, _ = IssueProperty.objects.get_or_create(
+                user=request.user, project_id=project_id
+            )
+            serializer = IssuePropertySerializer(issue_property)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+
+
 class LabelViewSet(BaseViewSet):
     serializer_class = LabelSerializer
     model = Label
@@ -963,8 +947,8 @@ class IssueAttachmentEndpoint(BaseAPIView):
         issue_attachments = IssueAttachment.objects.filter(
             issue_id=issue_id, workspace__slug=slug, project_id=project_id
         )
-        serilaizer = IssueAttachmentSerializer(issue_attachments, many=True)
-        return Response(serilaizer.data, status=status.HTTP_200_OK)
+        serializer = IssueAttachmentSerializer(issue_attachments, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
 
 
 class IssueArchiveViewSet(BaseViewSet):
@@ -1165,9 +1149,7 @@ class IssueSubscriberViewSet(BaseViewSet):
 
     def list(self, request, slug, project_id, issue_id):
         members = (
-            ProjectMember.objects.filter(
-                workspace__slug=slug, project_id=project_id
-            )
+            ProjectMember.objects.filter(workspace__slug=slug, project_id=project_id)
             .annotate(
                 is_subscribed=Exists(
                     IssueSubscriber.objects.filter(
@@ -2169,14 +2151,21 @@ class IssueDraftViewSet(BaseViewSet):
         else:
             issue_queryset = issue_queryset.order_by(order_by_param)
 
+        total_issues = issue_queryset.count()
         issues = IssueLiteSerializer(issue_queryset, many=True).data
 
         ## Grouping the results
         group_by = request.GET.get("group_by", False)
         if group_by:
-            return Response(group_results(issues, group_by), status=status.HTTP_200_OK)
+            grouped_results = group_results(issues, group_by)
+            return Response(
+                {"data": grouped_results, "total_issues": total_issues},
+                status=status.HTTP_200_OK,
+            )
 
-        return Response(issues, status=status.HTTP_200_OK)
+        return Response(
+            {"data": issues, "total_issues": total_issues}, status=status.HTTP_200_OK
+        )
 
     def create(self, request, slug, project_id):
         project = Project.objects.get(pk=project_id)

apiserver/plane/api/views/module.py

@@ -149,6 +149,9 @@ class ModuleViewSet(BaseViewSet):
 
         if serializer.is_valid():
             serializer.save()
+
+            module = Module.objects.get(pk=serializer.data["id"])
+            serializer = ModuleSerializer(module)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -361,7 +364,7 @@ class ModuleIssueViewSet(BaseViewSet):
                 .values("count")
             )
         )
-
+        total_issues = issues.count()
         issues_data = IssueStateSerializer(issues, many=True).data
 
         if sub_group_by and sub_group_by == group_by:
@@ -371,14 +374,14 @@ class ModuleIssueViewSet(BaseViewSet):
             )
 
         if group_by:
+            grouped_results = group_results(issues_data, group_by, sub_group_by)
             return Response(
-                group_results(issues_data, group_by, sub_group_by),
+                {"data": grouped_results, "total_issues": total_issues},
                 status=status.HTTP_200_OK,
             )
 
         return Response(
-            issues_data,
-            status=status.HTTP_200_OK,
+            {"data": issues_data, "total_issues": total_issues}, status=status.HTTP_200_OK
         )
 
     def create(self, request, slug, project_id, module_id):

apiserver/plane/api/views/project.py

@@ -69,6 +69,7 @@ from plane.db.models import (
     ModuleMember,
     Inbox,
     ProjectDeployBoard,
+    IssueProperty,
 )
 
 from plane.bgtasks.project_invitation_task import project_invitation
@@ -201,6 +202,11 @@ class ProjectViewSet(BaseViewSet):
                 project_member = ProjectMember.objects.create(
                     project_id=serializer.data["id"], member=request.user, role=20
                 )
+                # Also create the issue property for the user
+                _ = IssueProperty.objects.create(
+                    project_id=serializer.data["id"],
+                    user=request.user,
+                )
 
                 if serializer.data["project_lead"] is not None and str(
                     serializer.data["project_lead"]
@@ -210,6 +216,11 @@ class ProjectViewSet(BaseViewSet):
                         member_id=serializer.data["project_lead"],
                         role=20,
                     )
+                    # Also create the issue property for the user
+                    IssueProperty.objects.create(
+                        project_id=serializer.data["id"],
+                        user_id=serializer.data["project_lead"],
+                    )
 
                 # Default states
                 states = [
@@ -262,12 +273,9 @@ class ProjectViewSet(BaseViewSet):
                     ]
                 )
 
-                data = serializer.data
-                # Additional fields of the member
-                data["sort_order"] = project_member.sort_order
-                data["member_role"] = project_member.role
-                data["is_member"] = True
-                return Response(data, status=status.HTTP_201_CREATED)
+                project = self.get_queryset().filter(pk=serializer.data["id"]).first()
+                serializer = ProjectListSerializer(project)
+                return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(
                 serializer.errors,
                 status=status.HTTP_400_BAD_REQUEST,
@@ -317,6 +325,8 @@ class ProjectViewSet(BaseViewSet):
                         color="#ff7700",
                     )
 
+                project = self.get_queryset().filter(pk=serializer.data["id"]).first()
+                serializer = ProjectListSerializer(project)
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -393,6 +403,8 @@ class InviteProjectEndpoint(BaseAPIView):
             member=user, project_id=project_id, role=role
         )
 
+        _ = IssueProperty.objects.create(user=user, project_id=project_id)
+
         return Response(
             ProjectMemberSerializer(project_member).data, status=status.HTTP_200_OK
         )
@@ -428,6 +440,18 @@ class UserProjectInvitationsViewset(BaseViewSet):
             ]
         )
 
+        IssueProperty.objects.bulk_create(
+            [
+                ProjectMember(
+                    project=invitation.project,
+                    workspace=invitation.project.workspace,
+                    user=request.user,
+                    created_by=request.user,
+                )
+                for invitation in project_invitations
+            ]
+        )
+
         # Delete joined project invites
         project_invitations.delete()
 
@@ -560,6 +584,7 @@ class AddMemberToProjectEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
         bulk_project_members = []
+        bulk_issue_props = []
 
         project_members = (
             ProjectMember.objects.filter(
@@ -574,7 +599,8 @@ class AddMemberToProjectEndpoint(BaseAPIView):
             sort_order = [
                 project_member.get("sort_order")
                 for project_member in project_members
-                if str(project_member.get("member_id")) == str(member.get("member_id"))
+                if str(project_member.get("member_id"))
+                == str(member.get("member_id"))
             ]
             bulk_project_members.append(
                 ProjectMember(
@@ -585,6 +611,13 @@ class AddMemberToProjectEndpoint(BaseAPIView):
                     sort_order=sort_order[0] - 10000 if len(sort_order) else 65535,
                 )
             )
+            bulk_issue_props.append(
+                IssueProperty(
+                    user_id=member.get("member_id"),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                )
+            )
 
         project_members = ProjectMember.objects.bulk_create(
             bulk_project_members,
@@ -592,7 +625,12 @@ class AddMemberToProjectEndpoint(BaseAPIView):
             ignore_conflicts=True,
         )
 
+        _ = IssueProperty.objects.bulk_create(
+            bulk_issue_props, batch_size=10, ignore_conflicts=True
+        )
+
         serializer = ProjectMemberSerializer(project_members, many=True)
+
         return Response(serializer.data, status=status.HTTP_201_CREATED)
 
 
@@ -614,6 +652,7 @@ class AddTeamToProjectEndpoint(BaseAPIView):
         workspace = Workspace.objects.get(slug=slug)
 
         project_members = []
+        issue_props = []
         for member in team_members:
             project_members.append(
                 ProjectMember(
@@ -623,11 +662,23 @@ class AddTeamToProjectEndpoint(BaseAPIView):
                     created_by=request.user,
                 )
             )
+            issue_props.append(
+                IssueProperty(
+                    project_id=project_id,
+                    user_id=member,
+                    workspace=workspace,
+                    created_by=request.user,
+                )
+            )
 
         ProjectMember.objects.bulk_create(
             project_members, batch_size=10, ignore_conflicts=True
         )
 
+        _ = IssueProperty.objects.bulk_create(
+            issue_props, batch_size=10, ignore_conflicts=True
+        )
+
         serializer = ProjectMemberSerializer(project_members, many=True)
         return Response(serializer.data, status=status.HTTP_201_CREATED)
 
@@ -743,6 +794,19 @@ class ProjectJoinEndpoint(BaseAPIView):
             ignore_conflicts=True,
         )
 
+        IssueProperty.objects.bulk_create(
+            [
+                IssueProperty(
+                    project_id=project_id,
+                    user=request.user,
+                    workspace=workspace,
+                    created_by=request.user,
+                )
+                for project_id in project_ids
+            ],
+            ignore_conflicts=True,
+        )
+
         return Response(
             {"message": "Projects joined successfully"},
             status=status.HTTP_201_CREATED,

apiserver/plane/api/views/view.py

@@ -184,6 +184,7 @@ class GlobalViewIssuesViewSet(BaseViewSet):
         else:
             issue_queryset = issue_queryset.order_by(order_by_param)
 
+        total_issues = issue_queryset.count()
         issues = IssueLiteSerializer(issue_queryset, many=True).data
 
         ## Grouping the results
@@ -196,11 +197,15 @@ class GlobalViewIssuesViewSet(BaseViewSet):
             )
         
         if group_by:
+            grouped_results = group_results(issues, group_by, sub_group_by)
             return Response(
-                group_results(issues, group_by, sub_group_by), status=status.HTTP_200_OK
+                {"data": grouped_results, "total_issues": total_issues},
+                status=status.HTTP_200_OK,
             )
 
-        return Response(issues, status=status.HTTP_200_OK)
+        return Response(
+            {"data": issues, "total_issues": total_issues}, status=status.HTTP_200_OK
+        )
 
 
 class IssueViewViewSet(BaseViewSet):

apiserver/plane/api/views/workspace.py

@@ -1223,14 +1223,21 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
         else:
             issue_queryset = issue_queryset.order_by(order_by_param)
 
+        total_issues = issue_queryset.count()
         issues = IssueLiteSerializer(issue_queryset, many=True).data
 
         ## Grouping the results
         group_by = request.GET.get("group_by", False)
         if group_by:
-            return Response(group_results(issues, group_by), status=status.HTTP_200_OK)
+            grouped_results = group_results(issues, group_by)
+            return Response(
+                {"data": grouped_results, "total_issues": total_issues},
+                status=status.HTTP_200_OK,
+            )
 
-        return Response(issues, status=status.HTTP_200_OK)
+        return Response(
+            {"data": issues, "total_issues": total_issues}, status=status.HTTP_200_OK
+        )
 
 
 class WorkspaceLabelsEndpoint(BaseAPIView):

apiserver/plane/bgtasks/importer_task.py

@@ -25,6 +25,7 @@ from plane.db.models import (
     WorkspaceIntegration,
     Label,
     User,
+    IssueProperty,
 )
 from .workspace_invitation_task import workspace_invitation
 from plane.bgtasks.user_welcome_task import send_welcome_slack
@@ -103,6 +104,20 @@ def service_importer(service, importer_id):
                 ignore_conflicts=True,
             )
 
+            IssueProperty.objects.bulk_create(
+                [
+                    IssueProperty(
+                        project_id=importer.project_id,
+                        workspace_id=importer.workspace_id,
+                        user=user,
+                        created_by=importer.created_by,
+                    )
+                    for user in workspace_users
+                ],
+                batch_size=100,
+                ignore_conflicts=True,
+            )
+
         # Check if sync config is on for github importers
         if service == "github" and importer.config.get("sync", False):
             name = importer.metadata.get("name", False)

apiserver/plane/bgtasks/notification_task.py

@@ -0,0 +1,102 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+
+# Module imports
+from plane.db.models import IssueSubscriber, Project, IssueAssignee, Issue, Notification
+
+# Third Party imports
+from celery import shared_task
+
+
+@shared_task
+def notifications(type, issue_id, project_id, actor_id, subscriber, issue_activities_created):
+    issue_activities_created = (
+        json.loads(issue_activities_created) if issue_activities_created is not None else None
+    )
+    if type not in [
+        "cycle.activity.created",
+        "cycle.activity.deleted",
+        "module.activity.created",
+        "module.activity.deleted",
+        "issue_reaction.activity.created",
+        "issue_reaction.activity.deleted",
+        "comment_reaction.activity.created",
+        "comment_reaction.activity.deleted",
+        "issue_vote.activity.created",
+        "issue_vote.activity.deleted",
+        "issue_draft.activity.created",
+        "issue_draft.activity.updated",
+        "issue_draft.activity.deleted",
+    ]:
+        # Create Notifications
+        bulk_notifications = []
+        issue_subscribers = list(
+            IssueSubscriber.objects.filter(project_id=project_id, issue_id=issue_id)
+            .exclude(subscriber_id=actor_id)
+            .values_list("subscriber", flat=True)
+        )
+
+        issue_assignees = list(
+            IssueAssignee.objects.filter(project_id=project_id, issue_id=issue_id)
+            .exclude(assignee_id=actor_id)
+            .values_list("assignee", flat=True)
+        )
+
+        issue_subscribers = issue_subscribers + issue_assignees
+
+        issue = Issue.objects.filter(pk=issue_id).first()
+
+        if subscriber:
+            # add the user to issue subscriber
+            try:
+                _ = IssueSubscriber.objects.get_or_create(
+                    issue_id=issue_id, subscriber_id=actor_id
+                )
+            except Exception as e:
+                pass
+
+        project = Project.objects.get(pk=project_id)
+
+        for subscriber in list(set(issue_subscribers)):
+            for issue_activity in issue_activities_created:
+                bulk_notifications.append(
+                    Notification(
+                        workspace=project.workspace,
+                        sender="in_app:issue_activities",
+                        triggered_by_id=actor_id,
+                        receiver_id=subscriber,
+                        entity_identifier=issue_id,
+                        entity_name="issue",
+                        project=project,
+                        title=issue_activity.get("comment"),
+                        data={
+                            "issue": {
+                                "id": str(issue_id),
+                                "name": str(issue.name),
+                                "identifier": str(issue.project.identifier),
+                                "sequence_id": issue.sequence_id,
+                                "state_name": issue.state.name,
+                                "state_group": issue.state.group,
+                            },
+                            "issue_activity": {
+                                "id": str(issue_activity.get("id")),
+                                "verb": str(issue_activity.get("verb")),
+                                "field": str(issue_activity.get("field")),
+                                "actor": str(issue_activity.get("actor_id")),
+                                "new_value": str(issue_activity.get("new_value")),
+                                "old_value": str(issue_activity.get("old_value")),
+                                "issue_comment": str(
+                                    issue_activity.get("issue_comment").comment_stripped
+                                    if issue_activity.get("issue_comment") is not None
+                                    else ""
+                                ),
+                            },
+                        },
+                    )
+                )
+
+        # Bulk create notifications
+        Notification.objects.bulk_create(bulk_notifications, batch_size=100)

apiserver/plane/db/migrations/0046_alter_analyticview_created_by_and_more.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2.5 on 2023-10-18 12:04
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import plane.db.models.issue
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0045_issueactivity_epoch_workspacemember_issue_props_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='issueproperty',
+            name='properties',
+            field=models.JSONField(default=plane.db.models.issue.get_default_properties),
+        ),
+    ]

apiserver/plane/db/models/issue.py

@@ -16,6 +16,24 @@ from . import ProjectBaseModel
 from plane.utils.html_processor import strip_tags
 
 
+def get_default_properties():
+    return {
+        "assignee": True,
+        "start_date": True,
+        "due_date": True,
+        "labels": True,
+        "key": True,
+        "priority": True,
+        "state": True,
+        "sub_issue_count": True,
+        "link": True,
+        "attachment_count": True,
+        "estimate": True,
+        "created_on": True,
+        "updated_on": True,
+    }
+
+
 # TODO: Handle identifiers for Bulk Inserts - nk
 class IssueManager(models.Manager):
     def get_queryset(self):
@@ -39,7 +57,7 @@ class Issue(ProjectBaseModel):
         ("high", "High"),
         ("medium", "Medium"),
         ("low", "Low"),
-        ("none", "None")
+        ("none", "None"),
     )
     parent = models.ForeignKey(
         "self",
@@ -186,7 +204,7 @@ class IssueRelation(ProjectBaseModel):
         ("relates_to", "Relates To"),
         ("blocked_by", "Blocked By"),
     )
-        
+
     issue = models.ForeignKey(
         Issue, related_name="issue_relation", on_delete=models.CASCADE
     )
@@ -208,7 +226,7 @@ class IssueRelation(ProjectBaseModel):
         ordering = ("-created_at",)
 
     def __str__(self):
-        return f"{self.issue.name} {self.related_issue.name}"    
+        return f"{self.issue.name} {self.related_issue.name}"
 
 
 class IssueAssignee(ProjectBaseModel):
@@ -327,7 +345,9 @@ class IssueComment(ProjectBaseModel):
     comment_json = models.JSONField(blank=True, default=dict)
     comment_html = models.TextField(blank=True, default="<p></p>")
     attachments = ArrayField(models.URLField(), size=10, blank=True, default=list)
-    issue = models.ForeignKey(Issue, on_delete=models.CASCADE, related_name="issue_comments")
+    issue = models.ForeignKey(
+        Issue, on_delete=models.CASCADE, related_name="issue_comments"
+    )
     # System can also create comment
     actor = models.ForeignKey(
         settings.AUTH_USER_MODEL,
@@ -367,7 +387,7 @@ class IssueProperty(ProjectBaseModel):
         on_delete=models.CASCADE,
         related_name="issue_property_user",
     )
-    properties = models.JSONField(default=dict)
+    properties = models.JSONField(default=get_default_properties)
 
     class Meta:
         verbose_name = "Issue Property"
@@ -515,7 +535,10 @@ class IssueVote(ProjectBaseModel):
     )
 
     class Meta:
-        unique_together = ["issue", "actor",]
+        unique_together = [
+            "issue",
+            "actor",
+        ]
         verbose_name = "Issue Vote"
         verbose_name_plural = "Issue Votes"
         db_table = "issue_votes"

apiserver/plane/settings/production.py

@@ -14,19 +14,21 @@ from .common import *  # noqa
 # Database
 DEBUG = int(os.environ.get("DEBUG", 0)) == 1
 
-DATABASES = {
-    "default": {
-        "ENGINE": "django.db.backends.postgresql",
-        "NAME": "plane",
-        "USER": os.environ.get("PGUSER", ""),
-        "PASSWORD": os.environ.get("PGPASSWORD", ""),
-        "HOST": os.environ.get("PGHOST", ""),
+if bool(os.environ.get("DATABASE_URL")):
+    # Parse database configuration from $DATABASE_URL
+    DATABASES["default"] = dj_database_url.config()
+else:
+    DATABASES = {
+        "default": {
+            "ENGINE": "django.db.backends.postgresql",
+            "NAME": os.environ.get("POSTGRES_DB"),
+            "USER": os.environ.get("POSTGRES_USER"),
+            "PASSWORD": os.environ.get("POSTGRES_PASSWORD"),
+            "HOST": os.environ.get("POSTGRES_HOST"),
+        }
     }
-}
 
 
-# Parse database configuration from $DATABASE_URL
-DATABASES["default"] = dj_database_url.config()
 SITE_ID = 1
 
 # Set the variable true if running in docker environment
@@ -278,4 +280,3 @@ SCOUT_NAME = "Plane"
 
 # Unsplash Access key
 UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")
-

apiserver/plane/utils/issue_filters.py

@@ -1,10 +1,24 @@
 import re
+import uuid
 from datetime import timedelta
 from django.utils import timezone
 
+
 # The date from pattern
 pattern = re.compile(r"\d+_(weeks|months)$")
 
+# check the valid uuids
+def filter_valid_uuids(uuid_list):
+    valid_uuids = []
+    for uuid_str in uuid_list:
+        try:
+            uuid_obj = uuid.UUID(uuid_str)
+            valid_uuids.append(uuid_obj)
+        except ValueError:
+            # ignore the invalid uuids
+            pass
+    return valid_uuids
+
 
 # Get the 2_weeks, 3_months
 def string_date_filter(filter, duration, subsequent, term, date_filter, offset):
@@ -61,40 +75,41 @@ def date_filter(filter, date_term, queries):
 
 def filter_state(params, filter, method):
     if method == "GET":
-        states = params.get("state").split(",")
+        states = [item for item in params.get("state").split(",") if item != 'null']
+        states = filter_valid_uuids(states)
         if len(states) and "" not in states:
             filter["state__in"] = states
     else:
-        if params.get("state", None) and len(params.get("state")):
+        if params.get("state", None) and len(params.get("state")) and params.get("state") != 'null':
             filter["state__in"] = params.get("state")
     return filter
 
 
 def filter_state_group(params, filter, method):
     if method == "GET":
-        state_group = params.get("state_group").split(",")
+        state_group = [item for item in params.get("state_group").split(",") if item != 'null']
         if len(state_group) and "" not in state_group:
             filter["state__group__in"] = state_group
     else:
-        if params.get("state_group", None) and len(params.get("state_group")):
+        if params.get("state_group", None) and len(params.get("state_group")) and params.get("state_group") != 'null':
             filter["state__group__in"] = params.get("state_group")
     return filter
 
 
 def filter_estimate_point(params, filter, method):
     if method == "GET":
-        estimate_points = params.get("estimate_point").split(",")
+        estimate_points = [item for item in params.get("estimate_point").split(",") if item != 'null']
         if len(estimate_points) and "" not in estimate_points:
             filter["estimate_point__in"] = estimate_points
     else:
-        if params.get("estimate_point", None) and len(params.get("estimate_point")):
+        if params.get("estimate_point", None) and len(params.get("estimate_point")) and params.get("estimate_point") != 'null':
             filter["estimate_point__in"] = params.get("estimate_point")
     return filter
 
 
 def filter_priority(params, filter, method):
     if method == "GET":
-        priorities = params.get("priority").split(",")
+        priorities = [item for item in params.get("priority").split(",") if item != 'null']
         if len(priorities) and "" not in priorities:
             filter["priority__in"] = priorities
     return filter
@@ -102,44 +117,48 @@ def filter_priority(params, filter, method):
 
 def filter_parent(params, filter, method):
     if method == "GET":
-        parents = params.get("parent").split(",")
+        parents = [item for item in params.get("parent").split(",") if item != 'null']
+        parents = filter_valid_uuids(parents)
         if len(parents) and "" not in parents:
             filter["parent__in"] = parents
     else:
-        if params.get("parent", None) and len(params.get("parent")):
+        if params.get("parent", None) and len(params.get("parent")) and params.get("parent") != 'null':
             filter["parent__in"] = params.get("parent")
     return filter
 
 
 def filter_labels(params, filter, method):
     if method == "GET":
-        labels = params.get("labels").split(",")
+        labels = [item for item in params.get("labels").split(",") if item != 'null']
+        labels = filter_valid_uuids(labels)
         if len(labels) and "" not in labels:
             filter["labels__in"] = labels
     else:
-        if params.get("labels", None) and len(params.get("labels")):
+        if params.get("labels", None) and len(params.get("labels")) and params.get("labels") != 'null':
             filter["labels__in"] = params.get("labels")
     return filter
 
 
 def filter_assignees(params, filter, method):
     if method == "GET":
-        assignees = params.get("assignees").split(",")
+        assignees = [item for item in params.get("assignees").split(",") if item != 'null']
+        assignees = filter_valid_uuids(assignees)
         if len(assignees) and "" not in assignees:
             filter["assignees__in"] = assignees
     else:
-        if params.get("assignees", None) and len(params.get("assignees")):
+        if params.get("assignees", None) and len(params.get("assignees")) and params.get("assignees") != 'null':
             filter["assignees__in"] = params.get("assignees")
     return filter
 
 
 def filter_created_by(params, filter, method):
     if method == "GET":
-        created_bys = params.get("created_by").split(",")
+        created_bys = [item for item in params.get("created_by").split(",") if item != 'null']
+        created_bys = filter_valid_uuids(created_bys)
         if len(created_bys) and "" not in created_bys:
             filter["created_by__in"] = created_bys
     else:
-        if params.get("created_by", None) and len(params.get("created_by")):
+        if params.get("created_by", None) and len(params.get("created_by")) and params.get("created_by") != 'null':
             filter["created_by__in"] = params.get("created_by")
     return filter
 
@@ -219,44 +238,47 @@ def filter_issue_state_type(params, filter, method):
 
 def filter_project(params, filter, method):
     if method == "GET":
-        projects = params.get("project").split(",")
+        projects = [item for item in params.get("project").split(",") if item != 'null']
+        projects = filter_valid_uuids(projects)
         if len(projects) and "" not in projects:
             filter["project__in"] = projects
     else:
-        if params.get("project", None) and len(params.get("project")):
+        if params.get("project", None) and len(params.get("project")) and params.get("project") != 'null':
             filter["project__in"] = params.get("project")
     return filter
 
 
 def filter_cycle(params, filter, method):
     if method == "GET":
-        cycles = params.get("cycle").split(",")
+        cycles = [item for item in params.get("cycle").split(",") if item != 'null']
+        cycles = filter_valid_uuids(cycles)
         if len(cycles) and "" not in cycles:
             filter["issue_cycle__cycle_id__in"] = cycles
     else:
-        if params.get("cycle", None) and len(params.get("cycle")):
+        if params.get("cycle", None) and len(params.get("cycle")) and params.get("cycle") != 'null':
             filter["issue_cycle__cycle_id__in"] = params.get("cycle")
     return filter
 
 
 def filter_module(params, filter, method):
     if method == "GET":
-        modules = params.get("module").split(",")
+        modules = [item for item in params.get("module").split(",") if item != 'null']
+        modules = filter_valid_uuids(modules)
         if len(modules) and "" not in modules:
             filter["issue_module__module_id__in"] = modules
     else:
-        if params.get("module", None) and len(params.get("module")):
+        if params.get("module", None) and len(params.get("module")) and params.get("module") != 'null':
             filter["issue_module__module_id__in"] = params.get("module")
     return filter
 
 
 def filter_inbox_status(params, filter, method):
     if method == "GET":
-        status = params.get("inbox_status").split(",")
+        status = [item for item in params.get("inbox_status").split(",") if item != 'null']
         if len(status) and "" not in status:
             filter["issue_inbox__status__in"] = status
     else:
-        if params.get("inbox_status", None) and len(params.get("inbox_status")):
+        if params.get("inbox_status", None) and len(params.get("inbox_status")) and params.get("inbox_status") != 'null':
             filter["issue_inbox__status__in"] = params.get("inbox_status")
     return filter
 
@@ -275,11 +297,12 @@ def filter_sub_issue_toggle(params, filter, method):
 
 def filter_subscribed_issues(params, filter, method):
     if method == "GET":
-        subscribers = params.get("subscriber").split(",")
+        subscribers = [item for item in params.get("subscriber").split(",") if item != 'null']
+        subscribers = filter_valid_uuids(subscribers)
         if len(subscribers) and "" not in subscribers:
             filter["issue_subscribers__subscriber_id__in"] = subscribers
     else:
-        if params.get("subscriber", None) and len(params.get("subscriber")):
+        if params.get("subscriber", None) and len(params.get("subscriber")) and params.get("subscriber") != 'null':
             filter["issue_subscribers__subscriber_id__in"] = params.get("subscriber")
     return filter
 

packages/tailwind-config-custom/tailwind.config.js

@@ -213,7 +213,9 @@ module.exports = {
           },
         },
       }),
-
+      screens: {
+        "3xl": "1792px",
+      },
       // scale down font sizes to 90% of default
       fontSize: {
         xs: "0.675rem",

packages/ui/src/progress/circular-progress-indicator.tsx

@@ -0,0 +1,102 @@
+import React, { Children } from "react";
+
+interface ICircularProgressIndicator {
+  size: number;
+  percentage: number;
+  strokeWidth?: number;
+  strokeColor?: string;
+  children?: React.ReactNode;
+}
+
+export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
+  props
+) => {
+  const { size = 40, percentage = 25, strokeWidth = 6, children } = props;
+
+  const sqSize = size;
+  const radius = (size - strokeWidth) / 2;
+  const viewBox = `0 0 ${sqSize} ${sqSize}`;
+  const dashArray = radius * Math.PI * 2;
+  const dashOffset = dashArray - (dashArray * percentage) / 100;
+  return (
+    <div className="relative">
+      <svg width={size} height={size} viewBox={viewBox} fill="none">
+        <circle
+          className="fill-none stroke-custom-background-80"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={`${strokeWidth}px`}
+          style={{ filter: "url(#filter0_bi_377_19141)" }}
+        />
+        <defs>
+          <filter
+            id="filter0_bi_377_19141"
+            x="-3.57544"
+            y="-3.57422"
+            width="45.2227"
+            height="45.2227"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
+            <feComposite
+              in2="SourceAlpha"
+              operator="in"
+              result="effect1_backgroundBlur_377_19141"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_backgroundBlur_377_19141"
+              result="shape"
+            />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dx="1" dy="1" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.63125 0 0 0 0 0.6625 0 0 0 0 0.75 0 0 0 0.35 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="shape"
+              result="effect2_innerShadow_377_19141"
+            />
+          </filter>
+        </defs>
+        <circle
+          className="stroke-custom-primary-100 fill-none "
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={`${strokeWidth}px`}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+          style={{
+            strokeDasharray: dashArray,
+            strokeDashoffset: dashOffset,
+          }}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <div
+        className="absolute"
+        style={{
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

packages/ui/src/progress/index.tsx

@@ -1,3 +1,4 @@
 export * from "./radial-progress";
 export * from "./progress-bar";
 export * from "./linear-progress-indicator";
+export * from "./circular-progress-indicator";

space/next.config.js

@@ -8,6 +8,9 @@ const nextConfig = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, "../"),
   },
+  images: {
+    unoptimized: true,
+  },
   output: "standalone",
 };
 

space/package.json

@@ -7,7 +7,8 @@
     "develop": "next dev -p 4000",
     "build": "next build",
     "start": "next start -p 4000",
-    "lint": "next lint"
+    "lint": "next lint",
+    "export": "next export"
   },
   "dependencies": {
     "@blueprintjs/core": "^4.16.3",
@@ -16,8 +17,8 @@
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.13",
     "@mui/material": "^5.14.1",
-    "@plane/ui" : "*",
-    "@plane/lite-text-editor" : "*",
+    "@plane/ui": "*",
+    "@plane/lite-text-editor": "*",
     "@plane/rich-text-editor": "*",
     "axios": "^1.3.4",
     "clsx": "^2.0.0",

web/components/core/sidebar/links-list.tsx

@@ -15,58 +15,63 @@ type Props = {
 
 export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEditLink, userAuth }) => {
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
-
   return (
     <>
       {links.map((link) => (
-        <div key={link.id} className="relative">
-          {!isNotAllowed && (
-            <div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
-              <button
-                type="button"
-                className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
-                onClick={() => handleEditLink(link)}
-              >
-                <Pencil className="text-custom-text-200" />
-              </button>
-              <a
-                href={link.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
-              >
-                <ExternalLinkIcon className="h-4 w-4 text-custom-text-200" />
-              </a>
-              <button
-                type="button"
-                className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
-                onClick={() => handleDeleteLink(link.id)}
-              >
-                <Trash2 className="h-4 w-4" />
-              </button>
+        <div key={link.id} className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
+          <div className="flex items-start justify-between gap-2 w-full">
+            <div className="flex items-start gap-2">
+              <span className="py-1">
+                <LinkIcon className="h-3 w-3 flex-shrink-0" />
+              </span>
+              <span className="text-xs break-all">{link.title && link.title !== "" ? link.title : link.url}</span>
             </div>
-          )}
-          <a
-            href={link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="relative flex gap-2 rounded-md bg-custom-background-90 p-2"
-          >
-            <div className="mt-0.5">
-              <LinkIcon className="h-3.5 w-3.5" />
-            </div>
-            <div>
-              <h5 className="w-4/5 break-words">{link.title ?? link.url}</h5>
-              <p className="mt-0.5 text-custom-text-200">
-                Added {timeAgo(link.created_at)}
-                <br />
-                by{" "}
-                {link.created_by_detail.is_bot
-                  ? link.created_by_detail.first_name + " Bot"
-                  : link.created_by_detail.display_name}
-              </p>
-            </div>
-          </a>
+
+            {!isNotAllowed && (
+              <div className="flex items-center gap-2 flex-shrink-0 z-[1]">
+                <button
+                  type="button"
+                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleEditLink(link);
+                  }}
+                >
+                  <Pencil className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
+                </button>
+                <a
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                >
+                  <ExternalLinkIcon className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
+                </a>
+                <button
+                  type="button"
+                  className="flex items-center justify-center p-1 hover:bg-custom-background-80"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleDeleteLink(link.id);
+                  }}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </button>
+              </div>
+            )}
+          </div>
+          <div className="px-5">
+            <p className="text-xs mt-0.5 text-custom-text-300 stroke-[1.5]">
+              Added {timeAgo(link.created_at)}
+              <br />
+              by{" "}
+              {link.created_by_detail.is_bot
+                ? link.created_by_detail.first_name + " Bot"
+                : link.created_by_detail.display_name}
+            </p>
+          </div>
         </div>
       ))}
     </>

web/components/core/sidebar/sidebar-progress-stats.tsx

@@ -1,11 +1,16 @@
 import React from "react";
 
+import Image from "next/image";
 // headless ui
 import { Tab } from "@headlessui/react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 import useIssuesView from "hooks/use-issues-view";
+// images
+import emptyLabel from "public/empty-state/empty_label.svg";
+import emptyMembers from "public/empty-state/empty_members.svg";
 // components
+import { StateGroupIcon } from "@plane/ui";
 import { SingleProgressStats } from "components/core";
 // ui
 import { Avatar } from "components/ui";
@@ -17,9 +22,7 @@ import {
   TLabelsDistribution,
   TStateGroups,
 } from "types";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-// types
+
 type Props = {
   distribution: {
     assignees: TAssigneesDistribution[];
@@ -33,6 +36,7 @@ type Props = {
   module?: IModule;
   roundedTab?: boolean;
   noBackground?: boolean;
+  isPeekModuleDetails?: boolean;
 };
 
 export const SidebarProgressStats: React.FC<Props> = ({
@@ -42,6 +46,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
   module,
   roundedTab,
   noBackground,
+  isPeekModuleDetails = false,
 }) => {
   const { filters, setFilters } = useIssuesView();
 
@@ -55,7 +60,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
         return 1;
       case "States":
         return 2;
-
       default:
         return 0;
     }
@@ -72,7 +76,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
             return setTab("Labels");
           case 2:
             return setTab("States");
-
           default:
             return setTab("Assignees");
         }
@@ -82,15 +85,17 @@ export const SidebarProgressStats: React.FC<Props> = ({
         as="div"
         className={`flex w-full items-center gap-2 justify-between rounded-md ${
           noBackground ? "" : "bg-custom-background-90"
-        } px-1 py-1.5 
-        ${module ? "text-xs" : "text-sm"} `}
+        } p-0.5
+        ${module ? "text-xs" : "text-sm"}`}
       >
         <Tab
           className={({ selected }) =>
             `w-full  ${
               roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
-              selected ? " bg-custom-primary text-white" : "  hover:bg-custom-background-80"
+              selected
+                ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
+                : "text-custom-text-400 hover:text-custom-text-300"
             }`
           }
         >
@@ -101,7 +106,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
             `w-full ${
               roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
             } px-3 py-1 text-custom-text-100 ${
-              selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
+              selected
+                ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
+                : "text-custom-text-400 hover:text-custom-text-300"
             }`
           }
         >
@@ -112,113 +119,128 @@ export const SidebarProgressStats: React.FC<Props> = ({
             `w-full ${
               roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
             } px-3 py-1  text-custom-text-100 ${
-              selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
+              selected
+                ? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
+                : "text-custom-text-400 hover:text-custom-text-300"
             }`
           }
         >
           States
         </Tab>
       </Tab.List>
-      <Tab.Panels className="flex w-full items-center justify-between pt-1 text-custom-text-200">
-        <Tab.Panel as="div" className="w-full space-y-1">
-          {distribution.assignees.map((assignee, index) => {
-            if (assignee.assignee_id)
-              return (
-                <SingleProgressStats
-                  key={assignee.assignee_id}
-                  title={
-                    <div className="flex items-center gap-2">
-                      <Avatar
-                        user={{
-                          id: assignee.assignee_id,
-                          avatar: assignee.avatar ?? "",
-                          first_name: assignee.first_name ?? "",
-                          last_name: assignee.last_name ?? "",
-                          display_name: assignee.display_name ?? "",
-                        }}
-                      />
-                      <span>{assignee.display_name}</span>
-                    </div>
-                  }
-                  completed={assignee.completed_issues}
-                  total={assignee.total_issues}
-                  onClick={() => {
-                    if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
-                      setFilters({
-                        assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
-                      });
-                    else
-                      setFilters({
-                        assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
-                      });
-                  }}
-                  selected={filters?.assignees?.includes(assignee.assignee_id ?? "")}
-                />
-              );
-            else
-              return (
-                <SingleProgressStats
-                  key={`unassigned-${index}`}
-                  title={
-                    <div className="flex items-center gap-2">
-                      <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
-                        <img
-                          src="/user.png"
-                          height="100%"
-                          width="100%"
-                          className="rounded-full"
-                          alt="User"
+      <Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
+        <Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
+          {distribution.assignees.length > 0 ? (
+            distribution.assignees.map((assignee, index) => {
+              if (assignee.assignee_id)
+                return (
+                  <SingleProgressStats
+                    key={assignee.assignee_id}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <Avatar
+                          user={{
+                            id: assignee.assignee_id,
+                            avatar: assignee.avatar ?? "",
+                            first_name: assignee.first_name ?? "",
+                            last_name: assignee.last_name ?? "",
+                            display_name: assignee.display_name ?? "",
+                          }}
+                          height="18px"
+                          width="18px"
                         />
+                        <span>{assignee.display_name}</span>
                       </div>
-                      <span>No assignee</span>
-                    </div>
-                  }
-                  completed={assignee.completed_issues}
-                  total={assignee.total_issues}
-                />
-              );
-          })}
-        </Tab.Panel>
-        <Tab.Panel as="div" className="w-full space-y-1">
-          {distribution.labels.map((label, index) => (
-            <SingleProgressStats
-              key={label.label_id ?? `no-label-${index}`}
-              title={
-                <div className="flex items-center gap-2">
-                  <span
-                    className="block h-3 w-3 rounded-full"
-                    style={{
-                      backgroundColor: label.color ?? "transparent",
-                    }}
+                    }
+                    completed={assignee.completed_issues}
+                    total={assignee.total_issues}
+                    {...(!isPeekModuleDetails && {
+                      onClick: () => {
+                        if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
+                          setFilters({
+                            assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
+                          });
+                        else
+                          setFilters({
+                            assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
+                          });
+                      },
+                      selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
+                    })}
                   />
-                  <span className="text-xs">{label.label_name ?? "No labels"}</span>
-                </div>
-              }
-              completed={label.completed_issues}
-              total={label.total_issues}
-              onClick={() => {
-                if (filters.labels?.includes(label.label_id ?? ""))
-                  setFilters({
-                    labels: filters?.labels?.filter((l) => l !== label.label_id),
-                  });
-                else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
-              }}
-              selected={filters?.labels?.includes(label.label_id ?? "")}
-            />
-          ))}
+                );
+              else
+                return (
+                  <SingleProgressStats
+                    key={`unassigned-${index}`}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
+                          <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
+                        </div>
+                        <span>No assignee</span>
+                      </div>
+                    }
+                    completed={assignee.completed_issues}
+                    total={assignee.total_issues}
+                  />
+                );
+            })
+          ) : (
+            <div className="flex flex-col items-center justify-center gap-2 h-full">
+              <div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
+                <Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
+              </div>
+              <h6 className="text-base text-custom-text-300">No assignees yet</h6>
+            </div>
+          )}
         </Tab.Panel>
-        <Tab.Panel as="div" className="w-full space-y-1">
+        <Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
+          {distribution.labels.length > 0 ? (
+            distribution.labels.map((label, index) => (
+              <SingleProgressStats
+                key={label.label_id ?? `no-label-${index}`}
+                title={
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="block h-3 w-3 rounded-full"
+                      style={{
+                        backgroundColor: label.color ?? "transparent",
+                      }}
+                    />
+                    <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                  </div>
+                }
+                completed={label.completed_issues}
+                total={label.total_issues}
+                {...(!isPeekModuleDetails && {
+                  onClick: () => {
+                    if (filters.labels?.includes(label.label_id ?? ""))
+                      setFilters({
+                        labels: filters?.labels?.filter((l) => l !== label.label_id),
+                      });
+                    else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
+                  },
+                  selected: filters?.labels?.includes(label.label_id ?? ""),
+                })}
+              />
+            ))
+          ) : (
+            <div className="flex flex-col items-center justify-center gap-2 h-full">
+              <div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
+                <Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
+              </div>
+              <h6 className="text-base text-custom-text-300">No labels yet</h6>
+            </div>
+          )}
+        </Tab.Panel>
+        <Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
           {Object.keys(groupedIssues).map((group, index) => (
             <SingleProgressStats
               key={index}
               title={
                 <div className="flex items-center gap-2">
-                  <span
-                    className="block h-3 w-3 rounded-full "
-                    style={{
-                      backgroundColor: STATE_GROUP_COLORS[group as TStateGroups],
-                    }}
-                  />
+                  <StateGroupIcon stateGroup={group as TStateGroups} />
                   <span className="text-xs capitalize">{group}</span>
                 </div>
               }

web/components/core/sidebar/single-progress-stats.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ProgressBar } from "@plane/ui";
+import { CircularProgressIndicator } from "@plane/ui";
 
 type TSingleProgressStatsProps = {
   title: any;
@@ -27,7 +27,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
     <div className="flex w-1/2 items-center justify-end gap-1 px-2">
       <div className="flex h-5 items-center justify-center gap-1">
         <span className="h-4 w-4">
-          <ProgressBar value={completed} maxValue={total} />
+          <CircularProgressIndicator percentage={(completed / total) * 100} size={14} strokeWidth={2} />
         </span>
         <span className="w-8 text-right">
           {isNaN(Math.floor((completed / total) * 100)) ? "0" : Math.floor((completed / total) * 100)}%

web/components/gantt-chart/chart/index.tsx

@@ -1,6 +1,4 @@
 import { FC, useEffect, useState } from "react";
-// next
-import { useRouter } from "next/router";
 // icons
 // components
 import { GanttChartBlocks } from "components/gantt-chart";
@@ -13,7 +11,7 @@ import { MonthChartView } from "./month";
 // import { QuarterChartView } from "./quarter";
 // import { YearChartView } from "./year";
 // icons
-import { Expand, PlusIcon, Shrink } from "lucide-react";
+import { Expand, Shrink } from "lucide-react";
 // views
 import {
   // generateHourChart,
@@ -28,7 +26,6 @@ import {
   // getNumberOfDaysBetweenTwoDatesInYear,
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
-// import { GanttInlineCreateIssueForm } from "components/core/views/gantt-chart-view/inline-create-issue-form";
 // types
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
@@ -65,15 +62,9 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   enableReorder,
   bottomSpacing,
 }) => {
-  // router
-  const router = useRouter();
-  const { cycleId, moduleId } = router.query;
-  const isCyclePage = router.pathname.split("/")[4] === "cycles" && !cycleId;
-  const isModulePage = router.pathname.split("/")[4] === "modules" && !moduleId;
   // states
   const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
   const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
-  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
   const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null); // blocks state management starts
   // hooks
   const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } = useChart();
@@ -297,44 +288,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             SidebarBlockRender={SidebarBlockRender}
             enableReorder={enableReorder}
           />
-          {chartBlocks && !(isCyclePage || isModulePage) && (
-            <div className="pl-2.5 py-3">
-              {/* <GanttInlineCreateIssueForm
-                isOpen={isCreateIssueFormOpen}
-                handleClose={() => setIsCreateIssueFormOpen(false)}
-                onSuccess={() => {
-                  const ganttSidebar = document.getElementById(`gantt-sidebar-${cycleId}`);
-
-                  const timeoutId = setTimeout(() => {
-                    if (ganttSidebar)
-                      ganttSidebar.scrollBy({
-                        top: ganttSidebar.scrollHeight,
-                        left: 0,
-                        behavior: "smooth",
-                      });
-                    clearTimeout(timeoutId);
-                  }, 10);
-                }}
-                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 pl-[1.875rem] 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>
-          )}
         </div>
         <div
           className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"

web/components/gantt-chart/cycle-sidebar.tsx

@@ -0,0 +1,158 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "./hooks";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IBlockUpdateData, IGanttBlock } from "./types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  SidebarBlockRender: React.FC<any>;
+  enableReorder: boolean;
+};
+
+export const GanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">
+                                <SidebarBlockRender data={block.data} />
+                              </div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};

web/components/gantt-chart/module-sidebar.tsx

@@ -0,0 +1,158 @@
+import { useRouter } from "next/router";
+import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+import { MoreVertical } from "lucide-react";
+// hooks
+import { useChart } from "./hooks";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { findTotalDaysInRange } from "helpers/date-time.helper";
+// types
+import { IBlockUpdateData, IGanttBlock } from "./types";
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blocks: IGanttBlock[] | null;
+  SidebarBlockRender: React.FC<any>;
+  enableReorder: boolean;
+};
+
+export const GanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+
+  const router = useRouter();
+  const { cycleId } = router.query;
+
+  const { activeBlock, dispatch } = useChart();
+
+  // update the active block on hover
+  const updateActiveBlock = (block: IGanttBlock | null) => {
+    dispatch({
+      type: "PARTIAL_UPDATE",
+      payload: {
+        activeBlock: block,
+      },
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination } = result;
+
+    // return if dropped outside the list
+    if (!destination) return;
+
+    // return if dropped on the same index
+    if (source.index === destination.index) return;
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    // update the sort order to the lowest if dropped at the top
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    // update the sort order to the highest if dropped at the bottom
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    // update the sort order to the average of the two adjacent blocks if dropped in between
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    // extract the element from the source index and insert it at the destination index without updating the entire array
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    // call the block update handler with the updated sort order, new and old index
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
+    });
+  };
+
+  return (
+    <DragDropContext onDragEnd={handleOrderChange}>
+      <StrictModeDroppable droppableId="gantt-sidebar">
+        {(droppableProvided) => (
+          <div
+            id={`gantt-sidebar-${cycleId}`}
+            className="max-h-full overflow-y-auto pl-2.5 mt-3"
+            ref={droppableProvided.innerRef}
+            {...droppableProvided.droppableProps}
+          >
+            <>
+              {blocks ? (
+                blocks.map((block, index) => {
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
+
+                  return (
+                    <Draggable
+                      key={`sidebar-block-${block.id}`}
+                      draggableId={`sidebar-block-${block.id}`}
+                      index={index}
+                      isDragDisabled={!enableReorder}
+                    >
+                      {(provided, snapshot) => (
+                        <div
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
+                          onMouseEnter={() => updateActiveBlock(block)}
+                          onMouseLeave={() => updateActiveBlock(null)}
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                        >
+                          <div
+                            id={`sidebar-block-${block.id}`}
+                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
+                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            {enableReorder && (
+                              <button
+                                type="button"
+                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
+                                {...provided.dragHandleProps}
+                              >
+                                <MoreVertical className="h-3.5 w-3.5" />
+                                <MoreVertical className="h-3.5 w-3.5 -ml-5" />
+                              </button>
+                            )}
+                            <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
+                              <div className="flex-grow truncate">
+                                <SidebarBlockRender data={block.data} />
+                              </div>
+                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                                {duration} day{duration > 1 ? "s" : ""}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  );
+                })
+              ) : (
+                <Loader className="pr-2 space-y-3">
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                  <Loader.Item height="34px" />
+                </Loader>
+              )}
+              {droppableProvided.placeholder}
+            </>
+          </div>
+        )}
+      </StrictModeDroppable>
+    </DragDropContext>
+  );
+};

web/components/gantt-chart/sidebar.tsx

@@ -6,6 +6,8 @@ import { MoreVertical } from "lucide-react";
 import { useChart } from "./hooks";
 // ui
 import { Loader } from "@plane/ui";
+// components
+import { GanttInlineCreateIssueForm } from "components/issues";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
@@ -17,11 +19,12 @@ type Props = {
   blocks: IGanttBlock[] | null;
   SidebarBlockRender: React.FC<any>;
   enableReorder: boolean;
+  enableQuickIssueCreate?: boolean;
 };
 
 export const GanttSidebar: React.FC<Props> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
+  const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder, enableQuickIssueCreate } = props;
 
   const router = useRouter();
   const { cycleId } = router.query;
@@ -150,6 +153,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
               )}
               {droppableProvided.placeholder}
             </>
+            <GanttInlineCreateIssueForm />
           </div>
         )}
       </StrictModeDroppable>

web/components/headers/modules-list.tsx

@@ -1,25 +1,28 @@
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
-import { Plus } from "lucide-react";
+import { GanttChart, LayoutGrid, List, Plus } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // ui
 import { Breadcrumbs, BreadcrumbItem, Button, Tooltip } from "@plane/ui";
-import { Icon } from "components/ui";
 // helper
 import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
 
-const moduleViewOptions: { type: "grid" | "gantt_chart"; icon: any }[] = [
+const moduleViewOptions: { type: "list" | "grid" | "gantt_chart"; icon: any }[] = [
   {
-    type: "gantt_chart",
-    icon: "view_timeline",
+    type: "list",
+    icon: List,
   },
   {
     type: "grid",
-    icon: "table_rows",
+    icon: LayoutGrid,
+  },
+  {
+    type: "gantt_chart",
+    icon: GanttChart,
   },
 ];
 
@@ -67,7 +70,7 @@ export const ModulesListHeader: React.FC = observer(() => {
               }`}
               onClick={() => setModulesView(option.type)}
             >
-              <Icon iconName={option.icon} className={`!text-base ${option.type === "grid" ? "rotate-90" : ""}`} />
+              <option.icon className="h-3.5 w-3.5" />
             </button>
           </Tooltip>
         ))}

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -44,12 +44,23 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
             <div className="h-full w-full grid grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
               {allWeeksOfActiveMonth &&
                 Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
-                  <CalendarWeekDays key={weekIndex} week={week} issues={issues} quickActions={quickActions} />
+                  <CalendarWeekDays
+                    key={weekIndex}
+                    week={week}
+                    issues={issues}
+                    enableQuickIssueCreate
+                    quickActions={quickActions}
+                  />
                 ))}
             </div>
           )}
           {layout === "week" && (
-            <CalendarWeekDays week={calendarStore.allDaysOfActiveWeek} issues={issues} quickActions={quickActions} />
+            <CalendarWeekDays
+              week={calendarStore.allDaysOfActiveWeek}
+              issues={issues}
+              enableQuickIssueCreate
+              quickActions={quickActions}
+            />
           )}
         </div>
       </div>

web/components/issues/issue-layouts/calendar/day-tile.tsx

@@ -4,7 +4,7 @@ import { Droppable } from "@hello-pangea/dnd";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { CalendarIssueBlocks, ICalendarDate } from "components/issues";
+import { CalendarIssueBlocks, ICalendarDate, CalendarInlineCreateIssueForm } from "components/issues";
 // helpers
 import { renderDateFormat } from "helpers/date-time.helper";
 // types
@@ -17,10 +17,11 @@ type Props = {
   date: ICalendarDate;
   issues: IIssueGroupedStructure | null;
   quickActions: (issue: IIssue) => React.ReactNode;
+  enableQuickIssueCreate?: boolean;
 };
 
 export const CalendarDayTile: React.FC<Props> = observer((props) => {
-  const { date, issues, quickActions } = props;
+  const { date, issues, quickActions, enableQuickIssueCreate } = props;
 
   const { issueFilter: issueFilterStore } = useMobxStore();
 
@@ -30,7 +31,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="w-full h-full relative flex flex-col bg-custom-background-90">
+      <div className="group w-full h-full relative flex flex-col bg-custom-background-90">
         {/* header */}
         <div
           className={`text-xs text-right flex-shrink-0 py-1 px-2 ${
@@ -63,6 +64,16 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                 ref={provided.innerRef}
               >
                 <CalendarIssueBlocks issues={issuesList} quickActions={quickActions} />
+                {enableQuickIssueCreate && (
+                  <div className="py-1 px-2">
+                    <CalendarInlineCreateIssueForm
+                      groupId={renderDateFormat(date.date)}
+                      prePopulatedData={{
+                        target_date: renderDateFormat(date.date),
+                      }}
+                    />
+                  </div>
+                )}
                 {provided.placeholder}
               </div>
             )}

web/components/issues/issue-layouts/calendar/index.ts

@@ -7,3 +7,4 @@ export * from "./header";
 export * from "./issue-blocks";
 export * from "./week-days";
 export * from "./week-header";
+export * from "./inline-create-issue-form";

web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx

@@ -0,0 +1,234 @@
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/router";
+import { Transition } from "@headlessui/react";
+import { useForm } from "react-hook-form";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// icons
+import { PlusIcon } from "lucide-react";
+
+// types
+import { IIssue } from "types";
+
+type Props = {
+  groupId?: string;
+  dependencies?: any[];
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const useCheckIfThereIsSpaceOnRight = (ref: React.RefObject<HTMLDivElement>, deps: any[]) => {
+  const [isThereSpaceOnRight, setIsThereSpaceOnRight] = useState(true);
+
+  const router = useRouter();
+  const { moduleId, cycleId, viewId } = router.query;
+
+  const container = document.getElementById(`calendar-view-${cycleId ?? moduleId ?? viewId}`);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const { right } = ref.current.getBoundingClientRect();
+
+    const width = right;
+
+    const innerWidth = container?.getBoundingClientRect().width ?? window.innerWidth;
+
+    if (width > innerWidth) setIsThereSpaceOnRight(false);
+    else setIsThereSpaceOnRight(true);
+  }, [ref, deps, container]);
+
+  return isThereSpaceOnRight;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  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 pr-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> = observer((props) => {
+  const { prePopulatedData, dependencies = [], groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  // ref
+  const ref = useRef<HTMLDivElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    register,
+    setFocus,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  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 isSpaceOnRight = useCheckIfThereIsSpaceOnRight(ref, dependencies);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list?.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      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"
+      >
+        <div
+          ref={ref}
+          className={`transition-all z-20 w-full ${
+            isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
+          }`}
+        >
+          <form
+            onSubmit={handleSubmit(onSubmitHandler)}
+            className="flex w-full px-1.5 border-[0.5px] border-custom-border-100 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
+          >
+            <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+          </form>
+        </div>
+      </Transition>
+
+      {!isOpen && (
+        <div className="hidden group-hover:block border-[0.5px] border-custom-border-200 rounded">
+          <button
+            type="button"
+            className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-1 py-1.5 rounded-md"
+            onClick={() => setIsOpen(true)}
+          >
+            <PlusIcon className="h-4 w-4" />
+            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          </button>
+        </div>
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -22,11 +22,14 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
         <Draggable key={issue.id} draggableId={issue.id} index={index}>
           {(provided, snapshot) => (
             <div
-              className="p-1 px-2"
+              className="p-1 px-2 relative"
               {...provided.draggableProps}
               {...provided.dragHandleProps}
               ref={provided.innerRef}
             >
+              {issue?.tempId !== undefined && (
+                <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+              )}
               <Link href={`/${workspaceSlug?.toString()}/projects/${issue.project}/issues/${issue.id}`}>
                 <a
                   className={`group/calendar-block h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-100 ${
@@ -46,11 +49,6 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                   </div>
                   <h6 className="text-xs flex-grow truncate">{issue.name}</h6>
                   <div className="hidden group-hover/calendar-block:block">{quickActions(issue)}</div>
-                  {/* <IssueQuickActions
-                    issue={issue}
-                    handleDelete={async () => handleIssues(issue.target_date ?? "", issue, "delete")}
-                    handleUpdate={async (data) => handleIssues(issue.target_date ?? "", data, "update")}
-                  /> */}
                 </a>
               </Link>
             </div>

web/components/issues/issue-layouts/calendar/week-days.tsx

@@ -15,10 +15,11 @@ type Props = {
   issues: IIssueGroupedStructure | null;
   week: ICalendarWeek | undefined;
   quickActions: (issue: IIssue) => React.ReactNode;
+  enableQuickIssueCreate?: boolean;
 };
 
 export const CalendarWeekDays: React.FC<Props> = observer((props) => {
-  const { issues, week, quickActions } = props;
+  const { issues, week, quickActions, enableQuickIssueCreate } = props;
 
   const { issueFilter: issueFilterStore } = useMobxStore();
 
@@ -37,7 +38,13 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
         if (!showWeekends && (date.date.getDay() === 0 || date.date.getDay() === 6)) return null;
 
         return (
-          <CalendarDayTile key={renderDateFormat(date.date)} date={date} issues={issues} quickActions={quickActions} />
+          <CalendarDayTile
+            key={renderDateFormat(date.date)}
+            date={date}
+            issues={issues}
+            quickActions={quickActions}
+            enableQuickIssueCreate={enableQuickIssueCreate}
+          />
         );
       })}
     </div>

web/components/issues/issue-layouts/gantt/index.ts

@@ -3,3 +3,4 @@ export * from "./cycle-root";
 export * from "./module-root";
 export * from "./project-view-root";
 export * from "./root";
+export * from "./inline-create-issue-form";

web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { Transition } from "@headlessui/react";
+import { PlusIcon } from "lucide-react";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// types
+import { IIssue } from "types";
+import { renderDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <input
+      type="text"
+      autoComplete="off"
+      placeholder="Issue Title"
+      {...register("name", {
+        required: "Issue title is required.",
+      })}
+      className="w-full px-2 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+    />
+  );
+};
+
+export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  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 onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      start_date: renderDateFormat(new Date()),
+      target_date: renderDateFormat(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)),
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      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"
+      >
+        <form
+          ref={ref}
+          className="flex py-3 px-4 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm"
+          onSubmit={handleSubmit(onSubmitHandler)}
+        >
+          <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>
+          <Inputs register={register} setFocus={setFocus} />
+        </form>
+      </Transition>
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/kanban/block.tsx

@@ -54,6 +54,9 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
             {...provided.dragHandleProps}
             ref={provided.innerRef}
           >
+            {issue.tempId !== undefined && (
+              <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+            )}
             <div className="absolute top-3 right-3 hidden group-hover/kanban-block:block">
               {quickActions(
                 !sub_group_id && sub_group_id === "null" ? null : sub_group_id,

web/components/issues/issue-layouts/kanban/default.tsx

@@ -5,7 +5,7 @@ import { Droppable } from "@hello-pangea/dnd";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
-import { KanbanIssueBlocksList } from "components/issues";
+import { KanbanIssueBlocksList, BoardInlineCreateIssueForm } from "components/issues";
 // types
 import { IEstimatePoint, IIssue, IIssueLabels, IProject, IState, IUserLite } from "types";
 // constants
@@ -29,6 +29,7 @@ export interface IGroupByKanBan {
   display_properties: any;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  enableQuickIssueCreate?: boolean;
   states: IState[] | null;
   labels: IIssueLabels[] | null;
   members: IUserLite[] | null;
@@ -55,6 +56,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     members,
     priorities,
     estimates,
+    enableQuickIssueCreate,
   } = props;
 
   const verticalAlignPosition = (_list: any) =>
@@ -120,6 +122,16 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                 )}
               </Droppable>
             </div>
+            {enableQuickIssueCreate && (
+              <BoardInlineCreateIssueForm
+                groupId={getValueFromObject(_list, listKey) as string}
+                subGroupId={sub_group_id}
+                prePopulatedData={{
+                  ...(group_by && { [group_by]: getValueFromObject(_list, listKey) }),
+                  ...(sub_group_by && sub_group_id !== "null" && { [sub_group_by]: sub_group_id }),
+                }}
+              />
+            )}
           </div>
         ))}
     </div>
@@ -149,6 +161,7 @@ export interface IKanBan {
   members: IUserLite[] | null;
   projects: IProject[] | null;
   estimates: IEstimatePoint[] | null;
+  enableQuickIssueCreate?: boolean;
 }
 
 export const KanBan: React.FC<IKanBan> = observer((props) => {
@@ -169,6 +182,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     members,
     projects,
     estimates,
+    enableQuickIssueCreate,
   } = props;
 
   const { project: projectStore, issueKanBanView: issueKanBanViewStore } = useMobxStore();
@@ -189,6 +203,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
           states={states}
           labels={labels}
           members={members}
@@ -211,6 +226,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
           states={states}
           labels={labels}
           members={members}
@@ -233,6 +249,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
           states={states}
           labels={labels}
           members={members}
@@ -255,6 +272,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
           states={states}
           labels={labels}
           members={members}
@@ -277,6 +295,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
           states={states}
           labels={labels}
           members={members}
@@ -299,6 +318,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
           states={states}
           labels={labels}
           members={members}

web/components/issues/issue-layouts/kanban/index.ts

@@ -1,3 +1,4 @@
 export * from "./block";
 export * from "./roots";
 export * from "./blocks-list";
+export * from "./inline-create-issue-form";

web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { Transition } from "@headlessui/react";
+import { PlusIcon } from "lucide-react";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// types
+import { IIssue } from "types";
+
+type Props = {
+  groupId?: string;
+  subGroupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  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> = observer((props) => {
+  const { prePopulatedData, groupId, subGroupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { setToastAlert } = useToast();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    register,
+    setFocus,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  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 onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues, ...(prePopulatedData ?? {}) });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list && formData.labels_list.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list && formData.assignees_list.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: subGroupId ?? null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      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 (
+    <div>
+      <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"
+      >
+        <form
+          ref={ref}
+          onSubmit={handleSubmit(onSubmitHandler)}
+          className="flex flex-col border-[0.5px] border-custom-border-100 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-custom-shadow-sm"
+        >
+          <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+        </form>
+      </Transition>
+
+      {isOpen && (
+        <p className="text-xs ml-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/kanban/roots/project-root.tsx

@@ -112,6 +112,7 @@ export const KanBanLayout: React.FC = observer(() => {
             labels={labels}
             members={members?.map((m) => m.member) ?? null}
             projects={projects}
+            enableQuickIssueCreate
             estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
           />
         ) : (

web/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -153,6 +153,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   members={members}
                   projects={projects}
                   estimates={estimates}
+                  enableQuickIssueCreate
                 />
               </div>
             )}

web/components/issues/issue-layouts/list/block.tsx

@@ -27,12 +27,15 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
 
   return (
     <>
-      <div className="text-sm p-3 shadow-custom-shadow-2xs bg-custom-background-100 flex items-center gap-3 border-b border-custom-border-200 hover:bg-custom-background-80">
+      <div className="text-sm p-3 relative shadow-custom-shadow-2xs bg-custom-background-100 flex items-center gap-3 border-b border-custom-border-200 hover:bg-custom-background-80">
         {display_properties && display_properties?.key && (
           <div className="flex-shrink-0 text-xs text-custom-text-300">
             {issue?.project_detail?.identifier}-{issue.sequence_id}
           </div>
         )}
+        {issue?.tempId !== undefined && (
+          <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
+        )}
         <IssuePeekOverview
           workspaceSlug={issue?.workspace_detail?.slug}
           projectId={issue?.project_detail?.id}

web/components/issues/issue-layouts/list/default.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { ListGroupByHeaderRoot } from "./headers/group-by-root";
-import { IssueBlocksList } from "components/issues";
+import { IssueBlocksList, ListInlineCreateIssueForm } from "components/issues";
 // types
 import { IEstimatePoint, IIssue, IIssueLabels, IProject, IState, IUserLite } from "types";
 // constants
@@ -23,6 +23,7 @@ export interface IGroupByList {
   projects: IProject[] | null;
   stateGroups: any;
   priorities: any;
+  enableQuickIssueCreate?: boolean;
   estimates: IEstimatePoint[] | null;
 }
 
@@ -43,6 +44,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
     stateGroups,
     priorities,
     estimates,
+    enableQuickIssueCreate,
   } = props;
 
   return (
@@ -76,6 +78,14 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
                 />
               )}
             </div>
+            {enableQuickIssueCreate && (
+              <ListInlineCreateIssueForm
+                groupId={getValueFromObject(_list, listKey) as string}
+                prePopulatedData={{
+                  [group_by!]: getValueFromObject(_list, listKey),
+                }}
+              />
+            )}
           </div>
         ))}
     </div>
@@ -96,6 +106,7 @@ export interface IList {
   projects: IProject[] | null;
   stateGroups: any;
   priorities: any;
+  enableQuickIssueCreate?: boolean;
   estimates: IEstimatePoint[] | null;
 }
 
@@ -113,6 +124,7 @@ export const List: React.FC<IList> = observer((props) => {
     stateGroups,
     priorities,
     estimates,
+    enableQuickIssueCreate,
   } = props;
 
   return (
@@ -134,6 +146,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -153,6 +166,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -172,6 +186,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -191,6 +206,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -210,6 +226,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -229,6 +246,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -248,6 +266,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
 
@@ -267,6 +286,7 @@ export const List: React.FC<IList> = observer((props) => {
           stateGroups={stateGroups}
           priorities={priorities}
           estimates={estimates}
+          enableQuickIssueCreate={enableQuickIssueCreate}
         />
       )}
     </div>

web/components/issues/issue-layouts/list/index.ts

@@ -1,3 +1,4 @@
 export * from "./roots";
 export * from "./block";
 export * from "./blocks-list";
+export * from "./inline-create-issue-form";

web/components/issues/issue-layouts/list/inline-create-issue-form.tsx

@@ -0,0 +1,201 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { Transition } from "@headlessui/react";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// types
+import { IIssue } from "types";
+import { PlusIcon } from "lucide-react";
+
+type Props = {
+  groupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  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-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const ListInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  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 onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list?.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      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 (
+    <div>
+      <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"
+      >
+        <form
+          ref={ref}
+          onSubmit={handleSubmit(onSubmitHandler)}
+          className="flex border-[0.5px] border-t-0 border-custom-border-100 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
+        >
+          <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+        </form>
+      </Transition>
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/list/roots/project-root.tsx

@@ -76,6 +76,7 @@ export const ListLayout: FC = observer(() => {
         labels={labels}
         members={members?.map((m) => m.member) ?? null}
         projects={projects}
+        enableQuickIssueCreate
         estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
       />
     </div>

web/components/issues/issue-layouts/spreadsheet/index.ts

@@ -2,3 +2,4 @@ export * from "./columns";
 export * from "./roots";
 export * from "./spreadsheet-column";
 export * from "./spreadsheet-view";
+export * from "./inline-create-issue-form";

web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx

@@ -0,0 +1,207 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { Transition } from "@headlessui/react";
+
+// hooks
+import useToast from "hooks/use-toast";
+import useKeypress from "hooks/use-keypress";
+import useProjectDetails from "hooks/use-project-details";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+// constants
+import { createIssuePayload } from "constants/issue";
+
+// types
+import { IIssue } from "types";
+import { PlusIcon } from "lucide-react";
+
+type Props = {
+  groupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  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-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  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 onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list && formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list && formData.assignees_list?.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      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 (
+    <div>
+      <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"
+      >
+        <div>
+          <form
+            ref={ref}
+            onSubmit={handleSubmit(onSubmitHandler)}
+            className="flex border-[0.5px] border-t-0 border-custom-border-100 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
+          >
+            <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+          </form>
+        </div>
+      </Transition>
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx

@@ -66,6 +66,7 @@ export const ProjectSpreadsheetLayout: React.FC = observer(() => {
       handleIssueAction={() => {}}
       handleUpdateIssue={handleUpdateIssue}
       disableUserActions={false}
+      enableQuickCreateIssue
     />
   );
 });

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -3,11 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // components
-import {
-  SpreadsheetColumnsList,
-  // ListInlineCreateIssueForm,
-  SpreadsheetIssuesColumn,
-} from "components/issues";
+import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreateIssueForm } from "components/issues";
 import { CustomMenu, Spinner } from "@plane/ui";
 // types
 import {
@@ -31,6 +27,7 @@ type Props = {
   handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
   openIssuesListModal?: (() => void) | null;
   disableUserActions: boolean;
+  enableQuickCreateIssue?: boolean;
 };
 
 export const SpreadsheetView: React.FC<Props> = observer((props) => {
@@ -46,6 +43,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     handleUpdateIssue,
     openIssuesListModal,
     disableUserActions,
+    enableQuickCreateIssue,
   } = props;
 
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
@@ -138,17 +136,10 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
 
         <div className="border-t border-custom-border-100">
           <div className="mb-3 z-50 sticky bottom-0 left-0">
-            {/* <ListInlineCreateIssueForm
-                isOpen={isInlineCreateIssueFormOpen}
-                handleClose={() => setIsInlineCreateIssueFormOpen(false)}
-                prePopulatedData={{
-                  ...(cycleId && { cycle: cycleId.toString() }),
-                  ...(moduleId && { module: moduleId.toString() }),
-                }}
-              /> */}
+            {enableQuickCreateIssue && <SpreadsheetInlineCreateIssueForm />}
           </div>
 
-          {!disableUserActions &&
+          {/* {!disableUserActions &&
             !isInlineCreateIssueFormOpen &&
             (type === "issue" ? (
               <button
@@ -180,7 +171,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                   <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
                 )}
               </CustomMenu>
-            ))}
+            ))} */}
         </div>
       </div>
     </div>

web/components/modules/index.ts

@@ -7,3 +7,5 @@ export * from "./modal";
 export * from "./modules-list-view";
 export * from "./sidebar";
 export * from "./module-card-item";
+export * from "./module-list-item";
+export * from "./module-peek-overview";

web/components/modules/module-card-item.tsx

@@ -10,14 +10,16 @@ import useToast from "hooks/use-toast";
 import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
 // ui
 import { AssigneesList } from "components/ui";
-import { CustomMenu, Tooltip } from "@plane/ui";
+import { CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
 // icons
-import { CalendarDays, LinkIcon, Pencil, Star, Target, Trash2 } from "lucide-react";
+import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
 // helpers
-import { copyUrlToClipboard, truncateText } from "helpers/string.helper";
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { copyUrlToClipboard } from "helpers/string.helper";
+import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
 // types
 import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
 
 type Props = {
   module: IModule;
@@ -72,9 +74,32 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     });
   };
 
+  const openModuleOverview = () => {
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekModule: module.id },
+    });
+  };
+
   const endDate = new Date(module.target_date ?? "");
   const startDate = new Date(module.start_date ?? "");
-  const lastUpdated = new Date(module.updated_at ?? "");
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
+
+  const issueCount =
+    module.completed_issues && module.total_issues
+      ? module.total_issues === 0
+        ? "0 Issue"
+        : module.total_issues === module.completed_issues
+        ? module.total_issues > 1
+          ? `${module.total_issues} Issues`
+          : `${module.total_issues} Issue`
+        : `${module.completed_issues}/${module.total_issues} Issues`
+      : "0 Issue";
 
   return (
     <>
@@ -88,96 +113,142 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
         />
       )}
       <DeleteModuleModal data={module} isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} />
-      <div className="flex flex-col divide-y divide-custom-border-200 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 text-xs">
-        <div className="p-4">
-          <div className="flex w-full flex-col gap-5">
-            <div className="flex items-start justify-between gap-2">
-              <Tooltip tooltipContent={module.name} position="top-left">
-                <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-                  <a className="w-auto max-w-[calc(100%-9rem)]">
-                    <h3 className="truncate break-words text-lg font-semibold text-custom-text-100">
-                      {truncateText(module.name, 75)}
-                    </h3>
-                  </a>
-                </Link>
+      <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+        <a className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <Tooltip tooltipContent={module.name} position="auto">
+                <span className="text-base font-medium truncate">{module.name}</span>
               </Tooltip>
+              <div className="flex items-center gap-2">
+                {moduleStatus && (
+                  <span
+                    className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
+                  >
+                    {moduleStatus.label}
+                  </span>
+                )}
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    openModuleOverview();
+                  }}
+                >
+                  <Info className="h-4 w-4 text-custom-text-400" />
+                </button>
+              </div>
+            </div>
+          </div>
 
-              <div className="flex items-center gap-1">
-                <div className="mr-2 flex whitespace-nowrap rounded bg-custom-background-90 px-2.5 py-2 text-custom-text-200">
-                  <span className="capitalize">{module?.status?.replace("-", " ")}</span>
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-custom-text-200">
+                <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                <span className="text-xs text-custom-text-300">{issueCount}</span>
+              </div>
+              {module.members_detail.length > 0 && (
+                <Tooltip tooltipContent={`${module.members_detail.length} Members`}>
+                  <div className="flex items-center gap-1 cursor-default">
+                    <AssigneesList users={module.members_detail} length={3} />
+                  </div>
+                </Tooltip>
+              )}
+            </div>
+
+            <Tooltip
+              tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
+              position="top-left"
+            >
+              <div className="flex items-center w-full">
+                <div
+                  className="bar relative h-1.5 w-full rounded bg-custom-background-90"
+                  style={{
+                    boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
+                  }}
+                >
+                  <div
+                    className="absolute top-0 left-0 h-1.5 rounded bg-blue-600 duration-300"
+                    style={{
+                      width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
+                    }}
+                  />
                 </div>
+              </div>
+            </Tooltip>
+
+            <div className="flex items-center justify-between">
+              <span className="text-xs text-custom-text-300">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+              <div className="flex items-center gap-1.5 z-10">
                 {module.is_favorite ? (
-                  <button type="button" onClick={handleRemoveFromFavorites}>
-                    <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      handleRemoveFromFavorites();
+                    }}
+                  >
+                    <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
                   </button>
                 ) : (
-                  <button type="button" onClick={handleAddToFavorites}>
-                    <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      handleAddToFavorites();
+                    }}
+                  >
+                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
                   </button>
                 )}
-
-                <CustomMenu width="auto" verticalEllipsis placement="bottom-end">
-                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                <CustomMenu width="auto" ellipsis className="z-10">
+                  <CustomMenu.MenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setEditModuleModal(true);
+                    }}
+                  >
                     <span className="flex items-center justify-start gap-2">
-                      <LinkIcon className="h-3 w-3" strokeWidth={2} />
-                      <span>Copy link</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem onClick={() => setEditModuleModal(true)}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Pencil className="h-3 w-3" strokeWidth={2} />
+                      <Pencil className="h-3 w-3" />
                       <span>Edit module</span>
                     </span>
                   </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
+                  <CustomMenu.MenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setModuleDeleteModal(true);
+                    }}
+                  >
                     <span className="flex items-center justify-start gap-2">
-                      <Trash2 className="h-3 w-3" strokeWidth={2} />
+                      <Trash2 className="h-3 w-3" />
                       <span>Delete module</span>
                     </span>
                   </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleCopyText();
+                    }}
+                  >
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-3 w-3" />
+                      <span>Copy module link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
                 </CustomMenu>
               </div>
             </div>
-            <div className="grid grid-cols-2 gap-2 text-custom-text-200">
-              <div className="flex items-start gap-1">
-                <CalendarDays className="h-4 w-4" />
-                <span>Start:</span>
-                <span>{renderShortDateWithYearFormat(startDate, "Not set")}</span>
-              </div>
-              <div className="flex items-start gap-1">
-                <Target className="h-4 w-4" />
-                <span>End:</span>
-                <span>{renderShortDateWithYearFormat(endDate, "Not set")}</span>
-              </div>
-            </div>
           </div>
-        </div>
-        <div className="flex h-20 flex-col items-end bg-custom-background-80">
-          <div className="flex w-full items-center justify-between gap-2 justify-self-end p-4 text-custom-text-200">
-            <span>Progress</span>
-            <div className="bar relative h-1 w-full rounded bg-custom-background-90">
-              <div
-                className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
-                style={{
-                  width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
-                }}
-              />
-            </div>
-            <span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
-          </div>
-          <div className="item-center flex h-full w-full justify-between px-4 pb-4 text-custom-text-200">
-            <p>
-              Last updated:
-              <span className="font-medium">{renderShortDateWithYearFormat(lastUpdated)}</span>
-            </p>
-            {module.members_detail.length > 0 && (
-              <div className="flex items-center gap-1">
-                <AssigneesList users={module.members_detail} length={4} />
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
+        </a>
+      </Link>
     </>
   );
 });

web/components/modules/module-list-item.tsx

@@ -0,0 +1,242 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
+// ui
+import { AssigneesList } from "components/ui";
+import { CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
+// icons
+import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
+// types
+import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+type Props = {
+  module: IModule;
+};
+
+export const ModuleListItem: React.FC<Props> = observer((props) => {
+  const { module } = props;
+
+  const [editModuleModal, setEditModuleModal] = useState(false);
+  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const { module: moduleStore } = useMobxStore();
+
+  const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the module to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the module from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleCopyText = () => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Module link copied to clipboard.",
+      });
+    });
+  };
+
+  const endDate = new Date(module.target_date ?? "");
+  const startDate = new Date(module.start_date ?? "");
+
+  const renderDate = module.start_date || module.target_date;
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
+
+  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
+
+  const completedModuleCheck = module.status === "completed" && module.total_issues - module.completed_issues;
+
+  const openModuleOverview = () => {
+    const { query } = router;
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekModule: module.id },
+    });
+  };
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <CreateUpdateModuleModal
+          isOpen={editModuleModal}
+          onClose={() => setEditModuleModal(false)}
+          data={module}
+          projectId={projectId.toString()}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
+      <DeleteModuleModal data={module} isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} />
+      <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+        <a className="group flex items-center justify-between gap-5 px-10 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
+          <div className="flex items-center gap-3 w-full truncate">
+            <div className="flex items-center gap-4 truncate">
+              <span className="flex-shrink-0">
+                <CircularProgressIndicator size={38} percentage={progress}>
+                  {completedModuleCheck ? (
+                    <span className="text-sm text-custom-primary-100">{`!`}</span>
+                  ) : progress === 100 ? (
+                    <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
+                  ) : (
+                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                  )}
+                </CircularProgressIndicator>
+              </span>
+              <Tooltip tooltipContent={module.name} position="auto">
+                <span className="text-base font-medium truncate">{module.name}</span>
+              </Tooltip>
+            </div>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                openModuleOverview();
+              }}
+              className="flex-shrink-0 hidden group-hover:flex z-10"
+            >
+              <Info className="h-4 w-4 text-custom-text-400" />
+            </button>
+          </div>
+
+          <div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
+            <div className="flex items-center justify-center">
+              {moduleStatus && (
+                <span
+                  className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
+                >
+                  {moduleStatus.label}
+                </span>
+              )}
+            </div>
+
+            {renderDate && (
+              <span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
+                {" - "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+            )}
+
+            <Tooltip tooltipContent={`${module.members_detail.length} Members`}>
+              <div className="flex items-center justify-center gap-1 cursor-default w-16">
+                {module.members_detail.length > 0 ? (
+                  <AssigneesList users={module.members_detail} length={2} />
+                ) : (
+                  <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+
+            {module.is_favorite ? (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  handleRemoveFromFavorites();
+                }}
+                className="z-[1]"
+              >
+                <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  handleAddToFavorites();
+                }}
+                className="z-[1]"
+              >
+                <Star className="h-3.5 w-3.5 text-custom-text-300" />
+              </button>
+            )}
+
+            <CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
+              <CustomMenu.MenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setEditModuleModal(true);
+                }}
+              >
+                <span className="flex items-center justify-start gap-2">
+                  <Pencil className="h-3 w-3" />
+                  <span>Edit module</span>
+                </span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setModuleDeleteModal(true);
+                }}
+              >
+                <span className="flex items-center justify-start gap-2">
+                  <Trash2 className="h-3 w-3" />
+                  <span>Delete module</span>
+                </span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleCopyText();
+                }}
+              >
+                <span className="flex items-center justify-start gap-2">
+                  <LinkIcon className="h-3 w-3" />
+                  <span>Copy module link</span>
+                </span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        </a>
+      </Link>
+    </>
+  );
+});

web/components/modules/module-peek-overview.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ModuleDetailsSidebar } from "./sidebar";
+
+type Props = {
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
+  const router = useRouter();
+  const { peekModule } = router.query;
+
+  const ref = React.useRef(null);
+
+  const { module: moduleStore } = useMobxStore();
+  const { fetchModuleDetails } = moduleStore;
+
+  const handleClose = () => {
+    delete router.query.peekModule;
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query },
+    });
+  };
+
+  useEffect(() => {
+    if (!peekModule) return;
+
+    fetchModuleDetails(workspaceSlug, projectId, peekModule.toString());
+  }, [fetchModuleDetails, peekModule, projectId, workspaceSlug]);
+
+  return (
+    <>
+      {peekModule && (
+        <div
+          ref={ref}
+          className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+          style={{
+            boxShadow:
+              "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+          }}
+        >
+          <ModuleDetailsSidebar moduleId={peekModule?.toString() ?? ""} handleClose={handleClose} />
+        </div>
+      )}
+    </>
+  );
+});

web/components/modules/modules-list-view.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // mobx store
@@ -5,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
-import { ModuleCardItem, ModulesListGanttChartView } from "components/modules";
+import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules";
 import { EmptyState } from "components/common";
 // ui
 import { Loader } from "@plane/ui";
@@ -13,6 +14,9 @@ import { Loader } from "@plane/ui";
 import emptyModule from "public/empty-state/module.svg";
 
 export const ModulesListView: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, peekModule } = router.query;
+
   const { module: moduleStore } = useMobxStore();
 
   const { storedValue: modulesView } = useLocalStorage("modules_view", "grid");
@@ -22,12 +26,12 @@ export const ModulesListView: React.FC = observer(() => {
   if (!modulesList)
     return (
       <Loader className="grid grid-cols-3 gap-4 p-8">
-        <Loader.Item height="100px" />
-        <Loader.Item height="100px" />
-        <Loader.Item height="100px" />
-        <Loader.Item height="100px" />
-        <Loader.Item height="100px" />
-        <Loader.Item height="100px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
+        <Loader.Item height="176px" />
       </Loader>
     );
 
@@ -35,12 +39,39 @@ export const ModulesListView: React.FC = observer(() => {
     <>
       {modulesList.length > 0 ? (
         <>
+          {modulesView === "list" && (
+            <div className="h-full overflow-y-auto">
+              <div className="flex justify-between h-full w-full">
+                <div className="flex flex-col h-full w-full overflow-y-auto">
+                  {modulesList.map((module) => (
+                    <ModuleListItem key={module.id} module={module} />
+                  ))}
+                </div>
+                <ModulePeekOverview
+                  projectId={projectId?.toString() ?? ""}
+                  workspaceSlug={workspaceSlug?.toString() ?? ""}
+                />
+              </div>
+            </div>
+          )}
           {modulesView === "grid" && (
-            <div className="h-full overflow-y-auto p-8">
-              <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
-                {modulesList.map((module) => (
-                  <ModuleCardItem key={module.id} module={module} />
-                ))}
+            <div className="h-full w-full">
+              <div className="flex justify-between h-full w-full">
+                <div
+                  className={`grid grid-cols-1 gap-6 p-8 h-full w-full overflow-y-auto ${
+                    peekModule
+                      ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
+                      : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
+                  } auto-rows-max transition-all `}
+                >
+                  {modulesList.map((module) => (
+                    <ModuleCardItem key={module.id} module={module} />
+                  ))}
+                </div>
+                <ModulePeekOverview
+                  projectId={projectId?.toString() ?? ""}
+                  workspaceSlug={workspaceSlug?.toString() ?? ""}
+                />
               </div>
             </div>
           )}

web/components/modules/sidebar-select/select-lead.tsx

@@ -7,7 +7,7 @@ import { ProjectService } from "services/project";
 import { Avatar } from "components/ui";
 import { CustomSearchSelect } from "@plane/ui";
 // icons
-import { UserCircle2 } from "lucide-react";
+import { ChevronDown, UserCircle2 } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -36,7 +36,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar user={member.member} height="18px" width="18px" />
         {member.member.display_name}
       </div>
     ),
@@ -46,18 +46,27 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-      <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-        <UserCircle2 className="h-5 w-5" />
-        <span>Lead</span>
+      <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+        <UserCircle2 className="h-4 w-4" />
+        <span className="text-base">Lead</span>
       </div>
-      <div className="sm:basis-1/2">
+      <div className="flex items-center w-1/2 rounded-sm">
         <CustomSearchSelect
+          className="w-full rounded-sm"
           value={value}
-          label={
-            <div className="flex items-center gap-2">
-              {selectedOption && <Avatar user={selectedOption} />}
-              {selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">No lead</span>}
-            </div>
+          customButtonClassName="rounded-sm"
+          customButton={
+            selectedOption ? (
+              <div className="flex items-center justify-start gap-2 p-0.5 w-full">
+                <Avatar user={selectedOption} />
+                <span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
+              </div>
+            ) : (
+              <div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
+                <span>No lead</span>
+                <ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
+              </div>
+            )
           }
           options={options}
           maxHeight="md"

web/components/modules/sidebar-select/select-members.tsx

@@ -10,6 +10,7 @@ import { ProjectService } from "services/project";
 import { AssigneesList, Avatar } from "components/ui";
 import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // icons
+import { ChevronDown } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -37,7 +38,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
     query: member.member.display_name,
     content: (
       <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
+        <Avatar user={member.member} height="18px" width="18px" />
         {member.member.display_name}
       </div>
     ),
@@ -45,24 +46,26 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-      <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-        <UserGroupIcon className="h-5 w-5" />
-        <span>Members</span>
+      <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+        <UserGroupIcon className="h-4 w-4" />
+        <span className="text-base">Members</span>
       </div>
-      <div className="sm:basis-1/2">
+      <div className="flex items-center w-1/2 rounded-sm ">
         <CustomSearchSelect
+          className="w-full rounded-sm"
           value={value ?? []}
-          label={
-            <div className="flex items-center gap-2 text-custom-text-200">
-              {value && value.length > 0 && Array.isArray(value) ? (
-                <div className="flex items-center justify-center gap-2">
-                  <AssigneesList userIds={value} length={3} showLength={false} />
-                  <span className="text-custom-text-200">{value.length} Assignees</span>
-                </div>
-              ) : (
-                "No members"
-              )}
-            </div>
+          customButtonClassName="rounded-sm"
+          customButton={
+            value && value.length > 0 && Array.isArray(value) ? (
+              <div className="flex items-center gap-2 p-0.5 w-full">
+                <AssigneesList userIds={value} length={2} />
+              </div>
+            ) : (
+              <div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
+                <span>No members</span>
+                <ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
+              </div>
+            )
           }
           options={options}
           onChange={onChange}

web/components/modules/sidebar.tsx

@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
 import { Controller, useForm } from "react-hook-form";
-import { Disclosure, Popover, Transition } from "@headlessui/react";
-import DatePicker from "react-datepicker";
+import { Disclosure, Transition } from "@headlessui/react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // services
@@ -18,22 +17,12 @@ import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
 import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
 import ProgressChart from "components/core/sidebar/progress-chart";
 // ui
-import { CustomSelect, CustomMenu, Loader, ProgressBar } from "@plane/ui";
+import { CustomMenu, Loader, LayersIcon } from "@plane/ui";
 // icon
-import {
-  AlertCircle,
-  CalendarDays,
-  ChevronDown,
-  File,
-  LinkIcon,
-  MoveRight,
-  PieChart,
-  Plus,
-  Trash2,
-} from "lucide-react";
+import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, Plus, Trash2 } from "lucide-react";
 // helpers
-import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { capitalizeFirstLetter, copyUrlToClipboard } from "helpers/string.helper";
+import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
+import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { linkDetails, IModule, ModuleLink } from "types";
 // fetch-keys
@@ -50,8 +39,8 @@ const defaultValues: Partial<IModule> = {
 };
 
 type Props = {
-  isOpen: boolean;
   moduleId: string;
+  handleClose: () => void;
 };
 
 // services
@@ -59,14 +48,14 @@ const moduleService = new ModuleService();
 
 // TODO: refactor this component
 export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
-  const { isOpen, moduleId } = props;
+  const { moduleId, handleClose } = props;
 
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
   const [moduleLinkModal, setModuleLinkModal] = useState(false);
   const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug, projectId, peekModule } = router.query;
 
   const { module: moduleStore, user: userStore } = useMobxStore();
 
@@ -77,7 +66,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
 
   const { setToastAlert } = useToast();
 
-  const { reset, watch, control } = useForm({
+  const { reset, control } = useForm({
     defaultValues,
   });
 
@@ -209,12 +198,29 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     : null;
 
   const handleEditLink = (link: linkDetails) => {
+    console.log("link", link);
     setSelectedLinkToUpdate(link);
     setModuleLinkModal(true);
   };
 
   if (!moduleDetails) return null;
 
+  const startDate = new Date(moduleDetails.start_date ?? "");
+  const endDate = new Date(moduleDetails.target_date ?? "");
+
+  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+  const issueCount =
+    moduleDetails.total_issues === 0
+      ? "0 Issue"
+      : moduleDetails.total_issues === moduleDetails.completed_issues
+      ? moduleDetails.total_issues > 1
+        ? `${moduleDetails.total_issues}`
+        : `${moduleDetails.total_issues}`
+      : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
+
   return (
     <>
       <LinkModal
@@ -229,308 +235,160 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         updateIssueLink={handleUpdateLink}
       />
       <DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
-      <div
-        className={`fixed top-[66px] ${
-          isOpen ? "right-0" : "-right-[24rem]"
-        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-200 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
-      >
-        {module ? (
-          <>
-            <div className="flex flex-col items-start justify-center">
-              <div className="flex gap-2.5 px-5 text-sm">
-                <div className="flex items-center ">
-                  <Controller
-                    control={control}
-                    name="status"
-                    render={({ field: { value } }) => (
-                      <CustomSelect
-                        customButton={
-                          <span className="flex cursor-pointer items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
-                            {capitalizeFirstLetter(`${watch("status")}`)}
-                          </span>
-                        }
-                        value={value}
-                        onChange={(value: any) => {
-                          submitChanges({ status: value });
-                        }}
-                      >
-                        {MODULE_STATUS.map((option) => (
-                          <CustomSelect.Option key={option.value} value={option.value}>
-                            <span className="text-xs">{option.label}</span>
-                          </CustomSelect.Option>
-                        ))}
-                      </CustomSelect>
-                    )}
-                  />
-                </div>
-                <div className="relative flex h-full w-52 items-center gap-2 text-sm">
-                  <Popover className="flex h-full items-center justify-center rounded-lg">
-                    {({}) => (
-                      <>
-                        <Popover.Button
-                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-xs ${
-                            moduleDetails.start_date ? "" : "text-custom-text-200"
-                          }`}
-                        >
-                          <CalendarDays className="h-3 w-3" />
-                          <span>
-                            {renderShortDateWithYearFormat(new Date(`${moduleDetails.start_date}`), "Start date")}
-                          </span>
-                        </Popover.Button>
-
-                        <Transition
-                          as={React.Fragment}
-                          enter="transition ease-out duration-200"
-                          enterFrom="opacity-0 translate-y-1"
-                          enterTo="opacity-100 translate-y-0"
-                          leave="transition ease-in duration-150"
-                          leaveFrom="opacity-100 translate-y-0"
-                          leaveTo="opacity-0 translate-y-1"
-                        >
-                          <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
-                            <DatePicker
-                              selected={watch("start_date") ? new Date(`${watch("start_date")}`) : new Date()}
-                              onChange={(date) => {
-                                submitChanges({
-                                  start_date: renderDateFormat(date),
-                                });
-                              }}
-                              selectsStart
-                              startDate={new Date(`${watch("start_date")}`)}
-                              endDate={new Date(`${watch("target_date")}`)}
-                              maxDate={new Date(`${watch("target_date")}`)}
-                              shouldCloseOnSelect
-                              inline
-                            />
-                          </Popover.Panel>
-                        </Transition>
-                      </>
-                    )}
-                  </Popover>
-                  <span>
-                    <MoveRight className="h-3 w-3 text-custom-text-200" />
+      {module ? (
+        <>
+          <div className="flex items-center justify-between w-full">
+            <div>
+              {peekModule && (
+                <button
+                  className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
+                  onClick={() => handleClose()}
+                >
+                  <ChevronRight className="h-3 w-3 text-white stroke-2" />
+                </button>
+              )}
+            </div>
+            <div className="flex items-center gap-3.5">
+              <button onClick={handleCopyText}>
+                <LinkIcon className="h-3 w-3 text-custom-text-300" />
+              </button>
+              <CustomMenu width="lg" ellipsis>
+                <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <Trash2 className="h-4 w-4" />
+                    <span>Delete</span>
                   </span>
-                  <Popover className="flex h-full items-center justify-center rounded-lg">
-                    {({}) => (
-                      <>
-                        <Popover.Button
-                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-xs ${
-                            moduleDetails.target_date ? "" : "text-custom-text-200"
-                          }`}
-                        >
-                          <CalendarDays className="h-3 w-3 " />
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            </div>
+          </div>
 
-                          <span>
-                            {renderShortDateWithYearFormat(new Date(`${moduleDetails?.target_date}`), "End date")}
-                          </span>
-                        </Popover.Button>
+          <div className="flex flex-col gap-3">
+            <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{moduleDetails.name}</h4>
+            <div className="flex items-center gap-5">
+              {moduleStatus && (
+                <span
+                  className={`flex items-center cursor-default justify-center text-sm h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
+                >
+                  {moduleStatus.label}
+                </span>
+              )}
+              <span className="text-sm text-custom-text-300 font-mediu cursor-default">
+                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
+                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
+              </span>
+            </div>
+          </div>
 
-                        <Transition
-                          as={React.Fragment}
-                          enter="transition ease-out duration-200"
-                          enterFrom="opacity-0 translate-y-1"
-                          enterTo="opacity-100 translate-y-0"
-                          leave="transition ease-in duration-150"
-                          leaveFrom="opacity-100 translate-y-0"
-                          leaveTo="opacity-0 translate-y-1"
-                        >
-                          <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
-                            <DatePicker
-                              selected={watch("target_date") ? new Date(`${watch("target_date")}`) : new Date()}
-                              onChange={(date) => {
-                                submitChanges({
-                                  target_date: renderDateFormat(date),
-                                });
-                              }}
-                              selectsEnd
-                              startDate={new Date(`${watch("start_date")}`)}
-                              endDate={new Date(`${watch("target_date")}`)}
-                              minDate={new Date(`${watch("start_date")}`)}
-                              shouldCloseOnSelect
-                              inline
-                            />
-                          </Popover.Panel>
-                        </Transition>
-                      </>
-                    )}
-                  </Popover>
-                </div>
+          {moduleDetails.description && (
+            <span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
+              {moduleDetails.description}
+            </span>
+          )}
+
+          <div className="flex flex-col gap-5 pt-2.5 pb-6">
+            <Controller
+              control={control}
+              name="lead"
+              render={({ field: { value } }) => (
+                <SidebarLeadSelect
+                  value={value}
+                  onChange={(val: string) => {
+                    submitChanges({ lead: val });
+                  }}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="members_list"
+              render={({ field: { value } }) => (
+                <SidebarMembersSelect
+                  value={value}
+                  onChange={(val: string[]) => {
+                    submitChanges({ members_list: val });
+                  }}
+                />
+              )}
+            />
+
+            <div className="flex items-center justify-start gap-1">
+              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
+                <LayersIcon className="h-4 w-4" />
+                <span className="text-base">Issues</span>
               </div>
-
-              <div className="flex w-full flex-col gap-6 px-6 py-6">
-                <div className="flex w-full flex-col items-start justify-start gap-2">
-                  <div className="flex w-full items-start justify-between gap-2  ">
-                    <div className="max-w-[300px]">
-                      <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">
-                        {moduleDetails.name}
-                      </h4>
-                    </div>
-                    <CustomMenu width="lg" ellipsis>
-                      <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
-                        <span className="flex items-center justify-start gap-2">
-                          <Trash2 className="h-4 w-4" />
-                          <span>Delete</span>
-                        </span>
-                      </CustomMenu.MenuItem>
-                      <CustomMenu.MenuItem onClick={handleCopyText}>
-                        <span className="flex items-center justify-start gap-2">
-                          <LinkIcon className="h-4 w-4" />
-                          <span>Copy link</span>
-                        </span>
-                      </CustomMenu.MenuItem>
-                    </CustomMenu>
-                  </div>
-
-                  <span className="whitespace-normal text-sm leading-5 text-custom-text-200 break-words w-full">
-                    {moduleDetails.description}
-                  </span>
-                </div>
-
-                <div className="flex flex-col  gap-4  text-sm">
-                  <Controller
-                    control={control}
-                    name="lead"
-                    render={({ field: { value } }) => (
-                      <SidebarLeadSelect
-                        value={value}
-                        onChange={(val: string) => {
-                          submitChanges({ lead: val });
-                        }}
-                      />
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name="members_list"
-                    render={({ field: { value } }) => (
-                      <SidebarMembersSelect
-                        value={value}
-                        onChange={(val: string[]) => {
-                          submitChanges({ members_list: val });
-                        }}
-                      />
-                    )}
-                  />
-
-                  <div className="flex items-center justify-start gap-1">
-                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-                      <PieChart className="h-5 w-5" />
-                      <span>Progress</span>
-                    </div>
-
-                    <div className="flex items-center gap-2.5 text-custom-text-200">
-                      <span className="h-4 w-4">
-                        <ProgressBar value={moduleDetails.completed_issues} maxValue={moduleDetails.total_issues} />
-                      </span>
-                      {moduleDetails.completed_issues}/{moduleDetails.total_issues}
-                    </div>
-                  </div>
-                </div>
+              <div className="flex items-center w-1/2">
+                <span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
               </div>
             </div>
+          </div>
 
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
-              <Disclosure defaultOpen>
+          <div className="flex flex-col">
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
+              <Disclosure>
                 {({ open }) => (
                   <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
-                    <div className="flex w-full items-center justify-between gap-2    ">
+                    <div className="flex w-full items-center justify-between gap-2">
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Progress</span>
-                        {!open && progressPercentage ? (
-                          <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
+                      </div>
+
+                      <div className="flex items-center gap-2.5">
+                        {progressPercentage ? (
+                          <span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
                             {progressPercentage ? `${progressPercentage}%` : ""}
                           </span>
                         ) : (
                           ""
                         )}
-                      </div>
-
-                      {isStartValid && isEndValid ? (
-                        <Disclosure.Button className="p-1">
-                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
-                        </Disclosure.Button>
-                      ) : (
-                        <div className="flex items-center gap-1">
-                          <AlertCircle height={14} width={14} className="text-custom-text-200" />
-                          <span className="text-xs italic text-custom-text-200">
-                            Invalid date. Please enter valid date.
-                          </span>
-                        </div>
-                      )}
-                    </div>
-                    <Transition show={open}>
-                      <Disclosure.Panel>
                         {isStartValid && isEndValid ? (
-                          <div className=" h-full w-full py-4">
-                            <div className="flex  items-start justify-between gap-4 py-2 text-xs">
-                              <div className="flex items-center gap-1">
-                                <span>
-                                  <File className="h-3 w-3 text-custom-text-200" />
-                                </span>
-                                <span>
-                                  Pending Issues -{" "}
-                                  {moduleDetails.total_issues -
-                                    (moduleDetails.completed_issues + moduleDetails.cancelled_issues)}{" "}
-                                </span>
-                              </div>
-
-                              <div className="flex items-center gap-3 text-custom-text-100">
-                                <div className="flex items-center justify-center gap-1">
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
-                                  <span>Ideal</span>
-                                </div>
-                                <div className="flex items-center justify-center gap-1">
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-                                  <span>Current</span>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="relative h-40 w-80">
-                              <ProgressChart
-                                distribution={moduleDetails.distribution.completion_chart}
-                                startDate={moduleDetails.start_date ?? ""}
-                                endDate={moduleDetails.target_date ?? ""}
-                                totalIssues={moduleDetails.total_issues}
-                              />
-                            </div>
-                          </div>
+                          <Disclosure.Button className="p-1.5">
+                            <ChevronDown
+                              className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
+                              aria-hidden="true"
+                            />
+                          </Disclosure.Button>
                         ) : (
-                          ""
+                          <div className="flex items-center gap-1">
+                            <AlertCircle height={14} width={14} className="text-custom-text-200" />
+                            <span className="text-xs italic text-custom-text-200">
+                              Invalid date. Please enter valid date.
+                            </span>
+                          </div>
                         )}
-                      </Disclosure.Panel>
-                    </Transition>
-                  </div>
-                )}
-              </Disclosure>
-            </div>
-
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
-              <Disclosure defaultOpen>
-                {({ open }) => (
-                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
-                    <div className="flex w-full items-center justify-between gap-2    ">
-                      <div className="flex items-center justify-start gap-2 text-sm">
-                        <span className="font-medium text-custom-text-200">Other Information</span>
                       </div>
-
-                      {moduleDetails.total_issues > 0 ? (
-                        <Disclosure.Button className="p-1">
-                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
-                        </Disclosure.Button>
-                      ) : (
-                        <div className="flex items-center gap-1">
-                          <AlertCircle height={14} width={14} className="text-custom-text-200" />
-                          <span className="text-xs italic text-custom-text-200">
-                            No issues found. Please add issue.
-                          </span>
-                        </div>
-                      )}
                     </div>
                     <Transition show={open}>
                       <Disclosure.Panel>
-                        {moduleDetails.total_issues > 0 ? (
-                          <>
-                            <div className=" h-full w-full py-4">
+                        <div className="flex flex-col gap-3">
+                          {isStartValid && isEndValid ? (
+                            <div className=" h-full w-full pt-4">
+                              <div className="flex  items-start  gap-4 py-2 text-xs">
+                                <div className="flex items-center gap-3 text-custom-text-100">
+                                  <div className="flex items-center justify-center gap-1">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                    <span>Ideal</span>
+                                  </div>
+                                  <div className="flex items-center justify-center gap-1">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                    <span>Current</span>
+                                  </div>
+                                </div>
+                              </div>
+                              <div className="relative h-40 w-80">
+                                <ProgressChart
+                                  distribution={moduleDetails.distribution.completion_chart}
+                                  startDate={moduleDetails.start_date ?? ""}
+                                  endDate={moduleDetails.target_date ?? ""}
+                                  totalIssues={moduleDetails.total_issues}
+                                />
+                              </div>
+                            </div>
+                          ) : (
+                            ""
+                          )}
+                          {moduleDetails.total_issues > 0 && (
+                            <div className="h-full w-full pt-5 border-t border-custom-border-200">
                               <SidebarProgressStats
                                 distribution={moduleDetails.distribution}
                                 groupedIssues={{
@@ -542,12 +400,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                                 }}
                                 totalIssues={moduleDetails.total_issues}
                                 module={moduleDetails}
+                                isPeekModuleDetails={Boolean(peekModule)}
                               />
                             </div>
-                          </>
-                        ) : (
-                          ""
-                        )}
+                          )}
+                        </div>
                       </Disclosure.Panel>
                     </Transition>
                   </div>
@@ -555,42 +412,83 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
               </Disclosure>
             </div>
 
-            <div className="flex w-full flex-col border-t border-custom-border-200 px-6 pt-6 pb-10 text-xs">
-              <div className="flex w-full items-center justify-between">
-                <h4 className="text-sm font-medium text-custom-text-200">Links</h4>
-                <button
-                  className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90"
-                  onClick={() => setModuleLinkModal(true)}
-                >
-                  <Plus className="h-4 w-4" />
-                </button>
-              </div>
-              <div className="mt-2 space-y-2 hover:bg-custom-background-80">
-                {memberRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
-                  <LinksList
-                    links={moduleDetails.link_module}
-                    handleEditLink={handleEditLink}
-                    handleDeleteLink={handleDeleteLink}
-                    userAuth={memberRole}
-                  />
-                ) : null}
-              </div>
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
+              <Disclosure>
+                {({ open }) => (
+                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                    <div className="flex w-full items-center justify-between gap-2">
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-custom-text-200">Links</span>
+                      </div>
+
+                      <div className="flex items-center gap-2.5">
+                        <Disclosure.Button className="p-1.5">
+                          <ChevronDown
+                            className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
+                            aria-hidden="true"
+                          />
+                        </Disclosure.Button>
+                      </div>
+                    </div>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        <div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
+                          {memberRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
+                            <>
+                              <div className="flex items-center justify-end w-full">
+                                <button
+                                  className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                  onClick={() => setModuleLinkModal(true)}
+                                >
+                                  <Plus className="h-3 w-3" />
+                                  Add link
+                                </button>
+                              </div>
+
+                              <LinksList
+                                links={moduleDetails.link_module}
+                                handleEditLink={handleEditLink}
+                                handleDeleteLink={handleDeleteLink}
+                                userAuth={memberRole}
+                              />
+                            </>
+                          ) : (
+                            <div className="flex items-center justify-between gap-2">
+                              <div className="flex items-center gap-2">
+                                <Info className="h-3.5 w-3.5 text-custom-text-300 stroke-[1.5]" />
+                                <span className="text-xs text-custom-text-300 p-0.5">No links added yet</span>
+                              </div>
+                              <button
+                                className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
+                                onClick={() => setModuleLinkModal(true)}
+                              >
+                                <Plus className="h-3 w-3" />
+                                Add link
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
             </div>
-          </>
-        ) : (
-          <Loader className="px-5">
-            <div className="space-y-2">
-              <Loader.Item height="15px" width="50%" />
-              <Loader.Item height="15px" width="30%" />
-            </div>
-            <div className="mt-8 space-y-3">
-              <Loader.Item height="30px" />
-              <Loader.Item height="30px" />
-              <Loader.Item height="30px" />
-            </div>
-          </Loader>
-        )}
-      </div>
+          </div>
+        </>
+      ) : (
+        <Loader className="px-5">
+          <div className="space-y-2">
+            <Loader.Item height="15px" width="50%" />
+            <Loader.Item height="15px" width="30%" />
+          </div>
+          <div className="mt-8 space-y-3">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </div>
+        </Loader>
+      )}
     </>
   );
 });

web/components/ui/avatar.tsx

@@ -76,11 +76,20 @@ export const Avatar: React.FC<AvatarProps> = ({
 type AsigneesListProps = {
   users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
   userIds?: string[];
+  height?: string;
+  width?: string;
   length?: number;
   showLength?: boolean;
 };
 
-export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 3, showLength = true }) => {
+export const AssigneesList: React.FC<AsigneesListProps> = ({
+  users,
+  userIds,
+  height = "24px",
+  width = "24px",
+  length = 3,
+  showLength = true,
+}) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -101,7 +110,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
       {users && (
         <>
           {users.slice(0, length).map((user, index) => (
-            <Avatar key={user?.id} user={user} index={index} />
+            <Avatar key={user?.id} user={user} index={index} height={height} width={width} />
           ))}
           {users.length > length ? (
             <div className="-ml-3.5 relative h-6 w-6 rounded">
@@ -118,7 +127,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
           {userIds.slice(0, length).map((userId, index) => {
             const user = people?.find((p) => p.member.id === userId)?.member;
 
-            return <Avatar key={userId} user={user} index={index} />;
+            return <Avatar key={userId} user={user} index={index} height={height} width={width} />;
           })}
           {showLength ? (
             userIds.length > length ? (

web/constants/issue.ts

@@ -1,3 +1,4 @@
+import { v4 as uuidv4 } from "uuid";
 // icons
 import { Calendar, GanttChart, Kanban, List, Sheet } from "lucide-react";
 // types
@@ -11,6 +12,9 @@ import {
   TIssuePriorities,
   TIssueTypeFilters,
   TStateGroups,
+  IIssue,
+  IProject,
+  IWorkspace,
 } from "types";
 
 export const ISSUE_PRIORITIES: {
@@ -415,3 +419,74 @@ export const groupReactionEmojis = (reactions: any) => {
 
   return _groupedEmojis;
 };
+
+/**
+ *
+ * @param workspaceDetail workspace detail to be added in the issue payload
+ * @param projectDetail project detail to be added in the issue payload
+ * @param formData partial issue data from the form. This will override the default values
+ * @returns full issue payload with some default values
+ */
+
+export const createIssuePayload: (
+  workspaceDetail: IWorkspace,
+  projectDetail: IProject,
+  formData: Partial<IIssue>
+) => IIssue = (workspaceDetail: IWorkspace, projectDetail: IProject, formData: Partial<IIssue>) => {
+  const payload = {
+    archived_at: null,
+    assignees: [],
+    assignee_details: [],
+    assignees_list: [],
+    attachment_count: 0,
+    attachments: [],
+    issue_relations: [],
+    related_issues: [],
+    bridge_id: null,
+    completed_at: new Date(),
+    created_at: "",
+    created_by: "",
+    cycle: null,
+    cycle_id: null,
+    cycle_detail: null,
+    description: {},
+    description_html: "",
+    description_stripped: "",
+    estimate_point: null,
+    issue_cycle: null,
+    issue_link: [],
+    issue_module: null,
+    labels: [],
+    label_details: [],
+    is_draft: false,
+    labels_list: [],
+    links_list: [],
+    link_count: 0,
+    module: null,
+    module_id: null,
+    name: "",
+    parent: null,
+    parent_detail: null,
+    priority: "none",
+    project: projectDetail.id,
+    project_detail: projectDetail,
+    sequence_id: 0,
+    sort_order: 0,
+    sprints: null,
+    start_date: null,
+    state: projectDetail.default_state,
+    state_detail: {} as any,
+    sub_issues_count: 0,
+    target_date: null,
+    updated_at: "",
+    updated_by: "",
+    workspace: workspaceDetail.id,
+    workspace_detail: workspaceDetail,
+    id: uuidv4(),
+    tempId: uuidv4(),
+    // to be overridden by the form data
+    ...formData,
+  } as IIssue;
+
+  return payload;
+};

web/constants/module.ts

@@ -5,11 +5,49 @@ export const MODULE_STATUS: {
   label: string;
   value: TModuleStatus;
   color: string;
+  textColor: string;
+  bgColor: string;
 }[] = [
-  { label: "Backlog", value: "backlog", color: "#a3a3a2" },
-  { label: "Planned", value: "planned", color: "#3f76ff" },
-  { label: "In Progress", value: "in-progress", color: "#f39e1f" },
-  { label: "Paused", value: "paused", color: "#525252" },
-  { label: "Completed", value: "completed", color: "#16a34a" },
-  { label: "Cancelled", value: "cancelled", color: "#ef4444" },
+  {
+    label: "Backlog",
+    value: "backlog",
+    color: "#a3a3a2",
+    textColor: "text-custom-text-400",
+    bgColor: "bg-custom-background-80",
+  },
+  {
+    label: "Planned",
+    value: "planned",
+    color: "#3f76ff",
+    textColor: "text-blue-500",
+    bgColor: "bg-indigo-50",
+  },
+  {
+    label: "In Progress",
+    value: "in-progress",
+    color: "#f39e1f",
+    textColor: "text-amber-500",
+    bgColor: "bg-amber-50",
+  },
+  {
+    label: "Paused",
+    value: "paused",
+    color: "#525252",
+    textColor: "text-custom-text-300",
+    bgColor: "bg-custom-background-90",
+  },
+  {
+    label: "Completed",
+    value: "completed",
+    color: "#16a34a",
+    textColor: "text-green-600",
+    bgColor: "bg-green-100",
+  },
+  {
+    label: "Cancelled",
+    value: "cancelled",
+    color: "#ef4444",
+    textColor: "text-red-500",
+    bgColor: "bg-red-50",
+  },
 ];

web/helpers/date-time.helper.ts

@@ -172,6 +172,18 @@ export const renderShortDate = (date: string | Date, placeholder?: string) => {
   return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${day} ${month}`;
 };
 
+export const renderShortMonthDate = (date: string | Date, placeholder?: string) => {
+  if (!date || date === "") return null;
+
+  date = new Date(date);
+
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const month = months[date.getMonth()];
+  const year = date.getFullYear();
+
+  return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${month} ${year}`;
+};
+
 export const render12HourFormatTime = (date: string | Date): string => {
   if (!date || date === "") return "";
 

web/next.config.js

@@ -21,6 +21,7 @@ const nextConfig = {
       "localhost",
       ...extraImageDomains,
     ],
+    unoptimized: true,
   },
   output: "standalone",
   experimental: {

web/package.json

@@ -7,7 +7,8 @@
     "develop": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "export": "next export"
   },
   "dependencies": {
     "@blueprintjs/core": "^4.16.3",

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

@@ -27,7 +27,7 @@ const ModuleIssuesPage: NextPage = () => {
 
   const { module: moduleStore } = useMobxStore();
 
-  const { storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
+  const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
   const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
 
   const { error } = useSWR(
@@ -60,6 +60,10 @@ const ModuleIssuesPage: NextPage = () => {
   //   setModuleIssuesListModal(true);
   // };
 
+  const toggleSidebar = () => {
+    setValue(`${!isSidebarCollapsed}`);
+  };
+
   return (
     <>
       <AppLayout header={<ModuleIssuesHeader />} withProjectWrapper>
@@ -82,10 +86,20 @@ const ModuleIssuesPage: NextPage = () => {
           />
         ) : (
           <div className="flex h-full w-full">
-            <div className={`h-full w-full ${isSidebarCollapsed ? "" : "mr-[24rem]"} duration-300`}>
+            <div className="h-full w-full">
               <ModuleLayoutRoot />
             </div>
-            {moduleId && <ModuleDetailsSidebar isOpen={!isSidebarCollapsed} moduleId={moduleId.toString()} />}
+            {moduleId && !isSidebarCollapsed && (
+              <div
+                className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
+                style={{
+                  boxShadow:
+                    "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
+                }}
+              >
+                <ModuleDetailsSidebar moduleId={moduleId.toString()} handleClose={toggleSidebar} />
+              </div>
+            )}
           </div>
         )}
       </AppLayout>

web/public/empty-state/empty_label.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 3.33203H3.33331V19.9987L18.8166 35.482C20.3833 37.0487 22.95 37.0487 24.5166 35.482L35.4833 24.5154C37.05 22.9487 37.05 20.382 35.4833 18.8154L20 3.33203Z" fill="#CED4DA" stroke="#CED4DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.6667 11.668H11.6834" stroke="#E9ECEF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

web/public/empty-state/empty_members.svg

@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_656_27784)">
+<path d="M24.8113 22.6226C30.23 22.6226 34.6226 18.23 34.6226 12.8113C34.6226 7.39268 30.23 3 24.8113 3C19.3927 3 15 7.39268 15 12.8113C15 18.23 19.3927 22.6226 24.8113 22.6226Z" fill="#E9ECEF"/>
+<path d="M41.6604 39.4833C41.6604 35.3986 39.5722 31.4813 36.4863 28.593C33.4005 25.7047 29.2152 24.082 24.8511 24.082C20.4871 24.082 16.3018 25.7047 13.2159 28.593C10.1301 31.4813 8.39648 35.3986 8.39648 39.4833" fill="#CED4DA"/>
+<path d="M41.6604 39.4833C41.6604 35.3986 39.5722 31.4813 36.4863 28.593C33.4005 25.7047 29.2152 24.082 24.8511 24.082C20.4871 24.082 16.3018 25.7047 13.2159 28.593C10.1301 31.4813 8.39648 35.3986 8.39648 39.4833C10.5708 47.729 38.3358 49.5686 41.6604 39.4833Z" stroke="#CED4DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M41.4427 37.888C41.9639 39.9507 39.7091 42.6049 36.6233 44.3074C33.5374 46.0099 29.8569 46.6995 25.4928 46.6995C21.1288 46.6995 16.9435 45.743 13.8576 44.0405C10.6678 42.8396 7.44345 39.8189 9.03816 37.6211L25.4928 37.6211L41.4427 37.888Z" fill="#CED4DA"/>
+</g>
+<defs>
+<clipPath id="clip0_656_27784">
+<rect width="47.0943" height="47.0943" fill="white" transform="translate(0.452881 0.820312)"/>
+</clipPath>
+</defs>
+</svg>

web/store/issue/index.ts

@@ -3,3 +3,4 @@ export * from "./issue_filters.store";
 export * from "./issue_kanban_view.store";
 export * from "./issue_calendar_view.store";
 export * from "./issue.store";
+export * from "./issue_quick_add.store";

web/store/issue/issue.store.ts

@@ -34,6 +34,7 @@ export interface IIssueStore {
   // action
   fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
   updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  removeIssueFromStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
   deleteIssue: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
   updateGanttIssueStructure: (workspaceSlug: string, issue: IIssue, payload: IBlockUpdateData) => void;
 }
@@ -70,6 +71,7 @@ export class IssueStore implements IIssueStore {
       // actions
       fetchIssues: action,
       updateIssueStructure: action,
+      removeIssueFromStructure: action,
       deleteIssue: action,
       updateGanttIssueStructure: action,
     });
@@ -129,24 +131,33 @@ export class IssueStore implements IIssueStore {
 
     if (issueType === "grouped" && group_id) {
       issues = issues as IIssueGroupedStructure;
+      const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.id === issue.id);
       issues = {
         ...issues,
-        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        [group_id]: _currentIssueId
+          ? issues[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+          : [...(issues?.[group_id] ?? []), issue],
       };
     }
     if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
       issues = issues as IIssueGroupWithSubGroupsStructure;
+      const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.id === issue.id);
       issues = {
         ...issues,
         [sub_group_id]: {
           ...issues[sub_group_id],
-          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+          [group_id]: _currentIssueId
+            ? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+            : [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
         },
       };
     }
     if (issueType === "ungrouped") {
       issues = issues as IIssueUnGroupedStructure;
-      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+      const _currentIssueId = issues?.find((_i) => _i?.id === issue.id);
+      issues = _currentIssueId
+        ? issues?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+        : [...(issues ?? []), issue];
     }
 
     const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
@@ -168,6 +179,43 @@ export class IssueStore implements IIssueStore {
     });
   };
 
+  removeIssueFromStructure = (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: (issues[group_id] ?? []).filter((i) => i?.id !== issue?.id),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: (issues[sub_group_id]?.[group_id] ?? []).filter((i) => i?.id !== issue?.id),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.filter((i) => i?.id !== issue?.id);
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+
   updateGanttIssueStructure = async (workspaceSlug: string, issue: IIssue, payload: IBlockUpdateData) => {
     if (!issue || !workspaceSlug) return;
 

web/store/issue/issue_detail.store.ts

@@ -6,6 +6,8 @@ import { RootStore } from "../root";
 import { IIssue } from "types";
 // constants
 import { groupReactionEmojis } from "constants/issue";
+// uuid
+import { v4 as uuidv4 } from "uuid";
 
 export interface IIssueDetailStore {
   loader: boolean;
@@ -39,6 +41,7 @@ export interface IIssueDetailStore {
   fetchIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IIssue>;
   // creating issue
   createIssue: (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => Promise<IIssue>;
+  optimisticallyCreateIssue: (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => Promise<IIssue>;
   // updating issue
   updateIssue: (workspaceId: string, projectId: string, issueId: string, data: Partial<IIssue>) => Promise<IIssue>;
   // deleting issue
@@ -129,6 +132,7 @@ export class IssueDetailStore implements IIssueDetailStore {
 
       fetchIssueDetails: action,
       createIssue: action,
+      optimisticallyCreateIssue: action,
       updateIssue: action,
       deleteIssue: action,
 
@@ -208,6 +212,44 @@ export class IssueDetailStore implements IIssueDetailStore {
     }
   };
 
+  optimisticallyCreateIssue = async (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => {
+    const tempId = data?.id || uuidv4();
+
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+      this.issues = {
+        ...this.issues,
+        [tempId]: data as IIssue,
+      };
+    });
+
+    try {
+      const response = await this.issueService.createIssue(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+
+      throw error;
+    }
+  };
+
   createIssue = async (workspaceSlug: string, projectId: string, data: Partial<IIssue>) => {
     try {
       runInAction(() => {

web/store/issue/issue_quick_add.store.ts

@@ -0,0 +1,227 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { IssueService } from "services/issue";
+// types
+import { RootStore } from "../root";
+import { IIssue } from "types";
+// uuid
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+import { IIssueGroupWithSubGroupsStructure, IIssueGroupedStructure, IIssueUnGroupedStructure } from "./issue.store";
+
+export interface IIssueQuickAddStore {
+  loader: boolean;
+  error: any | null;
+
+  createIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    grouping: {
+      group_id: string | null;
+      sub_group_id: string | null;
+    },
+    data: Partial<IIssue>
+  ) => Promise<IIssue>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+  updateQuickAddIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class IssueQuickAddStore implements IIssueQuickAddStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // root store
+  rootStore;
+  // service
+  issueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+
+      createIssue: action,
+      updateIssueStructure: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  createIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    grouping: {
+      group_id: string | null;
+      sub_group_id: string | null;
+    },
+    data: Partial<IIssue>
+  ) => {
+    runInAction(() => {
+      this.loader = true;
+      this.error = null;
+    });
+
+    const { group_id, sub_group_id } = grouping;
+
+    try {
+      this.updateIssueStructure(group_id, sub_group_id, data as IIssue);
+
+      const response = await this.issueService.createIssue(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser!
+      );
+
+      this.updateQuickAddIssueStructure(group_id, sub_group_id, {
+        ...data,
+        ...response,
+      });
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+
+      throw error;
+    }
+  };
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.rootStore.issue.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.rootStore.issue.getIssues;
+    if (!issues) return null;
+
+    if (group_id === "null") group_id = null;
+    if (sub_group_id === "null") sub_group_id = null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [group_id]: _currentIssueId
+          ? issues[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+          : [...(issues?.[group_id] ?? []), issue],
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.id === issue.id);
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: _currentIssueId
+            ? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+            : [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      const _currentIssueId = issues?.find((_i) => _i?.id === issue.id);
+      issues = _currentIssueId
+        ? issues?.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i))
+        : [...(issues ?? []), issue];
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.rootStore.issue.issues = {
+        ...this.rootStore.issue.issues,
+        [projectId]: { ...this.rootStore.issue.issues[projectId], [issueType]: issues },
+      };
+    });
+  };
+
+  //   same as above function but will use temp id instead of real id
+  updateQuickAddIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.rootStore.issue.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.rootStore.issue.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      const _currentIssueId = issues?.[group_id]?.find((_i) => _i?.tempId === issue.tempId);
+      issues = {
+        ...issues,
+        [group_id]: _currentIssueId
+          ? issues[group_id]?.map((i: IIssue) =>
+              i?.tempId === issue?.tempId ? { ...i, ...issue, tempId: undefined } : i
+            )
+          : [...(issues?.[group_id] ?? []), issue],
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      const _currentIssueId = issues?.[sub_group_id]?.[group_id]?.find((_i) => _i?.tempId === issue.tempId);
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: _currentIssueId
+            ? issues?.[sub_group_id]?.[group_id]?.map((i: IIssue) =>
+                i?.tempId === issue?.tempId ? { ...i, ...issue, tempId: undefined } : i
+              )
+            : [...(issues?.[sub_group_id]?.[group_id] ?? []), issue],
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      const _currentIssueId = issues?.find((_i) => _i?.tempId === issue.tempId);
+      issues = _currentIssueId
+        ? issues?.map((i: IIssue) => (i?.tempId === issue?.tempId ? { ...i, ...issue, tempId: undefined } : i))
+        : [...(issues ?? []), issue];
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.rootStore.issue.issues = {
+        ...this.rootStore.issue.issues,
+        [projectId]: { ...this.rootStore.issue.issues[projectId], [issueType]: issues },
+      };
+    });
+  };
+}

web/store/root.ts

@@ -14,6 +14,8 @@ import {
   IIssueCalendarViewStore,
   IssueCalendarViewStore,
   IssueStore,
+  IIssueQuickAddStore,
+  IssueQuickAddStore,
 } from "store/issue";
 import { IWorkspaceFilterStore, IWorkspaceStore, WorkspaceFilterStore, WorkspaceStore } from "store/workspace";
 import { IProjectPublishStore, IProjectStore, ProjectPublishStore, ProjectStore } from "store/project";
@@ -126,6 +128,7 @@ export class RootStore {
   issueDetail: IIssueDetailStore;
   issueKanBanView: IIssueKanBanViewStore;
   issueCalendarView: IIssueCalendarViewStore;
+  quickAddIssue: IIssueQuickAddStore;
 
   calendar: ICalendarStore;
 
@@ -181,6 +184,7 @@ export class RootStore {
     this.issueDetail = new IssueDetailStore(this);
     this.issueKanBanView = new IssueKanBanViewStore(this);
     this.issueCalendarView = new IssueCalendarViewStore(this);
+    this.quickAddIssue = new IssueQuickAddStore(this);
 
     this.calendar = new CalendarStore(this);
 

web/types/issues.d.ts

@@ -97,6 +97,8 @@ export interface IIssue {
   description_stripped: any;
   estimate_point: number | null;
   id: string;
+  // tempId is used for optimistic updates. It is not a part of the API response.
+  tempId?: string;
   issue_cycle: IIssueCycle | null;
   issue_link: linkDetails[];
   issue_module: IIssueModule | null;