refactor: divided modules into multiple components

* dev: implement module issues using mobx store

* dev: module filter store setup

* chore: module store crud operations

CONTRIBUTING.md

@@ -8,8 +8,8 @@ Before submitting a new issue, please search the [issues](https://github.com/mak
 
 While we want to fix all the [issues](https://github.com/makeplane/plane/issues), before fixing a bug we need to be able to reproduce and confirm it. Please provide us with a minimal reproduction scenario using a repository or [Gist](https://gist.github.com/). Having a live, reproducible scenario gives us the information without asking questions back & forth with additional questions like:
 
--   3rd-party libraries being used and their versions
--   a use-case that fails
+- 3rd-party libraries being used and their versions
+- a use-case that fails
 
 Without said minimal reproduction, we won't be able to investigate all [issues](https://github.com/makeplane/plane/issues), and the issue might not be resolved.
 
@@ -19,10 +19,10 @@ You can open a new issue with this [issue form](https://github.com/makeplane/pla
 
 ### Requirements
 
--   Node.js version v16.18.0
--   Python version 3.8+
--   Postgres version v14
--   Redis version v6.2.7
+- Node.js version v16.18.0
+- Python version 3.8+
+- Postgres version v14
+- Redis version v6.2.7
 
 ### Setup the project
 
@@ -30,48 +30,6 @@ The project is a monorepo, with backend api and frontend in a single repo.
 
 The backend is a django project which is kept inside apiserver
 
-1. Clone the repo
-
-```bash
-git clone https://github.com/makeplane/plane
-cd plane
-chmod +x setup.sh
-```
-
-2. Run setup.sh
-
-```bash
-./setup.sh
-```
-
-3. Define `NEXT_PUBLIC_API_BASE_URL=http://localhost` in **web/.env** and **space/.env** file
-
-```bash
-echo "\nNEXT_PUBLIC_API_BASE_URL=http://localhost\n" >> ./web/.env
-```
-
-```bash
-echo "\nNEXT_PUBLIC_API_BASE_URL=http://localhost\n" >> ./space/.env
-```
-
-4. Run Docker compose up
-
-```bash
-docker compose up -d
-```
-
-5. Install dependencies
-
-```bash
-yarn install
-```
-
-6. Run the web app in development mode
-
-```bash
-yarn dev
-```
-
 ## Missing a Feature?
 
 If a feature is missing, you can directly _request_ a new one [here](https://github.com/makeplane/plane/issues/new?assignees=&labels=feature&template=feature_request.yml&title=%F0%9F%9A%80+Feature%3A+). You also can do the same by choosing "🚀 Feature" when raising a [New Issue](https://github.com/makeplane/plane/issues/new/choose) on our GitHub Repository.
@@ -81,8 +39,8 @@ If you would like to _implement_ it, an issue with your proposal must be submitt
 
 To ensure consistency throughout the source code, please keep these rules in mind as you are working:
 
--   All features or bug fixes must be tested by one or more specs (unit-tests).
--   We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
+- All features or bug fixes must be tested by one or more specs (unit-tests).
+- We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
 
 ## Need help? Questions and suggestions
 
@@ -90,11 +48,11 @@ Questions, suggestions, and thoughts are most welcome. We can also be reached in
 
 ## Ways to contribute
 
--   Try Plane Cloud and the self hosting platform and give feedback
--   Add new integrations
--   Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose)
--   Share your thoughts and suggestions with us
--   Help create tutorials and blog posts
--   Request a feature by submitting a proposal
--   Report a bug
--   **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.
+- Try Plane Cloud and the self hosting platform and give feedback
+- Add new integrations
+- Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose)
+- Share your thoughts and suggestions with us
+- Help create tutorials and blog posts
+- Request a feature by submitting a proposal
+- Report a bug
+- **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.

apiserver/plane/api/permissions/workspace.py

@@ -58,17 +58,8 @@ class WorkspaceEntityPermission(BasePermission):
         if request.user.is_anonymous:
             return False
 
-        ## Safe Methods -> Handle the filtering logic in queryset
-        if request.method in SAFE_METHODS:
-            return WorkspaceMember.objects.filter(
-                workspace__slug=view.workspace_slug,
-                member=request.user,
-            ).exists()
-
         return WorkspaceMember.objects.filter(
-            member=request.user,
-            workspace__slug=view.workspace_slug,
-            role__in=[Owner, Admin],
+            member=request.user, workspace__slug=view.workspace_slug
         ).exists()
 
 

apiserver/plane/api/serializers/cycle.py

@@ -34,6 +34,7 @@ class CycleSerializer(BaseSerializer):
     unstarted_issues = serializers.IntegerField(read_only=True)
     backlog_issues = serializers.IntegerField(read_only=True)
     assignees = serializers.SerializerMethodField(read_only=True)
+    labels = serializers.SerializerMethodField(read_only=True)
     total_estimates = serializers.IntegerField(read_only=True)
     completed_estimates = serializers.IntegerField(read_only=True)
     started_estimates = serializers.IntegerField(read_only=True)
@@ -49,10 +50,11 @@ class CycleSerializer(BaseSerializer):
         members = [
             {
                 "avatar": assignee.avatar,
+                "first_name": assignee.first_name,
                 "display_name": assignee.display_name,
                 "id": assignee.id,
             }
-            for issue_cycle in obj.issue_cycle.prefetch_related("issue__assignees").all()
+            for issue_cycle in obj.issue_cycle.all()
             for assignee in issue_cycle.issue.assignees.all()
         ]
         # Use a set comprehension to return only the unique objects
@@ -62,6 +64,24 @@ class CycleSerializer(BaseSerializer):
         unique_list = [dict(item) for item in unique_objects]
 
         return unique_list
+    
+    def get_labels(self, obj):
+        labels = [
+            {
+                "name": label.name,
+                "color": label.color,
+                "id": label.id,
+            }
+            for issue_cycle in obj.issue_cycle.all()
+            for label in issue_cycle.issue.labels.all()
+        ]
+        # Use a set comprehension to return only the unique objects
+        unique_objects = {frozenset(item.items()) for item in labels}
+
+        # Convert the set back to a list of dictionaries
+        unique_list = [dict(item) for item in unique_objects]
+
+        return unique_list
 
     class Meta:
         model = Cycle

apiserver/plane/api/views/cycle.py

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

apiserver/plane/api/views/importer.py

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

apiserver/plane/api/views/inbox.py

@@ -173,12 +173,12 @@ class InboxIssueViewSet(BaseViewSet):
                 )
 
             # Check for valid priority
-            if not request.data.get("issue", {}).get("priority", "none") in [
+            if not request.data.get("issue", {}).get("priority", None) in [
                 "low",
                 "medium",
                 "high",
                 "urgent",
-                "none",
+                None,
             ]:
                 return Response(
                     {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
@@ -213,7 +213,7 @@ class InboxIssueViewSet(BaseViewSet):
                 issue_id=str(issue.id),
                 project_id=str(project_id),
                 current_instance=None,
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
             # create an inbox issue
             InboxIssue.objects.create(
@@ -278,7 +278,7 @@ class InboxIssueViewSet(BaseViewSet):
                                 IssueSerializer(current_instance).data,
                                 cls=DjangoJSONEncoder,
                             ),
-                            epoch=int(timezone.now().timestamp())
+                            epoch = int(timezone.now().timestamp())
                         )
                     issue_serializer.save()
                 else:
@@ -370,11 +370,6 @@ class InboxIssueViewSet(BaseViewSet):
             if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(request.user.id):
                 return Response({"error": "You cannot delete inbox issue"}, status=status.HTTP_400_BAD_REQUEST)
 
-            # Check the issue status
-            if inbox_issue.status in [-2, -1, 0, 2]:
-                # Delete the issue also
-                Issue.objects.filter(workspace__slug=slug, project_id=project_id, pk=inbox_issue.issue_id).delete() 
-
             inbox_issue.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
         except InboxIssue.DoesNotExist:
@@ -485,12 +480,12 @@ class InboxIssuePublicViewSet(BaseViewSet):
                 )
 
             # Check for valid priority
-            if not request.data.get("issue", {}).get("priority", "none") in [
+            if not request.data.get("issue", {}).get("priority", None) in [
                 "low",
                 "medium",
                 "high",
                 "urgent",
-                "none",
+                None,
             ]:
                 return Response(
                     {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
@@ -525,7 +520,7 @@ class InboxIssuePublicViewSet(BaseViewSet):
                 issue_id=str(issue.id),
                 project_id=str(project_id),
                 current_instance=None,
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
             # create an inbox issue
             InboxIssue.objects.create(
@@ -590,7 +585,7 @@ class InboxIssuePublicViewSet(BaseViewSet):
                             IssueSerializer(current_instance).data,
                             cls=DjangoJSONEncoder,
                         ),
-                        epoch=int(timezone.now().timestamp())
+                        epoch = int(timezone.now().timestamp())
                     )
                 issue_serializer.save()
                 return Response(issue_serializer.data, status=status.HTTP_200_OK)

apiserver/plane/api/views/issue.py

@@ -24,6 +24,7 @@ from django.core.serializers.json import DjangoJSONEncoder
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
 from django.db import IntegrityError
+from django.conf import settings
 from django.db import IntegrityError
 
 # Third Party imports
@@ -57,6 +58,7 @@ from plane.api.serializers import (
     IssuePublicSerializer,
 )
 from plane.api.permissions import (
+    WorkspaceEntityPermission,
     ProjectEntityPermission,
     WorkSpaceAdminPermission,
     ProjectMemberPermission,
@@ -128,7 +130,7 @@ class IssueViewSet(BaseViewSet):
                 current_instance=json.dumps(
                     IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch  = int(timezone.now().timestamp())
             )
 
         return super().perform_update(serializer)
@@ -149,7 +151,7 @@ class IssueViewSet(BaseViewSet):
                 current_instance=json.dumps(
                     IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
         return super().perform_destroy(instance)
 
@@ -316,7 +318,7 @@ class IssueViewSet(BaseViewSet):
                     issue_id=str(serializer.data.get("id", None)),
                     project_id=str(project_id),
                     current_instance=None,
-                    epoch=int(timezone.now().timestamp())
+                    epoch = int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -575,7 +577,7 @@ class IssueCommentViewSet(BaseViewSet):
             issue_id=str(self.kwargs.get("issue_id")),
             project_id=str(self.kwargs.get("project_id")),
             current_instance=None,
-            epoch=int(timezone.now().timestamp())
+            epoch = int(timezone.now().timestamp())
         )
 
     def perform_update(self, serializer):
@@ -594,7 +596,7 @@ class IssueCommentViewSet(BaseViewSet):
                     IssueCommentSerializer(current_instance).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
 
         return super().perform_update(serializer)
@@ -616,7 +618,7 @@ class IssueCommentViewSet(BaseViewSet):
                     IssueCommentSerializer(current_instance).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
         return super().perform_destroy(instance)
 
@@ -712,18 +714,10 @@ class LabelViewSet(BaseViewSet):
         ProjectMemberPermission,
     ]
 
-    def create(self, request, slug, project_id):
-        try:
-            serializer = LabelSerializer(data=request.data)
-            if serializer.is_valid():
-                serializer.save(project_id=project_id)
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except IntegrityError:
-            return Response({"error": "Label with the same name already exists in the project"}, status=status.HTTP_400_BAD_REQUEST)
-        except Exception as e:
-            capture_exception(e)
-            return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_400_BAD_REQUEST)
+    def perform_create(self, serializer):
+        serializer.save(
+            project_id=self.kwargs.get("project_id"),
+        )
 
     def get_queryset(self):
         return self.filter_queryset(
@@ -908,7 +902,7 @@ class IssueLinkViewSet(BaseViewSet):
             issue_id=str(self.kwargs.get("issue_id")),
             project_id=str(self.kwargs.get("project_id")),
             current_instance=None,
-            epoch=int(timezone.now().timestamp())
+            epoch = int(timezone.now().timestamp())
         )
 
     def perform_update(self, serializer):
@@ -927,7 +921,7 @@ class IssueLinkViewSet(BaseViewSet):
                     IssueLinkSerializer(current_instance).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
 
         return super().perform_update(serializer)
@@ -949,7 +943,7 @@ class IssueLinkViewSet(BaseViewSet):
                     IssueLinkSerializer(current_instance).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
         return super().perform_destroy(instance)
 
@@ -1028,7 +1022,7 @@ class IssueAttachmentEndpoint(BaseAPIView):
                         serializer.data,
                         cls=DjangoJSONEncoder,
                     ),
-                    epoch=int(timezone.now().timestamp())
+                    epoch = int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -1051,7 +1045,7 @@ class IssueAttachmentEndpoint(BaseAPIView):
                 issue_id=str(self.kwargs.get("issue_id", None)),
                 project_id=str(self.kwargs.get("project_id", None)),
                 current_instance=None,
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
 
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -1254,7 +1248,7 @@ class IssueArchiveViewSet(BaseViewSet):
                 issue_id=str(issue.id),
                 project_id=str(project_id),
                 current_instance=None,
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
 
             return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
@@ -1459,7 +1453,7 @@ class IssueReactionViewSet(BaseViewSet):
             issue_id=str(self.kwargs.get("issue_id", None)),
             project_id=str(self.kwargs.get("project_id", None)),
             current_instance=None,
-            epoch=int(timezone.now().timestamp())
+            epoch = int(timezone.now().timestamp())
         )
 
     def destroy(self, request, slug, project_id, issue_id, reaction_code):
@@ -1483,7 +1477,7 @@ class IssueReactionViewSet(BaseViewSet):
                         "identifier": str(issue_reaction.id),
                     }
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
             issue_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -1532,7 +1526,7 @@ class CommentReactionViewSet(BaseViewSet):
             issue_id=None,
             project_id=str(self.kwargs.get("project_id", None)),
             current_instance=None,
-            epoch=int(timezone.now().timestamp())
+            epoch = int(timezone.now().timestamp())
         )
 
     def destroy(self, request, slug, project_id, comment_id, reaction_code):
@@ -1557,7 +1551,7 @@ class CommentReactionViewSet(BaseViewSet):
                         "comment_id": str(comment_id),
                     }
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
             comment_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -1654,7 +1648,7 @@ class IssueCommentPublicViewSet(BaseViewSet):
                     issue_id=str(issue_id),
                     project_id=str(project_id),
                     current_instance=None,
-                    epoch=int(timezone.now().timestamp())
+                    epoch = int(timezone.now().timestamp())
                 )
                 if not ProjectMember.objects.filter(
                     project_id=project_id,
@@ -1704,7 +1698,7 @@ class IssueCommentPublicViewSet(BaseViewSet):
                         IssueCommentSerializer(comment).data,
                         cls=DjangoJSONEncoder,
                     ),
-                    epoch=int(timezone.now().timestamp())
+                    epoch = int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_200_OK)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -1738,7 +1732,7 @@ class IssueCommentPublicViewSet(BaseViewSet):
                     IssueCommentSerializer(comment).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
             comment.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -1813,7 +1807,7 @@ class IssueReactionPublicViewSet(BaseViewSet):
                     issue_id=str(self.kwargs.get("issue_id", None)),
                     project_id=str(self.kwargs.get("project_id", None)),
                     current_instance=None,
-                    epoch=int(timezone.now().timestamp())
+                    epoch = int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -1858,7 +1852,7 @@ class IssueReactionPublicViewSet(BaseViewSet):
                         "identifier": str(issue_reaction.id),
                     }
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
             issue_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -1932,7 +1926,7 @@ class CommentReactionPublicViewSet(BaseViewSet):
                     issue_id=None,
                     project_id=str(self.kwargs.get("project_id", None)),
                     current_instance=None,
-                    epoch=int(timezone.now().timestamp())
+                    epoch = int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -1984,7 +1978,7 @@ class CommentReactionPublicViewSet(BaseViewSet):
                         "comment_id": str(comment_id),
                     }
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
             comment_reaction.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -2048,7 +2042,7 @@ class IssueVotePublicViewSet(BaseViewSet):
                 issue_id=str(self.kwargs.get("issue_id", None)),
                 project_id=str(self.kwargs.get("project_id", None)),
                 current_instance=None,
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
             serializer = IssueVoteSerializer(issue_vote)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
@@ -2083,7 +2077,7 @@ class IssueVotePublicViewSet(BaseViewSet):
                         "identifier": str(issue_vote.id),
                     }
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
             issue_vote.delete()
             return Response(status=status.HTTP_204_NO_CONTENT)
@@ -2117,7 +2111,7 @@ class IssueRelationViewSet(BaseViewSet):
                     IssueRelationSerializer(current_instance).data,
                     cls=DjangoJSONEncoder,
                 ),
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
         return super().perform_destroy(instance)
 
@@ -2151,7 +2145,7 @@ class IssueRelationViewSet(BaseViewSet):
                 issue_id=str(issue_id),
                 project_id=str(project_id),
                 current_instance=None,
-                epoch=int(timezone.now().timestamp())
+                epoch = int(timezone.now().timestamp())
             )
             
             if relation == "blocking":
@@ -2406,6 +2400,27 @@ class IssueDraftViewSet(BaseViewSet):
     ]
     serializer_class = IssueFlatSerializer
     model = Issue
+
+
+    def perform_update(self, serializer):
+        requested_data = json.dumps(self.request.data, cls=DjangoJSONEncoder)
+        current_instance = (
+            self.get_queryset().filter(pk=self.kwargs.get("pk", None)).first()
+        )
+        if current_instance is not None:
+            issue_activity.delay(
+                type="issue_draft.activity.updated",
+                requested_data=requested_data,
+                actor_id=str(self.request.user.id),
+                issue_id=str(self.kwargs.get("pk", None)),
+                project_id=str(self.kwargs.get("project_id", None)),
+                current_instance=json.dumps(
+                    IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
+                ),
+                epoch  = int(timezone.now().timestamp())
+            )
+
+        return super().perform_update(serializer)
     
 
     def perform_destroy(self, instance):
@@ -2424,7 +2439,6 @@ class IssueDraftViewSet(BaseViewSet):
                 current_instance=json.dumps(
                     IssueSerializer(current_instance).data, cls=DjangoJSONEncoder
                 ),
-                epoch=int(timezone.now().timestamp())
             )
         return super().perform_destroy(instance)
 
@@ -2588,7 +2602,7 @@ class IssueDraftViewSet(BaseViewSet):
                     issue_id=str(serializer.data.get("id", None)),
                     project_id=str(project_id),
                     current_instance=None,
-                    epoch=int(timezone.now().timestamp())
+                    epoch = int(timezone.now().timestamp())
                 )
                 return Response(serializer.data, status=status.HTTP_201_CREATED)
             return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -2599,47 +2613,6 @@ class IssueDraftViewSet(BaseViewSet):
             )
 
 
-    def partial_update(self, request, slug, project_id, pk):
-        try:
-            issue = Issue.objects.get(
-                workspace__slug=slug, project_id=project_id, pk=pk
-            )
-            serializer = IssueSerializer(
-                issue, data=request.data, partial=True
-            )
-
-            if serializer.is_valid():
-                if(request.data.get("is_draft") is not None and not request.data.get("is_draft")):
-                    serializer.save(created_at=timezone.now(), updated_at=timezone.now())
-                else:
-                    serializer.save()
-                issue_activity.delay(
-                    type="issue_draft.activity.updated",
-                    requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(self.request.user.id),
-                    issue_id=str(self.kwargs.get("pk", None)),
-                    project_id=str(self.kwargs.get("project_id", None)),
-                    current_instance=json.dumps(
-                        IssueSerializer(issue).data,
-                        cls=DjangoJSONEncoder,
-                    ),
-                    epoch=int(timezone.now().timestamp())
-                )
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        except Issue.DoesNotExist:
-            return Response(
-                {"error": "Issue does not exists"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-
     def retrieve(self, request, slug, project_id, pk=None):
         try:
             issue = Issue.objects.get(

apiserver/plane/api/views/module.py

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

apiserver/plane/api/views/project.py

@@ -1094,7 +1094,7 @@ class ProjectMemberEndpoint(BaseAPIView):
                 project_id=project_id,
                 workspace__slug=slug,
                 member__is_bot=False,
-            ).select_related("project", "member", "workspace")
+            ).select_related("project", "member")
             serializer = ProjectMemberSerializer(project_members, many=True)
             return Response(serializer.data, status=status.HTTP_200_OK)
         except Exception as e:

apiserver/plane/api/views/view.py

@@ -61,7 +61,7 @@ class GlobalViewViewSet(BaseViewSet):
             .get_queryset()
             .filter(workspace__slug=self.kwargs.get("slug"))
             .select_related("workspace")
-            .order_by(self.request.GET.get("order_by", "-created_at"))
+            .order_by("-created_at")
             .distinct()
         )
 

apiserver/plane/api/views/workspace.py

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

apiserver/plane/bgtasks/exporter_expired_task.py

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

apiserver/plane/bgtasks/issue_activites_task.py

@@ -121,20 +121,36 @@ def track_priority(
     epoch
 ):
     if current_instance.get("priority") != requested_data.get("priority"):
-        issue_activities.append(
-            IssueActivity(
-                issue_id=issue_id,
-                actor=actor,
-                verb="updated",
-                old_value=current_instance.get("priority"),
-                new_value=requested_data.get("priority"),
-                field="priority",
-                project=project,
-                workspace=project.workspace,
-                comment=f"updated the priority to {requested_data.get('priority')}",
-                epoch=epoch,
+        if requested_data.get("priority") == None:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="updated",
+                    old_value=current_instance.get("priority"),
+                    new_value=None,
+                    field="priority",
+                    project=project,
+                    workspace=project.workspace,
+                    comment=f"updated the priority to None",
+                    epoch=epoch,
+                )
+            )
+        else:
+            issue_activities.append(
+                IssueActivity(
+                    issue_id=issue_id,
+                    actor=actor,
+                    verb="updated",
+                    old_value=current_instance.get("priority"),
+                    new_value=requested_data.get("priority"),
+                    field="priority",
+                    project=project,
+                    workspace=project.workspace,
+                    comment=f"updated the priority to {requested_data.get('priority')}",
+                    epoch=epoch,
+                )
             )
-        )
 
 
 # Track chnages in state of the issue
@@ -1389,7 +1405,7 @@ def issue_activity(
             ):
                 issue_subscribers = issue_subscribers + [issue.created_by_id]
 
-            for subscriber in  list(set(issue_subscribers)):
+            for subscriber in issue_subscribers:
                 for issue_activity in issue_activities_created:
                     bulk_notifications.append(
                         Notification(

apiserver/plane/bgtasks/issue_automation_task.py

@@ -58,31 +58,28 @@ def archive_old_issues():
 
             # Check if Issues
             if issues:
-                # Set the archive time to current time
-                archive_at = timezone.now()
-
                 issues_to_update = []
                 for issue in issues:
-                    issue.archived_at = archive_at
+                    issue.archived_at = timezone.now()
                     issues_to_update.append(issue)
 
                 # Bulk Update the issues and log the activity
                 if issues_to_update: 
-                    Issue.objects.bulk_update(
+                    updated_issues = Issue.objects.bulk_update(
                         issues_to_update, ["archived_at"], batch_size=100
                     )
                     [
                         issue_activity.delay(
                             type="issue.activity.updated",
-                            requested_data=json.dumps({"archived_at": str(archive_at)}),
+                            requested_data=json.dumps({"archived_at": str(issue.archived_at)}),
                             actor_id=str(project.created_by_id),
                             issue_id=issue.id,
                             project_id=project_id,
                             current_instance=None,
                             subscriber=False,
-                            epoch=int(timezone.now().timestamp())
+                            epoch = int(timezone.now().timestamp())
                         )
-                        for issue in issues_to_update
+                        for issue in updated_issues
                     ]
         return
     except Exception as e:
@@ -142,7 +139,7 @@ def close_old_issues():
 
                 # Bulk Update the issues and log the activity
                 if issues_to_update:
-                    Issue.objects.bulk_update(issues_to_update, ["state"], batch_size=100)
+                    updated_issues = Issue.objects.bulk_update(issues_to_update, ["state"], batch_size=100)
                     [
                         issue_activity.delay(
                             type="issue.activity.updated",
@@ -152,9 +149,9 @@ def close_old_issues():
                             project_id=project_id,
                             current_instance=None,
                             subscriber=False,
-                            epoch=int(timezone.now().timestamp())
+                            epoch = int(timezone.now().timestamp())
                         )
-                        for issue in issues_to_update
+                        for issue in updated_issues
                     ]
         return
     except Exception as e:

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

@@ -33,8 +33,9 @@ def create_issue_relation(apps, schema_editor):
 def update_issue_priority_choice(apps, schema_editor):
     IssueModel = apps.get_model("db", "Issue")
     updated_issues = []
-    for obj in IssueModel.objects.filter(priority=None):
-        obj.priority = "none"
+    for obj in IssueModel.objects.all():
+        if obj.priority is None:
+            obj.priority = "none"
         updated_issues.append(obj)
     IssueModel.objects.bulk_update(updated_issues, ["priority"], batch_size=100)
 

apiserver/plane/db/migrations/0044_auto_20230913_0709.py

@@ -26,19 +26,19 @@ def workspace_member_props(old_props):
             "calendar_date_range": old_props.get("calendarDateRange", ""),
         },
         "display_properties": {
-            "assignee": old_props.get("properties", {}).get("assignee", True),
-            "attachment_count": old_props.get("properties", {}).get("attachment_count", True),
-            "created_on": old_props.get("properties", {}).get("created_on", True),
-            "due_date": old_props.get("properties", {}).get("due_date", True),
-            "estimate": old_props.get("properties", {}).get("estimate", True),
-            "key": old_props.get("properties", {}).get("key", True),
-            "labels": old_props.get("properties", {}).get("labels", True),
-            "link": old_props.get("properties", {}).get("link", True),
-            "priority": old_props.get("properties", {}).get("priority", True),
-            "start_date": old_props.get("properties", {}).get("start_date", True),
-            "state": old_props.get("properties", {}).get("state", True),
-            "sub_issue_count": old_props.get("properties", {}).get("sub_issue_count", True),
-            "updated_on": old_props.get("properties", {}).get("updated_on", True),
+            "assignee": old_props.get("properties", {}).get("assignee",None),
+            "attachment_count": old_props.get("properties", {}).get("attachment_count", None),
+            "created_on": old_props.get("properties", {}).get("created_on", None),
+            "due_date": old_props.get("properties", {}).get("due_date", None),
+            "estimate": old_props.get("properties", {}).get("estimate", None),
+            "key": old_props.get("properties", {}).get("key", None),
+            "labels": old_props.get("properties", {}).get("labels", None),
+            "link": old_props.get("properties", {}).get("link", None),
+            "priority": old_props.get("properties", {}).get("priority", None),
+            "start_date": old_props.get("properties", {}).get("start_date", None),
+            "state": old_props.get("properties", {}).get("state", None),
+            "sub_issue_count": old_props.get("properties", {}).get("sub_issue_count", None),
+            "updated_on": old_props.get("properties", {}).get("updated_on", None),
         },
     }
     return new_props

apiserver/plane/db/migrations/0045_auto_20230915_0655.py

@@ -0,0 +1,24 @@
+# Generated by Django 4.2.3 on 2023-09-15 06:55
+
+from django.db import migrations
+
+
+def update_issue_activity(apps, schema_editor):
+    IssueActivityModel = apps.get_model("db", "IssueActivity")
+    updated_issue_activity = []
+    for obj in IssueActivityModel.objects.all():
+            if obj.field == "blocks":
+                obj.field = "blocked_by"
+                updated_issue_activity.append(obj)
+    IssueActivityModel.objects.bulk_update(updated_issue_activity, ["field"], batch_size=100)
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0044_auto_20230913_0709'),
+    ]
+
+    operations = [
+         migrations.RunPython(update_issue_activity),
+    ]

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

@@ -1,47 +1,28 @@
-# Generated by Django 4.2.5 on 2023-09-29 10:14
+# Generated by Django 4.2.3 on 2023-09-19 14:21
 
 from django.conf import settings
 from django.db import migrations, models
 import django.db.models.deletion
-import plane.db.models.workspace
 import uuid
 
 
-def update_issue_activity_priority(apps, schema_editor):
-    IssueActivity = apps.get_model("db", "IssueActivity")
+def update_epoch(apps, schema_editor):
+    IssueActivity = apps.get_model('db', 'IssueActivity')
     updated_issue_activity = []
-    for obj in IssueActivity.objects.filter(field="priority"):
-        # Set the old and new value to none if it is empty for Priority
-        obj.new_value = obj.new_value or "none"
-        obj.old_value = obj.old_value or "none"
+    for obj in IssueActivity.objects.all():
+        obj.epoch = int(obj.created_at.timestamp())
         updated_issue_activity.append(obj)
-    IssueActivity.objects.bulk_update(
-        updated_issue_activity,
-        ["new_value", "old_value"],
-        batch_size=2000,
-    )
+    IssueActivity.objects.bulk_update(updated_issue_activity, ["epoch"], batch_size=100)
 
-def update_issue_activity_blocked(apps, schema_editor):
-    IssueActivity = apps.get_model("db", "IssueActivity")
-    updated_issue_activity = []
-    for obj in IssueActivity.objects.filter(field="blocks"):
-        # Set the field to blocked_by
-        obj.field = "blocked_by"
-        updated_issue_activity.append(obj)
-    IssueActivity.objects.bulk_update(
-        updated_issue_activity,
-        ["field"],
-        batch_size=1000,
-    )
 
 class Migration(migrations.Migration):
 
     dependencies = [
-        ('db', '0044_auto_20230913_0709'),
+        ('db', '0045_auto_20230915_0655'),
     ]
 
     operations = [
-        migrations.CreateModel(
+    migrations.CreateModel(
             name='GlobalView',
             fields=[
                 ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
@@ -52,7 +33,6 @@ class Migration(migrations.Migration):
                 ('query', models.JSONField(verbose_name='View Query')),
                 ('access', models.PositiveSmallIntegerField(choices=[(0, 'Private'), (1, 'Public')], default=1)),
                 ('query_data', models.JSONField(default=dict)),
-                ('sort_order', models.FloatField(default=65535)),
                 ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
                 ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
                 ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='global_views', to='db.workspace')),
@@ -64,16 +44,10 @@ class Migration(migrations.Migration):
                 'ordering': ('-created_at',),
             },
         ),
-        migrations.AddField(
-            model_name='workspacemember',
-            name='issue_props',
-            field=models.JSONField(default=plane.db.models.workspace.get_issue_props),
-        ),
         migrations.AddField(
             model_name='issueactivity',
             name='epoch',
             field=models.FloatField(null=True),
         ),
-        migrations.RunPython(update_issue_activity_priority),
-        migrations.RunPython(update_issue_activity_blocked),
+        migrations.RunPython(update_epoch),
     ]

apiserver/plane/db/models/view.py

@@ -17,23 +17,12 @@ class GlobalView(BaseModel):
         default=1, choices=((0, "Private"), (1, "Public"))
     )
     query_data = models.JSONField(default=dict)
-    sort_order = models.FloatField(default=65535)
 
     class Meta:
         verbose_name = "Global View"
         verbose_name_plural = "Global Views"
         db_table = "global_views"
         ordering = ("-created_at",)
-    
-    def save(self, *args, **kwargs):
-        if self._state.adding:
-            largest_sort_order = GlobalView.objects.filter(
-                workspace=self.workspace
-            ).aggregate(largest=models.Max("sort_order"))["largest"]
-            if largest_sort_order is not None:
-                self.sort_order = largest_sort_order + 10000
-
-        super(GlobalView, self).save(*args, **kwargs)
 
     def __str__(self):
         """Return name of the View"""

apiserver/plane/db/models/workspace.py

@@ -29,7 +29,7 @@ def get_default_props():
         },
         "display_filters": {
             "group_by": None,
-            "order_by": "-created_at",
+            "order_by": '-created_at',
             "type": None,
             "sub_issue": True,
             "show_empty_groups": True,
@@ -54,15 +54,6 @@ def get_default_props():
     }
 
 
-def get_issue_props():
-    return {
-        "subscribed": True,
-        "assigned": True,
-        "created": True,
-        "all_issues": True,
-    }
-
-
 class Workspace(BaseModel):
     name = models.CharField(max_length=80, verbose_name="Workspace Name")
     logo = models.URLField(verbose_name="Logo", blank=True, null=True)
@@ -98,7 +89,6 @@ class WorkspaceMember(BaseModel):
     company_role = models.TextField(null=True, blank=True)
     view_props = models.JSONField(default=get_default_props)
     default_props = models.JSONField(default=get_default_props)
-    issue_props = models.JSONField(default=get_issue_props)
 
     class Meta:
         unique_together = ["workspace", "member"]

apiserver/plane/utils/analytics_plot.py

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

apiserver/plane/utils/issue_filters.py

@@ -40,6 +40,9 @@ def filter_priority(params, filter, method):
         priorities = params.get("priority").split(",")
         if len(priorities) and "" not in priorities:
             filter["priority__in"] = priorities
+    else:
+        if params.get("priority", None) and len(params.get("priority")):
+            filter["priority__in"] = params.get("priority")
     return filter
 
 
@@ -163,17 +166,17 @@ def filter_target_date(params, filter, method):
             for query in target_dates:
                 target_date_query = query.split(";")
                 if len(target_date_query) == 2 and "after" in target_date_query:
-                    filter["target_date__gte"] = target_date_query[0]
+                    filter["target_date__gt"] = target_date_query[0]
                 else:
-                    filter["target_date__lte"] = target_date_query[0]
+                    filter["target_date__lt"] = target_date_query[0]
     else:
         if params.get("target_date", None) and len(params.get("target_date")):
             for query in params.get("target_date"):
                 target_date_query = query.split(";")
                 if len(target_date_query) == 2 and "after" in target_date_query:
-                    filter["target_date__gte"] = target_date_query[0]
+                    filter["target_date__gt"] = target_date_query[0]
                 else:
-                    filter["target_date__lte"] = target_date_query[0]
+                    filter["target_date__lt"] = target_date_query[0]
 
     return filter
 

docker-compose-hub.yml

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

docker-compose.yml

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

nginx/nginx.conf.template

@@ -1,36 +1,29 @@
-events {
-}
+events { }
 
 http {
     sendfile on;
 
     server {
-        listen 80;
-        root /www/data/;
+        listen       80;
+        root   /www/data/;
         access_log /var/log/nginx/access.log;
 
         client_max_body_size ${FILE_SIZE_LIMIT};
 
-        add_header X-Content-Type-Options    "nosniff" always;
-        add_header Referrer-Policy           "no-referrer-when-downgrade" always;
-        add_header Permissions-Policy        "interest-cohort=()" always;
-        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
-
         location / {
-            proxy_pass http://web:3000/;
+            proxy_pass http://planefrontend:3000/;       
         }
 
         location /api/ {
-            proxy_pass http://api:8000/api/;
+            proxy_pass http://planebackend:8000/api/;
         }
 
         location /spaces/ {
-            rewrite ^/spaces/?$ /spaces/login break;
-            proxy_pass http://space:3000/spaces/;
+            proxy_pass http://planedeploy:3000/spaces/;
         }
 
         location /${BUCKET_NAME}/ {
             proxy_pass http://plane-minio:9000/uploads/;
         }
     }
-}
+}

packages/tsconfig/react-library.json

@@ -4,8 +4,9 @@
   "extends": "./base.json",
   "compilerOptions": {
     "jsx": "react",
-    "lib": ["ES2015"],
+    "lib": ["ES2015", "DOM"],
     "module": "ESNext",
-    "target": "es6"
+    "target": "es6",
+    "sourceMap": true
   }
 }

packages/ui/dist/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { FC } from 'react';
+
+declare const Button: () => JSX.Element;
+
+interface InputProps {
+    type: string;
+    id: string;
+    value: string;
+    name: string;
+    onChange: () => void;
+    className?: string;
+    mode?: "primary" | "transparent" | "true-transparent";
+    size?: "sm" | "md" | "lg";
+    hasError?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface TextAreaProps {
+    id: string;
+    name: string;
+    placeholder?: string;
+    value?: string;
+    rows?: number;
+    cols?: number;
+    disabled?: boolean;
+    onChange: () => void;
+    mode?: "primary" | "transparent";
+    hasError?: boolean;
+    className?: string;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface IRadialProgressBar {
+    progress: number;
+}
+declare const RadialProgressBar: FC<IRadialProgressBar>;
+
+export { Button, Input, InputProps, RadialProgressBar, TextArea, TextAreaProps };

packages/ui/dist/index.js

@@ -0,0 +1,157 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Button: () => Button,
+  Input: () => Input,
+  RadialProgressBar: () => RadialProgressBar,
+  TextArea: () => TextArea
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/buttons/index.tsx
+var React = __toESM(require("react"));
+var Button = () => {
+  return /* @__PURE__ */ React.createElement("button", null, "button");
+};
+
+// src/form-fields/input.tsx
+var React2 = __toESM(require("react"));
+var Input = React2.forwardRef((props, ref) => {
+  const {
+    id,
+    type,
+    value,
+    name,
+    onChange,
+    className = "",
+    mode = "primary",
+    size = "md",
+    hasError = false,
+    placeholder = "",
+    disabled = false
+  } = props;
+  return /* @__PURE__ */ React2.createElement("input", {
+    id,
+    ref,
+    type,
+    value,
+    name,
+    onChange,
+    placeholder,
+    disabled,
+    className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${size === "sm" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`
+  });
+});
+Input.displayName = "form-input-field";
+
+// src/form-fields/textarea.tsx
+var React3 = __toESM(require("react"));
+var useAutoSizeTextArea = (textAreaRef, value) => {
+  React3.useEffect(() => {
+    if (textAreaRef) {
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+var TextArea = React3.forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      name,
+      placeholder = "",
+      value = "",
+      rows = 1,
+      cols = 1,
+      disabled,
+      onChange,
+      mode = "primary",
+      hasError = false,
+      className = ""
+    } = props;
+    const textAreaRef = React3.useRef(ref);
+    ref && useAutoSizeTextArea(textAreaRef == null ? void 0 : textAreaRef.current, value);
+    return /* @__PURE__ */ React3.createElement("textarea", {
+      id,
+      name,
+      ref: textAreaRef,
+      placeholder,
+      value,
+      rows,
+      cols,
+      disabled,
+      onChange,
+      className: `no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}`
+    });
+  }
+);
+
+// src/progress/radial-progress.tsx
+var import_react = __toESM(require("react"));
+var RadialProgressBar = (props) => {
+  const { progress } = props;
+  const [circumference, setCircumference] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const radius = 40;
+    const circumference2 = 2 * Math.PI * radius;
+    setCircumference(circumference2);
+  }, []);
+  const progressOffset = (100 - progress) / 100 * circumference;
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "relative h-4 w-4"
+  }, /* @__PURE__ */ import_react.default.createElement("svg", {
+    className: "absolute top-0 left-0",
+    viewBox: "0 0 100 100"
+  }, /* @__PURE__ */ import_react.default.createElement("circle", {
+    className: "stroke-current opacity-10",
+    cx: "50",
+    cy: "50",
+    r: "40",
+    strokeWidth: "12",
+    fill: "none",
+    strokeDasharray: `${circumference} ${circumference}`
+  }), /* @__PURE__ */ import_react.default.createElement("circle", {
+    className: `stroke-current`,
+    cx: "50",
+    cy: "50",
+    r: "40",
+    strokeWidth: "12",
+    fill: "none",
+    strokeDasharray: `${circumference} ${circumference}`,
+    strokeDashoffset: progressOffset,
+    transform: "rotate(-90 50 50)"
+  })));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Input,
+  RadialProgressBar,
+  TextArea
+});

packages/ui/dist/index.mjs

@@ -0,0 +1,121 @@
+// src/buttons/index.tsx
+import * as React from "react";
+var Button = () => {
+  return /* @__PURE__ */ React.createElement("button", null, "button");
+};
+
+// src/form-fields/input.tsx
+import * as React2 from "react";
+var Input = React2.forwardRef((props, ref) => {
+  const {
+    id,
+    type,
+    value,
+    name,
+    onChange,
+    className = "",
+    mode = "primary",
+    size = "md",
+    hasError = false,
+    placeholder = "",
+    disabled = false
+  } = props;
+  return /* @__PURE__ */ React2.createElement("input", {
+    id,
+    ref,
+    type,
+    value,
+    name,
+    onChange,
+    placeholder,
+    disabled,
+    className: `block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary" : mode === "true-transparent" ? "rounded border-none bg-transparent ring-0" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-500/20" : ""} ${size === "sm" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`
+  });
+});
+Input.displayName = "form-input-field";
+
+// src/form-fields/textarea.tsx
+import * as React3 from "react";
+var useAutoSizeTextArea = (textAreaRef, value) => {
+  React3.useEffect(() => {
+    if (textAreaRef) {
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+var TextArea = React3.forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      name,
+      placeholder = "",
+      value = "",
+      rows = 1,
+      cols = 1,
+      disabled,
+      onChange,
+      mode = "primary",
+      hasError = false,
+      className = ""
+    } = props;
+    const textAreaRef = React3.useRef(ref);
+    ref && useAutoSizeTextArea(textAreaRef == null ? void 0 : textAreaRef.current, value);
+    return /* @__PURE__ */ React3.createElement("textarea", {
+      id,
+      name,
+      ref: textAreaRef,
+      placeholder,
+      value,
+      rows,
+      cols,
+      disabled,
+      onChange,
+      className: `no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${mode === "primary" ? "rounded-md border border-custom-border-200" : mode === "transparent" ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme" : ""} ${hasError ? "border-red-500" : ""} ${hasError && mode === "primary" ? "bg-red-100" : ""} ${className}`
+    });
+  }
+);
+
+// src/progress/radial-progress.tsx
+import React4, { useState, useEffect as useEffect2 } from "react";
+var RadialProgressBar = (props) => {
+  const { progress } = props;
+  const [circumference, setCircumference] = useState(0);
+  useEffect2(() => {
+    const radius = 40;
+    const circumference2 = 2 * Math.PI * radius;
+    setCircumference(circumference2);
+  }, []);
+  const progressOffset = (100 - progress) / 100 * circumference;
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: "relative h-4 w-4"
+  }, /* @__PURE__ */ React4.createElement("svg", {
+    className: "absolute top-0 left-0",
+    viewBox: "0 0 100 100"
+  }, /* @__PURE__ */ React4.createElement("circle", {
+    className: "stroke-current opacity-10",
+    cx: "50",
+    cy: "50",
+    r: "40",
+    strokeWidth: "12",
+    fill: "none",
+    strokeDasharray: `${circumference} ${circumference}`
+  }), /* @__PURE__ */ React4.createElement("circle", {
+    className: `stroke-current`,
+    cx: "50",
+    cy: "50",
+    r: "40",
+    strokeWidth: "12",
+    fill: "none",
+    strokeDasharray: `${circumference} ${circumference}`,
+    strokeDashoffset: progressOffset,
+    transform: "rotate(-90 50 50)"
+  })));
+};
+export {
+  Button,
+  Input,
+  RadialProgressBar,
+  TextArea
+};

packages/ui/index.tsx

@@ -1,17 +0,0 @@
-// import * as React from "react";
-// components
-// export * from "./breadcrumbs";
-// export * from "./button";
-// export * from "./custom-listbox";
-// export * from "./custom-menu";
-// export * from "./custom-select";
-// export * from "./empty-space";
-// export * from "./header-button";
-// export * from "./input";
-// export * from "./loader";
-// export * from "./outline-button";
-// export * from "./select";
-// export * from "./spinner";
-// export * from "./text-area";
-// export * from "./tooltip";
-export * from "./button";

packages/ui/package.json

@@ -1,23 +1,33 @@
 {
-  "name": "ui",
-  "version": "0.0.0",
-  "main": "./index.tsx",
-  "types": "./index.tsx",
+  "name": "@plane/ui",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
   "scripts": {
-    "lint": "eslint *.ts*"
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "lint": "eslint src/",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@types/node": "^20.5.2",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "classnames": "^2.3.2",
-    "eslint": "^7.32.0",
     "eslint-config-custom": "*",
-    "next": "12.3.2",
     "react": "^18.2.0",
     "tsconfig": "*",
     "tailwind-config-custom": "*",
+    "tsup": "^5.10.1",
     "typescript": "4.7.4"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

packages/ui/src/buttons/index.tsx

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 export const Button = () => {
   return <button>button</button>;
 };

packages/ui/src/form-fields/index.tsx

@@ -0,0 +1,2 @@
+export * from "./input";
+export * from "./textarea";

packages/ui/src/form-fields/input.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+
+export interface InputProps {
+  type: string;
+  id: string;
+  value: string;
+  name: string;
+  onChange: () => void;
+  className?: string;
+  mode?: "primary" | "transparent" | "true-transparent";
+  size?: "sm" | "md" | "lg";
+  hasError?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const {
+    id,
+    type,
+    value,
+    name,
+    onChange,
+    className = "",
+    mode = "primary",
+    size = "md",
+    hasError = false,
+    placeholder = "",
+    disabled = false,
+  } = props;
+
+  return (
+    <input
+      id={id}
+      ref={ref}
+      type={type}
+      value={value}
+      name={name}
+      onChange={onChange}
+      placeholder={placeholder}
+      disabled={disabled}
+      className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
+        mode === "primary"
+          ? "rounded-md border border-custom-border-200"
+          : mode === "transparent"
+          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
+          : mode === "true-transparent"
+          ? "rounded border-none bg-transparent ring-0"
+          : ""
+      } ${hasError ? "border-red-500" : ""} ${
+        hasError && mode === "primary" ? "bg-red-500/20" : ""
+      } ${
+        size === "sm" ? "px-3 py-2" : size === "lg" ? "p-3" : ""
+      } ${className}`}
+    />
+  );
+});
+
+Input.displayName = "form-input-field";
+
+export { Input };

packages/ui/src/form-fields/textarea.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+
+export interface TextAreaProps {
+  id: string;
+  name: string;
+  placeholder?: string;
+  value?: string;
+  rows?: number;
+  cols?: number;
+  disabled?: boolean;
+  onChange: () => void;
+  mode?: "primary" | "transparent";
+  hasError?: boolean;
+  className?: string;
+}
+
+// Updates the height of a <textarea> when the value changes.
+const useAutoSizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: any
+) => {
+  React.useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (props, ref) => {
+    const {
+      id,
+      name,
+      placeholder = "",
+      value = "",
+      rows = 1,
+      cols = 1,
+      disabled,
+      onChange,
+      mode = "primary",
+      hasError = false,
+      className = "",
+    } = props;
+
+    const textAreaRef = React.useRef<any>(ref);
+
+    ref && useAutoSizeTextArea(textAreaRef?.current, value);
+
+    return (
+      <textarea
+        id={id}
+        name={name}
+        ref={textAreaRef}
+        placeholder={placeholder}
+        value={value}
+        rows={rows}
+        cols={cols}
+        disabled={disabled}
+        onChange={onChange}
+        className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${
+          mode === "primary"
+            ? "rounded-md border border-custom-border-200"
+            : mode === "transparent"
+            ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
+            : ""
+        } ${hasError ? "border-red-500" : ""} ${
+          hasError && mode === "primary" ? "bg-red-100" : ""
+        } ${className}`}
+      />
+    );
+  }
+);
+
+export { TextArea };

packages/ui/src/index.tsx

@@ -0,0 +1,3 @@
+export * from "./buttons";
+export * from "./form-fields";
+export * from "./progress";

packages/ui/src/progress/index.tsx

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

packages/ui/src/progress/radial-progress.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect, FC } from "react";
+
+interface IRadialProgressBar {
+  progress: number;
+}
+
+export const RadialProgressBar: FC<IRadialProgressBar> = (props) => {
+  const { progress } = props;
+  const [circumference, setCircumference] = useState(0);
+
+  useEffect(() => {
+    const radius = 40;
+    const circumference = 2 * Math.PI * radius;
+    setCircumference(circumference);
+  }, []);
+
+  const progressOffset = ((100 - progress) / 100) * circumference;
+
+  return (
+    <div className="relative h-4 w-4">
+      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
+        <circle
+          className={"stroke-current opacity-10"}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+        />
+        <circle
+          className={`stroke-current`}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={progressOffset}
+          transform="rotate(-90 50 50)"
+        />
+      </svg>
+    </div>
+  );
+};

packages/ui/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "extends": "tsconfig/react-library.json",
+  "compilerOptions": {
+    "jsx": "react"
+  },
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"]
 }

space/.env.example

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

space/components/accounts/sign-in.tsx

@@ -33,7 +33,7 @@ export const SignInView = observer(() => {
   const onSignInSuccess = (response: any) => {
     const isOnboarded = response?.user?.onboarding_step?.profile_complete || false;
 
-    const nextPath = router.asPath.includes("next_path") ? router.asPath.split("/?next_path=")[1] : "/login";
+    const nextPath = router.asPath.includes("next_path") ? router.asPath.split("/?next_path=")[1] : "/";
 
     userStore.setCurrentUser(response?.user);
 
@@ -41,7 +41,7 @@ export const SignInView = observer(() => {
       router.push(`/onboarding?next_path=${nextPath}`);
       return;
     }
-    router.push((nextPath ?? "/login").toString());
+    router.push((nextPath ?? "/").toString());
   };
 
   const handleGoogleSignIn = async ({ clientId, credential }: any) => {

space/components/views/home.tsx

@@ -4,7 +4,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { SignInView, UserLoggedIn } from "components/accounts";
 
-export const LoginView = observer(() => {
+export const HomeView = observer(() => {
   const { user: userStore } = useMobxStore();
 
   if (!userStore.currentUser) return <SignInView />;

space/components/views/index.ts

@@ -1 +1 @@
-export * from "./login";
+export * from "./home";

space/pages/index.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+// components
+import { HomeView } from "components/views";
+
+const HomePage = () => <HomeView />;
+
+export default HomePage;

space/pages/login/index.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-
-// components
-import { LoginView } from "components/views";
-
-const LoginPage = () => <LoginView />;
-
-export default LoginPage;

web/.env.example

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

web/.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 100,
+  "printWidth": 120,
   "tabWidth": 2,
   "trailingComma": "es5"
 }

web/components/analytics/custom-analytics/sidebar.tsx

@@ -7,19 +7,14 @@ import analyticsService from "services/analytics.service";
 import projectService from "services/project.service";
 import cyclesService from "services/cycles.service";
 import modulesService from "services/modules.service";
-import trackEventServices from "services/track-event.service";
+import trackEventServices from "services/track_event.service";
 // hooks
 import useProjects from "hooks/use-projects";
 import useToast from "hooks/use-toast";
 // ui
 import { PrimaryButton, SecondaryButton } from "components/ui";
 // icons
-import {
-  ArrowDownTrayIcon,
-  ArrowPathIcon,
-  CalendarDaysIcon,
-  UserGroupIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowDownTrayIcon, ArrowPathIcon, CalendarDaysIcon, UserGroupIcon } from "@heroicons/react/24/outline";
 import { ContrastIcon, LayerDiagonalIcon } from "components/icons";
 // helpers
 import { renderShortDate } from "helpers/date-time.helper";
@@ -46,13 +41,7 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
-export const AnalyticsSidebar: React.FC<Props> = ({
-  analytics,
-  params,
-  fullScreen,
-  isProjectLevel = false,
-  user,
-}) => {
+export const AnalyticsSidebar: React.FC<Props> = ({ analytics, params, fullScreen, isProjectLevel = false, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
@@ -61,9 +50,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
   const { setToastAlert } = useToast();
 
   const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId && !(cycleId || moduleId)
-      ? PROJECT_DETAILS(projectId.toString())
-      : null,
+    workspaceSlug && projectId && !(cycleId || moduleId) ? PROJECT_DETAILS(projectId.toString()) : null,
     workspaceSlug && projectId && !(cycleId || moduleId)
       ? () => projectService.getProject(workspaceSlug.toString(), projectId.toString())
       : null
@@ -72,24 +59,14 @@ export const AnalyticsSidebar: React.FC<Props> = ({
   const { data: cycleDetails } = useSWR(
     workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
     workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString()
-          )
+      ? () => cyclesService.getCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString())
       : null
   );
 
   const { data: moduleDetails } = useSWR(
     workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null,
     workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString()
-          )
+      ? () => modulesService.getModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString())
       : null
   );
 
@@ -178,8 +155,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
       );
   };
 
-  const selectedProjects =
-    params.project && params.project.length > 0 ? params.project : projects?.map((p) => p.id);
+  const selectedProjects = params.project && params.project.length > 0 ? params.project : projects?.map((p) => p.id);
 
   return (
     <div
@@ -236,9 +212,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                             )}
                             <h5 className="flex items-center gap-1">
                               <p className="break-words">{truncateText(project.name, 20)}</p>
-                              <span className="text-custom-text-200 text-xs ml-1">
-                                ({project.identifier})
-                              </span>
+                              <span className="text-custom-text-200 text-xs ml-1">({project.identifier})</span>
                             </h5>
                           </div>
                           <div className="mt-4 space-y-3 pl-2 w-full">
@@ -344,10 +318,7 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center gap-2 text-xs">
                       <h6 className="text-custom-text-200">Network</h6>
-                      <span>
-                        {NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ??
-                          ""}
-                      </span>
+                      <span>{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}</span>
                     </div>
                   </div>
                 </div>

web/components/analytics/project-modal.tsx

@@ -13,15 +13,11 @@ import analyticsService from "services/analytics.service";
 import projectService from "services/project.service";
 import cyclesService from "services/cycles.service";
 import modulesService from "services/modules.service";
-import trackEventServices from "services/track-event.service";
+import trackEventServices from "services/track_event.service";
 // components
 import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
 // icons
-import {
-  ArrowsPointingInIcon,
-  ArrowsPointingOutIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import { IAnalyticsParams, IWorkspace } from "types";
 // fetch-keys
@@ -67,9 +63,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
   );
 
   const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId && !(cycleId || moduleId)
-      ? PROJECT_DETAILS(projectId.toString())
-      : null,
+    workspaceSlug && projectId && !(cycleId || moduleId) ? PROJECT_DETAILS(projectId.toString()) : null,
     workspaceSlug && projectId && !(cycleId || moduleId)
       ? () => projectService.getProject(workspaceSlug.toString(), projectId.toString())
       : null
@@ -78,24 +72,14 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
   const { data: cycleDetails } = useSWR(
     workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
     workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString()
-          )
+      ? () => cyclesService.getCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString())
       : null
   );
 
   const { data: moduleDetails } = useSWR(
     workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null,
     workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString()
-          )
+      ? () => modulesService.getModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString())
       : null
   );
 
@@ -134,8 +118,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
       eventPayload.moduleName = moduleDetails.name;
     }
 
-    const eventType =
-      tab === "Scope and Demand" ? "SCOPE_AND_DEMAND_ANALYTICS" : "CUSTOM_ANALYTICS";
+    const eventType = tab === "Scope and Demand" ? "SCOPE_AND_DEMAND_ANALYTICS" : "CUSTOM_ANALYTICS";
 
     trackEventServices.trackAnalyticsEvent(
       eventPayload,
@@ -150,9 +133,9 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
 
   return (
     <div
-      className={`absolute top-0 z-30 h-full bg-custom-background-90 ${
-        fullScreen ? "p-2 w-full" : "w-1/2"
-      } ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`}
+      className={`absolute top-0 z-30 h-full bg-custom-background-90 ${fullScreen ? "p-2 w-full" : "w-1/2"} ${
+        isOpen ? "right-0" : "-right-full"
+      } duration-300 transition-all`}
     >
       <div
         className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
@@ -161,8 +144,7 @@ export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
       >
         <div className="flex items-center justify-between gap-4 bg-custom-background-100 px-5 py-4 text-sm">
           <h3 className="break-words">
-            Analytics for{" "}
-            {cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name}
+            Analytics for {cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name}
           </h3>
           <div className="flex items-center gap-2">
             <button

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

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

web/components/analytics/scope-and-demand/year-wise-issues.tsx

@@ -20,18 +20,15 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
           {
             id: "issues_closed",
             color: "rgb(var(--color-primary-100))",
-            data: MONTHS_LIST.map((month) => ({
-              x: month.label.substring(0, 3),
+            data: Object.entries(MONTHS_LIST).map(([index, month]) => ({
+              x: month.shortTitle,
               y:
-                defaultAnalytics.issue_completed_month_wise.find(
-                  (data) => data.month === month.value
-                )?.count || 0,
+                defaultAnalytics.issue_completed_month_wise.find((data) => data.month === parseInt(index, 10))?.count ||
+                0,
             })),
           },
         ]}
-        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map(
-          (data) => data.count
-        )}
+        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => data.count)}
         height="300px"
         colors={(datum) => datum.color}
         curve="monotoneX"

web/components/automation/auto-close-automation.tsx

@@ -12,7 +12,7 @@ import { Squares2X2Icon } from "@heroicons/react/24/outline";
 import { StateGroupIcon } from "components/icons";
 import { ArchiveX } from "lucide-react";
 // services
-import stateService from "services/state.service";
+import stateService from "services/project_state.service";
 // constants
 import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
 import { STATES_LIST } from "constants/fetch-keys";
@@ -34,9 +34,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
 
   const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
   );
   const states = getStatesList(stateGroups);
 
@@ -57,9 +55,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
 
   const defaultState = stateGroups && stateGroups.cancelled ? stateGroups.cancelled[0].id : null;
 
-  const selectedOption = states?.find(
-    (s) => s.id === projectDetails?.default_state ?? defaultState
-  );
+  const selectedOption = states?.find((s) => s.id === projectDetails?.default_state ?? defaultState);
   const currentDefaultState = states?.find((s) => s.id === defaultState);
 
   const initialValues: Partial<IProject> = {
@@ -105,15 +101,11 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
           <div className="ml-12">
             <div className="flex flex-col rounded bg-custom-background-90 border border-custom-border-200 p-2">
               <div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
-                <div className="w-1/2 text-sm font-medium">
-                  Auto-close issues that are inactive for
-                </div>
+                <div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div>
                 <div className="w-1/2">
                   <CustomSelect
                     value={projectDetails?.close_in}
-                    label={`${projectDetails?.close_in} ${
-                      projectDetails?.close_in === 1 ? "Month" : "Months"
-                    }`}
+                    label={`${projectDetails?.close_in} ${projectDetails?.close_in === 1 ? "Month" : "Months"}`}
                     onChange={(val: number) => {
                       handleChange({ close_in: val });
                     }}
@@ -142,9 +134,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
                 <div className="w-1/2 text-sm font-medium">Auto-close Status</div>
                 <div className="w-1/2 ">
                   <CustomSearchSelect
-                    value={
-                      projectDetails?.default_state ? projectDetails?.default_state : defaultState
-                    }
+                    value={projectDetails?.default_state ? projectDetails?.default_state : defaultState}
                     label={
                       <div className="flex items-center gap-2">
                         {selectedOption ? (
@@ -166,9 +156,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
                         )}
                         {selectedOption?.name
                           ? selectedOption.name
-                          : currentDefaultState?.name ?? (
-                              <span className="text-custom-text-200">State</span>
-                            )}
+                          : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
                       </div>
                     }
                     onChange={(val: string) => {

web/components/command-palette/command-k.tsx

@@ -10,7 +10,7 @@ import { Command } from "cmdk";
 import { Dialog, Transition } from "@headlessui/react";
 // services
 import workspaceService from "services/workspace.service";
-import issuesService from "services/issues.service";
+import issuesService from "services/issue.service";
 import inboxService from "services/inbox.service";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
@@ -79,16 +79,13 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
   const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      ? () => issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
       : null
   );
 
   const { data: inboxList } = useSWR(
     workspaceSlug && projectId ? INBOX_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string) : null
   );
 
   const updateIssue = useCallback(
@@ -272,8 +269,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                 >
                   {issueDetails && (
                     <div className="overflow-hidden truncate rounded-md bg-custom-background-80 p-2 text-xs font-medium text-custom-text-200">
-                      {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}{" "}
-                      {issueDetails.name}
+                      {issueDetails.project_detail.identifier}-{issueDetails.sequence_id} {issueDetails.name}
                     </div>
                   )}
                   {projectId && (
@@ -324,12 +320,9 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                     </h5>
                   )}
 
-                  {!isLoading &&
-                    resultsCount === 0 &&
-                    searchTerm !== "" &&
-                    debouncedSearchTerm !== "" && (
-                      <div className="my-4 text-center text-custom-text-200">No results found.</div>
-                    )}
+                  {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                    <div className="my-4 text-center text-custom-text-200">No results found.</div>
+                  )}
 
                   {(isLoading || isSearching) && (
                     <Command.Loading>
@@ -362,9 +355,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                               >
                                 <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
                                   <Icon iconName={currentSection.icon} />
-                                  <p className="block flex-1 truncate">
-                                    {currentSection.itemName(item)}
-                                  </p>
+                                  <p className="block flex-1 truncate">{currentSection.itemName(item)}</p>
                                 </div>
                               </Command.Item>
                             ))}
@@ -577,9 +568,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                               <Command.Item
                                 onSelect={() => {
                                   setIsPaletteOpen(false);
-                                  redirect(
-                                    `/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`
-                                  );
+                                  redirect(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`);
                                 }}
                                 className="focus:outline-none"
                               >
@@ -672,10 +661,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                         <Command.Item
                           onSelect={() => {
                             setIsPaletteOpen(false);
-                            window.open(
-                              "https://github.com/makeplane/plane/issues/new/choose",
-                              "_blank"
-                            );
+                            window.open("https://github.com/makeplane/plane/issues/new/choose", "_blank");
                           }}
                           className="focus:outline-none"
                         >
@@ -759,29 +745,15 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                     </>
                   )}
                   {page === "change-issue-state" && issueDetails && (
-                    <ChangeIssueState
-                      issue={issueDetails}
-                      setIsPaletteOpen={setIsPaletteOpen}
-                      user={user}
-                    />
+                    <ChangeIssueState issue={issueDetails} setIsPaletteOpen={setIsPaletteOpen} user={user} />
                   )}
                   {page === "change-issue-priority" && issueDetails && (
-                    <ChangeIssuePriority
-                      issue={issueDetails}
-                      setIsPaletteOpen={setIsPaletteOpen}
-                      user={user}
-                    />
+                    <ChangeIssuePriority issue={issueDetails} setIsPaletteOpen={setIsPaletteOpen} user={user} />
                   )}
                   {page === "change-issue-assignee" && issueDetails && (
-                    <ChangeIssueAssignee
-                      issue={issueDetails}
-                      setIsPaletteOpen={setIsPaletteOpen}
-                      user={user}
-                    />
-                  )}
-                  {page === "change-interface-theme" && (
-                    <ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />
+                    <ChangeIssueAssignee issue={issueDetails} setIsPaletteOpen={setIsPaletteOpen} user={user} />
                   )}
+                  {page === "change-interface-theme" && <ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />}
                 </Command.List>
               </Command>
             </Dialog.Panel>

web/components/command-palette/command-pallette.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 // hooks
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
@@ -17,14 +17,11 @@ import { CreateUpdatePageModal } from "components/pages";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // services
-import issuesService from "services/issues.service";
-import inboxService from "services/inbox.service";
+import issuesService from "services/issue.service";
 // fetch keys
-import { INBOX_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
+import { ISSUE_DETAILS } from "constants/fetch-keys";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-import { observable } from "mobx";
-import { observer } from "mobx-react-lite";
 
 export const CommandPalette: React.FC = observer(() => {
   const store: any = useMobxStore();
@@ -50,8 +47,7 @@ export const CommandPalette: React.FC = observer(() => {
   const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      ? () => issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
       : null
   );
 
@@ -76,7 +72,7 @@ export const CommandPalette: React.FC = observer(() => {
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      const { key, ctrlKey, metaKey, altKey, shiftKey } = e;
+      const { key, ctrlKey, metaKey, altKey } = e;
       if (!key) return;
 
       const keyPressed = key.toLowerCase();
@@ -141,11 +137,7 @@ export const CommandPalette: React.FC = observer(() => {
     <>
       <ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
       {workspaceSlug && (
-        <CreateProjectModal
-          isOpen={isProjectModalOpen}
-          setIsOpen={setIsProjectModalOpen}
-          user={user}
-        />
+        <CreateProjectModal isOpen={isProjectModalOpen} setIsOpen={setIsProjectModalOpen} user={user} />
       )}
       {projectId && (
         <>
@@ -184,11 +176,7 @@ export const CommandPalette: React.FC = observer(() => {
         handleClose={() => setIsIssueModalOpen(false)}
         fieldsToShow={inboxId ? ["name", "description", "priority"] : ["all"]}
         prePopulateData={
-          cycleId
-            ? { cycle: cycleId.toString() }
-            : moduleId
-            ? { module: moduleId.toString() }
-            : undefined
+          cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined
         }
       />
       <BulkDeleteIssuesModal
@@ -196,11 +184,7 @@ export const CommandPalette: React.FC = observer(() => {
         setIsOpen={setIsBulkDeleteIssuesModalOpen}
         user={user}
       />
-      <CommandK
-        deleteIssue={deleteIssue}
-        isPaletteOpen={isPaletteOpen}
-        setIsPaletteOpen={setIsPaletteOpen}
-      />
+      <CommandK deleteIssue={deleteIssue} isPaletteOpen={isPaletteOpen} setIsPaletteOpen={setIsPaletteOpen} />
     </>
   );
 });

web/components/command-palette/issue/change-issue-assignee.tsx

@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // cmdk
 import { Command } from "cmdk";
 // services
-import issuesService from "services/issues.service";
+import issuesService from "services/issue.service";
 // hooks
 import useProjectMembers from "hooks/use-project-members";
 // constants

web/components/command-palette/issue/change-issue-priority.tsx

@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // cmdk
 import { Command } from "cmdk";
 // services
-import issuesService from "services/issues.service";
+import issuesService from "services/issue.service";
 // types
 import { ICurrentUserResponse, IIssue, TIssuePriorities } from "types";
 // constants
@@ -64,11 +64,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
   return (
     <>
       {PRIORITIES.map((priority) => (
-        <Command.Item
-          key={priority}
-          onSelect={() => handleIssueState(priority)}
-          className="focus:outline-none"
-        >
+        <Command.Item key={priority} onSelect={() => handleIssueState(priority)} className="focus:outline-none">
           <div className="flex items-center space-x-3">
             <PriorityIcon priority={priority} />
             <span className="capitalize">{priority ?? "None"}</span>

web/components/command-palette/issue/change-issue-state.tsx

@@ -7,8 +7,8 @@ import useSWR, { mutate } from "swr";
 // cmdk
 import { Command } from "cmdk";
 // services
-import issuesService from "services/issues.service";
-import stateService from "services/state.service";
+import issuesService from "services/issue.service";
+import stateService from "services/project_state.service";
 // ui
 import { Spinner } from "components/ui";
 // icons
@@ -32,9 +32,7 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
 
   const { data: stateGroups, mutate: mutateIssueDetails } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
   );
   const states = getStatesList(stateGroups);
 
@@ -78,18 +76,9 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
       {states ? (
         states.length > 0 ? (
           states.map((state) => (
-            <Command.Item
-              key={state.id}
-              onSelect={() => handleIssueState(state.id)}
-              className="focus:outline-none"
-            >
+            <Command.Item key={state.id} onSelect={() => handleIssueState(state.id)} className="focus:outline-none">
               <div className="flex items-center space-x-3">
-                <StateGroupIcon
-                  stateGroup={state.group}
-                  color={state.color}
-                  height="16px"
-                  width="16px"
-                />
+                <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
                 <p>{state.name}</p>
               </div>
               <div>{state.id === issue.state && <CheckIcon className="h-3 w-3" />}</div>

web/components/core/activity.tsx

@@ -2,33 +2,13 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// hook
-import useEstimateOption from "hooks/use-estimate-option";
 // services
-import issuesService from "services/issues.service";
+import issuesService from "services/issue.service";
 // icons
 import { Icon, Tooltip } from "components/ui";
-import {
-  TagIcon,
-  CopyPlus,
-  Calendar,
-  Link2Icon,
-  RocketIcon,
-  Users2Icon,
-  ArchiveIcon,
-  PaperclipIcon,
-  ContrastIcon,
-  TriangleIcon,
-  LayoutGridIcon,
-  SignalMediumIcon,
-  MessageSquareIcon,
-} from "lucide-react";
-import {
-  BlockedIcon,
-  BlockerIcon,
-  RelatedIcon,
-  StackedLayersHorizontalIcon,
-} from "components/icons";
+import { CopyPlus } from "lucide-react";
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { BlockedIcon, BlockerIcon, RelatedIcon } from "components/icons";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
@@ -42,21 +22,15 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   const { workspaceSlug } = router.query;
 
   return (
-    <Tooltip
-      tooltipContent={
-        activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"
-      }
-    >
+    <Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
       <a
         href={`/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}`}
         target="_blank"
         rel="noopener noreferrer"
         className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
       >
-        {activity.issue_detail
-          ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
-          : "Issue"}
-        <RocketIcon size={12} color="#6b7280" />
+        {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}
+        <Icon iconName="launch" className="!text-xs" />
       </a>
     </Tooltip>
   );
@@ -97,26 +71,10 @@ const LabelPill = ({ labelId }: { labelId: string }) => {
     />
   );
 };
-const EstimatePoint = ({ point }: { point: string }) => {
-  const { estimateValue, isEstimateActive } = useEstimateOption(Number(point));
-  const currentPoint = Number(point) + 1;
-
-  return (
-    <span className="font-medium text-custom-text-100">
-      {isEstimateActive
-        ? estimateValue
-        : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
-    </span>
-  );
-};
 
 const activityDetails: {
   [key: string]: {
-    message: (
-      activity: IIssueActivity,
-      showIssue: boolean,
-      workspaceSlug: string
-    ) => React.ReactNode;
+    message: (activity: IIssueActivity, showIssue: boolean, workspaceSlug: string) => React.ReactNode;
     icon: React.ReactNode;
   };
 } = {
@@ -149,14 +107,14 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Users2Icon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="group" className="!text-2xl" aria-hidden="true" />,
   },
   archived_at: {
     message: (activity) => {
       if (activity.new_value === "restore") return "restored the issue.";
       else return "archived the issue.";
     },
-    icon: <ArchiveIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="archive" className="!text-2xl" aria-hidden="true" />,
   },
   attachment: {
     message: (activity, showIssue) => {
@@ -171,7 +129,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               attachment
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
             {showIssue && (
               <>
@@ -195,7 +153,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <PaperclipIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="attach_file" className="!text-2xl" aria-hidden="true" />,
   },
   blocking: {
     message: (activity) => {
@@ -209,8 +167,7 @@ const activityDetails: {
       else
         return (
           <>
-            removed the blocking issue{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            removed the blocking issue <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
           </>
         );
     },
@@ -266,8 +223,7 @@ const activityDetails: {
       else
         return (
           <>
-            removed the relation from{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            removed the relation from <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
           </>
         );
     },
@@ -286,7 +242,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.new_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
@@ -301,7 +257,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.new_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
@@ -316,12 +272,12 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.old_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
     },
-    icon: <ContrastIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="contrast" className="!text-2xl" aria-hidden="true" />,
   },
   description: {
     message: (activity, showIssue) => (
@@ -336,7 +292,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
   },
   estimate_point: {
     message: (activity, showIssue) => {
@@ -356,7 +312,7 @@ const activityDetails: {
       else
         return (
           <>
-            set the estimate point to <EstimatePoint point={activity.new_value} />
+            set the estimate point to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -367,14 +323,14 @@ const activityDetails: {
           </>
         );
     },
-    icon: <TriangleIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="change_history" className="!text-2xl" aria-hidden="true" />,
   },
   issue: {
     message: (activity) => {
       if (activity.verb === "created") return "created the issue.";
       else return "deleted an issue.";
     },
-    icon: <StackedLayersHorizontalIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="stack" className="!text-2xl" aria-hidden="true" />,
   },
   labels: {
     message: (activity, showIssue) => {
@@ -411,7 +367,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <TagIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="sell" className="!text-2xl" aria-hidden="true" />,
   },
   link: {
     message: (activity, showIssue) => {
@@ -426,7 +382,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               link
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
             {showIssue && (
               <>
@@ -448,7 +404,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               link
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
             {showIssue && (
               <>
@@ -470,7 +426,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               link
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
             {showIssue && (
               <>
@@ -482,7 +438,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Link2Icon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="link" className="!text-2xl" aria-hidden="true" />,
   },
   modules: {
     message: (activity, showIssue, workspaceSlug) => {
@@ -497,7 +453,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.new_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
@@ -512,7 +468,7 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.new_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
@@ -527,12 +483,12 @@ const activityDetails: {
               className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
             >
               {activity.old_value}
-              <RocketIcon size={12} color="#6b7280" />
+              <Icon iconName="launch" className="!text-xs" />
             </a>
           </>
         );
     },
-    icon: <Icon iconName="dataset" className="!text-xs !text-[#6b7280]" aria-hidden="true" />,
+    icon: <Icon iconName="dataset" className="!text-2xl" aria-hidden="true" />,
   },
   name: {
     message: (activity, showIssue) => (
@@ -547,15 +503,14 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <MessageSquareIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
   },
   parent: {
     message: (activity, showIssue) => {
       if (!activity.new_value)
         return (
           <>
-            removed the parent{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+            removed the parent <span className="font-medium text-custom-text-100">{activity.old_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -568,8 +523,7 @@ const activityDetails: {
       else
         return (
           <>
-            set the parent to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            set the parent to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -580,13 +534,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: (
-      <Icon
-        iconName="supervised_user_circle"
-        className="!text-xs !text-[#6b7280]"
-        aria-hidden="true"
-      />
-    ),
+    icon: <Icon iconName="supervised_user_circle" className="!text-2xl" aria-hidden="true" />,
   },
   priority: {
     message: (activity, showIssue) => (
@@ -604,7 +552,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <SignalMediumIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="signal_cellular_alt" className="!text-2xl" aria-hidden="true" />,
   },
   start_date: {
     message: (activity, showIssue) => {
@@ -638,13 +586,12 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Calendar size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
   },
   state: {
     message: (activity, showIssue) => (
       <>
-        set the state to{" "}
-        <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
         {showIssue && (
           <>
             {" "}
@@ -654,7 +601,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <LayoutGridIcon size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Squares2X2Icon className="h-6 w-6 text-custom-sidebar-200" aria-hidden="true" />,
   },
   target_date: {
     message: (activity, showIssue) => {
@@ -688,7 +635,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Calendar size={12} color="#6b7280" aria-hidden="true" />,
+    icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
   },
 };
 
@@ -696,13 +643,7 @@ export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
   <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
 );
 
-export const ActivityMessage = ({
-  activity,
-  showIssue = false,
-}: {
-  activity: IIssueActivity;
-  showIssue?: boolean;
-}) => {
+export const ActivityMessage = ({ activity, showIssue = false }: { activity: IIssueActivity; showIssue?: boolean }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 

web/components/core/filters/date-filter-modal.tsx

@@ -1,11 +1,8 @@
 import { Fragment } from "react";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// react-datepicker
 import DatePicker from "react-datepicker";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+
 // components
 import { DateFilterSelect } from "./date-filter-select";
 // ui
@@ -14,15 +11,12 @@ import { PrimaryButton, SecondaryButton } from "components/ui";
 import { XMarkIcon } from "@heroicons/react/20/solid";
 // helpers
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { IIssueFilterOptions } from "types";
 
 type Props = {
   title: string;
-  field: keyof IIssueFilterOptions;
-  filters: IIssueFilterOptions;
   handleClose: () => void;
   isOpen: boolean;
-  onSelect: (option: any) => void;
+  onSelect: (val: string[]) => void;
 };
 
 type TFormValues = {
@@ -37,14 +31,7 @@ const defaultValues: TFormValues = {
   date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
 };
 
-export const DateFilterModal: React.FC<Props> = ({
-  title,
-  field,
-  filters,
-  handleClose,
-  isOpen,
-  onSelect,
-}) => {
+export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, onSelect }) => {
   const { handleSubmit, watch, control } = useForm<TFormValues>({
     defaultValues,
   });
@@ -52,32 +39,13 @@ export const DateFilterModal: React.FC<Props> = ({
   const handleFormSubmit = (formData: TFormValues) => {
     const { filterType, date1, date2 } = formData;
 
-    if (filterType === "range") {
-      onSelect({
-        key: field,
-        value: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`],
-      });
-    } else {
-      const filteredArray = (filters?.[field] as string[])?.filter((item) => {
-        if (item?.includes(filterType)) return false;
+    if (filterType === "range") onSelect([`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`]);
+    else onSelect([`${renderDateFormat(date1)};${filterType}`]);
 
-        return true;
-      });
-
-      const filterOne = filteredArray && filteredArray?.length > 0 ? filteredArray[0] : null;
-      if (filterOne)
-        onSelect({ key: field, value: [filterOne, `${renderDateFormat(date1)};${filterType}`] });
-      else
-        onSelect({
-          key: field,
-          value: [`${renderDateFormat(date1)};${filterType}`],
-        });
-    }
     handleClose();
   };
 
-  const isInvalid =
-    watch("filterType") === "range" ? new Date(watch("date1")) > new Date(watch("date2")) : false;
+  const isInvalid = watch("filterType") === "range" ? new Date(watch("date1")) > new Date(watch("date2")) : false;
 
   const nextDay = new Date(watch("date1"));
   nextDay.setDate(nextDay.getDate() + 1);
@@ -117,10 +85,7 @@ export const DateFilterModal: React.FC<Props> = ({
                         <DateFilterSelect title={title} value={value} onChange={onChange} />
                       )}
                     />
-                    <XMarkIcon
-                      className="border-base h-4 w-4 cursor-pointer"
-                      onClick={handleClose}
-                    />
+                    <XMarkIcon className="border-base h-4 w-4 cursor-pointer" onClick={handleClose} />
                   </div>
                   <div className="flex w-full justify-between gap-4">
                     <Controller
@@ -165,11 +130,7 @@ export const DateFilterModal: React.FC<Props> = ({
                     <SecondaryButton className="flex items-center gap-2" onClick={handleClose}>
                       Cancel
                     </SecondaryButton>
-                    <PrimaryButton
-                      type="submit"
-                      className="flex items-center gap-2"
-                      disabled={isInvalid}
-                    >
+                    <PrimaryButton type="submit" className="flex items-center gap-2" disabled={isInvalid}>
                       Apply
                     </PrimaryButton>
                   </div>

web/components/core/filters/filters-list.tsx

@@ -167,9 +167,7 @@ export const FiltersList: React.FC<Props> = ({
                               className="cursor-pointer"
                               onClick={() =>
                                 setFilters({
-                                  subscriber: filters.subscriber?.filter(
-                                    (p: any) => p !== memberId
-                                  ),
+                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
                                 })
                               }
                             >

web/components/core/filters/index.ts

@@ -1,5 +1,4 @@
 export * from "./date-filter-modal";
 export * from "./date-filter-select";
 export * from "./filters-list";
-export * from "./workspace-filters-list";
 export * from "./issues-view-filter";

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

@@ -25,11 +25,11 @@ import {
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { Properties, TIssueViewOptions } from "types";
+import { Properties, TIssueLayouts } from "types";
 // constants
-import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
+import { ISSUE_GROUP_BY_OPTIONS, ISSUE_ORDER_BY_OPTIONS, ISSUE_FILTER_OPTIONS } from "constants/issue";
 
-const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
+const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [
   {
     type: "list",
     Icon: FormatListBulletedOutlined,
@@ -52,7 +52,7 @@ const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
   },
 ];
 
-const issueViewForDraftIssues: { type: TIssueViewOptions; Icon: any }[] = [
+const issueViewForDraftIssues: { type: TIssueLayouts; Icon: any }[] = [
   {
     type: "list",
     Icon: FormatListBulletedOutlined,
@@ -67,21 +67,12 @@ export const IssuesFilterView: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, viewId } = router.query;
   const isArchivedIssues = router.pathname.includes("archived-issues");
-  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
+  const isDraftIssues = router.pathname.includes("draft-issues");
 
-  const {
-    displayFilters,
-    setDisplayFilters,
-    filters,
-    setFilters,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } = useIssuesView();
+  const { displayFilters, setDisplayFilters, filters, setFilters, resetFilterToDefault, setNewFilterDefaultView } =
+    useIssuesView();
 
-  const [properties, setProperties] = useIssuesProperties(
-    workspaceSlug as string,
-    projectId as string
-  );
+  const [properties, setProperties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
   const { isEstimateActive } = useEstimateOption();
 
@@ -92,11 +83,7 @@ export const IssuesFilterView: React.FC = () => {
           {issueViewOptions.map((option) => (
             <Tooltip
               key={option.type}
-              tooltipContent={
-                <span className="capitalize">
-                  {replaceUnderscoreIfSnakeCase(option.type)} Layout
-                </span>
-              }
+              tooltipContent={<span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>}
               position="bottom"
             >
               <button
@@ -124,9 +111,7 @@ export const IssuesFilterView: React.FC = () => {
           {issueViewForDraftIssues.map((option) => (
             <Tooltip
               key={option.type}
-              tooltipContent={
-                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
-              }
+              tooltipContent={<span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>}
               position="bottom"
             >
               <button
@@ -166,9 +151,7 @@ export const IssuesFilterView: React.FC = () => {
             if (valueExists)
               setFilters(
                 {
-                  [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                    (val) => val !== option.value
-                  ),
+                  [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value),
                 },
                 !Boolean(viewId)
               );
@@ -189,9 +172,7 @@ export const IssuesFilterView: React.FC = () => {
           <>
             <Popover.Button
               className={`group flex items-center gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
-                open
-                  ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
-                  : "text-custom-sidebar-text-200"
+                open ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100" : "text-custom-sidebar-text-200"
               }`}
             >
               Display
@@ -218,27 +199,24 @@ export const IssuesFilterView: React.FC = () => {
                           <div className="w-28">
                             <CustomMenu
                               label={
-                                GROUP_BY_OPTIONS.find(
-                                  (option) => option.key === displayFilters.group_by
-                                )?.name ?? "Select"
+                                ISSUE_GROUP_BY_OPTIONS.find((option) => option.key === displayFilters.group_by)
+                                  ?.title ?? "Select"
                               }
                               className="!w-full"
                               buttonClassName="w-full"
                             >
-                              {GROUP_BY_OPTIONS.map((option) => {
-                                if (displayFilters.layout === "kanban" && option.key === null)
-                                  return null;
+                              {ISSUE_GROUP_BY_OPTIONS.map((option) => {
+                                if (displayFilters.layout === "kanban" && option.key === null) return null;
                                 if (option.key === "project") return null;
 
-                                if (isDraftIssues && option.key === "state_detail.group")
-                                  return null;
-
                                 return (
                                   <CustomMenu.MenuItem
                                     key={option.key}
-                                    onClick={() => setDisplayFilters({ group_by: option.key })}
+                                    onClick={() => {
+                                      // setDisplayFilters({ group_by: option.key })
+                                    }}
                                   >
-                                    {option.name}
+                                    {option.title}
                                   </CustomMenu.MenuItem>
                                 );
                               })}
@@ -246,86 +224,76 @@ export const IssuesFilterView: React.FC = () => {
                           </div>
                         </div>
                       )}
-                    {displayFilters.layout !== "calendar" &&
-                      displayFilters.layout !== "spreadsheet" && (
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Order by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                ORDER_BY_OPTIONS.find(
-                                  (option) => option.key === displayFilters.order_by
-                                )?.name ?? "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {ORDER_BY_OPTIONS.map((option) =>
-                                displayFilters.group_by === "priority" &&
-                                option.key === "priority" ? null : (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => {
-                                      setDisplayFilters({ order_by: option.key });
-                                    }}
-                                  >
-                                    {option.name}
-                                  </CustomMenu.MenuItem>
-                                )
-                              )}
-                            </CustomMenu>
-                          </div>
-                        </div>
-                      )}
-                    {!isArchivedIssues && (
+                    {displayFilters.layout !== "calendar" && displayFilters.layout !== "spreadsheet" && (
                       <div className="flex items-center justify-between">
-                        <h4 className="text-custom-text-200">Issue type</h4>
+                        <h4 className="text-custom-text-200">Order by</h4>
                         <div className="w-28">
                           <CustomMenu
                             label={
-                              FILTER_ISSUE_OPTIONS.find(
-                                (option) => option.key === displayFilters.type
-                              )?.name ?? "Select"
+                              ISSUE_ORDER_BY_OPTIONS.find((option) => option.key === displayFilters.order_by)?.title ??
+                              "Select"
                             }
                             className="!w-full"
                             buttonClassName="w-full"
                           >
-                            {FILTER_ISSUE_OPTIONS.map((option) => (
-                              <CustomMenu.MenuItem
-                                key={option.key}
-                                onClick={() =>
-                                  setDisplayFilters({
-                                    type: option.key,
-                                  })
-                                }
-                              >
-                                {option.name}
-                              </CustomMenu.MenuItem>
-                            ))}
+                            {ISSUE_ORDER_BY_OPTIONS.map((option) =>
+                              displayFilters.group_by === "priority" && option.key === "priority" ? null : (
+                                <CustomMenu.MenuItem
+                                  key={option.key}
+                                  onClick={() => {
+                                    // setDisplayFilters({ order_by: option.key });
+                                  }}
+                                >
+                                  {option.title}
+                                </CustomMenu.MenuItem>
+                              )
+                            )}
                           </CustomMenu>
                         </div>
                       </div>
                     )}
+                    <div className="flex items-center justify-between">
+                      <h4 className="text-custom-text-200">Issue type</h4>
+                      <div className="w-28">
+                        <CustomMenu
+                          label={
+                            ISSUE_FILTER_OPTIONS.find((option) => option.key === displayFilters.type)?.title ?? "Select"
+                          }
+                          className="!w-full"
+                          buttonClassName="w-full"
+                        >
+                          {ISSUE_FILTER_OPTIONS.map((option) => (
+                            <CustomMenu.MenuItem
+                              key={option.key}
+                              onClick={() => {
+                                // setDisplayFilters({
+                                //   type: option.key,
+                                // })
+                              }}
+                            >
+                              {option.title}
+                            </CustomMenu.MenuItem>
+                          ))}
+                        </CustomMenu>
+                      </div>
+                    </div>
 
-                    {displayFilters.layout !== "calendar" &&
-                      displayFilters.layout !== "spreadsheet" && (
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Show sub-issues</h4>
-                          <div className="w-28">
-                            <ToggleSwitch
-                              value={displayFilters.sub_issue ?? true}
-                              onChange={() =>
-                                setDisplayFilters({ sub_issue: !displayFilters.sub_issue })
-                              }
-                            />
-                          </div>
+                    {displayFilters.layout !== "calendar" && displayFilters.layout !== "spreadsheet" && (
+                      <div className="flex items-center justify-between">
+                        <h4 className="text-custom-text-200">Show sub-issues</h4>
+                        <div className="w-28">
+                          <ToggleSwitch
+                            value={displayFilters.sub_issue ?? true}
+                            onChange={() => setDisplayFilters({ sub_issue: !displayFilters.sub_issue })}
+                          />
                         </div>
-                      )}
+                      </div>
+                    )}
                     {displayFilters.layout !== "calendar" &&
                       displayFilters.layout !== "spreadsheet" &&
                       displayFilters.layout !== "gantt_chart" && (
                         <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Show empty groups</h4>
+                          <h4 className="text-custom-text-200">Show empty states</h4>
                           <div className="w-28">
                             <ToggleSwitch
                               value={displayFilters.show_empty_groups ?? true}
@@ -365,16 +333,11 @@ export const IssuesFilterView: React.FC = () => {
 
                           if (
                             displayFilters.layout === "spreadsheet" &&
-                            (key === "attachment_count" ||
-                              key === "link" ||
-                              key === "sub_issue_count")
+                            (key === "attachment_count" || key === "link" || key === "sub_issue_count")
                           )
                             return null;
 
-                          if (
-                            displayFilters.layout !== "spreadsheet" &&
-                            (key === "created_on" || key === "updated_on")
-                          )
+                          if (displayFilters.layout !== "spreadsheet" && (key === "created_on" || key === "updated_on"))
                             return null;
 
                           return (

web/components/core/filters/workspace-filters-list.tsx

@@ -1,364 +0,0 @@
-import React from "react";
-
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon, StateGroupIcon } from "components/icons";
-// ui
-import { Avatar } from "components/ui";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-// types
-import {
-  IIssueLabels,
-  IProject,
-  IUserLite,
-  IWorkspaceIssueFilterOptions,
-  TStateGroups,
-} from "types";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-
-type Props = {
-  filters: Partial<IWorkspaceIssueFilterOptions>;
-  setFilters: (updatedFilter: Partial<IWorkspaceIssueFilterOptions>) => void;
-  clearAllFilters: (...args: any) => void;
-  labels: IIssueLabels[] | undefined;
-  members: IUserLite[] | undefined;
-  stateGroup: string[] | undefined;
-  project?: IProject[] | undefined;
-};
-
-export const WorkspaceFiltersList: React.FC<Props> = ({
-  filters,
-  setFilters,
-  clearAllFilters,
-  labels,
-  members,
-  stateGroup,
-  project,
-}) => {
-  if (!filters) return <></>;
-
-  const nullFilters = Object.keys(filters).filter(
-    (key) => filters[key as keyof IWorkspaceIssueFilterOptions] === null
-  );
-
-  return (
-    <div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
-      {Object.keys(filters).map((filterKey) => {
-        const key = filterKey as keyof typeof filters;
-
-        if (filters[key] === null || (filters[key]?.length ?? 0) <= 0) return null;
-
-        return (
-          <div
-            key={key}
-            className="flex items-center gap-x-2 rounded-full border border-custom-border-200 bg-custom-background-80 px-2 py-1"
-          >
-            <span className="capitalize text-custom-text-200">
-              {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
-            </span>
-            {filters[key] === null || (filters[key]?.length ?? 0) <= 0 ? (
-              <span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
-            ) : Array.isArray(filters[key]) ? (
-              <div className="space-x-2">
-                <div className="flex flex-wrap items-center gap-1">
-                  {key === "state_group"
-                    ? filters.state_group?.map((stateGroup) => {
-                        const group = stateGroup as TStateGroups;
-
-                        return (
-                          <p
-                            key={group}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
-                            style={{
-                              color: STATE_GROUP_COLORS[group],
-                              backgroundColor: `${STATE_GROUP_COLORS[group]}20`,
-                            }}
-                          >
-                            <span>
-                              <StateGroupIcon stateGroup={group} color={undefined} />
-                            </span>
-                            <span>{group}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  state_group: filters.state_group?.filter((g) => g !== group),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
-                    : key === "priority"
-                    ? filters.priority?.map((priority: any) => (
-                        <p
-                          key={priority}
-                          className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
-                            priority === "urgent"
-                              ? "bg-red-500/20 text-red-500"
-                              : priority === "high"
-                              ? "bg-orange-500/20 text-orange-500"
-                              : priority === "medium"
-                              ? "bg-yellow-500/20 text-yellow-500"
-                              : priority === "low"
-                              ? "bg-green-500/20 text-green-500"
-                              : "bg-custom-background-90 text-custom-text-200"
-                          }`}
-                        >
-                          <span>
-                            <PriorityIcon priority={priority} />
-                          </span>
-                          <span>{priority === "null" ? "None" : priority}</span>
-                          <span
-                            className="cursor-pointer"
-                            onClick={() =>
-                              setFilters({
-                                priority: filters.priority?.filter((p: any) => p !== priority),
-                              })
-                            }
-                          >
-                            <XMarkIcon className="h-3 w-3" />
-                          </span>
-                        </p>
-                      ))
-                    : key === "assignees"
-                    ? filters.assignees?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-                        return (
-                          <div
-                            key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "subscriber"
-                    ? filters.subscriber?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-
-                        return (
-                          <div
-                            key={memberId}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  assignees: filters.assignees?.filter((p: any) => p !== memberId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "created_by"
-                    ? filters.created_by?.map((memberId: string) => {
-                        const member = members?.find((m) => m.id === memberId);
-
-                        return (
-                          <div
-                            key={`${memberId}-${key}`}
-                            className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
-                          >
-                            <Avatar user={member} />
-                            <span>{member?.display_name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  created_by: filters.created_by?.filter(
-                                    (p: any) => p !== memberId
-                                  ),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "labels"
-                    ? filters.labels?.map((labelId: string) => {
-                        const label = labels?.find((l) => l.id === labelId);
-
-                        if (!label) return null;
-                        const color = label.color !== "" ? label.color : "#0f172a";
-                        return (
-                          <div
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5"
-                            style={{
-                              color: color,
-                              backgroundColor: `${color}20`, // add 20% opacity
-                            }}
-                            key={labelId}
-                          >
-                            <div
-                              className="h-1.5 w-1.5 rounded-full"
-                              style={{
-                                backgroundColor: color,
-                              }}
-                            />
-                            <span>{label.name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  labels: filters.labels?.filter((l: any) => l !== labelId),
-                                })
-                              }
-                            >
-                              <XMarkIcon
-                                className="h-3 w-3"
-                                style={{
-                                  color: color,
-                                }}
-                              />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "start_date"
-                    ? filters.start_date?.map((date: string) => {
-                        if (filters.start_date && filters.start_date.length <= 0) return null;
-
-                        const splitDate = date.split(";");
-
-                        return (
-                          <div
-                            key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
-                          >
-                            <div className="h-1.5 w-1.5 rounded-full" />
-                            <span className="capitalize">
-                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
-                            </span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  start_date: filters.start_date?.filter((d: any) => d !== date),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "target_date"
-                    ? filters.target_date?.map((date: string) => {
-                        if (filters.target_date && filters.target_date.length <= 0) return null;
-
-                        const splitDate = date.split(";");
-
-                        return (
-                          <div
-                            key={date}
-                            className="inline-flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-100 px-1 py-0.5"
-                          >
-                            <div className="h-1.5 w-1.5 rounded-full" />
-                            <span className="capitalize">
-                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
-                            </span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  target_date: filters.target_date?.filter((d: any) => d !== date),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </div>
-                        );
-                      })
-                    : key === "project"
-                    ? filters.project?.map((projectId) => {
-                        const currentProject = project?.find((p) => p.id === projectId);
-                        return (
-                          <p
-                            key={currentProject?.id}
-                            className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize"
-                          >
-                            <span>{currentProject?.name}</span>
-                            <span
-                              className="cursor-pointer"
-                              onClick={() =>
-                                setFilters({
-                                  project: filters.project?.filter((p) => p !== projectId),
-                                })
-                              }
-                            >
-                              <XMarkIcon className="h-3 w-3" />
-                            </span>
-                          </p>
-                        );
-                      })
-                    : (filters[key] as any)?.join(", ")}
-                  <button
-                    type="button"
-                    onClick={() =>
-                      setFilters({
-                        [key]: null,
-                      })
-                    }
-                  >
-                    <XMarkIcon className="h-3 w-3" />
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <div className="flex items-center gap-x-1 capitalize">
-                {filters[key as keyof typeof filters]}
-                <button
-                  type="button"
-                  onClick={() =>
-                    setFilters({
-                      [key]: null,
-                    })
-                  }
-                >
-                  <XMarkIcon className="h-3 w-3" />
-                </button>
-              </div>
-            )}
-          </div>
-        );
-      })}
-      {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
-        <button
-          type="button"
-          onClick={clearAllFilters}
-          className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
-        >
-          <span>Clear all filters</span>
-          <XMarkIcon className="h-3 w-3" />
-        </button>
-      )}
-    </div>
-  );
-};

web/components/core/modals/bulk-delete-issues-modal.tsx

@@ -9,11 +9,10 @@ import { SubmitHandler, useForm } from "react-hook-form";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import issuesServices from "services/issues.service";
+import issuesServices from "services/issue.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 // ui
 import { DangerButton, SecondaryButton } from "components/ui";
 // icons
@@ -49,17 +48,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
   const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
+    workspaceSlug && projectId ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string) : null
   );
 
   const { setToastAlert } = useToast();
   const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
   const { order_by, group_by, ...viewGanttParams } = params;
 
   const {
@@ -94,14 +88,6 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
 
     if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids];
 
-    const calendarFetchKey = cycleId
-      ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
-      : moduleId
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
-      : viewId
-      ? VIEW_ISSUES(viewId.toString(), calendarParams)
-      : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", calendarParams);
-
     const ganttFetchKey = cycleId
       ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
       : moduleId
@@ -126,8 +112,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
           message: "Issues deleted successfully!",
         });
 
-        if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
-        else if (displayFilters.layout === "gantt_chart") mutate(ganttFetchKey);
+        if (displayFilters.layout === "gantt_chart") mutate(ganttFetchKey);
         else {
           if (cycleId) {
             mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params));
@@ -155,9 +140,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
       : issues?.filter(
           (issue) =>
             issue.name.toLowerCase().includes(query.toLowerCase()) ||
-            `${issue.project_detail.identifier}-${issue.sequence_id}`
-              .toLowerCase()
-              .includes(query.toLowerCase())
+            `${issue.project_detail.identifier}-${issue.sequence_id}`.toLowerCase().includes(query.toLowerCase())
         ) ?? [];
 
   return (

web/components/core/modals/gpt-assistant-modal.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 // services
 import aiService from "services/ai.service";
-import trackEventServices from "services/track-event.service";
+import trackEventServices from "services/track_event.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
@@ -110,9 +110,7 @@ export const GptAssistantModal: React.FC<Props> = ({
           setToastAlert({
             type: "error",
             title: "Error!",
-            message:
-              error ||
-              "You have reached the maximum number of requests of 50 requests per month per user.",
+            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
           setToastAlert({
@@ -166,8 +164,7 @@ export const GptAssistantModal: React.FC<Props> = ({
       )}
       {invalidResponse && (
         <div className="text-sm text-red-500">
-          No response could be generated. This may be due to insufficient content or task
-          information. Please try again.
+          No response could be generated. This may be due to insufficient content or task information. Please try again.
         </div>
       )}
       <Input
@@ -175,9 +172,7 @@ export const GptAssistantModal: React.FC<Props> = ({
         name="task"
         register={register}
         placeholder={`${
-          content && content !== ""
-            ? "Tell AI what action to perform on this content..."
-            : "Ask AI anything..."
+          content && content !== "" ? "Tell AI what action to perform on this content..." : "Ask AI anything..."
         }`}
         autoComplete="off"
       />
@@ -187,18 +182,8 @@ export const GptAssistantModal: React.FC<Props> = ({
             onClick={() => {
               onResponse(response);
               onClose();
-              if (block)
-                trackEventServices.trackUseGPTResponseEvent(
-                  block,
-                  "USE_GPT_RESPONSE_IN_PAGE_BLOCK",
-                  user
-                );
-              else if (issue)
-                trackEventServices.trackUseGPTResponseEvent(
-                  issue,
-                  "USE_GPT_RESPONSE_IN_ISSUE",
-                  user
-                );
+              if (block) trackEventServices.trackUseGPTResponseEvent(block, "USE_GPT_RESPONSE_IN_PAGE_BLOCK", user);
+              else if (issue) trackEventServices.trackUseGPTResponseEvent(issue, "USE_GPT_RESPONSE_IN_ISSUE", user);
             }}
           >
             Use this response
@@ -206,16 +191,8 @@ export const GptAssistantModal: React.FC<Props> = ({
         )}
         <div className="flex items-center gap-2">
           <SecondaryButton onClick={onClose}>Close</SecondaryButton>
-          <PrimaryButton
-            type="button"
-            onClick={handleSubmit(handleResponse)}
-            loading={isSubmitting}
-          >
-            {isSubmitting
-              ? "Generating response..."
-              : response === ""
-              ? "Generate response"
-              : "Generate again"}
+          <PrimaryButton type="button" onClick={handleSubmit(handleResponse)} loading={isSubmitting}>
+            {isSubmitting ? "Generating response..." : response === "" ? "Generate response" : "Generate again"}
           </PrimaryButton>
         </div>
       </div>

web/components/core/views/all-views.tsx

@@ -1,229 +1,66 @@
-import React, { useCallback, useState } from "react";
-
+import React from "react";
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 import useSWR from "swr";
 
-// react-beautiful-dnd
-import { DragDropContext, DropResult } from "react-beautiful-dnd";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-// services
-import stateService from "services/state.service";
-// hooks
-import useUser from "hooks/use-user";
-import { useProjectMyMembership } from "contexts/project-member.context";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import {
-  AllLists,
-  AllBoards,
-  CalendarView,
-  SpreadsheetView,
-  GanttChartView,
-} from "components/core";
-// ui
-import { EmptyState, Spinner } from "components/ui";
-// icons
-import { TrashIcon } from "@heroicons/react/24/outline";
-// images
-import emptyIssue from "public/empty-state/issue.svg";
-import emptyIssueArchive from "public/empty-state/issue-archive.svg";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-// types
-import { IIssue, IIssueViewProps } from "types";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
+  AppliedFiltersRoot,
+  ListLayout,
+  CalendarLayout,
+  GanttLayout,
+  KanBanLayout,
+  SpreadsheetLayout,
+} from "components/issues";
 
-type Props = {
-  addIssueToDate: (date: string) => void;
-  addIssueToGroup: (groupTitle: string) => void;
-  disableUserActions: boolean;
-  dragDisabled?: boolean;
-  emptyState: {
-    title: string;
-    description?: string;
-    primaryButton?: {
-      icon: any;
-      text: string;
-      onClick: () => void;
-    };
-    secondaryButton?: React.ReactNode;
-  };
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  handleDraftIssueAction?: (issue: IIssue, action: "edit" | "delete") => void;
-  handleOnDragEnd: (result: DropResult) => Promise<void>;
-  openIssuesListModal: (() => void) | null;
-  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
-  disableAddIssueOption?: boolean;
-  trashBox: boolean;
-  setTrashBox: React.Dispatch<React.SetStateAction<boolean>>;
-  viewProps: IIssueViewProps;
-};
-
-export const AllViews: React.FC<Props> = ({
-  addIssueToDate,
-  addIssueToGroup,
-  disableUserActions,
-  dragDisabled = false,
-  emptyState,
-  handleIssueAction,
-  handleDraftIssueAction,
-  handleOnDragEnd,
-  openIssuesListModal,
-  removeIssue,
-  disableAddIssueOption = false,
-  trashBox,
-  setTrashBox,
-  viewProps,
-}) => {
+export const AllViews: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
-  const [myIssueProjectId, setMyIssueProjectId] = useState<string | null>(null);
-
-  const { user } = useUser();
-  const { memberRole } = useProjectMyMembership();
-
-  const { groupedIssues, isEmpty, displayFilters } = viewProps;
-
-  const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView();
-
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const states = getStatesList(stateGroups);
-
-  const handleMyIssueOpen = (issue: IIssue) => {
-    setMyIssueProjectId(issue.project);
+  const { workspaceSlug, projectId } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    cycleId: string;
+    moduleId: string;
   };
 
-  const handleTrashBox = useCallback(
-    (isDragging: boolean) => {
-      if (isDragging && !trashBox) setTrashBox(true);
+  const { issue: issueStore, project: projectStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ISSUES` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
+
+        await projectStore.fetchProjectStates(workspaceSlug, projectId);
+        await projectStore.fetchProjectLabels(workspaceSlug, projectId);
+        await projectStore.fetchProjectMembers(workspaceSlug, projectId);
+        await projectStore.fetchProjectEstimates(workspaceSlug, projectId);
+
+        await issueStore.fetchIssues(workspaceSlug, projectId);
+      }
     },
-    [trashBox, setTrashBox]
+    { revalidateOnFocus: false }
   );
 
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
   return (
-    <DragDropContext onDragEnd={handleOnDragEnd}>
-      <StrictModeDroppable droppableId="trashBox">
-        {(provided, snapshot) => (
-          <div
-            className={`${
-              trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
-            } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
-              snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
-            } transition duration-300`}
-            ref={provided.innerRef}
-            {...provided.droppableProps}
-          >
-            <TrashIcon className="h-4 w-4" />
-            Drop here to delete the issue.
-          </div>
-        )}
-      </StrictModeDroppable>
-      {groupedIssues ? (
-        !isEmpty ||
-        displayFilters?.layout === "kanban" ||
-        displayFilters?.layout === "calendar" ||
-        displayFilters?.layout === "gantt_chart" ? (
-          <>
-            {displayFilters?.layout === "list" ? (
-              <AllLists
-                states={states}
-                addIssueToGroup={addIssueToGroup}
-                handleIssueAction={handleIssueAction}
-                handleDraftIssueAction={handleDraftIssueAction}
-                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
-                removeIssue={removeIssue}
-                myIssueProjectId={myIssueProjectId}
-                handleMyIssueOpen={handleMyIssueOpen}
-                disableUserActions={disableUserActions}
-                disableAddIssueOption={disableAddIssueOption}
-                user={user}
-                userAuth={memberRole}
-                viewProps={viewProps}
-              />
-            ) : displayFilters?.layout === "kanban" ? (
-              <AllBoards
-                addIssueToGroup={addIssueToGroup}
-                disableUserActions={disableUserActions}
-                disableAddIssueOption={disableAddIssueOption}
-                dragDisabled={dragDisabled}
-                handleIssueAction={handleIssueAction}
-                handleDraftIssueAction={handleDraftIssueAction}
-                handleTrashBox={handleTrashBox}
-                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
-                myIssueProjectId={myIssueProjectId}
-                handleMyIssueOpen={handleMyIssueOpen}
-                removeIssue={removeIssue}
-                states={states}
-                user={user}
-                userAuth={memberRole}
-                viewProps={viewProps}
-              />
-            ) : displayFilters?.layout === "calendar" ? (
-              <CalendarView
-                handleIssueAction={handleIssueAction}
-                addIssueToDate={addIssueToDate}
-                disableUserActions={disableUserActions}
-                user={user}
-                userAuth={memberRole}
-              />
-            ) : displayFilters?.layout === "spreadsheet" ? (
-              <SpreadsheetView
-                handleIssueAction={handleIssueAction}
-                spreadsheetIssues={spreadsheetIssues}
-                mutateIssues={mutateIssues}
-                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
-                disableUserActions={disableUserActions}
-                user={user}
-                userAuth={memberRole}
-              />
-            ) : (
-              displayFilters?.layout === "gantt_chart" && (
-                <GanttChartView disableUserActions={disableUserActions} />
-              )
-            )}
-          </>
-        ) : router.pathname.includes("archived-issues") ? (
-          <EmptyState
-            title="Archived Issues will be shown here"
-            description="All the issues that have been in the completed or canceled groups for the configured period of time can be viewed here."
-            image={emptyIssueArchive}
-            primaryButton={{
-              text: "Go to Automation Settings",
-              onClick: () => {
-                router.push(`/${workspaceSlug}/projects/${projectId}/settings/automations`);
-              },
-            }}
-          />
-        ) : (
-          <EmptyState
-            title={emptyState.title}
-            description={emptyState.description}
-            image={emptyIssue}
-            primaryButton={
-              emptyState.primaryButton
-                ? {
-                    icon: emptyState.primaryButton.icon,
-                    text: emptyState.primaryButton.text,
-                    onClick: emptyState.primaryButton.onClick,
-                  }
-                : undefined
-            }
-            secondaryButton={emptyState.secondaryButton}
-          />
-        )
-      ) : (
-        <div className="flex h-full w-full items-center justify-center">
-          <Spinner />
-        </div>
-      )}
-    </DragDropContext>
+    <div className="relative w-full h-full flex flex-col overflow-auto">
+      <AppliedFiltersRoot />
+      <div className="w-full h-full">
+        {activeLayout === "list" ? (
+          <ListLayout />
+        ) : activeLayout === "kanban" ? (
+          <KanBanLayout />
+        ) : activeLayout === "calendar" ? (
+          <CalendarLayout />
+        ) : activeLayout === "gantt_chart" ? (
+          <GanttLayout />
+        ) : activeLayout === "spreadsheet" ? (
+          <SpreadsheetLayout />
+        ) : null}
+      </div>
+    </div>
   );
-};
+});

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

@@ -68,23 +68,18 @@ export const AllBoards: React.FC<Props> = ({
   return (
     <>
       <IssuePeekOverview
-        handleMutation={() =>
-          isMyIssue ? mutateMyIssues() : isProfileIssue ? mutateProfileIssues() : mutateIssues()
-        }
+        handleMutation={() => (isMyIssue ? mutateMyIssues() : isProfileIssue ? mutateProfileIssues() : mutateIssues())}
         projectId={myIssueProjectId ? myIssueProjectId : projectId?.toString() ?? ""}
         workspaceSlug={workspaceSlug?.toString() ?? ""}
         readOnly={disableUserActions}
       />
       {groupedIssues ? (
-        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8 bg-custom-background-90">
+        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-5 bg-custom-background-90">
           {Object.keys(groupedIssues).map((singleGroup, index) => {
             const currentState =
-              displayFilters?.group_by === "state"
-                ? states?.find((s) => s.id === singleGroup)
-                : null;
+              displayFilters?.group_by === "state" ? states?.find((s) => s.id === singleGroup) : null;
 
-            if (!displayFilters?.show_empty_groups && groupedIssues[singleGroup].length === 0)
-              return null;
+            if (!displayFilters?.show_empty_groups && groupedIssues[singleGroup].length === 0) return null;
 
             return (
               <SingleBoard
@@ -113,15 +108,13 @@ export const AllBoards: React.FC<Props> = ({
               <div className="space-y-3">
                 {Object.keys(groupedIssues).map((singleGroup, index) => {
                   const currentState =
-                    displayFilters?.group_by === "state"
-                      ? states?.find((s) => s.id === singleGroup)
-                      : null;
+                    displayFilters?.group_by === "state" ? states?.find((s) => s.id === singleGroup) : null;
 
                   if (groupedIssues[singleGroup].length === 0)
                     return (
                       <div
                         key={index}
-                        className="flex items-center justify-between gap-2 rounded bg-custom-background-90 p-2 shadow"
+                        className="flex items-center justify-between gap-2 rounded bg-custom-background-100 p-2 shadow-custom-shadow-2xs"
                       >
                         <div className="flex items-center gap-2">
                           {currentState && (

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

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import issuesService from "services/issues.service";
+import issuesService from "services/issue.service";
 import projectService from "services/project.service";
 // hooks
 import useProjects from "hooks/use-projects";
@@ -20,7 +20,7 @@ import { renderEmoji } from "helpers/emoji.helper";
 // types
 import { IIssueViewProps, IState, TIssuePriorities, TStateGroups } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, WORKSPACE_LABELS } from "constants/fetch-keys";
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
@@ -59,15 +59,6 @@ export const BoardHeader: React.FC<Props> = ({
       : null
   );
 
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug && displayFilters?.group_by === "labels"
-      ? WORKSPACE_LABELS(workspaceSlug.toString())
-      : null,
-    workspaceSlug && displayFilters?.group_by === "labels"
-      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
-      : null
-  );
-
   const { data: members } = useSWR(
     workspaceSlug &&
       projectId &&
@@ -91,10 +82,7 @@ export const BoardHeader: React.FC<Props> = ({
         title = addSpaceIfCamelCase(currentState?.name ?? "");
         break;
       case "labels":
-        title =
-          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find(
-            (label) => label.id === groupTitle
-          )?.name ?? "None";
+        title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
         break;
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
@@ -116,12 +104,7 @@ export const BoardHeader: React.FC<Props> = ({
     switch (displayFilters?.group_by) {
       case "state":
         icon = currentState && (
-          <StateGroupIcon
-            stateGroup={currentState.group}
-            color={currentState.color}
-            height="16px"
-            width="16px"
-          />
+          <StateGroupIcon stateGroup={currentState.group} color={currentState.color} height="16px" width="16px" />
         );
         break;
       case "state_detail.group":
@@ -148,16 +131,8 @@ export const BoardHeader: React.FC<Props> = ({
             : null);
         break;
       case "labels":
-        const labelColor =
-          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find(
-            (label) => label.id === groupTitle
-          )?.color ?? "#000000";
-        icon = (
-          <span
-            className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
-            style={{ backgroundColor: labelColor }}
-          />
-        );
+        const labelColor = issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
+        icon = <span className="h-3.5 w-3.5 flex-shrink-0 rounded-full" style={{ backgroundColor: labelColor }} />;
         break;
       case "assignees":
       case "created_by":
@@ -208,10 +183,7 @@ export const BoardHeader: React.FC<Props> = ({
           }}
         >
           {isCollapsed ? (
-            <Icon
-              iconName="close_fullscreen"
-              className="text-base font-medium text-custom-text-900"
-            />
+            <Icon iconName="close_fullscreen" className="text-base font-medium text-custom-text-900" />
           ) : (
             <Icon iconName="open_in_full" className="text-base font-medium text-custom-text-900" />
           )}

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

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

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

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

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

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

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

@@ -5,15 +5,10 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 
 // react-beautiful-dnd
-import {
-  DraggableProvided,
-  DraggableStateSnapshot,
-  DraggingStyle,
-  NotDraggingStyle,
-} from "react-beautiful-dnd";
+import { DraggableProvided, DraggableStateSnapshot, DraggingStyle, NotDraggingStyle } from "react-beautiful-dnd";
 // services
-import issuesService from "services/issues.service";
-import trackEventServices from "services/track-event.service";
+import issuesService from "services/issue.service";
+import trackEventServices from "services/track_event.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -36,7 +31,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
 // helpers
-import { handleIssuesMutation } from "constants/issue";
+import { handleIssuesMutation } from "helpers/issue.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import {
@@ -56,7 +51,6 @@ type Props = {
   provided: DraggableProvided;
   snapshot: DraggableStateSnapshot;
   issue: IIssue;
-  projectId: string;
   groupTitle?: string;
   index: number;
   editIssue: () => void;
@@ -78,7 +72,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
   provided,
   snapshot,
   issue,
-  projectId,
   index,
   editIssue,
   makeIssueCopy,
@@ -106,7 +99,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
   const { displayFilters, properties, mutateIssues } = viewProps;
 
   const router = useRouter();
-  const { workspaceSlug, cycleId, moduleId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
   const isDraftIssue = router.pathname.includes("draft-issues");
 
@@ -152,22 +145,17 @@ export const SingleBoardIssue: React.FC<Props> = ({
         );
       }
 
-      issuesService
-        .patchIssue(workspaceSlug as string, issue.project, issue.id, formData, user)
-        .then(() => {
-          mutateIssues();
+      issuesService.patchIssue(workspaceSlug as string, issue.project, issue.id, formData, user).then(() => {
+        mutateIssues();
 
-          if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
-          if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
-        });
+        if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
+        if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
+      });
     },
     [displayFilters, workspaceSlug, cycleId, moduleId, groupTitle, index, mutateIssues, user]
   );
 
-  const getStyle = (
-    style: DraggingStyle | NotDraggingStyle | undefined,
-    snapshot: DraggableStateSnapshot
-  ) => {
+  const getStyle = (style: DraggingStyle | NotDraggingStyle | undefined, snapshot: DraggableStateSnapshot) => {
     if (displayFilters?.order_by === "sort_order") return style;
     if (!snapshot.isDragging) return {};
     if (!snapshot.isDropAnimating) return style;
@@ -179,11 +167,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
   };
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -338,9 +323,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
             target="_blank"
             rel="noreferrer noopener"
           >
-            <ContextMenu.Item Icon={ArrowTopRightOnSquareIcon}>
-              Open issue in new tab
-            </ContextMenu.Item>
+            <ContextMenu.Item Icon={ArrowTopRightOnSquareIcon}>Open issue in new tab</ContextMenu.Item>
           </a>
         )}
       </ContextMenu>
@@ -362,9 +345,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
           {!isNotAllowed && (
             <div
               ref={actionSectionRef}
-              className={`z-1 absolute top-1.5 right-1.5 hidden group-hover/card:!flex ${
-                isMenuActive ? "!flex" : ""
-              }`}
+              className={`z-1 absolute top-1.5 right-1.5 hidden group-hover/card:!flex ${isMenuActive ? "!flex" : ""}`}
             >
               {type && !isNotAllowed && (
                 <CustomMenu
@@ -437,11 +418,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
             </button>
           </div>
 
-          <div
-            className={`flex items-center gap-2 text-xs ${
-              isDropdownActive ? "" : "overflow-x-scroll"
-            }`}
-          >
+          <div className={`flex items-center gap-2 text-xs ${isDropdownActive ? "" : "overflow-x-scroll"}`}>
             {properties.priority && (
               <PrioritySelect
                 value={issue.priority}
@@ -454,7 +431,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
               <StateSelect
                 value={issue.state_detail}
                 onChange={handleStateChange}
-                projectId={projectId}
                 hideDropdownArrow
                 disabled={isNotAllowed}
               />
@@ -482,7 +458,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
             {properties.labels && issue.labels.length > 0 && (
               <LabelSelect
                 value={issue.labels}
-                projectId={projectId}
                 onChange={handleLabelChange}
                 labelsDetails={issue.label_details}
                 hideDropdownArrow
@@ -493,7 +468,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
             {properties.assignee && (
               <MembersSelect
                 value={issue.assignees}
-                projectId={projectId}
                 onChange={handleAssigneeChange}
                 membersDetails={issue.assignee_details}
                 hideDropdownArrow

web/components/core/views/calendar-view/calendar-header.tsx

@@ -5,12 +5,25 @@ import { Popover, Transition } from "@headlessui/react";
 // ui
 import { CustomMenu, ToggleSwitch } from "components/ui";
 // icons
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "@heroicons/react/24/outline";
 // helpers
 import {
+  addMonths,
+  addSevenDaysToDate,
   formatDate,
+  getCurrentWeekEndDate,
+  getCurrentWeekStartDate,
   isSameMonth,
   isSameYear,
+  lastDayOfWeek,
+  startOfWeek,
+  subtract7DaysToDate,
+  subtractMonths,
   updateDateWithMonth,
   updateDateWithYear,
 } from "helpers/calendar.helper";
@@ -18,136 +31,190 @@ import {
 import { MONTHS_LIST, YEARS_LIST } from "constants/calendar";
 
 type Props = {
+  isMonthlyView: boolean;
+  setIsMonthlyView: React.Dispatch<React.SetStateAction<boolean>>;
   currentDate: Date;
   setCurrentDate: React.Dispatch<React.SetStateAction<Date>>;
   showWeekEnds: boolean;
   setShowWeekEnds: React.Dispatch<React.SetStateAction<boolean>>;
+  changeDateRange: (startDate: Date, endDate: Date) => void;
 };
 
 export const CalendarHeader: React.FC<Props> = ({
+  setIsMonthlyView,
+  isMonthlyView,
   currentDate,
   setCurrentDate,
   showWeekEnds,
   setShowWeekEnds,
-}) => (
-  <div className="mb-4 flex items-center justify-between">
-    <div className="relative flex h-full w-full items-center justify-start gap-2 text-sm ">
-      <Popover className="flex h-full items-center justify-start rounded-lg">
-        {({ open }) => (
-          <>
-            <Popover.Button>
-              <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-custom-text-100">
-                <span>{formatDate(currentDate, "Month")}</span>{" "}
-                <span>{formatDate(currentDate, "yyyy")}</span>
-              </div>
-            </Popover.Button>
+  changeDateRange,
+}) => {
+  const updateDate = (date: Date) => {
+    setCurrentDate(date);
 
-            <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 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-custom-background-80 shadow-lg">
-                <div className="flex items-center justify-center gap-5 px-2 py-2 text-sm">
-                  {YEARS_LIST.map((year) => (
-                    <button
-                      onClick={() => setCurrentDate(updateDateWithYear(year.label, currentDate))}
-                      className={` ${
-                        isSameYear(year.value, currentDate)
-                          ? "text-sm font-medium text-custom-text-100"
-                          : "text-xs text-custom-text-200 "
-                      } hover:text-sm hover:font-medium hover:text-custom-text-100`}
-                    >
-                      {year.label}
-                    </button>
-                  ))}
-                </div>
-                <div className="grid grid-cols-4  border-t border-custom-border-200 px-2">
-                  {MONTHS_LIST.map((month) => (
-                    <button
-                      onClick={() =>
-                        setCurrentDate(updateDateWithMonth(`${month.value}`, currentDate))
-                      }
-                      className={`px-2 py-2 text-xs text-custom-text-200 hover:font-medium hover:text-custom-text-100 ${
-                        isSameMonth(`${month.value}`, currentDate)
-                          ? "font-medium text-custom-text-100"
-                          : ""
-                      }`}
-                    >
-                      {month.label}
-                    </button>
-                  ))}
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
+    changeDateRange(startOfWeek(date), lastDayOfWeek(date));
+  };
 
-      <div className="flex items-center gap-2">
+  return (
+    <div className="mb-4 flex items-center justify-between">
+      <div className="relative flex h-full w-full items-center justify-start gap-2 text-sm ">
+        <Popover className="flex h-full items-center justify-start rounded-lg">
+          {({ open }) => (
+            <>
+              <Popover.Button>
+                <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-custom-text-100">
+                  <span>{formatDate(currentDate, "Month")}</span>{" "}
+                  <span>{formatDate(currentDate, "yyyy")}</span>
+                </div>
+              </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 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-custom-background-80 shadow-lg">
+                  <div className="flex items-center justify-center gap-5 px-2 py-2 text-sm">
+                    {YEARS_LIST.map((year) => (
+                      <button
+                        onClick={() => updateDate(updateDateWithYear(year.label, currentDate))}
+                        className={` ${
+                          isSameYear(year.value, currentDate)
+                            ? "text-sm font-medium text-custom-text-100"
+                            : "text-xs text-custom-text-200 "
+                        } hover:text-sm hover:font-medium hover:text-custom-text-100`}
+                      >
+                        {year.label}
+                      </button>
+                    ))}
+                  </div>
+                  <div className="grid grid-cols-4  border-t border-custom-border-200 px-2">
+                    {MONTHS_LIST.map((month) => (
+                      <button
+                        onClick={() =>
+                          updateDate(updateDateWithMonth(`${month.value}`, currentDate))
+                        }
+                        className={`px-2 py-2 text-xs text-custom-text-200 hover:font-medium hover:text-custom-text-100 ${
+                          isSameMonth(`${month.value}`, currentDate)
+                            ? "font-medium text-custom-text-100"
+                            : ""
+                        }`}
+                      >
+                        {month.label}
+                      </button>
+                    ))}
+                  </div>
+                </Popover.Panel>
+              </Transition>
+            </>
+          )}
+        </Popover>
+
+        <div className="flex items-center gap-2">
+          <button
+            className="cursor-pointer"
+            onClick={() => {
+              if (isMonthlyView) {
+                updateDate(subtractMonths(currentDate, 1));
+              } else {
+                setCurrentDate(subtract7DaysToDate(currentDate));
+                changeDateRange(
+                  getCurrentWeekStartDate(subtract7DaysToDate(currentDate)),
+                  getCurrentWeekEndDate(subtract7DaysToDate(currentDate))
+                );
+              }
+            }}
+          >
+            <ChevronLeftIcon className="h-4 w-4" />
+          </button>
+          <button
+            className="cursor-pointer"
+            onClick={() => {
+              if (isMonthlyView) {
+                updateDate(addMonths(currentDate, 1));
+              } else {
+                setCurrentDate(addSevenDaysToDate(currentDate));
+                changeDateRange(
+                  getCurrentWeekStartDate(addSevenDaysToDate(currentDate)),
+                  getCurrentWeekEndDate(addSevenDaysToDate(currentDate))
+                );
+              }
+            }}
+          >
+            <ChevronRightIcon className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex w-full items-center justify-end gap-2">
         <button
-          className="cursor-pointer"
+          className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-200 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
           onClick={() => {
-            const previousMonthYear =
-              currentDate.getMonth() === 0
-                ? currentDate.getFullYear() - 1
-                : currentDate.getFullYear();
-            const previousMonthMonth =
-              currentDate.getMonth() === 0 ? 11 : currentDate.getMonth() - 1;
-
-            const previousMonthFirstDate = new Date(previousMonthYear, previousMonthMonth, 1);
-
-            setCurrentDate(previousMonthFirstDate);
+            if (isMonthlyView) {
+              updateDate(new Date());
+            } else {
+              setCurrentDate(new Date());
+              changeDateRange(
+                getCurrentWeekStartDate(new Date()),
+                getCurrentWeekEndDate(new Date())
+              );
+            }
           }}
         >
-          <ChevronLeftIcon className="h-4 w-4" />
+          Today
         </button>
-        <button
-          className="cursor-pointer"
-          onClick={() => {
-            const nextMonthYear =
-              currentDate.getMonth() === 11
-                ? currentDate.getFullYear() + 1
-                : currentDate.getFullYear();
-            const nextMonthMonth = (currentDate.getMonth() + 1) % 12;
 
-            const nextMonthFirstDate = new Date(nextMonthYear, nextMonthMonth, 1);
-
-            setCurrentDate(nextMonthFirstDate);
-          }}
+        <CustomMenu
+          customButton={
+            <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-200 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none ">
+              {isMonthlyView ? "Monthly" : "Weekly"}
+              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+            </div>
+          }
         >
-          <ChevronRightIcon className="h-4 w-4" />
-        </button>
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setIsMonthlyView(true);
+              changeDateRange(startOfWeek(currentDate), lastDayOfWeek(currentDate));
+            }}
+            className="w-52 text-sm text-custom-text-200"
+          >
+            <div className="flex w-full max-w-[260px] items-center justify-between gap-2">
+              <span className="flex items-center gap-2">Monthly View</span>
+              <CheckIcon
+                className={`h-4 w-4 flex-shrink-0 ${isMonthlyView ? "opacity-100" : "opacity-0"}`}
+              />
+            </div>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setIsMonthlyView(false);
+              changeDateRange(
+                getCurrentWeekStartDate(currentDate),
+                getCurrentWeekEndDate(currentDate)
+              );
+            }}
+            className="w-52 text-sm text-custom-text-200"
+          >
+            <div className="flex w-full items-center justify-between gap-2">
+              <span className="flex items-center gap-2">Weekly View</span>
+              <CheckIcon
+                className={`h-4 w-4 flex-shrink-0 ${isMonthlyView ? "opacity-0" : "opacity-100"}`}
+              />
+            </div>
+          </CustomMenu.MenuItem>
+          <div className="mt-1 flex w-52 items-center justify-between border-t border-custom-border-200 py-2 px-1  text-sm text-custom-text-200">
+            <h4>Show weekends</h4>
+            <ToggleSwitch value={showWeekEnds} onChange={() => setShowWeekEnds(!showWeekEnds)} />
+          </div>
+        </CustomMenu>
       </div>
     </div>
-
-    <div className="flex w-full items-center justify-end gap-2">
-      <button
-        className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-200 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
-        onClick={() => setCurrentDate(new Date())}
-      >
-        Today
-      </button>
-
-      <CustomMenu
-        customButton={
-          <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-200 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
-            Options
-            <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-          </div>
-        }
-      >
-        <div className="flex w-52 items-center justify-between px-1 text-sm text-custom-text-200">
-          <h4>Show weekends</h4>
-          <ToggleSwitch value={showWeekEnds} onChange={() => setShowWeekEnds(!showWeekEnds)} />
-        </div>
-      </CustomMenu>
-    </div>
-  </div>
-);
+  );
+};
 
 export default CalendarHeader;

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

@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from "react";
+
 import { useRouter } from "next/router";
+
 import { mutate } from "swr";
+
+// react-beautiful-dnd
 import { DragDropContext, DropResult } from "react-beautiful-dnd";
 // services
-import issuesService from "services/issues.service";
-// hooks
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
+import issuesService from "services/issue.service";
 // components
 import { SingleCalendarDate, CalendarHeader } from "components/core";
 import { IssuePeekOverview } from "components/issues";
@@ -13,13 +15,7 @@ import { IssuePeekOverview } from "components/issues";
 import { Spinner } from "components/ui";
 // helpers
 import { renderDateFormat } from "helpers/date-time.helper";
-import {
-  startOfWeek,
-  lastDayOfWeek,
-  eachDayOfInterval,
-  weekDayInterval,
-  formatDate,
-} from "helpers/calendar.helper";
+import { startOfWeek, lastDayOfWeek, eachDayOfInterval, weekDayInterval, formatDate } from "helpers/calendar.helper";
 // types
 import { ICalendarRange, ICurrentUserResponse, IIssue, UserAuth } from "types";
 // fetch-keys
@@ -46,34 +42,36 @@ export const CalendarView: React.FC<Props> = ({
   userAuth,
 }) => {
   const [showWeekEnds, setShowWeekEnds] = useState(false);
-
-  const { calendarIssues, mutateIssues, params, activeMonthDate, setActiveMonthDate } =
-    useCalendarIssuesView();
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [isMonthlyView, setIsMonthlyView] = useState(true);
 
   const [calendarDates, setCalendarDates] = useState<ICalendarRange>({
-    startDate: startOfWeek(activeMonthDate),
-    endDate: lastDayOfWeek(activeMonthDate),
+    startDate: startOfWeek(currentDate),
+    endDate: lastDayOfWeek(currentDate),
   });
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
-  const currentViewDays = showWeekEnds
-    ? eachDayOfInterval({
-        start: calendarDates.startDate,
-        end: calendarDates.endDate,
-      })
-    : weekDayInterval({
-        start: calendarDates.startDate,
-        end: calendarDates.endDate,
-      });
+  const { calendarIssues, mutateIssues, params, displayFilters, setDisplayFilters } = useCalendarIssuesView();
+
+  const totalDate = eachDayOfInterval({
+    start: calendarDates.startDate,
+    end: calendarDates.endDate,
+  });
+
+  const onlyWeekDays = weekDayInterval({
+    start: calendarDates.startDate,
+    end: calendarDates.endDate,
+  });
+
+  const currentViewDays = showWeekEnds ? totalDate : onlyWeekDays;
 
   const currentViewDaysData = currentViewDays.map((date: Date) => {
     const filterIssue =
       calendarIssues.length > 0
         ? calendarIssues.filter(
-            (issue) =>
-              issue.target_date && renderDateFormat(issue.target_date) === renderDateFormat(date)
+            (issue) => issue.target_date && renderDateFormat(issue.target_date) === renderDateFormat(date)
           )
         : [];
     return {
@@ -140,12 +138,25 @@ export const CalendarView: React.FC<Props> = ({
       .then(() => mutate(fetchKey));
   };
 
-  useEffect(() => {
+  const changeDateRange = (startDate: Date, endDate: Date) => {
     setCalendarDates({
-      startDate: startOfWeek(activeMonthDate),
-      endDate: lastDayOfWeek(activeMonthDate),
+      startDate,
+      endDate,
     });
-  }, [activeMonthDate]);
+
+    setDisplayFilters({
+      calendar_date_range: `${renderDateFormat(startDate)};after,${renderDateFormat(endDate)};before`,
+    });
+  };
+
+  useEffect(() => {
+    if (!displayFilters || displayFilters.calendar_date_range === "")
+      setDisplayFilters({
+        calendar_date_range: `${renderDateFormat(startOfWeek(currentDate))};after,${renderDateFormat(
+          lastDayOfWeek(currentDate)
+        )};before`,
+      });
+  }, [currentDate, displayFilters, setDisplayFilters]);
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
 
@@ -160,15 +171,15 @@ export const CalendarView: React.FC<Props> = ({
       {calendarIssues ? (
         <div className="h-full overflow-y-auto">
           <DragDropContext onDragEnd={onDragEnd}>
-            <div
-              id={`calendar-view-${cycleId ?? moduleId ?? viewId ?? ""}`}
-              className="h-full rounded-lg p-8 text-custom-text-200"
-            >
+            <div className="h-full rounded-lg p-8 text-custom-text-200">
               <CalendarHeader
+                isMonthlyView={isMonthlyView}
+                setIsMonthlyView={setIsMonthlyView}
                 showWeekEnds={showWeekEnds}
                 setShowWeekEnds={setShowWeekEnds}
-                currentDate={activeMonthDate}
-                setCurrentDate={setActiveMonthDate}
+                currentDate={currentDate}
+                setCurrentDate={setCurrentDate}
+                changeDateRange={changeDateRange}
               />
 
               <div
@@ -179,15 +190,26 @@ export const CalendarView: React.FC<Props> = ({
                 {weeks.map((date, index) => (
                   <div
                     key={index}
-                    className={`flex  items-center justify-start gap-2 border-custom-border-200 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200`}
+                    className={`flex  items-center justify-start gap-2 border-custom-border-200 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200 ${
+                      !isMonthlyView
+                        ? showWeekEnds
+                          ? (index + 1) % 7 === 0
+                            ? ""
+                            : "border-r"
+                          : (index + 1) % 5 === 0
+                          ? ""
+                          : "border-r"
+                        : ""
+                    }`}
                   >
-                    <span>{formatDate(date, "eee").substring(0, 3)}</span>
+                    <span>{isMonthlyView ? formatDate(date, "eee").substring(0, 3) : formatDate(date, "eee")}</span>
+                    {!isMonthlyView && <span>{formatDate(date, "d")}</span>}
                   </div>
                 ))}
               </div>
 
               <div
-                className={`grid h-full auto-rows-min ${
+                className={`grid h-full ${isMonthlyView ? "auto-rows-min" : ""} ${
                   showWeekEnds ? "grid-cols-7" : "grid-cols-5"
                 } `}
               >
@@ -198,6 +220,7 @@ export const CalendarView: React.FC<Props> = ({
                     date={date}
                     handleIssueAction={handleIssueAction}
                     addIssueToDate={addIssueToDate}
+                    isMonthlyView={isMonthlyView}
                     showWeekEnds={showWeekEnds}
                     user={user}
                     isNotAllowed={isNotAllowed}

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

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

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

@@ -1,102 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// react hook form
-import { useFormContext } from "react-hook-form";
-
-import { InlineCreateIssueFormWrapper } from "components/core";
-
-// hooks
-import useProjectDetails from "hooks/use-project-details";
-
-// types
-import { IIssue } from "types";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  onSuccess?: (data: IIssue) => Promise<void> | void;
-  prePopulatedData?: Partial<IIssue>;
-  dependencies: any[];
-};
-
-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 InlineInput = () => {
-  const { projectDetails } = useProjectDetails();
-
-  const { register, setFocus } = useFormContext();
-
-  useEffect(() => {
-    setFocus("name");
-  }, [setFocus]);
-
-  return (
-    <>
-      <h4 className="text-sm font-medium leading-5 text-custom-text-400">
-        {projectDetails?.identifier ?? "..."}
-      </h4>
-      <input
-        type="text"
-        autoComplete="off"
-        placeholder="Issue Title"
-        {...register("name", {
-          required: "Issue title is required.",
-        })}
-        className="w-full pr-2 py-2.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
-      />
-    </>
-  );
-};
-
-export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
-  const { isOpen, dependencies } = props;
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  const isSpaceOnRight = useCheckIfThereIsSpaceOnRight(ref, dependencies);
-
-  return (
-    <>
-      <div
-        ref={ref}
-        className={`absolute top-10 transition-all z-20 w-full max-w-[calc(100%-1.25rem)] ${
-          isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
-        } right-2.5`}
-      >
-        <InlineCreateIssueFormWrapper
-          {...props}
-          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"
-        >
-          <InlineInput />
-        </InlineCreateIssueFormWrapper>
-      </div>
-      {/* Added to make any other element as outside click. This will make input also to be outside. */}
-      {isOpen && <div className="w-screen h-screen fixed inset-0 z-10" />}
-    </>
-  );
-};

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

@@ -1,14 +1,10 @@
 import React, { useState } from "react";
 
-// next
-import { useRouter } from "next/router";
-
 // react-beautiful-dnd
 import { Draggable } from "react-beautiful-dnd";
 // component
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 import { SingleCalendarIssue } from "./single-issue";
-import { CalendarInlineCreateIssueForm } from "./inline-create-issue-form";
 // icons
 import { PlusSmallIcon } from "@heroicons/react/24/outline";
 // helper
@@ -24,21 +20,23 @@ type Props = {
     issues: IIssue[];
   };
   addIssueToDate: (date: string) => void;
+  isMonthlyView: boolean;
   showWeekEnds: boolean;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
 };
 
-export const SingleCalendarDate: React.FC<Props> = (props) => {
-  const { handleIssueAction, date, index, showWeekEnds, user, isNotAllowed } = props;
-
-  const router = useRouter();
-  const { cycleId, moduleId } = router.query;
-
+export const SingleCalendarDate: React.FC<Props> = ({
+  handleIssueAction,
+  date,
+  index,
+  addIssueToDate,
+  isMonthlyView,
+  showWeekEnds,
+  user,
+  isNotAllowed,
+}) => {
   const [showAllIssues, setShowAllIssues] = useState(false);
-  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
-
-  const [formPosition, setFormPosition] = useState({ x: 0, y: 0 });
 
   const totalIssues = date.issues.length;
 
@@ -50,6 +48,8 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
           ref={provided.innerRef}
           {...provided.droppableProps}
           className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-custom-border-200 p-2.5 text-left text-sm font-medium hover:bg-custom-background-90 ${
+            isMonthlyView ? "" : "pt-9"
+          } ${
             showWeekEnds
               ? (index + 1) % 7 === 0
                 ? ""
@@ -59,66 +59,48 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
               : "border-r"
           }`}
         >
-          <>
-            <span>{formatDate(new Date(date.date), "d")}</span>
-            {totalIssues > 0 &&
-              date.issues.slice(0, showAllIssues ? totalIssues : 4).map((issue: IIssue, index) => (
-                <Draggable key={issue.id} draggableId={issue.id} index={index}>
-                  {(provided, snapshot) => (
-                    <SingleCalendarIssue
-                      key={index}
-                      index={index}
-                      provided={provided}
-                      snapshot={snapshot}
-                      issue={issue}
-                      projectId={issue.project_detail.id}
-                      handleEditIssue={() => handleIssueAction(issue, "edit")}
-                      handleDeleteIssue={() => handleIssueAction(issue, "delete")}
-                      user={user}
-                      isNotAllowed={isNotAllowed}
-                    />
-                  )}
-                </Draggable>
-              ))}
-
-            <CalendarInlineCreateIssueForm
-              isOpen={isCreateIssueFormOpen}
-              dependencies={[showWeekEnds]}
-              handleClose={() => setIsCreateIssueFormOpen(false)}
-              prePopulatedData={{
-                target_date: date.date,
-                ...(cycleId && { cycle: cycleId.toString() }),
-                ...(moduleId && { module: moduleId.toString() }),
-              }}
-            />
-
-            {totalIssues > 4 && (
-              <button
-                type="button"
-                className="w-min whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 px-1.5 py-1 text-xs"
-                onClick={() => setShowAllIssues((prevData) => !prevData)}
-              >
-                {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
-              </button>
-            )}
-
-            <div
-              className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-custom-background-80 p-1 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100`}
+          {isMonthlyView && <span>{formatDate(new Date(date.date), "d")}</span>}
+          {totalIssues > 0 &&
+            date.issues.slice(0, showAllIssues ? totalIssues : 4).map((issue: IIssue, index) => (
+              <Draggable key={issue.id} draggableId={issue.id} index={index}>
+                {(provided, snapshot) => (
+                  <SingleCalendarIssue
+                    key={index}
+                    index={index}
+                    provided={provided}
+                    snapshot={snapshot}
+                    issue={issue}
+                    handleEditIssue={() => handleIssueAction(issue, "edit")}
+                    handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+                    user={user}
+                    isNotAllowed={isNotAllowed}
+                  />
+                )}
+              </Draggable>
+            ))}
+          {totalIssues > 4 && (
+            <button
+              type="button"
+              className="w-min whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 px-1.5 py-1 text-xs"
+              onClick={() => setShowAllIssues((prevData) => !prevData)}
             >
-              <button
-                onClick={(e) => {
-                  setIsCreateIssueFormOpen(true);
-                  setFormPosition({ x: e.clientX, y: e.clientY });
-                }}
-                className="flex items-center justify-center gap-1 text-center"
-              >
-                <PlusSmallIcon className="h-4 w-4 text-custom-text-200" />
-                Add issue
-              </button>
-            </div>
+              {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
+            </button>
+          )}
 
-            {provided.placeholder}
-          </>
+          <div
+            className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-custom-background-80 p-1 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100`}
+          >
+            <button
+              className="flex items-center justify-center gap-1 text-center"
+              onClick={() => addIssueToDate(date.date)}
+            >
+              <PlusSmallIcon className="h-4 w-4 text-custom-text-200" />
+              Add issue
+            </button>
+          </div>
+
+          {provided.placeholder}
         </div>
       )}
     </StrictModeDroppable>

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

@@ -7,10 +7,9 @@ import { mutate } from "swr";
 // react-beautiful-dnd
 import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
 // services
-import issuesService from "services/issues.service";
-import trackEventServices from "services/track-event.service";
+import issuesService from "services/issue.service";
+import trackEventServices from "services/track_event.service";
 // hooks
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useIssuesProperties from "hooks/use-issue-properties";
 import useToast from "hooks/use-toast";
 // components
@@ -41,7 +40,6 @@ type Props = {
   provided: DraggableProvided;
   snapshot: DraggableStateSnapshot;
   issue: IIssue;
-  projectId: string;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
 };
@@ -53,16 +51,15 @@ export const SingleCalendarIssue: React.FC<Props> = ({
   provided,
   snapshot,
   issue,
-  projectId,
   user,
   isNotAllowed,
 }) => {
   const router = useRouter();
-  const { workspaceSlug, cycleId, moduleId, viewId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
   const { setToastAlert } = useToast();
 
-  const { params } = useCalendarIssuesView();
+  const params = {};
 
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
@@ -119,13 +116,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
       }
 
       issuesService
-        .patchIssue(
-          workspaceSlug as string,
-          projectId as string,
-          issue.id as string,
-          formData,
-          user
-        )
+        .patchIssue(workspaceSlug as string, projectId as string, issue.id as string, formData, user)
         .then(() => {
           mutate(fetchKey);
         })
@@ -137,11 +128,8 @@ export const SingleCalendarIssue: React.FC<Props> = ({
   );
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -230,9 +218,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
     );
   };
 
-  const displayProperties = properties
-    ? Object.values(properties).some((value) => value === true)
-    : false;
+  const displayProperties = properties ? Object.values(properties).some((value) => value === true) : false;
 
   const openPeekOverview = () => {
     const { query } = router;
@@ -312,7 +298,6 @@ export const SingleCalendarIssue: React.FC<Props> = ({
             {properties.state && (
               <StateSelect
                 value={issue.state_detail}
-                projectId={projectId}
                 onChange={handleStateChange}
                 hideDropdownArrow
                 disabled={isNotAllowed}
@@ -337,7 +322,6 @@ export const SingleCalendarIssue: React.FC<Props> = ({
             {properties.labels && issue.labels.length > 0 && (
               <LabelSelect
                 value={issue.labels}
-                projectId={projectId}
                 onChange={handleLabelChange}
                 labelsDetails={issue.label_details}
                 hideDropdownArrow
@@ -349,7 +333,6 @@ export const SingleCalendarIssue: React.FC<Props> = ({
             {properties.assignee && (
               <MembersSelect
                 value={issue.assignees}
-                projectId={projectId}
                 onChange={handleAssigneeChange}
                 membersDetails={issue.assignee_details}
                 hideDropdownArrow

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

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

web/components/core/views/index.ts

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

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

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

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

@@ -7,10 +7,10 @@ import useSWR, { mutate } from "swr";
 // react-beautiful-dnd
 import { DropResult } from "react-beautiful-dnd";
 // services
-import issuesService from "services/issues.service";
-import stateService from "services/state.service";
+import issuesService from "services/issue.service";
+import stateService from "services/project_state.service";
 import modulesService from "services/modules.service";
-import trackEventServices from "services/track-event.service";
+import trackEventServices from "services/track_event.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
@@ -51,10 +51,7 @@ type Props = {
   disableUserActions?: boolean;
 };
 
-export const IssuesView: React.FC<Props> = ({
-  openIssuesListModal,
-  disableUserActions = false,
-}) => {
+export const IssuesView: React.FC<Props> = ({ openIssuesListModal, disableUserActions = false }) => {
   // create issue modal
   const [createIssueModal, setCreateIssueModal] = useState(false);
   const [createViewModal, setCreateViewModal] = useState<any>(null);
@@ -64,9 +61,7 @@ export const IssuesView: React.FC<Props> = ({
 
   // update issue modal
   const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
+  const [issueToEdit, setIssueToEdit] = useState<(IIssue & { actionType: "edit" | "delete" }) | undefined>(undefined);
 
   // delete issue modal
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@@ -81,31 +76,19 @@ export const IssuesView: React.FC<Props> = ({
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
-  const isArchivedIssues = router.pathname?.split("/")?.[4] === "archived-issues";
+  const isDraftIssues = router.asPath.includes("draft-issues");
 
   const { user } = useUserAuth();
 
   const { setToastAlert } = useToast();
 
-  const {
-    groupedByIssues,
-    mutateIssues,
-    displayFilters,
-    filters,
-    isEmpty,
-    setFilters,
-    params,
-    setDisplayFilters,
-  } = useIssuesView();
+  const { groupedByIssues, mutateIssues, displayFilters, filters, isEmpty, setFilters, params, setDisplayFilters } =
+    useIssuesView();
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
   const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
   );
   const states = getStatesList(stateGroups);
 
@@ -162,12 +145,10 @@ export const IssuesView: React.FC<Props> = ({
             // check if dropping in the same group
             if (source.droppableId === destination.droppableId) {
               // check if dropping at beginning
-              if (destination.index === 0)
-                newSortOrder = destinationGroupArray[0].sort_order - 10000;
+              if (destination.index === 0) newSortOrder = destinationGroupArray[0].sort_order - 10000;
               // check if dropping at last
               else if (destination.index === destinationGroupArray.length - 1)
-                newSortOrder =
-                  destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+                newSortOrder = destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
               else {
                 if (destination.index > source.index)
                   newSortOrder =
@@ -182,12 +163,10 @@ export const IssuesView: React.FC<Props> = ({
               }
             } else {
               // check if dropping at beginning
-              if (destination.index === 0)
-                newSortOrder = destinationGroupArray[0].sort_order - 10000;
+              if (destination.index === 0) newSortOrder = destinationGroupArray[0].sort_order - 10000;
               // check if dropping at last
               else if (destination.index === destinationGroupArray.length)
-                newSortOrder =
-                  destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+                newSortOrder = destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
               else
                 newSortOrder =
                   (destinationGroupArray[destination.index - 1].sort_order +
@@ -201,18 +180,14 @@ export const IssuesView: React.FC<Props> = ({
 
         const destinationGroup = destination.droppableId; // destination group id
 
-        if (
-          displayFilters.order_by === "sort_order" ||
-          source.droppableId !== destination.droppableId
-        ) {
+        if (displayFilters.order_by === "sort_order" || source.droppableId !== destination.droppableId) {
           // different group/column;
 
           // source.droppableId !== destination.droppableId -> even if order by is not sort_order,
           // if the issue is moved to a different group, then we will change the group of the
           // dragged item(or issue)
 
-          if (displayFilters.group_by === "priority")
-            draggedItem.priority = destinationGroup as TIssuePriorities;
+          if (displayFilters.group_by === "priority") draggedItem.priority = destinationGroup as TIssuePriorities;
           else if (displayFilters.group_by === "state") {
             draggedItem.state = destinationGroup;
             draggedItem.state_detail = states?.find((s) => s.id === destinationGroup) as IState;
@@ -240,14 +215,8 @@ export const IssuesView: React.FC<Props> = ({
 
             return {
               ...prevData,
-              [sourceGroup]: orderArrayBy(
-                sourceGroupArray,
-                displayFilters.order_by ?? "-created_at"
-              ),
-              [destinationGroup]: orderArrayBy(
-                destinationGroupArray,
-                displayFilters.order_by ?? "-created_at"
-              ),
+              [sourceGroup]: orderArrayBy(sourceGroupArray, displayFilters.order_by ?? "-created_at"),
+              [destinationGroup]: orderArrayBy(destinationGroupArray, displayFilters.order_by ?? "-created_at"),
             };
           },
           false
@@ -267,14 +236,9 @@ export const IssuesView: React.FC<Props> = ({
             user
           )
           .then((response) => {
-            const sourceStateBeforeDrag = states?.find(
-              (state) => state.name === source.droppableId
-            );
+            const sourceStateBeforeDrag = states?.find((state) => state.name === source.droppableId);
 
-            if (
-              sourceStateBeforeDrag?.group !== "completed" &&
-              response?.state_detail?.group === "completed"
-            )
+            if (sourceStateBeforeDrag?.group !== "completed" && response?.state_detail?.group === "completed")
               trackEventServices.trackIssueMarkedAsDoneEvent(
                 {
                   workspaceSlug,
@@ -408,12 +372,7 @@ export const IssuesView: React.FC<Props> = ({
       );
 
       issuesService
-        .removeIssueFromCycle(
-          workspaceSlug as string,
-          projectId as string,
-          cycleId as string,
-          bridgeId
-        )
+        .removeIssueFromCycle(workspaceSlug as string, projectId as string, cycleId as string, bridgeId)
         .then(() => {
           setToastAlert({
             title: "Success",
@@ -451,12 +410,7 @@ export const IssuesView: React.FC<Props> = ({
       );
 
       modulesService
-        .removeIssueFromModule(
-          workspaceSlug as string,
-          projectId as string,
-          moduleId as string,
-          bridgeId
-        )
+        .removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId as string, bridgeId)
         .then(() => {
           setToastAlert({
             title: "Success",
@@ -471,12 +425,9 @@ export const IssuesView: React.FC<Props> = ({
     [displayFilters.group_by, workspaceSlug, projectId, moduleId, params, setToastAlert]
   );
 
-  const nullFilters = Object.keys(filters).filter(
-    (key) => filters[key as keyof IIssueFilterOptions] === null
-  );
+  const nullFilters = Object.keys(filters).filter((key) => filters[key as keyof IIssueFilterOptions] === null);
 
-  const areFiltersApplied =
-    Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length;
+  const areFiltersApplied = Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length;
 
   return (
     <>
@@ -539,6 +490,7 @@ export const IssuesView: React.FC<Props> = ({
                   labels: null,
                   priority: null,
                   state: null,
+                  state_group: null,
                   start_date: null,
                   target_date: null,
                 })
@@ -602,10 +554,7 @@ export const IssuesView: React.FC<Props> = ({
             : undefined,
           secondaryButton:
             cycleId || moduleId ? (
-              <SecondaryButton
-                className="flex items-center gap-1.5"
-                onClick={openIssuesListModal ?? (() => {})}
-              >
+              <SecondaryButton className="flex items-center gap-1.5" onClick={openIssuesListModal ?? (() => {})}>
                 <PlusIcon className="h-4 w-4" />
                 Add an existing issue
               </SecondaryButton>
@@ -626,7 +575,6 @@ export const IssuesView: React.FC<Props> = ({
           params,
           properties,
         }}
-        disableAddIssueOption={isArchivedIssues}
       />
     </>
   );

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

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

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

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

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

@@ -5,8 +5,8 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 
 // services
-import issuesService from "services/issues.service";
-import trackEventServices from "services/track-event.service";
+import issuesService from "services/issue.service";
+import trackEventServices from "services/track_event.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -28,7 +28,7 @@ import {
 import { LayerDiagonalIcon } from "components/icons";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
-import { handleIssuesMutation } from "constants/issue";
+import { handleIssuesMutation } from "helpers/issue.helper";
 // types
 import {
   ICurrentUserResponse,
@@ -41,17 +41,11 @@ import {
   UserAuth,
 } from "types";
 // fetch-keys
-import {
-  CYCLE_DETAILS,
-  MODULE_DETAILS,
-  SUB_ISSUES,
-  USER_PROFILE_PROJECT_SEGREGATION,
-} from "constants/fetch-keys";
+import { CYCLE_DETAILS, MODULE_DETAILS, SUB_ISSUES, USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys";
 
 type Props = {
   type?: string;
   issue: IIssue;
-  projectId: string;
   groupTitle?: string;
   editIssue: () => void;
   index: number;
@@ -70,7 +64,6 @@ type Props = {
 export const SingleListIssue: React.FC<Props> = ({
   type,
   issue,
-  projectId,
   editIssue,
   index,
   makeIssueCopy,
@@ -90,7 +83,7 @@ export const SingleListIssue: React.FC<Props> = ({
   const [contextMenuPosition, setContextMenuPosition] = useState<React.MouseEvent | null>(null);
 
   const router = useRouter();
-  const { workspaceSlug, cycleId, moduleId, userId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, userId } = router.query;
   const isArchivedIssues = router.pathname.includes("archived-issues");
   const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
 
@@ -138,39 +131,24 @@ export const SingleListIssue: React.FC<Props> = ({
         );
       }
 
-      issuesService
-        .patchIssue(workspaceSlug as string, issue.project, issue.id, formData, user)
-        .then(() => {
-          mutateIssues();
+      issuesService.patchIssue(workspaceSlug as string, issue.project, issue.id, formData, user).then(() => {
+        mutateIssues();
 
-          if (userId)
-            mutate<IUserProfileProjectSegregation>(
-              USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString())
-            );
+        if (userId)
+          mutate<IUserProfileProjectSegregation>(
+            USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString())
+          );
 
-          if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
-          if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
-        });
+        if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
+        if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
+      });
     },
-    [
-      displayFilters,
-      workspaceSlug,
-      cycleId,
-      moduleId,
-      userId,
-      groupTitle,
-      index,
-      mutateIssues,
-      user,
-    ]
+    [displayFilters, workspaceSlug, cycleId, moduleId, userId, groupTitle, index, mutateIssues, user]
   );
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -275,8 +253,7 @@ export const SingleListIssue: React.FC<Props> = ({
     });
   };
 
-  const isNotAllowed =
-    userAuth.isGuest || userAuth.isViewer || disableUserActions || isArchivedIssues;
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions || isArchivedIssues;
 
   return (
     <>
@@ -319,16 +296,14 @@ export const SingleListIssue: React.FC<Props> = ({
               Copy issue link
             </ContextMenu.Item>
             <a href={issuePath} target="_blank" rel="noreferrer noopener">
-              <ContextMenu.Item Icon={ArrowTopRightOnSquareIcon}>
-                Open issue in new tab
-              </ContextMenu.Item>
+              <ContextMenu.Item Icon={ArrowTopRightOnSquareIcon}>Open issue in new tab</ContextMenu.Item>
             </a>
           </>
         )}
       </ContextMenu>
 
       <div
-        className="flex items-center justify-between px-4 py-2.5 gap-10 border-b-[0.5px] border-custom-border-100 bg-custom-background-100 last:border-b-0"
+        className="flex items-center justify-between px-4 py-2.5 gap-10 border-b border-custom-border-200 bg-custom-background-100 last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -352,7 +327,6 @@ export const SingleListIssue: React.FC<Props> = ({
                 type="button"
                 className="truncate text-[0.825rem] text-custom-text-100"
                 onClick={() => {
-                  if (isArchivedIssues) return router.push(issuePath);
                   if (!isDraftIssues) openPeekOverview(issue);
                   if (isDraftIssues && handleDraftIssueSelect) handleDraftIssueSelect(issue);
                 }}
@@ -363,11 +337,7 @@ export const SingleListIssue: React.FC<Props> = ({
           </div>
         </div>
 
-        <div
-          className={`flex flex-shrink-0 items-center gap-2 text-xs ${
-            isArchivedIssues ? "opacity-60" : ""
-          }`}
-        >
+        <div className={`flex flex-shrink-0 items-center gap-2 text-xs ${isArchivedIssues ? "opacity-60" : ""}`}>
           {properties.priority && (
             <PrioritySelect
               value={issue.priority}
@@ -379,7 +349,6 @@ export const SingleListIssue: React.FC<Props> = ({
           {properties.state && (
             <StateSelect
               value={issue.state_detail}
-              projectId={projectId}
               onChange={handleStateChange}
               hideDropdownArrow
               disabled={isNotAllowed}
@@ -404,7 +373,6 @@ export const SingleListIssue: React.FC<Props> = ({
           {properties.labels && (
             <LabelSelect
               value={issue.labels}
-              projectId={projectId}
               onChange={handleLabelChange}
               labelsDetails={issue.label_details}
               hideDropdownArrow
@@ -416,7 +384,6 @@ export const SingleListIssue: React.FC<Props> = ({
           {properties.assignee && (
             <MembersSelect
               value={issue.assignees}
-              projectId={projectId}
               onChange={handleAssigneeChange}
               membersDetails={issue.assignee_details}
               hideDropdownArrow

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

@@ -1,6 +1,3 @@
-import { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
@@ -8,12 +5,12 @@ import useSWR from "swr";
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issues.service";
+import issuesService from "services/issue.service";
 import projectService from "services/project.service";
 // hooks
 import useProjects from "hooks/use-projects";
 // components
-import { SingleListIssue, ListInlineCreateIssueForm } from "components/core";
+import { SingleListIssue } from "components/core";
 // ui
 import { Avatar, CustomMenu } from "components/ui";
 // icons
@@ -34,7 +31,7 @@ import {
   UserAuth,
 } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, WORKSPACE_LABELS } from "constants/fetch-keys";
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
@@ -54,65 +51,38 @@ type Props = {
   viewProps: IIssueViewProps;
 };
 
-export const SingleList: React.FC<Props> = (props) => {
-  const {
-    currentState,
-    groupTitle,
-    handleIssueAction,
-    openIssuesListModal,
-    handleDraftIssueAction,
-    handleMyIssueOpen,
-    addIssueToGroup,
-    removeIssue,
-    disableUserActions,
-    disableAddIssueOption = false,
-    user,
-    userAuth,
-    viewProps,
-  } = props;
-
+export const SingleList: React.FC<Props> = ({
+  currentState,
+  groupTitle,
+  addIssueToGroup,
+  handleIssueAction,
+  openIssuesListModal,
+  handleDraftIssueAction,
+  handleMyIssueOpen,
+  removeIssue,
+  disableUserActions,
+  disableAddIssueOption = false,
+  user,
+  userAuth,
+  viewProps,
+}) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
-  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
-
-  const isMyIssuesPage = router.pathname.split("/")[3] === "my-issues";
-  const isProfileIssuesPage = router.pathname.split("/")[2] === "profile";
-  const isDraftIssuesPage = router.pathname.split("/")[4] === "draft-issues";
-
   const isArchivedIssues = router.pathname.includes("archived-issues");
 
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
 
   const { displayFilters, groupedIssues } = viewProps;
 
-  const { data: issueLabels } = useSWR(
-    workspaceSlug && projectId && displayFilters?.group_by === "labels"
-      ? PROJECT_ISSUE_LABELS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && displayFilters?.group_by === "labels"
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug && displayFilters?.group_by === "labels"
-      ? WORKSPACE_LABELS(workspaceSlug.toString())
-      : null,
-    workspaceSlug && displayFilters?.group_by === "labels"
-      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
-      : null
+  const { data: issueLabels } = useSWR<IIssueLabels[]>(
+    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+    workspaceSlug && projectId ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string) : null
   );
 
   const { data: members } = useSWR(
-    workspaceSlug &&
-      projectId &&
-      (displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
-      ? PROJECT_MEMBERS(projectId as string)
-      : null,
-    workspaceSlug &&
-      projectId &&
-      (displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
+    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
+    workspaceSlug && projectId
       ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
       : null
   );
@@ -127,10 +97,7 @@ export const SingleList: React.FC<Props> = (props) => {
         title = addSpaceIfCamelCase(currentState?.name ?? "");
         break;
       case "labels":
-        title =
-          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find(
-            (label) => label.id === groupTitle
-          )?.name ?? "None";
+        title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
         break;
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
@@ -151,12 +118,7 @@ export const SingleList: React.FC<Props> = (props) => {
     switch (displayFilters?.group_by) {
       case "state":
         icon = currentState && (
-          <StateGroupIcon
-            stateGroup={currentState.group}
-            color={currentState.color}
-            height="16px"
-            width="16px"
-          />
+          <StateGroupIcon stateGroup={currentState.group} color={currentState.color} height="16px" width="16px" />
         );
         break;
       case "state_detail.group":
@@ -183,16 +145,8 @@ export const SingleList: React.FC<Props> = (props) => {
             : null);
         break;
       case "labels":
-        const labelColor =
-          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find(
-            (label) => label.id === groupTitle
-          )?.color ?? "#000000";
-        icon = (
-          <span
-            className="h-3 w-3 flex-shrink-0 rounded-full"
-            style={{ backgroundColor: labelColor }}
-          />
-        );
+        const labelColor = issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
+        icon = <span className="h-3 w-3 flex-shrink-0 rounded-full" style={{ backgroundColor: labelColor }} />;
         break;
       case "assignees":
       case "created_by":
@@ -214,9 +168,7 @@ export const SingleList: React.FC<Props> = (props) => {
           <div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
             <Disclosure.Button>
               <div className="flex items-center gap-x-3">
-                {displayFilters?.group_by !== null && (
-                  <div className="flex items-center">{getGroupIcon()}</div>
-                )}
+                {displayFilters?.group_by !== null && <div className="flex items-center">{getGroupIcon()}</div>}
                 {displayFilters?.group_by !== null ? (
                   <h2
                     className={`text-sm font-semibold leading-6 text-custom-text-100 ${
@@ -239,12 +191,8 @@ export const SingleList: React.FC<Props> = (props) => {
               !disableAddIssueOption && (
                 <button
                   type="button"
-                  className="p-1 text-custom-text-200 hover:bg-custom-background-80"
-                  onClick={() => {
-                    if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
-                      addIssueToGroup();
-                    } else setIsCreateIssueFormOpen(true);
-                  }}
+                  className="p-1  text-custom-text-200 hover:bg-custom-background-80"
+                  onClick={addIssueToGroup}
                 >
                   <PlusIcon className="h-4 w-4" />
                 </button>
@@ -261,13 +209,9 @@ export const SingleList: React.FC<Props> = (props) => {
                 position="right"
                 noBorder
               >
-                <CustomMenu.MenuItem onClick={() => setIsCreateIssueFormOpen(true)}>
-                  Create new
-                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem onClick={addIssueToGroup}>Create new</CustomMenu.MenuItem>
                 {openIssuesListModal && (
-                  <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                    Add an existing issue
-                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
                 )}
               </CustomMenu>
             )}
@@ -289,26 +233,20 @@ export const SingleList: React.FC<Props> = (props) => {
                       key={issue.id}
                       type={type}
                       issue={issue}
-                      projectId={issue.project_detail.id}
                       groupTitle={groupTitle}
                       index={index}
                       editIssue={() => handleIssueAction(issue, "edit")}
                       makeIssueCopy={() => handleIssueAction(issue, "copy")}
                       handleDeleteIssue={() => handleIssueAction(issue, "delete")}
                       handleDraftIssueSelect={
-                        handleDraftIssueAction
-                          ? () => handleDraftIssueAction(issue, "edit")
-                          : undefined
+                        handleDraftIssueAction ? () => handleDraftIssueAction(issue, "edit") : undefined
                       }
                       handleDraftIssueDelete={
-                        handleDraftIssueAction
-                          ? () => handleDraftIssueAction(issue, "delete")
-                          : undefined
+                        handleDraftIssueAction ? () => handleDraftIssueAction(issue, "delete") : undefined
                       }
                       handleMyIssueOpen={handleMyIssueOpen}
                       removeIssue={() => {
-                        if (removeIssue !== null && issue.bridge_id)
-                          removeIssue(issue.bridge_id, issue.id);
+                        if (removeIssue !== null && issue.bridge_id) removeIssue(issue.bridge_id, issue.id);
                       }}
                       disableUserActions={disableUserActions}
                       user={user}
@@ -317,41 +255,11 @@ export const SingleList: React.FC<Props> = (props) => {
                     />
                   ))
                 ) : (
-                  <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">
-                    No issues.
-                  </p>
+                  <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">No issues.</p>
                 )
               ) : (
                 <div className="flex h-full w-full items-center justify-center">Loading...</div>
               )}
-
-              <ListInlineCreateIssueForm
-                isOpen={isCreateIssueFormOpen && !disableAddIssueOption}
-                handleClose={() => setIsCreateIssueFormOpen(false)}
-                prePopulatedData={{
-                  ...(cycleId && { cycle: cycleId.toString() }),
-                  ...(moduleId && { module: moduleId.toString() }),
-                  [displayFilters?.group_by!]: groupTitle,
-                }}
-              />
-
-              {!disableAddIssueOption && !isCreateIssueFormOpen && (
-                // TODO: add border here
-                <div className="w-full bg-custom-background-100 px-6 py-3 border-b border-custom-border-100">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
-                        addIssueToGroup();
-                      } else setIsCreateIssueFormOpen(true);
-                    }}
-                    className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
-                  >
-                    <PlusIcon className="h-4 w-4" />
-                    <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
-                  </button>
-                </div>
-              )}
             </Disclosure.Panel>
           </Transition>
         </div>

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

@@ -1,72 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// components
-import { MembersSelect } from "components/project";
-// services
-import trackEventServices from "services/track-event.service";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const AssigneeColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const router = useRouter();
-
-  const { workspaceSlug } = router.query;
-
-  const handleAssigneeChange = (data: any) => {
-    const newData = issue.assignees ?? [];
-
-    if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
-    else newData.push(data);
-
-    partialUpdateIssue({ assignees_list: data }, issue);
-
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
-      {
-        workspaceSlug,
-        workspaceId: issue.workspace,
-        projectId: issue.project_detail.id,
-        projectIdentifier: issue.project_detail.identifier,
-        projectName: issue.project_detail.name,
-        issueId: issue.id,
-      },
-      "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
-      user
-    );
-  };
-
-  return (
-    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-        {properties.assignee && (
-          <MembersSelect
-            value={issue.assignees}
-            projectId={projectId}
-            onChange={handleAssigneeChange}
-            membersDetails={issue.assignee_details}
-            buttonClassName="!p-0 !rounded-none !shadow-none !border-0"
-            hideDropdownArrow
-            disabled={isNotAllowed}
-          />
-        )}
-      </span>
-    </div>
-  );
-};

web/components/core/views/spreadsheet-view/assignee-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-assignee-column";
-export * from "./assignee-column";

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

@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { AssigneeColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <AssigneeColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetAssigneeColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};

web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-// helper
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const CreatedOnColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => (
-  <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-      {properties.created_on && (
-        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          {renderLongDetailDateFormat(issue.created_at)}
-        </div>
-      )}
-    </span>
-  </div>
-);

web/components/core/views/spreadsheet-view/created-on-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-created-on-column";
-export * from "./created-on-column";

web/components/core/views/spreadsheet-view/created-on-column/spreadsheet-created-on-column.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { CreatedOnColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <CreatedOnColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetCreatedOnColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};

web/components/core/views/spreadsheet-view/due-date-column/due-date-column.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-
-// components
-import { ViewDueDateSelect } from "components/issues";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const DueDateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => (
-  <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-      {properties.due_date && (
-        <ViewDueDateSelect
-          issue={issue}
-          partialUpdateIssue={partialUpdateIssue}
-          noBorder
-          user={user}
-          isNotAllowed={isNotAllowed}
-        />
-      )}
-    </span>
-  </div>
-);

web/components/core/views/spreadsheet-view/due-date-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-due-date-column";
-export * from "./due-date-column";

web/components/core/views/spreadsheet-view/due-date-column/spreadsheet-due-date-column.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { DueDateColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetDueDateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <DueDateColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetDueDateColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};

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

@@ -1,38 +0,0 @@
-import React from "react";
-
-// components
-import { ViewEstimateSelect } from "components/issues";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const EstimateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => (
-  <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-      {properties.estimate && (
-        <ViewEstimateSelect
-          issue={issue}
-          partialUpdateIssue={partialUpdateIssue}
-          position="left"
-          user={user}
-          isNotAllowed={isNotAllowed}
-        />
-      )}
-    </span>
-  </div>
-);

web/components/core/views/spreadsheet-view/estimate-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-estimate-column";
-export * from "./estimate-column";

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

@@ -1,62 +0,0 @@
-import React from "react";
-
-// components
-import { EstimateColumn } from "components/core";
-// hooks
-import useSubIssue from "hooks/use-sub-issue";
-// types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
-
-type Props = {
-  issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
-  expandedIssues: string[];
-  properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SpreadsheetEstimateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  expandedIssues,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const isExpanded = expandedIssues.indexOf(issue.id) > -1;
-
-  const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
-
-  return (
-    <div>
-      <EstimateColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
-
-      {isExpanded &&
-        !isLoading &&
-        subIssues &&
-        subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
-          <SpreadsheetEstimateColumn
-            key={subIssue.id}
-            issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
-            expandedIssues={expandedIssues}
-            properties={properties}
-            user={user}
-            isNotAllowed={isNotAllowed}
-          />
-        ))}
-    </div>
-  );
-};

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

@@ -1,13 +1,4 @@
-export * from "./assignee-column";
-export * from "./created-on-column";
-export * from "./due-date-column";
-export * from "./estimate-column";
-export * from "./issue-column";
-export * from "./label-column";
-export * from "./priority-column";
-export * from "./start-date-column";
-export * from "./state-column";
-export * from "./updated-on-column";
 export * from "./spreadsheet-view";
-export * from "./issue-column/issue-column";
-export * from "./issue-column/spreadsheet-issue-column";
+export * from "./single-issue";
+export * from "./spreadsheet-columns";
+export * from "./spreadsheet-issues";

web/components/core/views/spreadsheet-view/issue-column/index.ts

@@ -1,2 +0,0 @@
-export * from "./spreadsheet-issue-column";
-export * from "./issue-column";