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

.github/workflows/build-branch.yml

@@ -2,11 +2,6 @@ name: Branch Build
 
 on:
   workflow_dispatch:
-    inputs:
-      branch_name:
-        description: "Branch Name"
-        required: true
-        default: "preview"
   push:
     branches:
       - master
@@ -16,49 +11,71 @@ on:
     types: [released, prereleased]
 
 env:
-  TARGET_BRANCH: ${{ inputs.branch_name || github.ref_name || github.event.release.target_commitish }}
+  TARGET_BRANCH: ${{ github.ref_name || github.event.release.target_commitish }}
 
 jobs:
   branch_build_setup:
     name: Build-Push Web/Space/API/Proxy Docker Image
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
     outputs:
-      gh_branch_name: ${{ env.TARGET_BRANCH }}
+      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }} 
+      gh_buildx_driver: ${{ steps.set_env_variables.outputs.BUILDX_DRIVER }}
+      gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
+      gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
+      gh_buildx_endpoint: ${{ steps.set_env_variables.outputs.BUILDX_ENDPOINT }}
+
+    steps:
+      - id: set_env_variables
+        name: Set Environment Variables
+        run: |
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
+            echo "BUILDX_DRIVER=cloud" >> $GITHUB_OUTPUT
+            echo "BUILDX_VERSION=lab:latest" >> $GITHUB_OUTPUT
+            echo "BUILDX_PLATFORMS=linux/amd64,linux/arm64" >> $GITHUB_OUTPUT
+            echo "BUILDX_ENDPOINT=makeplane/plane-dev" >> $GITHUB_OUTPUT
+          else
+            echo "BUILDX_DRIVER=docker-container" >> $GITHUB_OUTPUT
+            echo "BUILDX_VERSION=latest" >> $GITHUB_OUTPUT
+            echo "BUILDX_PLATFORMS=linux/amd64" >> $GITHUB_OUTPUT
+            echo "BUILDX_ENDPOINT=" >> $GITHUB_OUTPUT
+          fi
+          echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
 
   branch_build_push_frontend:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
       FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
+      BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
+      BUILDX_PLATFORMS: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
+      BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
     steps:
       - name: Set Frontend Docker Tag
         run: |
-          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ github.event.release.tag_name }}
-          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
+          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:stable
           else
             TAG=${{ env.FRONTEND_TAG }}
           fi
           echo "FRONTEND_TAG=${TAG}" >> $GITHUB_ENV
-      - name: Docker Setup QEMU
-        uses: docker/setup-qemu-action@v3.0.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
-        with:
-          platforms: linux/amd64,linux/arm64
-          buildkitd-flags: "--allow-insecure-entitlement security.insecure"
 
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: ${{ env.BUILDX_DRIVER }}
+          version: ${{ env.BUILDX_VERSION }}
+          endpoint: ${{ env.BUILDX_ENDPOINT }}
+
       - name: Check out the repo
         uses: actions/checkout@v4.1.1
 
@@ -67,7 +84,7 @@ jobs:
         with:
           context: .
           file: ./web/Dockerfile.web
-          platforms: linux/amd64
+          platforms: ${{ env.BUILDX_PLATFORMS }}
           tags: ${{ env.FRONTEND_TAG }}
           push: true
         env:
@@ -80,33 +97,36 @@ jobs:
     needs: [branch_build_setup]
     env:
       SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
+      BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
+      BUILDX_PLATFORMS: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
+      BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
     steps:
       - name: Set Space Docker Tag
         run: |
-          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ github.event.release.tag_name }}
-          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
+          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:stable
           else
             TAG=${{ env.SPACE_TAG }}
           fi
           echo "SPACE_TAG=${TAG}" >> $GITHUB_ENV
 
-      - name: Docker Setup QEMU
-        uses: docker/setup-qemu-action@v3.0.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
-        with:
-          platforms: linux/amd64,linux/arm64
-          buildkitd-flags: "--allow-insecure-entitlement security.insecure"
-
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: ${{ env.BUILDX_DRIVER }}
+          version: ${{ env.BUILDX_VERSION }}
+          endpoint: ${{ env.BUILDX_ENDPOINT }}
+
       - name: Check out the repo
         uses: actions/checkout@v4.1.1
 
@@ -115,7 +135,7 @@ jobs:
         with:
           context: .
           file: ./space/Dockerfile.space
-          platforms: linux/amd64
+          platforms: ${{ env.BUILDX_PLATFORMS }}
           tags: ${{ env.SPACE_TAG }}
           push: true
         env:
@@ -128,33 +148,36 @@ jobs:
     needs: [branch_build_setup]
     env:
       BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
+      BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
+      BUILDX_PLATFORMS: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
+      BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
     steps:
       - name: Set Backend Docker Tag
         run: |
-          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ github.event.release.tag_name }}
-          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
+          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:stable
           else
             TAG=${{ env.BACKEND_TAG }}
           fi
           echo "BACKEND_TAG=${TAG}" >> $GITHUB_ENV
 
-      - name: Docker Setup QEMU
-        uses: docker/setup-qemu-action@v3.0.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
-        with:
-          platforms: linux/amd64,linux/arm64
-          buildkitd-flags: "--allow-insecure-entitlement security.insecure"
-
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: ${{ env.BUILDX_DRIVER }}
+          version: ${{ env.BUILDX_VERSION }}
+          endpoint: ${{ env.BUILDX_ENDPOINT }}
+
       - name: Check out the repo
         uses: actions/checkout@v4.1.1
 
@@ -163,7 +186,7 @@ jobs:
         with:
           context: ./apiserver
           file: ./apiserver/Dockerfile.api
-          platforms: linux/amd64
+          platforms: ${{ env.BUILDX_PLATFORMS }}
           push: true
           tags: ${{ env.BACKEND_TAG }}
         env:
@@ -171,38 +194,42 @@ jobs:
           DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
           DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
 
+
   branch_build_push_proxy:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
       PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
+      BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
+      BUILDX_PLATFORMS: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
+      BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
     steps:
       - name: Set Proxy Docker Tag
         run: |
-          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
+          if [ "${{ env.TARGET_BRANCH }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ github.event.release.tag_name }}
-          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
+          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
             TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:stable
           else
             TAG=${{ env.PROXY_TAG }}
           fi
           echo "PROXY_TAG=${TAG}" >> $GITHUB_ENV
 
-      - name: Docker Setup QEMU
-        uses: docker/setup-qemu-action@v3.0.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.0.0
-        with:
-          platforms: linux/amd64,linux/arm64
-          buildkitd-flags: "--allow-insecure-entitlement security.insecure"
-
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.0.0
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: ${{ env.BUILDX_DRIVER }}
+          version: ${{ env.BUILDX_VERSION }}
+          endpoint: ${{ env.BUILDX_ENDPOINT }}
+
       - name: Check out the repo
         uses: actions/checkout@v4.1.1
 
@@ -211,10 +238,11 @@ jobs:
         with:
           context: ./nginx
           file: ./nginx/Dockerfile
-          platforms: linux/amd64
+          platforms: ${{ env.BUILDX_PLATFORMS }}
           tags: ${{ env.PROXY_TAG }}
           push: true
         env:
           DOCKER_BUILDKIT: 1
           DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
           DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+

apiserver/plane/api/views/base.py

@@ -1,6 +1,8 @@
 # Python imports
 import zoneinfo
 import json
+from urllib.parse import urlparse
+
 
 # Django imports
 from django.conf import settings
@@ -51,6 +53,11 @@ class WebhookMixin:
             and self.request.method in ["POST", "PATCH", "DELETE"]
             and response.status_code in [200, 201, 204]
         ):
+            url = request.build_absolute_uri()
+            parsed_url = urlparse(url)
+            # Extract the scheme and netloc
+            scheme = parsed_url.scheme
+            netloc = parsed_url.netloc
             # Push the object to delay
             send_webhook.delay(
                 event=self.webhook_event,
@@ -59,6 +66,7 @@ class WebhookMixin:
                 action=self.request.method,
                 slug=self.workspace_slug,
                 bulk=self.bulk,
+                current_site=f"{scheme}://{netloc}",
             )
 
         return response

apiserver/plane/app/views/auth_extended.py

@@ -401,8 +401,8 @@ class EmailCheckEndpoint(BaseAPIView):
                 email=email,
                 user_agent=request.META.get("HTTP_USER_AGENT"),
                 ip=request.META.get("REMOTE_ADDR"),
-                event_name="SIGN_IN",
+                event_name="Sign up",
-                medium="MAGIC_LINK",
+                medium="Magic link",
                 first_time=True,
             )
             key, token, current_attempt = generate_magic_token(email=email)
@@ -438,8 +438,8 @@ class EmailCheckEndpoint(BaseAPIView):
                     email=email,
                     user_agent=request.META.get("HTTP_USER_AGENT"),
                     ip=request.META.get("REMOTE_ADDR"),
-                    event_name="SIGN_IN",
+                    event_name="Sign in",
-                    medium="MAGIC_LINK",
+                    medium="Magic link",
                     first_time=False,
                 )
 
@@ -468,8 +468,8 @@ class EmailCheckEndpoint(BaseAPIView):
                     email=email,
                     user_agent=request.META.get("HTTP_USER_AGENT"),
                     ip=request.META.get("REMOTE_ADDR"),
-                    event_name="SIGN_IN",
+                    event_name="Sign in",
-                    medium="EMAIL",
+                    medium="Email",
                     first_time=False,
                 )
 

apiserver/plane/app/views/authentication.py

@@ -274,8 +274,8 @@ class SignInEndpoint(BaseAPIView):
             email=email,
             user_agent=request.META.get("HTTP_USER_AGENT"),
             ip=request.META.get("REMOTE_ADDR"),
-            event_name="SIGN_IN",
+            event_name="Sign in",
-            medium="EMAIL",
+            medium="Email",
             first_time=False,
         )
 
@@ -349,8 +349,8 @@ class MagicSignInEndpoint(BaseAPIView):
                     email=email,
                     user_agent=request.META.get("HTTP_USER_AGENT"),
                     ip=request.META.get("REMOTE_ADDR"),
-                    event_name="SIGN_IN",
+                    event_name="Sign in",
-                    medium="MAGIC_LINK",
+                    medium="Magic link",
                     first_time=False,
                 )
 

apiserver/plane/app/views/base.py

@@ -64,6 +64,7 @@ class WebhookMixin:
                 action=self.request.method,
                 slug=self.workspace_slug,
                 bulk=self.bulk,
+                current_site=request.META.get("HTTP_ORIGIN"),
             )
 
         return response

apiserver/plane/app/views/cycle.py

@@ -20,6 +20,7 @@ from django.core import serializers
 from django.utils import timezone
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
+from django.core.serializers.json import DjangoJSONEncoder
 
 # Third party imports
 from rest_framework.response import Response
@@ -312,6 +313,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     "labels": label_distribution,
                     "completion_chart": {},
                 }
+
                 if data[0]["start_date"] and data[0]["end_date"]:
                     data[0]["distribution"][
                         "completion_chart"
@@ -840,10 +842,230 @@ class TransferCycleIssueEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        new_cycle = Cycle.objects.get(
+        new_cycle = Cycle.objects.filter(
             workspace__slug=slug, project_id=project_id, pk=new_cycle_id
+        ).first()
+
+        old_cycle = (
+            Cycle.objects.filter(
+                workspace__slug=slug, project_id=project_id, pk=cycle_id
+            )
+            .annotate(
+                total_issues=Count(
+                    "issue_cycle",
+                    filter=Q(
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                completed_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                cancelled_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="cancelled",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                started_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                unstarted_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="unstarted",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                backlog_issues=Count(
+                    "issue_cycle__issue__state__group",
+                    filter=Q(
+                        issue_cycle__issue__state__group="backlog",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                total_estimates=Sum("issue_cycle__issue__estimate_point")
+            )
+            .annotate(
+                completed_estimates=Sum(
+                    "issue_cycle__issue__estimate_point",
+                    filter=Q(
+                        issue_cycle__issue__state__group="completed",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                started_estimates=Sum(
+                    "issue_cycle__issue__estimate_point",
+                    filter=Q(
+                        issue_cycle__issue__state__group="started",
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                    ),
+                )
+            )
         )
 
+        # Pass the new_cycle queryset to burndown_plot
+        completion_chart = burndown_plot(
+            queryset=old_cycle.first(),
+            slug=slug,
+            project_id=project_id,
+            cycle_id=cycle_id,
+        )
+
+        assignee_distribution = (
+            Issue.objects.filter(
+                issue_cycle__cycle_id=cycle_id,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(display_name=F("assignees__display_name"))
+            .annotate(assignee_id=F("assignees__id"))
+            .annotate(avatar=F("assignees__avatar"))
+            .values("display_name", "assignee_id", "avatar")
+            .annotate(
+                total_issues=Count(
+                    "id",
+                    filter=Q(archived_at__isnull=True, is_draft=False),
+                ),
+            )
+            .annotate(
+                completed_issues=Count(
+                    "id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .order_by("display_name")
+        )
+
+        label_distribution = (
+            Issue.objects.filter(
+                issue_cycle__cycle_id=cycle_id,
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .annotate(label_name=F("labels__name"))
+            .annotate(color=F("labels__color"))
+            .annotate(label_id=F("labels__id"))
+            .values("label_name", "color", "label_id")
+            .annotate(
+                total_issues=Count(
+                    "id",
+                    filter=Q(archived_at__isnull=True, is_draft=False),
+                )
+            )
+            .annotate(
+                completed_issues=Count(
+                    "id",
+                    filter=Q(
+                        completed_at__isnull=False,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .annotate(
+                pending_issues=Count(
+                    "id",
+                    filter=Q(
+                        completed_at__isnull=True,
+                        archived_at__isnull=True,
+                        is_draft=False,
+                    ),
+                )
+            )
+            .order_by("label_name")
+        )
+
+        assignee_distribution_data = [
+            {
+                "display_name": item["display_name"],
+                "assignee_id": str(item["assignee_id"]) if item["assignee_id"] else None,
+                "avatar": item["avatar"],
+                "total_issues": item["total_issues"],
+                "completed_issues": item["completed_issues"],
+                "pending_issues": item["pending_issues"],
+            }
+            for item in assignee_distribution
+        ]
+
+        label_distribution_data = [
+            {
+                "label_name": item["label_name"],
+                "color": item["color"],
+                "label_id": str(item["label_id"]) if item["label_id"] else None,
+                "total_issues": item["total_issues"],
+                "completed_issues": item["completed_issues"],
+                "pending_issues": item["pending_issues"],
+            }
+            for item in label_distribution
+        ]
+
+        current_cycle = Cycle.objects.filter(
+            workspace__slug=slug, project_id=project_id, pk=cycle_id
+        ).first()
+
+        current_cycle.progress_snapshot = {
+            "total_issues": old_cycle.first().total_issues,
+            "completed_issues": old_cycle.first().completed_issues,
+            "cancelled_issues": old_cycle.first().cancelled_issues,
+            "started_issues": old_cycle.first().started_issues,
+            "unstarted_issues": old_cycle.first().unstarted_issues,
+            "backlog_issues": old_cycle.first().backlog_issues,
+            "total_estimates": old_cycle.first().total_estimates,
+            "completed_estimates": old_cycle.first().completed_estimates,
+            "started_estimates": old_cycle.first().started_estimates,
+            "distribution":{
+                "labels": label_distribution_data,
+                "assignees": assignee_distribution_data,
+                "completion_chart": completion_chart,
+            },
+        }
+        current_cycle.save(update_fields=["progress_snapshot"])
+
         if (
             new_cycle.end_date is not None
             and new_cycle.end_date < timezone.now().date()

apiserver/plane/app/views/issue.py

@@ -1668,15 +1668,9 @@ class IssueDraftViewSet(BaseViewSet):
 
     def get_queryset(self):
         return (
-            Issue.objects.annotate(
+            Issue.objects.filter(
-                sub_issues_count=Issue.issue_objects.filter(
+                project_id=self.kwargs.get("project_id")
-                    parent=OuterRef("id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
             )
-            .filter(project_id=self.kwargs.get("project_id"))
             .filter(workspace__slug=self.kwargs.get("slug"))
             .filter(is_draft=True)
             .select_related("workspace", "project", "state", "parent")
@@ -1710,7 +1704,7 @@ class IssueDraftViewSet(BaseViewSet):
                 .annotate(count=Func(F("id"), function="Count"))
                 .values("count")
             )
-        )
+        ).distinct()
 
     @method_decorator(gzip_page)
     def list(self, request, slug, project_id):
@@ -1832,7 +1826,10 @@ class IssueDraftViewSet(BaseViewSet):
                 notification=True,
                 origin=request.META.get("HTTP_ORIGIN"),
             )
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
+            issue = (
+                self.get_queryset().filter(pk=serializer.data["id"]).first()
+            )
+            return Response(IssueSerializer(issue).data, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def partial_update(self, request, slug, project_id, pk):
@@ -1868,10 +1865,13 @@ class IssueDraftViewSet(BaseViewSet):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def retrieve(self, request, slug, project_id, pk=None):
-        issue = Issue.objects.get(
+        issue = self.get_queryset().filter(pk=pk).first()
-            workspace__slug=slug, project_id=project_id, pk=pk, is_draft=True
+        return Response(
+            IssueSerializer(
+                issue, fields=self.fields, expand=self.expand
+            ).data,
+            status=status.HTTP_200_OK,
         )
-        return Response(IssueSerializer(issue).data, status=status.HTTP_200_OK)
 
     def destroy(self, request, slug, project_id, pk=None):
         issue = Issue.objects.get(

apiserver/plane/app/views/module.py

@@ -334,7 +334,7 @@ class ModuleIssueViewSet(WebhookMixin, BaseViewSet):
 
     def get_queryset(self):
         return (
-            Issue.objects.filter(
+            Issue.issue_objects.filter(
                 project_id=self.kwargs.get("project_id"),
                 workspace__slug=self.kwargs.get("slug"),
                 issue_module__module_id=self.kwargs.get("module_id")

apiserver/plane/app/views/oauth.py

@@ -296,7 +296,7 @@ class OauthEndpoint(BaseAPIView):
                 email=email,
                 user_agent=request.META.get("HTTP_USER_AGENT"),
                 ip=request.META.get("REMOTE_ADDR"),
-                event_name="SIGN_IN",
+                event_name="Sign in",
                 medium=medium.upper(),
                 first_time=False,
             )
@@ -427,7 +427,7 @@ class OauthEndpoint(BaseAPIView):
                 email=email,
                 user_agent=request.META.get("HTTP_USER_AGENT"),
                 ip=request.META.get("REMOTE_ADDR"),
-                event_name="SIGN_IN",
+                event_name="Sign up",
                 medium=medium.upper(),
                 first_time=True,
             )

apiserver/plane/bgtasks/email_notification_task.py

@@ -1,5 +1,6 @@
-import json
 from datetime import datetime
+from bs4 import BeautifulSoup
+
 
 # Third party imports
 from celery import shared_task
@@ -9,7 +10,6 @@ from django.utils import timezone
 from django.core.mail import EmailMultiAlternatives, get_connection
 from django.template.loader import render_to_string
 from django.utils.html import strip_tags
-from django.conf import settings
 
 # Module imports
 from plane.db.models import EmailNotificationLog, User, Issue
@@ -40,7 +40,7 @@ def stack_email_notification():
     processed_notifications = []
     # Loop through all the issues to create the emails
     for receiver_id in receivers:
-        # Notifcation triggered for the receiver
+        # Notification triggered for the receiver
         receiver_notifications = [
             notification
             for notification in email_notifications
@@ -124,119 +124,153 @@ def create_payload(notification_data):
 
     return data
 
+def process_mention(mention_component):
+    soup = BeautifulSoup(mention_component, 'html.parser')
+    mentions = soup.find_all('mention-component')
+    for mention in mentions:
+        user_id = mention['id']
+        user = User.objects.get(pk=user_id)
+        user_name = user.display_name
+        highlighted_name = f"@{user_name}"
+        mention.replace_with(highlighted_name)
+    return str(soup)
+
+def process_html_content(content):
+    processed_content_list = []
+    for html_content in content:
+        processed_content = process_mention(html_content)
+        processed_content_list.append(processed_content)  
+    return processed_content_list
 
 @shared_task
 def send_email_notification(
     issue_id, notification_data, receiver_id, email_notification_ids
 ):
-    ri = redis_instance()
-    base_api = (ri.get(str(issue_id)).decode())
-    data = create_payload(notification_data=notification_data)
-
-    # Get email configurations
-    (
-        EMAIL_HOST,
-        EMAIL_HOST_USER,
-        EMAIL_HOST_PASSWORD,
-        EMAIL_PORT,
-        EMAIL_USE_TLS,
-        EMAIL_FROM,
-    ) = get_email_configuration()
-
-    receiver = User.objects.get(pk=receiver_id)
-    issue = Issue.objects.get(pk=issue_id)
-    template_data = []
-    total_changes = 0
-    comments = []
-    actors_involved = []
-    for actor_id, changes in data.items():
-        actor = User.objects.get(pk=actor_id)
-        total_changes = total_changes + len(changes)
-        comment = changes.pop("comment", False)
-        actors_involved.append(actor_id)
-        if comment:
-            comments.append(
-                {
-                    "actor_comments": comment,
-                    "actor_detail": {
-                        "avatar_url": actor.avatar,
-                        "first_name": actor.first_name,
-                        "last_name": actor.last_name,
-                    },
-                }
-            )
-        activity_time = changes.pop("activity_time")
-        # Parse the input string into a datetime object
-        formatted_time = datetime.strptime(activity_time, "%Y-%m-%d %H:%M:%S").strftime("%H:%M %p")
-
-        if changes:
-            template_data.append(
-                {
-                    "actor_detail": {
-                        "avatar_url": actor.avatar,
-                        "first_name": actor.first_name,
-                        "last_name": actor.last_name,
-                    },
-                    "changes": changes,
-                    "issue_details": {
-                        "name": issue.name,
-                        "identifier": f"{issue.project.identifier}-{issue.sequence_id}",
-                    },
-                    "activity_time": str(formatted_time),
-                }
-        )
-
-    summary = "Updates were made to the issue by"
-
-    # Send the mail
-    subject = f"{issue.project.identifier}-{issue.sequence_id} {issue.name}"
-    context = {
-        "data": template_data,
-        "summary": summary,
-        "actors_involved": len(set(actors_involved)),
-        "issue": {
-            "issue_identifier": f"{str(issue.project.identifier)}-{str(issue.sequence_id)}",
-            "name": issue.name,
-            "issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}",
-        },
-        "receiver": {
-            "email": receiver.email,
-        },
-        "issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}",
-        "project_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/",
-        "workspace":str(issue.project.workspace.slug),
-        "project": str(issue.project.name),
-        "user_preference": f"{base_api}/profile/preferences/email",
-        "comments": comments,
-    }
-    html_content = render_to_string(
-        "emails/notifications/issue-updates.html", context
-    )
-    text_content = strip_tags(html_content)
-
     try:
-        connection = get_connection(
+        ri = redis_instance()
-            host=EMAIL_HOST,
+        base_api = (ri.get(str(issue_id)).decode())
-            port=int(EMAIL_PORT),
+        data = create_payload(notification_data=notification_data)
-            username=EMAIL_HOST_USER,
-            password=EMAIL_HOST_PASSWORD,
-            use_tls=EMAIL_USE_TLS == "1",
-        )
 
-        msg = EmailMultiAlternatives(
+        # Get email configurations
-            subject=subject,
+        (
-            body=text_content,
+            EMAIL_HOST,
-            from_email=EMAIL_FROM,
+            EMAIL_HOST_USER,
-            to=[receiver.email],
+            EMAIL_HOST_PASSWORD,
-            connection=connection,
+            EMAIL_PORT,
-        )
+            EMAIL_USE_TLS,
-        msg.attach_alternative(html_content, "text/html")
+            EMAIL_FROM,
-        msg.send()
+        ) = get_email_configuration()
 
-        EmailNotificationLog.objects.filter(
+        receiver = User.objects.get(pk=receiver_id)
-            pk__in=email_notification_ids
+        issue = Issue.objects.get(pk=issue_id)
-        ).update(sent_at=timezone.now())
+        template_data = []
-        return
+        total_changes = 0
-    except Exception as e:
+        comments = []
-        print(e)
+        actors_involved = []
+        for actor_id, changes in data.items():
+            actor = User.objects.get(pk=actor_id)
+            total_changes = total_changes + len(changes)
+            comment = changes.pop("comment", False)
+            mention = changes.pop("mention", False)
+            actors_involved.append(actor_id)
+            if comment:
+                comments.append(
+                    {
+                        "actor_comments": comment,
+                        "actor_detail": {
+                            "avatar_url": actor.avatar,
+                            "first_name": actor.first_name,
+                            "last_name": actor.last_name,
+                        },
+                    }
+                )
+            if mention:
+                mention["new_value"] = process_html_content(mention.get("new_value"))
+                mention["old_value"] = process_html_content(mention.get("old_value"))
+                comments.append(
+                    {
+                        "actor_comments": mention,
+                        "actor_detail": {
+                            "avatar_url": actor.avatar,
+                            "first_name": actor.first_name,
+                            "last_name": actor.last_name,
+                        },
+                    }
+                )
+            activity_time = changes.pop("activity_time")
+            # Parse the input string into a datetime object
+            formatted_time = datetime.strptime(activity_time, "%Y-%m-%d %H:%M:%S").strftime("%H:%M %p")
+
+            if changes:
+                template_data.append(
+                    {
+                        "actor_detail": {
+                            "avatar_url": actor.avatar,
+                            "first_name": actor.first_name,
+                            "last_name": actor.last_name,
+                        },
+                        "changes": changes,
+                        "issue_details": {
+                            "name": issue.name,
+                            "identifier": f"{issue.project.identifier}-{issue.sequence_id}",
+                        },
+                        "activity_time": str(formatted_time),
+                    }
+            )
+
+        summary = "Updates were made to the issue by"
+
+        # Send the mail
+        subject = f"{issue.project.identifier}-{issue.sequence_id} {issue.name}"
+        context = {
+            "data": template_data,
+            "summary": summary,
+            "actors_involved": len(set(actors_involved)),
+            "issue": {
+                "issue_identifier": f"{str(issue.project.identifier)}-{str(issue.sequence_id)}",
+                "name": issue.name,
+                "issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}",
+            },
+            "receiver": {
+                "email": receiver.email,
+            },
+            "issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}",
+            "project_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/",
+            "workspace":str(issue.project.workspace.slug),
+            "project": str(issue.project.name),
+            "user_preference": f"{base_api}/profile/preferences/email",
+            "comments": comments,
+        }
+        html_content = render_to_string(
+            "emails/notifications/issue-updates.html", context
+        )
+        text_content = strip_tags(html_content)
+
+        try:
+            connection = get_connection(
+                host=EMAIL_HOST,
+                port=int(EMAIL_PORT),
+                username=EMAIL_HOST_USER,
+                password=EMAIL_HOST_PASSWORD,
+                use_tls=EMAIL_USE_TLS == "1",
+            )
+
+            msg = EmailMultiAlternatives(
+                subject=subject,
+                body=text_content,
+                from_email=EMAIL_FROM,
+                to=[receiver.email],
+                connection=connection,
+            )
+            msg.attach_alternative(html_content, "text/html")
+            msg.send()
+
+            EmailNotificationLog.objects.filter(
+                pk__in=email_notification_ids
+            ).update(sent_at=timezone.now())
+            return
+        except Exception as e:
+            print(e)
+            return
+    except Issue.DoesNotExist:
         return

apiserver/plane/bgtasks/issue_activites_task.py

@@ -353,13 +353,18 @@ def track_assignees(
     issue_activities,
     epoch,
 ):
-    requested_assignees = set(
+    requested_assignees = (
-        [str(asg) for asg in requested_data.get("assignee_ids", [])]
+        set([str(asg) for asg in requested_data.get("assignee_ids", [])])
+        if requested_data is not None
+        else set()
     )
-    current_assignees = set(
+    current_assignees = (
-        [str(asg) for asg in current_instance.get("assignee_ids", [])]
+        set([str(asg) for asg in current_instance.get("assignee_ids", [])])
+        if current_instance is not None
+        else set()
     )
 
+
     added_assignees = requested_assignees - current_assignees
     dropped_assginees = current_assignees - requested_assignees
 
@@ -547,6 +552,20 @@ def create_issue_activity(
             epoch=epoch,
         )
     )
+    requested_data = (
+        json.loads(requested_data) if requested_data is not None else None
+    )
+    if requested_data.get("assignee_ids") is not None:
+        track_assignees(
+            requested_data,
+            current_instance,
+            issue_id,
+            project_id,
+            workspace_id,
+            actor_id,
+            issue_activities,
+            epoch,
+        )
 
 
 def update_issue_activity(

apiserver/plane/bgtasks/notification_task.py

@@ -515,7 +515,7 @@ def notifications(
                             bulk_email_logs.append(
                                 EmailNotificationLog(
                                     triggered_by_id=actor_id,
-                                    receiver_id=subscriber,
+                                    receiver_id=mention_id,
                                     entity_identifier=issue_id,
                                     entity_name="issue",
                                     data={
@@ -552,6 +552,7 @@ def notifications(
                                             "old_value": str(
                                                 issue_activity.get("old_value")
                                             ),
+                                            "activity_time": issue_activity.get("created_at"),
                                         },
                                     },
                                 )
@@ -639,6 +640,7 @@ def notifications(
                                             "old_value": str(
                                                 last_activity.old_value
                                             ),
+                                            "activity_time": issue_activity.get("created_at"),
                                         },
                                     },
                                 )
@@ -695,6 +697,7 @@ def notifications(
                                                         "old_value"
                                                     )
                                                 ),
+                                                "activity_time": issue_activity.get("created_at"),
                                             },
                                         },
                                     )

apiserver/plane/bgtasks/webhook_task.py

@@ -7,6 +7,9 @@ import hmac
 # Django imports
 from django.conf import settings
 from django.core.serializers.json import DjangoJSONEncoder
+from django.core.mail import EmailMultiAlternatives, get_connection
+from django.template.loader import render_to_string
+from django.utils.html import strip_tags
 
 # Third party imports
 from celery import shared_task
@@ -22,10 +25,10 @@ from plane.db.models import (
     ModuleIssue,
     CycleIssue,
     IssueComment,
+    User,
 )
 from plane.api.serializers import (
     ProjectSerializer,
-    IssueSerializer,
     CycleSerializer,
     ModuleSerializer,
     CycleIssueSerializer,
@@ -34,6 +37,9 @@ from plane.api.serializers import (
     IssueExpandSerializer,
 )
 
+# Module imports
+from plane.license.utils.instance_value import get_email_configuration
+
 SERIALIZER_MAPPER = {
     "project": ProjectSerializer,
     "issue": IssueExpandSerializer,
@@ -72,7 +78,7 @@ def get_model_data(event, event_id, many=False):
     max_retries=5,
     retry_jitter=True,
 )
-def webhook_task(self, webhook, slug, event, event_data, action):
+def webhook_task(self, webhook, slug, event, event_data, action, current_site):
     try:
         webhook = Webhook.objects.get(id=webhook, workspace__slug=slug)
 
@@ -151,7 +157,18 @@ def webhook_task(self, webhook, slug, event, event_data, action):
             response_body=str(e),
             retry_count=str(self.request.retries),
         )
-
+        # Retry logic
+        if self.request.retries >= self.max_retries:
+            Webhook.objects.filter(pk=webhook.id).update(is_active=False)   
+            if webhook:
+                # send email for the deactivation of the webhook
+                send_webhook_deactivation_email(
+                    webhook_id=webhook.id,
+                    receiver_id=webhook.created_by_id,
+                    reason=str(e),
+                    current_site=current_site,
+                )
+            return
         raise requests.RequestException()
 
     except Exception as e:
@@ -162,7 +179,7 @@ def webhook_task(self, webhook, slug, event, event_data, action):
 
 
 @shared_task()
-def send_webhook(event, payload, kw, action, slug, bulk):
+def send_webhook(event, payload, kw, action, slug, bulk, current_site):
     try:
         webhooks = Webhook.objects.filter(workspace__slug=slug, is_active=True)
 
@@ -216,6 +233,7 @@ def send_webhook(event, payload, kw, action, slug, bulk):
                         event=event,
                         event_data=data,
                         action=action,
+                        current_site=current_site,
                     )
 
     except Exception as e:
@@ -223,3 +241,56 @@ def send_webhook(event, payload, kw, action, slug, bulk):
             print(e)
         capture_exception(e)
         return
+
+
+@shared_task
+def send_webhook_deactivation_email(webhook_id, receiver_id, current_site, reason):
+    # Get email configurations
+    (
+        EMAIL_HOST,
+        EMAIL_HOST_USER,
+        EMAIL_HOST_PASSWORD,
+        EMAIL_PORT,
+        EMAIL_USE_TLS,
+        EMAIL_FROM,
+    ) = get_email_configuration()
+
+    receiver = User.objects.get(pk=receiver_id)
+    webhook = Webhook.objects.get(pk=webhook_id) 
+    subject="Webhook Deactivated"
+    message=f"Webhook {webhook.url} has been deactivated due to failed requests."
+
+    # Send the mail
+    context = {
+        "email": receiver.email,
+        "message": message,
+        "webhook_url":f"{current_site}/{str(webhook.workspace.slug)}/settings/webhooks/{str(webhook.id)}",
+    }
+    html_content = render_to_string(
+        "emails/notifications/webhook-deactivate.html", context
+    )
+    text_content = strip_tags(html_content)
+
+    try:
+        connection = get_connection(
+            host=EMAIL_HOST,
+            port=int(EMAIL_PORT),
+            username=EMAIL_HOST_USER,
+            password=EMAIL_HOST_PASSWORD,
+            use_tls=EMAIL_USE_TLS == "1",
+        )
+
+        msg = EmailMultiAlternatives(
+            subject=subject,
+            body=text_content,
+            from_email=EMAIL_FROM,
+            to=[receiver.email],
+            connection=connection,
+        )
+        msg.attach_alternative(html_content, "text/html")
+        msg.send()
+
+        return
+    except Exception as e:
+        print(e)
+        return

apiserver/plane/db/migrations/0059_auto_20240208_0957.py

@@ -0,0 +1,33 @@
+# Generated by Django 4.2.7 on 2024-02-08 09:57
+
+from django.db import migrations
+
+
+def widgets_filter_change(apps, schema_editor):
+    Widget = apps.get_model("db", "Widget")
+    widgets_to_update = []
+
+    # Define the filter dictionaries for each widget key
+    filters_mapping = {
+        "assigned_issues": {"duration": "none", "tab": "pending"},
+        "created_issues": {"duration": "none", "tab": "pending"},
+        "issues_by_state_groups": {"duration": "none"},
+        "issues_by_priority": {"duration": "none"},
+    }
+
+    # Iterate over widgets and update filters if applicable
+    for widget in Widget.objects.all():
+        if widget.key in filters_mapping:
+            widget.filters = filters_mapping[widget.key]
+            widgets_to_update.append(widget)
+
+    # Bulk update the widgets
+    Widget.objects.bulk_update(widgets_to_update, ["filters"], batch_size=10)
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('db', '0058_alter_moduleissue_issue_and_more'),
+    ]
+    operations = [
+        migrations.RunPython(widgets_filter_change)
+    ]

apiserver/plane/db/migrations/0060_cycle_progress_snapshot.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-02-08 09:18
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0059_auto_20240208_0957'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='cycle',
+            name='progress_snapshot',
+            field=models.JSONField(default=dict),
+        ),
+    ]

apiserver/plane/db/models/cycle.py

@@ -68,6 +68,7 @@ class Cycle(ProjectBaseModel):
     sort_order = models.FloatField(default=65535)
     external_source = models.CharField(max_length=255, null=True, blank=True)
     external_id = models.CharField(max_length=255, blank=True, null=True)
+    progress_snapshot = models.JSONField(default=dict)
 
     class Meta:
         verbose_name = "Cycle"

apiserver/plane/settings/common.py

@@ -282,10 +282,8 @@ if REDIS_SSL:
     redis_url = os.environ.get("REDIS_URL")
     broker_url = f"{redis_url}?ssl_cert_reqs={ssl.CERT_NONE.name}&ssl_ca_certs={certifi.where()}"
     CELERY_BROKER_URL = broker_url
-    CELERY_RESULT_BACKEND = broker_url
 else:
     CELERY_BROKER_URL = REDIS_URL
-    CELERY_RESULT_BACKEND = REDIS_URL
 
 CELERY_IMPORTS = (
     "plane.bgtasks.issue_automation_task",

apiserver/templates/emails/notifications/issue-updates.html

@@ -66,7 +66,7 @@
                         style="margin-left: 30px; margin-bottom: 20px; margin-top: 20px"
                         >
                         <img
-                           src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/plane-logo.webp"
+                           src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/plane-logo.png"
                            width="130"
                            height="40"
                            border="0"
@@ -108,25 +108,33 @@
                   margin-bottom: 15px;
                   "
                   />
-               {% if actors_involved == 1 %}
+                  {% if actors_involved == 1 %}
-               <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
+                  <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
-                  {{summary}}
+                     {{summary}}
-                  <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
+                     <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
-                  {{ data.0.actor_detail.first_name}}
+                     {% if data|length > 0 %}
-                  {{data.0.actor_detail.last_name}}
+                     {{ data.0.actor_detail.first_name}}
-                  </span>.
+                     {{data.0.actor_detail.last_name}}
-               </p>
+                     {% else %}
-               {% else %}
+                     {{ comments.0.actor_detail.first_name}}
-               <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
+                     {{comments.0.actor_detail.last_name}}
-                  {{summary}}
+                     {% endif %}
-                  <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
+                     </span>.
-                  {{ data.0.actor_detail.first_name}}
+                  </p>
-                  {{data.0.actor_detail.last_name }}
+                  {% else %}
-                  </span>and others.
+                  <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
-               </p>
+                     {{summary}}
-               {% endif %}
+                     <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
-
+                     {% if data|length > 0 %}
-
+                     {{ data.0.actor_detail.first_name}}
+                     {{data.0.actor_detail.last_name}}
+                     {% else %}
+                     {{ comments.0.actor_detail.first_name}}
+                     {{comments.0.actor_detail.last_name}}
+                     {% endif %}
+                     </span>and others.
+                  </p>
+                  {% endif %}
                <!-- {% if actors_involved == 1 %}
                {% if data|length > 0 and comments|length == 0 %}
                <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
@@ -272,7 +280,7 @@
                         <tr>
                            <td>
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/due-date.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/due-date.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -333,7 +341,7 @@
                         <tr>
                            <td>
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/duplicate.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/duplicate.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -428,7 +436,7 @@
                         <tr>
                            <td valign="top" style="white-space: nowrap; padding: 0px;">
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/assignee.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/assignee.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -524,7 +532,7 @@
                         <tr>
                            <td valign="top" style="white-space: nowrap; padding: 0px;">
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/labels.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/labels.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -621,7 +629,7 @@
                         <tr>
                            <td>
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/state.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/state.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -639,15 +647,17 @@
                                  State:
                               </p>
                            </td>
-                           <td >
+                           {% if update.changes.state.old_value.0 == 'Backlog' or  update.changes.state.old_value.0 == 'In Progress' or update.changes.state.old_value.0 == 'Done' or update.changes.state.old_value.0 == 'Cancelled' %}
+                           <td>
                               <img
-                                 src="{% if update.changes.state.old_value.0 == 'Backlog' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/backlog.webp{% endif %}{% if update.changes.state.old_value.0 == 'In Progress' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/in-progress.webp{% endif %}{% if update.changes.state.old_value.0 == 'Done' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/done.webp{% endif %}{% if update.changes.state.old_value.0 == 'Cancelled' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/cancelled.webp{% endif %}"
+                                 src="{% if update.changes.state.old_value.0 == 'Backlog' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/backlog.png{% endif %}{% if update.changes.state.old_value.0 == 'In Progress' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/in-progress.png{% endif %}{% if update.changes.state.old_value.0 == 'Done' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/done.png{% endif %}{% if update.changes.state.old_value.0 == 'Cancelled' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/cancelled.png{% endif %}"
                                  width="12"
                                  height="12"
                                  border="0"
                                  style="display: block; margin-left: 5px;"
                                  />
                            </td>
+                           {% endif %}
                            <td>
                               <p
                                  style="
@@ -661,22 +671,24 @@
                            </td>
                            <td style="padding-left: 10px; padding-right: 10px;">
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/forward-arrow.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/forward-arrow.png"
                                  width="16"
                                  height="16"
                                  border="0"
                                  style="display: block;"
                                  />
                            </td>
-                           <td >
+                           {% if update.changes.state.new_value|last == 'Backlog' or  update.changes.state.new_value|last == 'In Progress' or update.changes.state.new_value|last == 'Done' or update.changes.state.new_value|last == 'Cancelled' %}
+                           <td>
                               <img
-                                 src="{% if update.changes.state.new_value|last == 'Backlog' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/backlog.webp{% elif update.changes.state.new_value|last == 'In Progress' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/in-progress.webp{% elif update.changes.state.new_value|last == 'Todo' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/todo.webp{% elif update.changes.state.new_value|last == 'Done' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/done.webp{% elif update.changes.state.new_value|last == 'Cancelled' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/cancelled.webp{% endif %}"
+                                 src="{% if update.changes.state.new_value|last == 'Backlog' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/backlog.png{% elif update.changes.state.new_value|last == 'In Progress' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/in-progress.png{% elif update.changes.state.new_value|last == 'Todo' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/todo.png{% elif update.changes.state.new_value|last == 'Done' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/done.png{% elif update.changes.state.new_value|last == 'Cancelled' %}https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/cancelled.png{% endif %}"
                                  width="12"
                                  height="12"
                                  border="0"
                                  style="display: block;"
                                  />
                            </td>
+                           {% endif %}
                            <td>
                               <p
                                  style="
@@ -699,7 +711,7 @@
                         <tr>
                            <td valign="top">
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/link.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/link.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -760,7 +772,7 @@
                         <tr>
                            <td>
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/priority.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/priority.png"
                                  width="12"
                                  height="12"
                                  border="0"
@@ -800,7 +812,7 @@
                            </td>
                            <td style="padding-left: 10px; padding-right: 10px;">
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/forward-arrow.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/forward-arrow.png"
                                  width="16"
                                  height="16"
                                  border="0"
@@ -838,7 +850,7 @@
                         <tr style="overflow-wrap: break-word;">
                            <td> 
                               <img
-                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/blocking.webp"
+                                 src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/blocking.png"
                                  width="12"
                                  height="12"
                                  border="0"

deploy/1-click/install.sh

@@ -1,5 +1,6 @@
 #!/bin/bash
 
+# Check if the user has sudo access
 if command -v curl &> /dev/null; then
     sudo curl -sSL \
         -o /usr/local/bin/plane-app \
@@ -11,6 +12,6 @@ else
 fi
 
 sudo chmod +x /usr/local/bin/plane-app
-sudo sed -i 's/export BRANCH=${BRANCH:-master}/export BRANCH='${BRANCH:-master}'/' /usr/local/bin/plane-app
+sudo sed -i 's/export DEPLOY_BRANCH=${BRANCH:-master}/export DEPLOY_BRANCH='${BRANCH:-master}'/' /usr/local/bin/plane-app
 
-sudo  plane-app --help
+plane-app --help

deploy/1-click/plane-app

@@ -17,7 +17,7 @@ Project management tool from the future
 
 EOF
 }
-function update_env_files() {
+function update_env_file() {
     config_file=$1
     key=$2
     value=$3
@@ -25,14 +25,16 @@ function update_env_files() {
     # Check if the config file exists
     if [ ! -f "$config_file" ]; then
         echo "Config file not found. Creating a new one..." >&2
-        touch "$config_file"
+        sudo touch "$config_file"
     fi
 
     # Check if the key already exists in the config file
-    if grep -q "^$key=" "$config_file"; then
+    if sudo grep "^$key=" "$config_file"; then
-        awk -v key="$key" -v value="$value" -F '=' '{if ($1 == key) $2 = value} 1' OFS='=' "$config_file" > "$config_file.tmp" && mv "$config_file.tmp" "$config_file"
+        sudo awk -v key="$key" -v value="$value" -F '=' '{if ($1 == key) $2 = value} 1' OFS='=' "$config_file" | sudo tee "$config_file.tmp" > /dev/null
+        sudo mv "$config_file.tmp" "$config_file" &> /dev/null
     else
-        echo "$key=$value" >> "$config_file"
+        # sudo echo "$key=$value" >> "$config_file"
+        echo -e "$key=$value" | sudo tee -a "$config_file" > /dev/null
     fi
 }
 function read_env_file() {
@@ -42,12 +44,12 @@ function read_env_file() {
     # Check if the config file exists
     if [ ! -f "$config_file" ]; then
         echo "Config file not found. Creating a new one..." >&2
-        touch "$config_file"
+        sudo touch "$config_file"
     fi
 
     # Check if the key already exists in the config file
-    if grep -q "^$key=" "$config_file"; then
+    if sudo grep -q "^$key=" "$config_file"; then
-        value=$(awk -v key="$key" -F '=' '{if ($1 == key) print $2}' "$config_file")
+        value=$(sudo awk -v key="$key" -F '=' '{if ($1 == key) print $2}' "$config_file")
         echo "$value"
     else
         echo ""
@@ -55,19 +57,19 @@ function read_env_file() {
 }
 function update_config() {
     config_file="$PLANE_INSTALL_DIR/config.env"
-    update_env_files "$config_file" "$1" "$2"
+    update_env_file $config_file $1 $2
 }
 function read_config() {
     config_file="$PLANE_INSTALL_DIR/config.env"
-    read_env_file "$config_file" "$1"
+    read_env_file $config_file $1
 }
 function update_env() {
     config_file="$PLANE_INSTALL_DIR/.env"
-    update_env_files "$config_file" "$1" "$2"
+    update_env_file $config_file $1 $2
 }
 function read_env() {
     config_file="$PLANE_INSTALL_DIR/.env"
-    read_env_file "$config_file" "$1"
+    read_env_file $config_file $1
 }
 function show_message() {
     print_header
@@ -87,14 +89,14 @@ function prepare_environment() {
     show_message "Prepare Environment..." >&2
 
     show_message "- Updating OS with required tools ✋"  >&2
-    sudo apt-get update -y &> /dev/null
+    sudo "$PACKAGE_MANAGER" update -y
-    sudo apt-get upgrade -y &> /dev/null
+    sudo "$PACKAGE_MANAGER" upgrade -y
 
-    required_tools=("curl" "awk" "wget" "nano" "dialog" "git")
+    local required_tools=("curl" "awk" "wget" "nano" "dialog" "git" "uidmap")
 
     for tool in "${required_tools[@]}"; do
         if ! command -v $tool &> /dev/null; then
-            sudo apt install -y $tool &> /dev/null
+            sudo "$PACKAGE_MANAGER" install -y $tool
         fi
     done
 
@@ -103,11 +105,30 @@ function prepare_environment() {
     # Install Docker if not installed
     if ! command -v docker &> /dev/null; then
         show_message "- Installing Docker ✋"  >&2
-        sudo curl -o- https://get.docker.com | bash - 
+        # curl -o- https://get.docker.com | bash - 
 
-        if [ "$EUID" -ne 0 ]; then
+        if [ "$PACKAGE_MANAGER" == "yum" ]; then
-            dockerd-rootless-setuptool.sh install &> /dev/null
+            sudo $PACKAGE_MANAGER install -y yum-utils
+            sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo &> /dev/null
+        elif [ "$PACKAGE_MANAGER" == "apt-get" ]; then
+            # Add Docker's official GPG key:
+            sudo $PACKAGE_MANAGER update 
+            sudo $PACKAGE_MANAGER install ca-certificates curl &> /dev/null
+            sudo install -m 0755 -d /etc/apt/keyrings &> /dev/null
+            sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc &> /dev/null
+            sudo chmod a+r /etc/apt/keyrings/docker.asc &> /dev/null
+
+            # Add the repository to Apt sources:
+            echo \
+                "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
+                $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
+                sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+            
+            sudo $PACKAGE_MANAGER update
         fi
+
+        sudo $PACKAGE_MANAGER install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin -y
+
         show_message "- Docker Installed ✅" "replace_last_line"  >&2
     else
         show_message "- Docker is already installed ✅"  >&2
@@ -127,17 +148,17 @@ function prepare_environment() {
 function download_plane() {
     # Download Docker Compose File from github url 
     show_message "Downloading Plane Setup Files ✋"  >&2
-    curl -H 'Cache-Control: no-cache, no-store' \
+    sudo curl -H 'Cache-Control: no-cache, no-store' \
         -s -o $PLANE_INSTALL_DIR/docker-compose.yaml  \
-        https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/selfhost/docker-compose.yml?$(date +%s) 
+        https://raw.githubusercontent.com/makeplane/plane/$DEPLOY_BRANCH/deploy/selfhost/docker-compose.yml?token=$(date +%s) 
 
-    curl -H 'Cache-Control: no-cache, no-store' \
+    sudo curl -H 'Cache-Control: no-cache, no-store' \
         -s -o $PLANE_INSTALL_DIR/variables-upgrade.env \
-        https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/selfhost/variables.env?$(date +%s) 
+        https://raw.githubusercontent.com/makeplane/plane/$DEPLOY_BRANCH/deploy/selfhost/variables.env?token=$(date +%s) 
 
     # if .env does not exists rename variables-upgrade.env to .env
     if [ ! -f "$PLANE_INSTALL_DIR/.env" ]; then
-        mv $PLANE_INSTALL_DIR/variables-upgrade.env $PLANE_INSTALL_DIR/.env
+        sudo mv $PLANE_INSTALL_DIR/variables-upgrade.env $PLANE_INSTALL_DIR/.env
     fi
 
     show_message "Plane Setup Files Downloaded ✅" "replace_last_line"  >&2
@@ -186,7 +207,7 @@ function build_local_image() {
     PLANE_TEMP_CODE_DIR=$PLANE_INSTALL_DIR/temp
     sudo rm -rf $PLANE_TEMP_CODE_DIR > /dev/null
 
-    sudo git clone $REPO $PLANE_TEMP_CODE_DIR  --branch $BRANCH --single-branch -q > /dev/null
+    sudo git clone $REPO $PLANE_TEMP_CODE_DIR  --branch $DEPLOY_BRANCH --single-branch -q > /dev/null
 
     sudo cp $PLANE_TEMP_CODE_DIR/deploy/selfhost/build.yml $PLANE_TEMP_CODE_DIR/build.yml
 
@@ -199,25 +220,26 @@ function check_for_docker_images() {
     show_message "" >&2
     # show_message "Building Plane Images" >&2
     
-    update_env "DOCKERHUB_USER" "makeplane"
-    update_env "PULL_POLICY" "always"
     CURR_DIR=$(pwd)
     
-    if [ "$BRANCH" == "master" ]; then
+    if [ "$DEPLOY_BRANCH" == "master" ]; then
         update_env "APP_RELEASE" "latest"
         export APP_RELEASE=latest
     else
-        update_env "APP_RELEASE" "$BRANCH"
+        update_env "APP_RELEASE" "$DEPLOY_BRANCH"
-        export APP_RELEASE=$BRANCH    
+        export APP_RELEASE=$DEPLOY_BRANCH    
     fi
 
-    if [ $CPU_ARCH == "amd64" ] || [ $CPU_ARCH == "x86_64" ]; then
+    if [ $USE_GLOBAL_IMAGES == 1 ]; then
         # show_message "Building Plane Images for $CPU_ARCH is not required. Skipping... ✅" "replace_last_line" >&2
+        export DOCKERHUB_USER=makeplane
+        update_env "DOCKERHUB_USER" "$DOCKERHUB_USER"
+        update_env "PULL_POLICY" "always"
         echo "Building Plane Images for $CPU_ARCH is not required. Skipping..."
     else
         export DOCKERHUB_USER=myplane
         show_message "Building Plane Images for $CPU_ARCH " >&2
-        update_env "DOCKERHUB_USER" "myplane"
+        update_env "DOCKERHUB_USER" "$DOCKERHUB_USER"
         update_env "PULL_POLICY" "never"
 
         build_local_image
@@ -233,7 +255,7 @@ function check_for_docker_images() {
     sudo sed -i "s|- uploads:|- $DATA_DIR/minio:|g" $PLANE_INSTALL_DIR/docker-compose.yaml
 
     show_message "Downloading Plane Images for $CPU_ARCH ✋" >&2
-    docker compose -f $PLANE_INSTALL_DIR/docker-compose.yaml --env-file=$PLANE_INSTALL_DIR/.env pull
+    sudo docker compose -f $PLANE_INSTALL_DIR/docker-compose.yaml --env-file=$PLANE_INSTALL_DIR/.env pull
     show_message "Plane Images Downloaded ✅" "replace_last_line" >&2
 }
 function configure_plane() {
@@ -453,9 +475,11 @@ function install() {
     show_message ""
     if [ "$(uname)" == "Linux" ]; then
         OS="linux"
-        OS_NAME=$(awk -F= '/^ID=/{print $2}' /etc/os-release)
+        OS_NAME=$(sudo awk -F= '/^ID=/{print $2}' /etc/os-release)
-        # check the OS 
+        OS_NAME=$(echo "$OS_NAME" | tr -d '"')
-        if [ "$OS_NAME" == "ubuntu" ]; then
+        print_header
+        if [ "$OS_NAME" == "ubuntu" ] || [ "$OS_NAME" == "debian" ] || 
+                [ "$OS_NAME" == "centos" ] || [ "$OS_NAME" == "amazon" ]; then
             OS_SUPPORTED=true
             show_message "******** Installing Plane ********"
             show_message ""
@@ -488,7 +512,8 @@ function install() {
             fi
             
         else
-            PROGRESS_MSG="❌❌❌ Unsupported OS Detected ❌❌❌"
+            OS_SUPPORTED=false
+            PROGRESS_MSG="❌❌ Unsupported OS Varient Detected : $OS_NAME ❌❌"
             show_message ""
             exit 1
         fi
@@ -499,12 +524,17 @@ function install() {
     fi
 }
 function upgrade() {
+    print_header
     if [ "$(uname)" == "Linux" ]; then
         OS="linux"
-        OS_NAME=$(awk -F= '/^ID=/{print $2}' /etc/os-release)
+        OS_NAME=$(sudo awk -F= '/^ID=/{print $2}' /etc/os-release)
-        # check the OS 
+        OS_NAME=$(echo "$OS_NAME" | tr -d '"')
-        if [ "$OS_NAME" == "ubuntu" ]; then
+        if [ "$OS_NAME" == "ubuntu" ] || [ "$OS_NAME" == "debian" ] || 
+                [ "$OS_NAME" == "centos" ] || [ "$OS_NAME" == "amazon" ]; then
+
             OS_SUPPORTED=true
+            show_message "******** Upgrading Plane ********"
+            show_message ""
 
             prepare_environment
 
@@ -528,53 +558,49 @@ function upgrade() {
                 exit 1
             fi
         else
-            PROGRESS_MSG="Unsupported OS Detected"
+            PROGRESS_MSG="❌❌ Unsupported OS Varient Detected : $OS_NAME ❌❌"
             show_message ""
             exit 1
         fi
     else
-        PROGRESS_MSG="Unsupported OS Detected : $(uname)"
+        PROGRESS_MSG="❌❌❌ Unsupported OS Detected : $(uname) ❌❌❌"
         show_message ""
         exit 1
     fi
 }
 function uninstall() {
+    print_header
     if [ "$(uname)" == "Linux" ]; then
         OS="linux"
         OS_NAME=$(awk -F= '/^ID=/{print $2}' /etc/os-release)
-        # check the OS 
+        OS_NAME=$(echo "$OS_NAME" | tr -d '"')
-        if [ "$OS_NAME" == "ubuntu" ]; then
+        if [ "$OS_NAME" == "ubuntu" ] || [ "$OS_NAME" == "debian" ] || 
+                [ "$OS_NAME" == "centos" ] || [ "$OS_NAME" == "amazon" ]; then
+
             OS_SUPPORTED=true
             show_message "******** Uninstalling Plane ********"
             show_message ""
 
             stop_server
-            # CHECK IF PLANE SERVICE EXISTS
-            # if [ -f "/etc/systemd/system/plane.service" ]; then
-            #     sudo systemctl stop plane.service &> /dev/null
-            #     sudo systemctl disable plane.service &> /dev/null
-            #     sudo rm /etc/systemd/system/plane.service &> /dev/null
-            #     sudo systemctl daemon-reload &> /dev/null
-            # fi
-            # show_message "- Plane Service removed ✅"
 
             if ! [ -x "$(command -v docker)" ]; then
                 echo "DOCKER_NOT_INSTALLED" &> /dev/null
             else
                 # Ask of user input to confirm uninstall docker ?
-                CONFIRM_DOCKER_PURGE=$(dialog --title "Uninstall Docker" --yesno "Are you sure you want to uninstall docker ?" 8 60 3>&1 1>&2 2>&3)
+                CONFIRM_DOCKER_PURGE=$(dialog --title "Uninstall Docker" --defaultno --yesno "Are you sure you want to uninstall docker ?" 8 60 3>&1 1>&2 2>&3)
                 if [ $? -eq 0 ]; then
                     show_message "- Uninstalling Docker ✋"
-                    sudo apt-get purge -y docker-engine docker docker.io docker-ce docker-ce-cli docker-compose-plugin &> /dev/null
+                    sudo docker images -q | xargs -r sudo docker rmi -f &> /dev/null
-                    sudo apt-get autoremove -y --purge docker-engine docker docker.io docker-ce docker-compose-plugin &> /dev/null
+                    sudo "$PACKAGE_MANAGER" remove -y docker-engine docker docker.io docker-ce docker-ce-cli docker-compose-plugin &> /dev/null
+                    sudo "$PACKAGE_MANAGER" autoremove -y docker-engine docker docker.io docker-ce docker-compose-plugin &> /dev/null
                     show_message "- Docker Uninstalled ✅" "replace_last_line" >&2
                 fi
             fi
 
-            rm $PLANE_INSTALL_DIR/.env &> /dev/null
+            sudo rm $PLANE_INSTALL_DIR/.env &> /dev/null
-            rm $PLANE_INSTALL_DIR/variables-upgrade.env &> /dev/null
+            sudo rm $PLANE_INSTALL_DIR/variables-upgrade.env &> /dev/null
-            rm $PLANE_INSTALL_DIR/config.env &> /dev/null
+            sudo rm $PLANE_INSTALL_DIR/config.env &> /dev/null
-            rm $PLANE_INSTALL_DIR/docker-compose.yaml &> /dev/null
+            sudo rm $PLANE_INSTALL_DIR/docker-compose.yaml &> /dev/null
             
             # rm -rf $PLANE_INSTALL_DIR &> /dev/null
             show_message "- Configuration Cleaned ✅"
@@ -593,12 +619,12 @@ function uninstall() {
             show_message ""
             show_message ""
         else
-            PROGRESS_MSG="Unsupported OS Detected : $(uname) ❌"
+            PROGRESS_MSG="❌❌ Unsupported OS Varient Detected : $OS_NAME ❌❌"
             show_message ""
             exit 1
         fi
     else
-        PROGRESS_MSG="Unsupported OS Detected : $(uname) ❌"
+        PROGRESS_MSG="❌❌❌ Unsupported OS Detected : $(uname) ❌❌❌"
         show_message ""
         exit 1
     fi
@@ -608,15 +634,15 @@ function start_server() {
     env_file="$PLANE_INSTALL_DIR/.env"
     # check if both the files exits 
     if [ -f "$docker_compose_file" ] && [ -f "$env_file" ]; then
-        show_message "Starting Plane Server ✋"
+        show_message "Starting Plane Server ($APP_RELEASE) ✋"
-        docker compose -f $docker_compose_file --env-file=$env_file up -d
+        sudo docker compose -f $docker_compose_file --env-file=$env_file up -d
 
         # Wait for containers to be running
         echo "Waiting for containers to start..."
-        while ! docker compose -f "$docker_compose_file" --env-file="$env_file" ps --services --filter "status=running" --quiet | grep -q "."; do
+        while ! sudo docker compose -f "$docker_compose_file" --env-file="$env_file" ps --services --filter "status=running" --quiet | grep -q "."; do
             sleep 1
         done
-        show_message "Plane Server Started ✅" "replace_last_line" >&2
+        show_message "Plane Server Started ($APP_RELEASE) ✅" "replace_last_line" >&2
     else
         show_message "Plane Server not installed. Please install Plane first ❌" "replace_last_line" >&2
     fi
@@ -626,11 +652,11 @@ function stop_server() {
     env_file="$PLANE_INSTALL_DIR/.env"
     # check if both the files exits 
     if [ -f "$docker_compose_file" ] && [ -f "$env_file" ]; then
-        show_message "Stopping Plane Server ✋"
+        show_message "Stopping Plane Server ($APP_RELEASE) ✋"
-        docker compose -f $docker_compose_file --env-file=$env_file down
+        sudo docker compose -f $docker_compose_file --env-file=$env_file down
-        show_message "Plane Server Stopped ✅" "replace_last_line" >&2
+        show_message "Plane Server Stopped ($APP_RELEASE) ✅" "replace_last_line" >&2
     else
-        show_message "Plane Server not installed. Please install Plane first ❌" "replace_last_line" >&2
+        show_message "Plane Server not installed [Skipping] ✅" "replace_last_line" >&2
     fi
 }
 function restart_server() {
@@ -638,9 +664,9 @@ function restart_server() {
     env_file="$PLANE_INSTALL_DIR/.env"
     # check if both the files exits 
     if [ -f "$docker_compose_file" ] && [ -f "$env_file" ]; then
-        show_message "Restarting Plane Server ✋"
+        show_message "Restarting Plane Server ($APP_RELEASE) ✋"
-        docker compose -f $docker_compose_file --env-file=$env_file restart
+        sudo docker compose -f $docker_compose_file --env-file=$env_file restart
-        show_message "Plane Server Restarted ✅" "replace_last_line" >&2
+        show_message "Plane Server Restarted ($APP_RELEASE) ✅" "replace_last_line" >&2
     else
         show_message "Plane Server not installed. Please install Plane first ❌" "replace_last_line" >&2
     fi
@@ -666,28 +692,45 @@ function show_help() {
 }
 function update_installer() {
     show_message "Updating Plane Installer ✋" >&2
-    curl -H 'Cache-Control: no-cache, no-store' \
+    sudo curl -H 'Cache-Control: no-cache, no-store' \
         -s -o /usr/local/bin/plane-app  \
-        https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/1-click/install.sh?token=$(date +%s) 
+        https://raw.githubusercontent.com/makeplane/plane/$DEPLOY_BRANCH/deploy/1-click/plane-app?token=$(date +%s) 
 
-    chmod +x /usr/local/bin/plane-app > /dev/null&> /dev/null
+    sudo chmod +x /usr/local/bin/plane-app > /dev/null&> /dev/null
     show_message "Plane Installer Updated ✅" "replace_last_line" >&2
 }
 
-export BRANCH=${BRANCH:-master}
+export DEPLOY_BRANCH=${BRANCH:-master}
-export APP_RELEASE=$BRANCH
+export APP_RELEASE=$DEPLOY_BRANCH
 export DOCKERHUB_USER=makeplane
 export PULL_POLICY=always
 
+if [ "$DEPLOY_BRANCH" == "master" ]; then
+    export APP_RELEASE=latest
+fi
+
 PLANE_INSTALL_DIR=/opt/plane
 DATA_DIR=$PLANE_INSTALL_DIR/data
 LOG_DIR=$PLANE_INSTALL_DIR/log
 OS_SUPPORTED=false
 CPU_ARCH=$(uname -m)
 PROGRESS_MSG=""
-USE_GLOBAL_IMAGES=1
+USE_GLOBAL_IMAGES=0
+PACKAGE_MANAGER=""
 
-mkdir -p $PLANE_INSTALL_DIR/{data,log}
+if [[ $CPU_ARCH == "amd64" || $CPU_ARCH == "x86_64" || ( $DEPLOY_BRANCH == "master" && ( $CPU_ARCH == "arm64" || $CPU_ARCH == "aarch64" ) ) ]]; then
+    USE_GLOBAL_IMAGES=1
+fi
+
+sudo mkdir -p $PLANE_INSTALL_DIR/{data,log}
+
+if command -v apt-get &> /dev/null; then
+    PACKAGE_MANAGER="apt-get"
+elif command -v yum &> /dev/null; then
+    PACKAGE_MANAGER="yum"
+elif command -v apk &> /dev/null; then
+    PACKAGE_MANAGER="apk"
+fi
 
 if [ "$1" == "start" ]; then
     start_server
@@ -704,7 +747,7 @@ elif [ "$1" == "--upgrade" ] || [ "$1" == "-up" ]; then
     upgrade
 elif [ "$1" == "--uninstall" ] || [ "$1" == "-un" ]; then
     uninstall
-elif [ "$1" == "--update-installer" ] || [ "$1" == "-ui" ] ; then
+elif [ "$1" == "--update-installer" ] || [ "$1" == "-ui" ]; then
     update_installer
 elif [ "$1" == "--help" ] || [ "$1" == "-h" ]; then
     show_help

deploy/selfhost/docker-compose.yml

@@ -38,10 +38,6 @@ x-app-env : &app-env
     - EMAIL_USE_SSL=${EMAIL_USE_SSL:-0}
     - DEFAULT_EMAIL=${DEFAULT_EMAIL:-captain@plane.so}
     - DEFAULT_PASSWORD=${DEFAULT_PASSWORD:-password123}
-    # OPENAI SETTINGS - Deprecated can be configured through admin panel
-    - OPENAI_API_BASE=${OPENAI_API_BASE:-https://api.openai.com/v1}
-    - OPENAI_API_KEY=${OPENAI_API_KEY:-""}
-    - GPT_ENGINE=${GPT_ENGINE:-"gpt-3.5-turbo"}
     # LOGIN/SIGNUP SETTINGS - Deprecated can be configured through admin panel
     - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
     - ENABLE_EMAIL_PASSWORD=${ENABLE_EMAIL_PASSWORD:-1}

deploy/selfhost/install.sh

@@ -20,8 +20,8 @@ function buildLocalImage() {
         DO_BUILD="2"
     else 
         printf "\n" >&2
-        printf "${YELLOW}You are on ${ARCH} cpu architecture. ${NC}\n" >&2
+        printf "${YELLOW}You are on ${CPU_ARCH} cpu architecture. ${NC}\n" >&2
-        printf "${YELLOW}Since the prebuilt ${ARCH} compatible docker images are not available for, we will be running the docker build on this system. ${NC} \n" >&2
+        printf "${YELLOW}Since the prebuilt ${CPU_ARCH} compatible docker images are not available for, we will be running the docker build on this system. ${NC} \n" >&2
         printf "${YELLOW}This might take ${YELLOW}5-30 min based on your system's hardware configuration. \n ${NC} \n" >&2
         printf "\n" >&2
         printf "${GREEN}Select an option to proceed: ${NC}\n" >&2
@@ -49,7 +49,7 @@ function buildLocalImage() {
         cd $PLANE_TEMP_CODE_DIR
         if [ "$BRANCH" == "master" ];
         then
-            APP_RELEASE=latest
+            export APP_RELEASE=latest
         fi
 
         docker compose -f build.yml build --no-cache  >&2
@@ -149,7 +149,7 @@ function upgrade() {
 function askForAction() {
     echo
     echo "Select a Action you want to perform:"
-    echo "   1) Install (${ARCH})"
+    echo "   1) Install (${CPU_ARCH})"
     echo "   2) Start"
     echo "   3) Stop"
     echo "   4) Restart"
@@ -193,8 +193,8 @@ function askForAction() {
 }
 
 # CPU ARCHITECHTURE BASED SETTINGS
-ARCH=$(uname -m)
+CPU_ARCH=$(uname -m)
-if [ $ARCH == "amd64" ] || [ $ARCH == "x86_64" ];
+if [[ $CPU_ARCH == "amd64" || $CPU_ARCH == "x86_64" || ( $BRANCH == "master" && ( $CPU_ARCH == "arm64" || $CPU_ARCH == "aarch64" ) ) ]]; 
 then
     USE_GLOBAL_IMAGES=1
     DOCKERHUB_USER=makeplane
@@ -205,6 +205,11 @@ else
     PULL_POLICY=never
 fi
 
+if [ "$BRANCH" == "master" ];
+then
+    export APP_RELEASE=latest
+fi
+
 # REMOVE SPECIAL CHARACTERS FROM BRANCH NAME
 if [ "$BRANCH" != "master" ];
 then

deploy/selfhost/variables.env

@@ -8,13 +8,13 @@ NGINX_PORT=80
 WEB_URL=http://localhost
 DEBUG=0
 NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
-SENTRY_DSN=""
+SENTRY_DSN=
-SENTRY_ENVIRONMENT="production"
+SENTRY_ENVIRONMENT=production
-GOOGLE_CLIENT_ID=""
+GOOGLE_CLIENT_ID=
-GITHUB_CLIENT_ID=""
+GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=""
+GITHUB_CLIENT_SECRET=
 DOCKERIZED=1 # deprecated
-CORS_ALLOWED_ORIGINS="http://localhost"
+CORS_ALLOWED_ORIGINS=http://localhost
 
 #DB SETTINGS
 PGHOST=plane-db
@@ -31,19 +31,14 @@ REDIS_PORT=6379
 REDIS_URL=redis://${REDIS_HOST}:6379/
 
 # EMAIL SETTINGS
-EMAIL_HOST=""
+EMAIL_HOST=
-EMAIL_HOST_USER=""
+EMAIL_HOST_USER=
-EMAIL_HOST_PASSWORD=""
+EMAIL_HOST_PASSWORD=
 EMAIL_PORT=587
-EMAIL_FROM="Team Plane <team@mailer.plane.so>"
+EMAIL_FROM=Team Plane <team@mailer.plane.so>
 EMAIL_USE_TLS=1
 EMAIL_USE_SSL=0
 
-# OPENAI SETTINGS
-OPENAI_API_BASE=https://api.openai.com/v1 # deprecated
-OPENAI_API_KEY="sk-" # deprecated
-GPT_ENGINE="gpt-3.5-turbo" # deprecated
-
 # LOGIN/SIGNUP SETTINGS
 ENABLE_SIGNUP=1
 ENABLE_EMAIL_PASSWORD=1
@@ -52,13 +47,13 @@ SECRET_KEY=60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5
 
 # DATA STORE SETTINGS
 USE_MINIO=1
-AWS_REGION=""
+AWS_REGION=
-AWS_ACCESS_KEY_ID="access-key"
+AWS_ACCESS_KEY_ID=access-key
-AWS_SECRET_ACCESS_KEY="secret-key"
+AWS_SECRET_ACCESS_KEY=secret-key
 AWS_S3_ENDPOINT_URL=http://plane-minio:9000
 AWS_S3_BUCKET_NAME=uploads
-MINIO_ROOT_USER="access-key"
+MINIO_ROOT_USER=access-key
-MINIO_ROOT_PASSWORD="secret-key"
+MINIO_ROOT_PASSWORD=secret-key
 BUCKET_NAME=uploads
 FILE_SIZE_LIMIT=5242880
 

packages/types/src/cycles.d.ts

@@ -31,6 +31,7 @@ export interface ICycle {
   issue: string;
   name: string;
   owned_by: string;
+  progress_snapshot: TProgressSnapshot;
   project: string;
   project_detail: IProjectLite;
   status: TCycleGroups;
@@ -49,6 +50,23 @@ export interface ICycle {
   workspace_detail: IWorkspaceLite;
 }
 
+export type TProgressSnapshot = {
+  backlog_issues: number;
+  cancelled_issues: number;
+  completed_estimates: number | null;
+  completed_issues: number;
+  distribution?: {
+    assignees: TAssigneesDistribution[];
+    completion_chart: TCompletionChartDistribution;
+    labels: TLabelsDistribution[];
+  };
+  started_estimates: number | null;
+  started_issues: number;
+  total_estimates: number | null;
+  total_issues: number;
+  unstarted_issues: number;
+};
+
 export type TAssigneesDistribution = {
   assignee_id: string | null;
   avatar: string | null;

packages/types/src/dashboard.d.ts

@@ -24,21 +24,21 @@ export type TDurationFilterOptions =
 
 // widget filters
 export type TAssignedIssuesWidgetFilters = {
-  target_date?: TDurationFilterOptions;
+  duration?: TDurationFilterOptions;
   tab?: TIssuesListTypes;
 };
 
 export type TCreatedIssuesWidgetFilters = {
-  target_date?: TDurationFilterOptions;
+  duration?: TDurationFilterOptions;
   tab?: TIssuesListTypes;
 };
 
 export type TIssuesByStateGroupsWidgetFilters = {
-  target_date?: TDurationFilterOptions;
+  duration?: TDurationFilterOptions;
 };
 
 export type TIssuesByPriorityWidgetFilters = {
-  target_date?: TDurationFilterOptions;
+  duration?: TDurationFilterOptions;
 };
 
 export type TWidgetFiltersFormData =

packages/types/src/issues.d.ts

@@ -221,3 +221,12 @@ export interface IGroupByColumn {
 export interface IIssueMap {
   [key: string]: TIssue;
 }
+
+export interface IIssueListRow {
+  id: string;
+  groupId: string;
+  type: "HEADER" | "NO_ISSUES" | "QUICK_ADD" | "ISSUE";
+  name?: string;
+  icon?: ReactElement | undefined;
+  payload?: Partial<TIssue>;
+}

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -10,7 +10,7 @@ type BreadcrumbsProps = {
 const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
   <div className="flex items-center space-x-2">
     {React.Children.map(children, (child, index) => (
-      <div key={index} className="flex flex-wrap items-center gap-2.5">
+      <div key={index} className="flex items-center gap-2.5">
         {child}
         {index !== React.Children.count(children) - 1 && (
           <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />

packages/ui/src/dropdowns/custom-menu.tsx

@@ -15,6 +15,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
   const {
     buttonClassName = "",
     customButtonClassName = "",
+    customButtonTabIndex = 0,
     placement,
     children,
     className = "",
@@ -29,6 +30,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     verticalEllipsis = false,
     portalElement,
     menuButtonOnClick,
+    onMenuClose,
     tabIndex,
     closeOnSelect,
   } = props;
@@ -47,18 +49,28 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     setIsOpen(true);
     if (referenceElement) referenceElement.focus();
   };
-  const closeDropdown = () => setIsOpen(false);
+  const closeDropdown = () => {
-  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+    isOpen && onMenuClose && onMenuClose();
+    setIsOpen(false);
+  };
+
+  const selectActiveItem = () => {
+    const activeItem: HTMLElement | undefined | null = dropdownRef.current?.querySelector(
+      `[data-headlessui-state="active"] button`
+    );
+    activeItem?.click();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen, selectActiveItem);
+
+  const handleOnClick = () => {
+    if (closeOnSelect) closeDropdown();
+  };
+
   useOutsideClickDetector(dropdownRef, closeDropdown);
 
   let menuItems = (
-    <Menu.Items
+    <Menu.Items className="fixed z-10" static>
-      className="fixed z-10"
-      onClick={() => {
-        if (closeOnSelect) closeDropdown();
-      }}
-      static
-    >
       <div
         className={cn(
           "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
@@ -89,7 +101,8 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
       ref={dropdownRef}
       tabIndex={tabIndex}
       className={cn("relative w-min text-left", className)}
-      onKeyDown={handleKeyDown}
+      onKeyDownCapture={handleKeyDown}
+      onClick={handleOnClick}
     >
       {({ open }) => (
         <>
@@ -98,11 +111,13 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
               <button
                 ref={setReferenceElement}
                 type="button"
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
                   openDropdown();
                   if (menuButtonOnClick) menuButtonOnClick();
                 }}
                 className={customButtonClassName}
+                tabIndex={customButtonTabIndex}
               >
                 {customButton}
               </button>
@@ -114,7 +129,8 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                   <button
                     ref={setReferenceElement}
                     type="button"
-                    onClick={() => {
+                    onClick={(e) => {
+                      e.stopPropagation();
                       openDropdown();
                       if (menuButtonOnClick) menuButtonOnClick();
                     }}
@@ -122,6 +138,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
                       disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
                     } ${buttonClassName}`}
+                    tabIndex={customButtonTabIndex}
                   >
                     <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
                   </button>
@@ -138,10 +155,12 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                         ? "cursor-not-allowed text-custom-text-200"
                         : "cursor-pointer hover:bg-custom-background-80"
                     } ${buttonClassName}`}
-                    onClick={() => {
+                    onClick={(e) => {
+                      e.stopPropagation();
                       openDropdown();
                       if (menuButtonOnClick) menuButtonOnClick();
                     }}
+                    tabIndex={customButtonTabIndex}
                   >
                     {label}
                     {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
@@ -159,6 +178,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
 
 const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
   const { children, onClick, className = "" } = props;
+
   return (
     <Menu.Item as="div">
       {({ active, close }) => (

packages/ui/src/dropdowns/helper.tsx

@@ -3,6 +3,7 @@ import { Placement } from "@blueprintjs/popover2";
 
 export interface IDropdownProps {
   customButtonClassName?: string;
+  customButtonTabIndex?: number;
   buttonClassName?: string;
   className?: string;
   customButton?: JSX.Element;
@@ -23,6 +24,7 @@ export interface ICustomMenuDropdownProps extends IDropdownProps {
   noBorder?: boolean;
   verticalEllipsis?: boolean;
   menuButtonOnClick?: (...args: any) => void;
+  onMenuClose?: () => void;
   closeOnSelect?: boolean;
   portalElement?: Element | null;
 }

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  intermediate?: boolean;
+  className?: string;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+  const { id, name, checked, intermediate = false, disabled, className = "", ...rest } = props;
+
+  return (
+    <div className={`relative w-full flex gap-2 ${className}`}>
+      <input
+        id={id}
+        ref={ref}
+        type="checkbox"
+        name={name}
+        checked={checked}
+        className={`
+          appearance-none shrink-0 w-4 h-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-custom-primary-50
+          ${
+            disabled
+              ? "border-custom-border-200 bg-custom-background-80 cursor-not-allowed"
+              : `cursor-pointer ${
+                  checked || intermediate
+                    ? "border-custom-primary-40 bg-custom-primary-100 hover:bg-custom-primary-200"
+                    : "border-custom-border-300 hover:border-custom-border-400 bg-white"
+                }`
+          }
+        `}
+        disabled={disabled}
+        {...rest}
+      />
+      <svg
+        className={`absolute w-4 h-4 p-0.5 pointer-events-none outline-none ${
+          disabled ? "stroke-custom-text-400 opacity-40" : "stroke-white"
+        } ${checked ? "block" : "hidden"}`}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+      <svg
+        className={`absolute w-4 h-4 p-0.5 pointer-events-none outline-none ${
+          disabled ? "stroke-custom-text-400 opacity-40" : "stroke-white"
+        } ${intermediate && !checked ? "block" : "hidden"}`}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 8 8"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M5.75 4H2.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    </div>
+  );
+});
+Checkbox.displayName = "form-checkbox-field";
+
+export { Checkbox };

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

@@ -1,3 +1,4 @@
 export * from "./input";
 export * from "./textarea";
 export * from "./input-color-picker";
+export * from "./checkbox";

packages/ui/src/hooks/use-dropdown-key-down.tsx

@@ -1,16 +1,23 @@
 import { useCallback } from "react";
 
 type TUseDropdownKeyDown = {
-  (onOpen: () => void, onClose: () => void, isOpen: boolean): (event: React.KeyboardEvent<HTMLElement>) => void;
+  (
+    onOpen: () => void,
+    onClose: () => void,
+    isOpen: boolean,
+    selectActiveItem?: () => void
+  ): (event: React.KeyboardEvent<HTMLElement>) => void;
 };
 
-export const useDropdownKeyDown: TUseDropdownKeyDown = (onOpen, onClose, isOpen) => {
+export const useDropdownKeyDown: TUseDropdownKeyDown = (onOpen, onClose, isOpen, selectActiveItem?) => {
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLElement>) => {
       if (event.key === "Enter") {
-        event.stopPropagation();
         if (!isOpen) {
+          event.stopPropagation();
           onOpen();
+        } else {
+          selectActiveItem && selectActiveItem();
         }
       } else if (event.key === "Escape" && isOpen) {
         event.stopPropagation();

web/components/account/sign-in-forms/optional-set-password.tsx

@@ -4,12 +4,14 @@ import { Controller, useForm } from "react-hook-form";
 import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // icons
 import { Eye, EyeOff } from "lucide-react";
+import { PASSWORD_CREATE_SELECTED, PASSWORD_CREATE_SKIPPED } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -34,6 +36,8 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
   // states
   const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
+  // store hooks
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -63,21 +67,34 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
           title: "Success!",
           message: "Password created successfully.",
         });
+        captureEvent(PASSWORD_CREATE_SELECTED, {
+          state: "SUCCESS",
+          first_time: false,
+        });
         await handleSignInRedirection();
       })
-      .catch((err) =>
+      .catch((err) => {
+        captureEvent(PASSWORD_CREATE_SELECTED, {
+          state: "FAILED",
+          first_time: false,
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
-        })
+        });
-      );
+      });
   };
 
   const handleGoToWorkspace = async () => {
     setIsGoingToWorkspace(true);
-
+    await handleSignInRedirection().finally(() => {
-    await handleSignInRedirection().finally(() => setIsGoingToWorkspace(false));
+      captureEvent(PASSWORD_CREATE_SKIPPED, {
+        state: "SUCCESS",
+        first_time: false,
+      });
+      setIsGoingToWorkspace(false);
+    });
   };
 
   return (

web/components/account/sign-in-forms/password.tsx

@@ -7,7 +7,7 @@ import { Eye, EyeOff, XCircle } from "lucide-react";
 import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 // components
 import { ESignInSteps, ForgotPasswordPopover } from "components/account";
 // ui
@@ -16,6 +16,8 @@ import { Button, Input } from "@plane/ui";
 import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IPasswordSignInData } from "@plane/types";
+// constants
+import { FORGOT_PASSWORD, SIGN_IN_WITH_PASSWORD } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -46,6 +48,7 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
   const {
     config: { envConfig },
   } = useApplication();
+  const { captureEvent } = useEventTracker();
   // derived values
   const isSmtpConfigured = envConfig?.is_smtp_configured;
   // form info
@@ -72,7 +75,13 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
 
     await authService
       .passwordSignIn(payload)
-      .then(async () => await onSubmit())
+      .then(async () => {
+        captureEvent(SIGN_IN_WITH_PASSWORD, {
+          state: "SUCCESS",
+          first_time: false,
+        });
+        await onSubmit();
+      })
       .catch((err) =>
         setToastAlert({
           type: "error",
@@ -182,9 +191,10 @@ export const SignInPasswordForm: React.FC<Props> = observer((props) => {
               </div>
             )}
           />
-          <div className="w-full text-right mt-2 pb-3">
+          <div className="mt-2 w-full pb-3 text-right">
             {isSmtpConfigured ? (
               <Link
+                onClick={() => captureEvent(FORGOT_PASSWORD)}
                 href={`/accounts/forgot-password?email=${email}`}
                 className="text-xs font-medium text-custom-primary-100"
               >

web/components/account/sign-in-forms/root.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import { LatestFeatureBlock } from "components/common";
@@ -13,6 +13,8 @@ import {
   OAuthOptions,
   SignInOptionalSetPasswordForm,
 } from "components/account";
+// constants
+import { NAVIGATE_TO_SIGNUP } from "constants/event-tracker";
 
 export enum ESignInSteps {
   EMAIL = "EMAIL",
@@ -32,6 +34,7 @@ export const SignInRoot = observer(() => {
   const {
     config: { envConfig },
   } = useApplication();
+  const { captureEvent } = useEventTracker();
   // derived values
   const isSmtpConfigured = envConfig?.is_smtp_configured;
 
@@ -110,7 +113,11 @@ export const SignInRoot = observer(() => {
             <OAuthOptions handleSignInRedirection={handleRedirection} type="sign_in" />
             <p className="text-xs text-onboarding-text-300 text-center mt-6">
               Don{"'"}t have an account?{" "}
-              <Link href="/accounts/sign-up" className="text-custom-primary-100 font-medium underline">
+              <Link
+                href="/accounts/sign-up"
+                onClick={() => captureEvent(NAVIGATE_TO_SIGNUP, {})}
+                className="text-custom-primary-100 font-medium underline"
+              >
                 Sign up
               </Link>
             </p>

web/components/account/sign-in-forms/unique-code.tsx

@@ -7,12 +7,15 @@ import { UserService } from "services/user.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useTimer from "hooks/use-timer";
+import { useEventTracker } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData, IMagicSignInData } from "@plane/types";
+// constants
+import { CODE_VERIFIED } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -41,6 +44,8 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
   const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
+  // store hooks
+  const { captureEvent } = useEventTracker();
   // timer
   const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
   // form info
@@ -69,17 +74,22 @@ export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
     await authService
       .magicSignIn(payload)
       .then(async () => {
+        captureEvent(CODE_VERIFIED, {
+          state: "SUCCESS",
+        });
         const currentUser = await userService.currentUser();
-
         await onSubmit(currentUser.is_password_autoset);
       })
-      .catch((err) =>
+      .catch((err) => {
+        captureEvent(CODE_VERIFIED, {
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
-        })
+        });
-      );
+      });
   };
 
   const handleSendNewCode = async (formData: TUniqueCodeFormValues) => {

web/components/account/sign-up-forms/optional-set-password.tsx

@@ -4,12 +4,14 @@ import { Controller, useForm } from "react-hook-form";
 import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // constants
 import { ESignUpSteps } from "components/account";
+import { PASSWORD_CREATE_SELECTED, PASSWORD_CREATE_SKIPPED, SETUP_PASSWORD } from "constants/event-tracker";
 // icons
 import { Eye, EyeOff } from "lucide-react";
 
@@ -37,6 +39,8 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
   // states
   const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
+  // store hooks
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -66,21 +70,34 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
           title: "Success!",
           message: "Password created successfully.",
         });
+        captureEvent(SETUP_PASSWORD, {
+          state: "SUCCESS",
+          first_time: true,
+        });
         await handleSignInRedirection();
       })
-      .catch((err) =>
+      .catch((err) => {
+        captureEvent(SETUP_PASSWORD, {
+          state: "FAILED",
+          first_time: true,
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
-        })
+        });
-      );
+      });
   };
 
   const handleGoToWorkspace = async () => {
     setIsGoingToWorkspace(true);
-
+    await handleSignInRedirection().finally(() => {
-    await handleSignInRedirection().finally(() => setIsGoingToWorkspace(false));
+      captureEvent(PASSWORD_CREATE_SKIPPED, {
+        state: "SUCCESS",
+        first_time: true,
+      });
+      setIsGoingToWorkspace(false);
+    });
   };
 
   return (

web/components/account/sign-up-forms/root.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import {
@@ -12,6 +12,8 @@ import {
   SignUpUniqueCodeForm,
 } from "components/account";
 import Link from "next/link";
+// constants
+import { NAVIGATE_TO_SIGNIN } from "constants/event-tracker";
 
 export enum ESignUpSteps {
   EMAIL = "EMAIL",
@@ -32,6 +34,7 @@ export const SignUpRoot = observer(() => {
   const {
     config: { envConfig },
   } = useApplication();
+  const { captureEvent } = useEventTracker();
 
   // step 1 submit handler- email verification
   const handleEmailVerification = () => setSignInStep(ESignUpSteps.UNIQUE_CODE);
@@ -86,7 +89,11 @@ export const SignUpRoot = observer(() => {
           <OAuthOptions handleSignInRedirection={handleRedirection} type="sign_up" />
           <p className="text-xs text-onboarding-text-300 text-center mt-6">
             Already using Plane?{" "}
-            <Link href="/" className="text-custom-primary-100 font-medium underline">
+            <Link
+              href="/"
+              onClick={() => captureEvent(NAVIGATE_TO_SIGNIN, {})}
+              className="text-custom-primary-100 font-medium underline"
+            >
               Sign in
             </Link>
           </p>

web/components/account/sign-up-forms/unique-code.tsx

@@ -8,12 +8,15 @@ import { UserService } from "services/user.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useTimer from "hooks/use-timer";
+import { useEventTracker } from "hooks/store";
 // ui
 import { Button, Input } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData, IMagicSignInData } from "@plane/types";
+// constants
+import { CODE_VERIFIED } from "constants/event-tracker";
 
 type Props = {
   email: string;
@@ -39,6 +42,8 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
   const { email, handleEmailClear, onSubmit } = props;
   // states
   const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
+  // store hooks
+  const { captureEvent } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
   // timer
@@ -69,17 +74,22 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
     await authService
       .magicSignIn(payload)
       .then(async () => {
+        captureEvent(CODE_VERIFIED, {
+          state: "SUCCESS",
+        });
         const currentUser = await userService.currentUser();
-
         await onSubmit(currentUser.is_password_autoset);
       })
-      .catch((err) =>
+      .catch((err) => {
+        captureEvent(CODE_VERIFIED, {
+          state: "FAILED",
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
-        })
+        });
-      );
+      });
   };
 
   const handleSendNewCode = async (formData: TUniqueCodeFormValues) => {
@@ -96,7 +106,6 @@ export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
           title: "Success!",
           message: "A new unique code has been sent to your email.",
         });
-
         reset({
           email: formData.email,
           token: "",

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

@@ -10,6 +10,8 @@ import { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSi
 import { IAnalyticsParams } from "@plane/types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
+import { cn } from "helpers/common.helper";
+import { useApplication } from "hooks/store";
 
 type Props = {
   additionalParams?: Partial<IAnalyticsParams>;
@@ -46,11 +48,13 @@ export const CustomAnalytics: React.FC<Props> = observer((props) => {
     workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
   );
 
+  const { theme: themeStore } = useApplication();
+
   const isProjectLevel = projectId ? true : false;
 
   return (
-    <div className={`flex flex-col-reverse overflow-hidden ${fullScreen ? "md:grid md:h-full md:grid-cols-4" : ""}`}>
+    <div className={cn("relative w-full h-full flex overflow-hidden", isProjectLevel ? "flex-col-reverse" : "")}>
-      <div className="col-span-3 flex h-full flex-col overflow-hidden">
+      <div className="w-full flex h-full flex-col overflow-hidden">
         <CustomAnalyticsSelectBar
           control={control}
           setValue={setValue}
@@ -61,16 +65,22 @@ export const CustomAnalytics: React.FC<Props> = observer((props) => {
         <CustomAnalyticsMainContent
           analytics={analytics}
           error={analyticsError}
-          fullScreen={fullScreen}
           params={params}
+          fullScreen={fullScreen}
         />
       </div>
-      <CustomAnalyticsSidebar
+
-        analytics={analytics}
+      <div
-        params={params}
+        className={cn(
-        fullScreen={fullScreen}
+          "border-l border-custom-border-200 transition-all",
-        isProjectLevel={isProjectLevel}
+          !isProjectLevel
-      />
+            ? "absolute right-0 top-0 bottom-0 md:relative flex-shrink-0 h-full max-w-[250px] sm:max-w-full"
+            : ""
+        )}
+        style={themeStore.workspaceAnalyticsSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
+      >
+        <CustomAnalyticsSidebar analytics={analytics} params={params} isProjectLevel={isProjectLevel} />
+      </div>
     </div>
   );
 });

web/components/analytics/custom-analytics/select-bar.tsx

@@ -22,9 +22,8 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-3" : "grid-cols-2"} ${
+      className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-1 sm:grid-cols-3" : "grid-cols-2"} ${fullScreen ? "md:py-5 lg:grid-cols-4" : ""
-        fullScreen ? "md:py-5 lg:grid-cols-4" : ""
+        }`}
-      }`}
     >
       {!isProjectLevel && (
         <div>

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

@@ -17,9 +17,9 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
   const { getProjectById } = useProject();
 
   return (
-    <div className="hidden h-full overflow-hidden md:flex md:flex-col">
+    <div className="relative flex flex-col gap-4 h-full">
       <h4 className="font-medium">Selected Projects</h4>
-      <div className="mt-4 h-full space-y-6 overflow-y-auto">
+      <div className="relative space-y-6 overflow-hidden overflow-y-auto">
         {projectIds.map((projectId) => {
           const project = getProjectById(projectId);
 

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

@@ -26,7 +26,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
     <>
       {projectId ? (
         cycleDetails ? (
-          <div className="hidden h-full overflow-y-auto md:block">
+          <div className="h-full overflow-y-auto">
             <h4 className="break-words font-medium">Analytics for {cycleDetails.name}</h4>
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
@@ -52,7 +52,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             </div>
           </div>
         ) : moduleDetails ? (
-          <div className="hidden h-full overflow-y-auto md:block">
+          <div className="h-full overflow-y-auto">
             <h4 className="break-words font-medium">Analytics for {moduleDetails.name}</h4>
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
@@ -78,7 +78,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             </div>
           </div>
         ) : (
-          <div className="hidden h-full overflow-y-auto md:flex md:flex-col">
+          <div className="h-full overflow-y-auto">
             <div className="flex items-center gap-1">
               {projectDetails?.emoji ? (
                 <div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</div>

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { mutate } from "swr";
@@ -19,18 +19,18 @@ import { renderFormattedDate } from "helpers/date-time.helper";
 import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IWorkspace } from "@plane/types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
+import { cn } from "helpers/common.helper";
 
 type Props = {
   analytics: IAnalyticsResponse | undefined;
   params: IAnalyticsParams;
-  fullScreen: boolean;
   isProjectLevel: boolean;
 };
 
 const analyticsService = new AnalyticsService();
 
 export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
-  const { analytics, params, fullScreen, isProjectLevel = false } = props;
+  const { analytics, params, isProjectLevel = false } = props;
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
@@ -138,18 +138,14 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
 
   const selectedProjects = params.project && params.project.length > 0 ? params.project : workspaceProjectIds;
 
+
   return (
-    <div
+    <div className={cn("relative h-full flex w-full gap-2 justify-between items-start px-5 py-4 bg-custom-sidebar-background-100", !isProjectLevel ? "flex-col" : "")}
-      className={`flex items-center justify-between space-y-2 px-5 py-2.5 ${
-        fullScreen
-          ? "overflow-hidden border-l border-custom-border-200 md:h-full md:flex-col md:items-start md:space-y-4 md:border-l md:border-custom-border-200 md:py-5"
-          : ""
-      }`}
     >
       <div className="flex flex-wrap items-center gap-2">
         <div className="flex items-center gap-1 rounded-md bg-custom-background-80 px-3 py-1 text-xs text-custom-text-200">
           <LayersIcon height={14} width={14} />
-          {analytics ? analytics.total : "..."} Issues
+          {analytics ? analytics.total : "..."} <div className={cn(isProjectLevel ? "hidden md:block" : "")}>Issues</div>
         </div>
         {isProjectLevel && (
           <div className="flex items-center gap-1 rounded-md bg-custom-background-80 px-3 py-1 text-xs text-custom-text-200">
@@ -158,36 +154,36 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
               (cycleId
                 ? cycleDetails?.created_at
                 : moduleId
-                ? moduleDetails?.created_at
+                  ? moduleDetails?.created_at
-                : projectDetails?.created_at) ?? ""
+                  : projectDetails?.created_at) ?? ""
             )}
           </div>
         )}
       </div>
-      <div className="h-full w-full overflow-hidden">
+
-        {fullScreen ? (
+      <div className={cn("h-full w-full overflow-hidden", isProjectLevel ? "hidden" : "block")}>
-          <>
+        <>
-            {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
+          {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
-              <CustomAnalyticsSidebarProjectsList projectIds={selectedProjects} />
+            <CustomAnalyticsSidebarProjectsList projectIds={selectedProjects} />
-            )}
+          )}
-            <CustomAnalyticsSidebarHeader />
+          <CustomAnalyticsSidebarHeader />
-          </>
+        </>
-        ) : null}
       </div>
-      <div className="flex flex-wrap items-center gap-2 justify-self-end">
+
+      <div className="flex flex-wrap items-center gap-2 justify-end">
         <Button
           variant="neutral-primary"
-          prependIcon={<RefreshCw className="h-3.5 w-3.5" />}
+          prependIcon={<RefreshCw className="h-3 md:h-3.5 w-3 md:w-3.5" />}
           onClick={() => {
             if (!workspaceSlug) return;
 
             mutate(ANALYTICS(workspaceSlug.toString(), params));
           }}
         >
-          Refresh
+          <div className={cn(isProjectLevel ? "hidden md:block" : "")}>Refresh</div>
         </Button>
         <Button variant="primary" prependIcon={<Download className="h-3.5 w-3.5" />} onClick={exportAnalytics}>
-          Export as CSV
+          <div className={cn(isProjectLevel ? "hidden md:block" : "")}>Export as CSV</div>
         </Button>
       </div>
     </div>

web/components/analytics/project-modal/main-content.tsx

@@ -20,16 +20,15 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
 
   return (
     <Tab.Group as={React.Fragment}>
-      <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 p-5 pt-0">
+      <Tab.List as="div" className="flex space-x-2 border-b border-custom-border-200 px-0 md:px-5 py-0 md:py-3">
         {ANALYTICS_TABS.map((tab) => (
           <Tab
             key={tab.key}
             className={({ selected }) =>
-              `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+              `rounded-0 w-full md:w-max md:rounded-3xl border-b md:border border-custom-border-200 focus:outline-none px-0 md:px-4 py-2 text-xs hover:bg-custom-background-80 ${selected ? "border-custom-primary-100 text-custom-primary-100 md:bg-custom-background-80 md:text-custom-text-200 md:border-custom-border-200" : "border-transparent"
-                selected ? "bg-custom-background-80" : ""
               }`
             }
-            onClick={() => {}}
+            onClick={() => { }}
           >
             {tab.title}
           </Tab>

web/components/analytics/project-modal/modal.tsx

@@ -38,14 +38,12 @@ export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
         >
           <Dialog.Panel className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
             <div
-              className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
+              className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${fullScreen ? "w-full p-2" : "w-full sm:w-full md:w-1/2"
-                fullScreen ? "w-full p-2" : "w-1/2"
+                }`}
-              }`}
             >
               <div
-                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
+                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${fullScreen ? "rounded-lg border" : "border-l"
-                  fullScreen ? "rounded-lg border" : "border-l"
+                  }`}
-                }`}
               >
                 <ProjectAnalyticsModalHeader
                   fullScreen={fullScreen}

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

@@ -163,6 +163,8 @@ export const CommandPalette: FC = observer(() => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [handleKeyDown]);
 
+  const isDraftIssue = router?.asPath?.includes("draft-issues") || false;
+
   if (!currentUser) return null;
 
   return (
@@ -217,6 +219,7 @@ export const CommandPalette: FC = observer(() => {
         onClose={() => toggleCreateIssueModal(false)}
         data={cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_ids: [moduleId.toString()] } : undefined}
         storeType={createIssueStoreType}
+        isDraft={isDraftIssue}
       />
 
       {workspaceSlug && projectId && issueId && issueDetails && (

web/components/command-palette/shortcuts-modal/modal.tsx

@@ -47,7 +47,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
             <Dialog.Panel className="h-full w-full">
-              <div className="grid h-full w-full place-items-center p-5">
+              <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
                 <div className="flex h-[61vh] w-full flex-col  space-y-4 overflow-hidden rounded-lg bg-custom-background-100 p-5 shadow-custom-shadow-md transition-all sm:w-[28rem]">
                   <Dialog.Title as="h3" className="flex justify-between">
                     <span className="text-lg font-medium">Keyboard shortcuts</span>

web/components/common/breadcrumb-link.tsx

@@ -11,7 +11,7 @@ export const BreadcrumbLink: React.FC<Props> = (props) => {
   const { href, label, icon } = props;
   return (
     <Tooltip tooltipContent={label} position="bottom">
-      <li className="flex items-center space-x-2">
+      <li className="flex items-center space-x-2" tabIndex={-1}>
         <div className="flex flex-wrap items-center gap-2.5">
           {href ? (
             <Link

web/components/core/render-if-visible-HOC.tsx

@@ -0,0 +1,80 @@
+import { cn } from "helpers/common.helper";
+import React, { useState, useRef, useEffect, ReactNode, MutableRefObject } from "react";
+
+type Props = {
+  defaultHeight?: string;
+  verticalOffset?: number;
+  horizonatlOffset?: number;
+  root?: MutableRefObject<HTMLElement | null>;
+  children: ReactNode;
+  as?: keyof JSX.IntrinsicElements;
+  classNames?: string;
+  alwaysRender?: boolean;
+  placeholderChildren?: ReactNode;
+  pauseHeightUpdateWhileRendering?: boolean;
+  changingReference?: any;
+};
+
+const RenderIfVisible: React.FC<Props> = (props) => {
+  const {
+    defaultHeight = "300px",
+    root,
+    verticalOffset = 50,
+    horizonatlOffset = 0,
+    as = "div",
+    children,
+    classNames = "",
+    alwaysRender = false, //render the children even if it is not visble in root
+    placeholderChildren = null, //placeholder children
+    pauseHeightUpdateWhileRendering = false, //while this is true the height of the blocks are maintained
+    changingReference, //This is to force render when this reference is changed
+  } = props;
+  const [shouldVisible, setShouldVisible] = useState<boolean>(alwaysRender);
+  const placeholderHeight = useRef<string>(defaultHeight);
+  const intersectionRef = useRef<HTMLElement | null>(null);
+
+  const isVisible = alwaysRender || shouldVisible;
+
+  // Set visibility with intersection observer
+  useEffect(() => {
+    if (intersectionRef.current) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (typeof window !== undefined && window.requestIdleCallback) {
+            window.requestIdleCallback(() => setShouldVisible(entries[0].isIntersecting), {
+              timeout: 300,
+            });
+          } else {
+            setShouldVisible(entries[0].isIntersecting);
+          }
+        },
+        {
+          root: root?.current,
+          rootMargin: `${verticalOffset}% ${horizonatlOffset}% ${verticalOffset}% ${horizonatlOffset}%`,
+        }
+      );
+      observer.observe(intersectionRef.current);
+      return () => {
+        if (intersectionRef.current) {
+          observer.unobserve(intersectionRef.current);
+        }
+      };
+    }
+  }, [root?.current, intersectionRef, children, changingReference]);
+
+  //Set height after render
+  useEffect(() => {
+    if (intersectionRef.current && isVisible) {
+      placeholderHeight.current = `${intersectionRef.current.offsetHeight}px`;
+    }
+  }, [isVisible, intersectionRef, alwaysRender, pauseHeightUpdateWhileRendering]);
+
+  const child = isVisible ? <>{children}</> : placeholderChildren;
+  const style =
+    isVisible && !pauseHeightUpdateWhileRendering ? {} : { height: placeholderHeight.current, width: "100%" };
+  const className = isVisible ? classNames : cn(classNames, "bg-custom-background-80");
+
+  return React.createElement(as, { ref: intersectionRef, style, className }, child);
+};
+
+export default RenderIfVisible;

web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx

@@ -3,7 +3,7 @@ import { Menu } from "lucide-react";
 import { useApplication } from "hooks/store";
 import { observer } from "mobx-react";
 
-export const SidebarHamburgerToggle: FC = observer (() => {
+export const SidebarHamburgerToggle: FC = observer(() => {
   const { theme: themStore } = useApplication();
   return (
     <div

web/components/cycles/active-cycle-details.tsx

@@ -150,7 +150,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
     color: group.color,
   }));
 
-  const daysLeft = findHowManyDaysLeft(activeCycle.end_date ?? new Date());
+  const daysLeft = findHowManyDaysLeft(activeCycle.end_date) ?? 0;
 
   return (
     <div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">

web/components/cycles/cycle-mobile-header.tsx

@@ -0,0 +1,168 @@
+import { useCallback, useState } from "react";
+import router from "next/router";
+//components
+import { CustomMenu } from "@plane/ui";
+// icons
+import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+// hooks
+import { useIssues, useCycle, useProjectState, useLabel, useMember } from "hooks/store";
+// constants
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "constants/issue";
+import { ProjectAnalyticsModal } from "components/analytics";
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
+
+export const CycleMobileHeader = () => {
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  const { getCycleById } = useCycle();
+  const layouts = [
+    { key: "list", title: "List", icon: List },
+    { key: "kanban", title: "Kanban", icon: Kanban },
+    { key: "calendar", title: "Calendar", icon: Calendar },
+  ];
+
+  const { workspaceSlug, projectId, cycleId } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    cycleId: string;
+  };
+  const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
+  // store hooks
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.CYCLE);
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  const { projectStates } = useProjectState();
+  const { projectLabels } = useLabel();
+  const {
+    project: { projectMemberIds },
+  } = useMember();
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues }, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property, cycleId);
+    },
+    [workspaceSlug, projectId, cycleId, updateFilters]
+  );
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        cycleDetails={cycleDetails ?? undefined}
+      />
+      <div className="flex justify-evenly py-2 border-b border-custom-border-200">
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          placement="bottom-start"
+          customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+          closeOnSelect
+        >
+          {layouts.map((layout, index) => (
+            <CustomMenu.MenuItem
+              onClick={() => {
+                handleLayoutChange(ISSUE_LAYOUTS[index].key);
+              }}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="w-3 h-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
+        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+          <FiltersDropdown
+            title="Filters"
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-custom-text-200 text-sm">
+                Filters
+                <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
+              </span>
+            }
+          >
+            <FilterSelection
+              filters={issueFilters?.filters ?? {}}
+              handleFiltersUpdate={handleFiltersUpdate}
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              labels={projectLabels}
+              memberIds={projectMemberIds ?? undefined}
+              states={projectStates}
+            />
+          </FiltersDropdown>
+        </div>
+        <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
+          <FiltersDropdown
+            title="Display"
+            placement="bottom-end"
+            menuButton={
+              <span className="flex items-center text-custom-text-200 text-sm">
+                Display
+                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+              </span>
+            }
+          >
+            <DisplayFiltersSelection
+              layoutDisplayFiltersOptions={
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+              displayFilters={issueFilters?.displayFilters ?? {}}
+              handleDisplayFiltersUpdate={handleDisplayFilters}
+              displayProperties={issueFilters?.displayProperties ?? {}}
+              handleDisplayPropertiesUpdate={handleDisplayProperties}
+            />
+          </FiltersDropdown>
+        </div>
+
+        <span
+          onClick={() => setAnalyticsModal(true)}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
+        >
+          Analytics
+        </span>
+      </div>
+    </>
+  );
+};

web/components/cycles/cycles-board-card.tsx

@@ -16,6 +16,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 // constants
 import { CYCLE_STATUS } from "constants/cycle";
 import { EUserWorkspaceRoles } from "constants/workspace";
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
 //.types
 import { TCycleGroups } from "@plane/types";
 
@@ -33,7 +34,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   // router
   const router = useRouter();
   // store
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureEvent } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -90,39 +91,55 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).catch(() => {
+    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
-      setToastAlert({
+      .then(() => {
-        type: "error",
+        captureEvent(CYCLE_FAVORITED, {
-        title: "Error!",
+          cycle_id: cycleId,
-        message: "Couldn't add the cycle to favorites. Please try again.",
+          element: "Grid layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).catch(() => {
+    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
-      setToastAlert({
+      .then(() => {
-        type: "error",
+        captureEvent(CYCLE_UNFAVORITED, {
-        title: "Error!",
+          cycle_id: cycleId,
-        message: "Couldn't add the cycle to favorites. Please try again.",
+          element: "Grid layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Cycles page board layout");
+    setTrackElement("Cycles page grid layout");
     setUpdateModal(true);
   };
 
   const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setTrackElement("Cycles page board layout");
+    setTrackElement("Cycles page grid layout");
     setDeleteModal(true);
   };
 
@@ -137,7 +154,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     });
   };
 
-  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date ?? new Date());
+  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
     <div>

web/components/cycles/cycles-list-item.tsx

@@ -18,6 +18,7 @@ import { CYCLE_STATUS } from "constants/cycle";
 import { EUserWorkspaceRoles } from "constants/workspace";
 // types
 import { TCycleGroups } from "@plane/types";
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
 
 type TCyclesListItem = {
   cycleId: string;
@@ -37,7 +38,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   // router
   const router = useRouter();
   // store hooks
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureEvent } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -63,26 +64,42 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).catch(() => {
+    addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
-      setToastAlert({
+      .then(() => {
-        type: "error",
+        captureEvent(CYCLE_FAVORITED, {
-        title: "Error!",
+          cycle_id: cycleId,
-        message: "Couldn't add the cycle to favorites. Please try again.",
+          element: "List layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
 
-    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).catch(() => {
+    removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId)
-      setToastAlert({
+      .then(() => {
-        type: "error",
+        captureEvent(CYCLE_UNFAVORITED, {
-        title: "Error!",
+          cycle_id: cycleId,
-        message: "Couldn't add the cycle to favorites. Please try again.",
+          element: "List layout",
+          state: "SUCCESS",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
       });
-    });
   };
 
   const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
@@ -140,7 +157,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
 
   const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
 
-  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date ?? new Date());
+  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
     <>
@@ -159,10 +176,10 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         projectId={projectId}
       />
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
-        <div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
+        <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 md:flex-row">
-          <div className="flex w-full items-center gap-3 truncate">
+          <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
-            <div className="flex items-center gap-4 truncate">
+            <div className="relative flex w-full items-center gap-3 overflow-hidden">
-              <span className="flex-shrink-0">
+              <div className="flex-shrink-0">
                 <CircularProgressIndicator size={38} percentage={progress}>
                   {isCompleted ? (
                     progress === 100 ? (
@@ -176,95 +193,97 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                     <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
                   )}
                 </CircularProgressIndicator>
-              </span>
+              </div>
 
-              <div className="flex items-center gap-2.5">
+              <div className="relative flex items-center gap-2.5 overflow-hidden">
-                <span className="flex-shrink-0">
+                <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
-                  <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
-                </span>
                 <Tooltip tooltipContent={cycleDetails.name} position="top">
-                  <span className="truncate text-base font-medium">{cycleDetails.name}</span>
+                  <span className="line-clamp-1 inline-block overflow-hidden truncate text-base font-medium">
+                    {cycleDetails.name}
+                  </span>
                 </Tooltip>
               </div>
-            </div>
-            <button onClick={openCycleOverview} className="z-10 hidden flex-shrink-0 group-hover:flex">
-              <Info className="h-4 w-4 text-custom-text-400" />
-            </button>
-          </div>
 
-          <div className="flex w-full items-center justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
+              <button onClick={openCycleOverview} className="invisible z-10 flex-shrink-0 group-hover:visible">
-            <div className="flex items-center justify-center">
+                <Info className="h-4 w-4 text-custom-text-400" />
-              {currentCycle && (
+              </button>
-                <span
-                  className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
-                  style={{
-                    color: currentCycle.color,
-                    backgroundColor: `${currentCycle.color}20`,
-                  }}
-                >
-                  {currentCycle.value === "current"
-                    ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
-                    : `${currentCycle.label}`}
-                </span>
-              )}
             </div>
 
-            {renderDate && (
+            {currentCycle && (
-              <span className="flex w-40 items-center justify-center gap-2 text-xs text-custom-text-300">
+              <div
-                {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+                className="relative flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
-              </span>
+                style={{
-            )}
+                  color: currentCycle.color,
-
+                  backgroundColor: `${currentCycle.color}20`,
-            <Tooltip tooltipContent={`${cycleDetails.assignees.length} Members`}>
+                }}
-              <div className="flex w-16 cursor-default items-center justify-center gap-1">
+              >
-                {cycleDetails.assignees.length > 0 ? (
+                {currentCycle.value === "current"
-                  <AvatarGroup showTooltip={false}>
+                  ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
-                    {cycleDetails.assignees.map((assignee) => (
+                  : `${currentCycle.label}`}
-                      <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
-                    ))}
-                  </AvatarGroup>
-                ) : (
-                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                    <User2 className="h-4 w-4 text-custom-text-400" />
-                  </span>
-                )}
               </div>
-            </Tooltip>
+            )}
-            {isEditingAllowed &&
+          </div>
-              (cycleDetails.is_favorite ? (
+          <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 overflow-hidden md:w-auto md:flex-shrink-0 md:justify-end ">
-                <button type="button" onClick={handleRemoveFromFavorites}>
+            <div className="text-xs text-custom-text-300">
-                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+              {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
-                </button>
+            </div>
-              ) : (
-                <button type="button" onClick={handleAddToFavorites}>
-                  <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                </button>
-              ))}
 
-            <CustomMenu ellipsis>
+            <div className="relative flex flex-shrink-0 items-center gap-3">
-              {!isCompleted && isEditingAllowed && (
+              <Tooltip tooltipContent={`${cycleDetails.assignees.length} Members`}>
+                <div className="flex w-10 cursor-default items-center justify-center">
+                  {cycleDetails.assignees.length > 0 ? (
+                    <AvatarGroup showTooltip={false}>
+                      {cycleDetails.assignees.map((assignee) => (
+                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                      ))}
+                    </AvatarGroup>
+                  ) : (
+                    <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                      <User2 className="h-4 w-4 text-custom-text-400" />
+                    </span>
+                  )}
+                </div>
+              </Tooltip>
+
+              {isEditingAllowed && (
                 <>
-                  <CustomMenu.MenuItem onClick={handleEditCycle}>
+                  {cycleDetails.is_favorite ? (
-                    <span className="flex items-center justify-start gap-2">
+                    <button type="button" onClick={handleRemoveFromFavorites}>
-                      <Pencil className="h-3 w-3" />
+                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                      <span>Edit cycle</span>
+                    </button>
-                    </span>
+                  ) : (
-                  </CustomMenu.MenuItem>
+                    <button type="button" onClick={handleAddToFavorites}>
-                  <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                    <span className="flex items-center justify-start gap-2">
+                    </button>
-                      <Trash2 className="h-3 w-3" />
+                  )}
-                      <span>Delete cycle</span>
+
-                    </span>
+                  <CustomMenu ellipsis>
-                  </CustomMenu.MenuItem>
+                    {!isCompleted && isEditingAllowed && (
+                      <>
+                        <CustomMenu.MenuItem onClick={handleEditCycle}>
+                          <span className="flex items-center justify-start gap-2">
+                            <Pencil className="h-3 w-3" />
+                            <span>Edit cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                        <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                          <span className="flex items-center justify-start gap-2">
+                            <Trash2 className="h-3 w-3" />
+                            <span>Delete cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      </>
+                    )}
+                    <CustomMenu.MenuItem onClick={handleCopyText}>
+                      <span className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-3 w-3" />
+                        <span>Copy cycle link</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
                 </>
               )}
-              <CustomMenu.MenuItem onClick={handleCopyText}>
+            </div>
-                <span className="flex items-center justify-start gap-2">
-                  <LinkIcon className="h-3 w-3" />
-                  <span>Copy cycle link</span>
-                </span>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
           </div>
         </div>
       </Link>

web/components/cycles/delete-modal.tsx

@@ -10,6 +10,8 @@ import useToast from "hooks/use-toast";
 import { Button } from "@plane/ui";
 // types
 import { ICycle } from "@plane/types";
+// constants
+import { CYCLE_DELETED } from "constants/event-tracker";
 
 interface ICycleDelete {
   cycle: ICycle;
@@ -45,13 +47,13 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
             message: "Cycle deleted successfully.",
           });
           captureCycleEvent({
-            eventName: "Cycle deleted",
+            eventName: CYCLE_DELETED,
             payload: { ...cycle, state: "SUCCESS" },
           });
         })
         .catch(() => {
           captureCycleEvent({
-            eventName: "Cycle deleted",
+            eventName: CYCLE_DELETED,
             payload: { ...cycle, state: "FAILED" },
           });
         });

web/components/cycles/form.tsx

@@ -10,7 +10,7 @@ import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 import { ICycle } from "@plane/types";
 
 type Props = {
-  handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
+  handleFormSubmit: (values: Partial<ICycle>, dirtyFields: any) => Promise<void>;
   handleClose: () => void;
   status: boolean;
   projectId: string;
@@ -29,7 +29,7 @@ export const CycleForm: React.FC<Props> = (props) => {
   const { handleFormSubmit, handleClose, status, projectId, setActiveProject, data } = props;
   // form data
   const {
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, dirtyFields },
     handleSubmit,
     control,
     watch,
@@ -61,7 +61,7 @@ export const CycleForm: React.FC<Props> = (props) => {
   maxDate?.setDate(maxDate.getDate() - 1);
 
   return (
-    <form onSubmit={handleSubmit(handleFormSubmit)}>
+    <form onSubmit={handleSubmit((formData)=>handleFormSubmit(formData,dirtyFields))}>
       <div className="space-y-5">
         <div className="flex items-center gap-x-3">
           {!status && (

web/components/cycles/gantt-chart/cycles-list-layout.tsx

@@ -1,11 +1,8 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { KeyedMutator } from "swr";
 // hooks
 import { useCycle, useUser } from "hooks/store";
-// services
-import { CycleService } from "services/cycle.service";
 // components
 import { GanttChartRoot, IBlockUpdateData, CycleGanttSidebar } from "components/gantt-chart";
 import { CycleGanttBlock } from "components/cycles";
@@ -17,14 +14,10 @@ import { EUserProjectRoles } from "constants/project";
 type Props = {
   workspaceSlug: string;
   cycleIds: string[];
-  mutateCycles?: KeyedMutator<ICycle[]>;
 };
 
-// services
-const cycleService = new CycleService();
-
 export const CyclesListGanttChartView: FC<Props> = observer((props) => {
-  const { cycleIds, mutateCycles } = props;
+  const { cycleIds } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -32,38 +25,15 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { getCycleById } = useCycle();
+  const { getCycleById, updateCycleDetails } = useCycle();
 
-  const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
+  const handleCycleUpdate = async (cycle: ICycle, data: IBlockUpdateData) => {
-    if (!workspaceSlug) return;
+    if (!workspaceSlug || !cycle) return;
-    mutateCycles &&
-      mutateCycles((prevData: any) => {
-        if (!prevData) return prevData;
 
-        const newList = prevData.map((p: any) => ({
+    const payload: any = { ...data };
-          ...p,
+    if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;
-          ...(p.id === cycle.id
-            ? {
-                start_date: payload.start_date ? payload.start_date : p.start_date,
-                target_date: payload.target_date ? payload.target_date : p.end_date,
-                sort_order: payload.sort_order ? payload.sort_order.newSortOrder : p.sort_order,
-              }
-            : {}),
-        }));
 
-        if (payload.sort_order) {
+    await updateCycleDetails(workspaceSlug.toString(), cycle.project, cycle.id, payload);
-          const removedElement = newList.splice(payload.sort_order.sourceIndex, 1)[0];
-          newList.splice(payload.sort_order.destinationIndex, 0, removedElement);
-        }
-
-        return newList;
-      }, false);
-
-    const newPayload: any = { ...payload };
-
-    if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
-
-    cycleService.patchCycle(workspaceSlug.toString(), cycle.project, cycle.id, newPayload);
   };
 
   const blockFormat = (blocks: (ICycle | null)[]) => {

web/components/cycles/modal.tsx

@@ -10,6 +10,8 @@ import useLocalStorage from "hooks/use-local-storage";
 import { CycleForm } from "components/cycles";
 // types
 import type { CycleDateCheckData, ICycle, TCycleView } from "@plane/types";
+// constants
+import { CYCLE_CREATED, CYCLE_UPDATED } from "constants/event-tracker";
 
 type CycleModalProps = {
   isOpen: boolean;
@@ -47,7 +49,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           message: "Cycle created successfully.",
         });
         captureCycleEvent({
-          eventName: "Cycle created",
+          eventName: CYCLE_CREATED,
           payload: { ...res, state: "SUCCESS" },
         });
       })
@@ -58,18 +60,23 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           message: err.detail ?? "Error in creating cycle. Please try again.",
         });
         captureCycleEvent({
-          eventName: "Cycle created",
+          eventName: CYCLE_CREATED,
           payload: { ...payload, state: "FAILED" },
         });
       });
   };
 
-  const handleUpdateCycle = async (cycleId: string, payload: Partial<ICycle>) => {
+  const handleUpdateCycle = async (cycleId: string, payload: Partial<ICycle>, dirtyFields: any) => {
     if (!workspaceSlug || !projectId) return;
 
     const selectedProjectId = payload.project ?? projectId.toString();
     await updateCycleDetails(workspaceSlug, selectedProjectId, cycleId, payload)
-      .then(() => {
+      .then((res) => {
+        const changed_properties = Object.keys(dirtyFields);
+        captureCycleEvent({
+          eventName: CYCLE_UPDATED,
+          payload: { ...res, changed_properties: changed_properties, state: "SUCCESS" },
+        });
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -77,6 +84,10 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
         });
       })
       .catch((err) => {
+        captureCycleEvent({
+          eventName: CYCLE_UPDATED,
+          payload: { ...payload, state: "FAILED" },
+        });
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -95,7 +106,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
     return status;
   };
 
-  const handleFormSubmit = async (formData: Partial<ICycle>) => {
+  const handleFormSubmit = async (formData: Partial<ICycle>, dirtyFields: any) => {
     if (!workspaceSlug || !projectId) return;
 
     const payload: Partial<ICycle> = {
@@ -119,7 +130,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
     }
 
     if (isDateValid) {
-      if (data) await handleUpdateCycle(data.id, payload);
+      if (data) await handleUpdateCycle(data.id, payload, dirtyFields);
       else {
         await handleCreateCycle(payload).then(() => {
           setCycleTab("all");

web/components/cycles/sidebar.tsx

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { useForm } from "react-hook-form";
 import { Disclosure, Popover, Transition } from "@headlessui/react";
+import isEmpty from "lodash/isEmpty";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
@@ -38,6 +39,7 @@ import {
 import { ICycle } from "@plane/types";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
+import { CYCLE_UPDATED } from "constants/event-tracker";
 // fetch-keys
 import { CYCLE_STATUS } from "constants/cycle";
 
@@ -66,7 +68,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId, peekCycle } = router.query;
   // store hooks
-  const { setTrackElement } = useEventTracker();
+  const { setTrackElement, captureCycleEvent } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -82,10 +84,32 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
     defaultValues,
   });
 
-  const submitChanges = (data: Partial<ICycle>) => {
+  const submitChanges = (data: Partial<ICycle>, changedProperty: string) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
 
-    updateCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), data);
+    updateCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), data)
+      .then((res) => {
+        captureCycleEvent({
+          eventName: CYCLE_UPDATED,
+          payload: {
+            ...res,
+            changed_properties: [changedProperty],
+            element: "Right side-peek",
+            state: "SUCCESS",
+          },
+        });
+      })
+
+      .catch((_) => {
+        captureCycleEvent({
+          eventName: CYCLE_UPDATED,
+          payload: {
+            ...data,
+            element: "Right side-peek",
+            state: "FAILED",
+          },
+        });
+      });
   };
 
   const handleCopyText = () => {
@@ -145,10 +169,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         });
 
         if (isDateValidForExistingCycle) {
-          submitChanges({
+          submitChanges(
-            start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
+            {
-            end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+              start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-          });
+              end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+            },
+            "start_date"
+          );
           setToastAlert({
             type: "success",
             title: "Success!",
@@ -173,10 +200,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
       });
 
       if (isDateValid) {
-        submitChanges({
+        submitChanges(
-          start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
+          {
-          end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+            start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-        });
+            end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+          },
+          "start_date"
+        );
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -218,10 +248,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         });
 
         if (isDateValidForExistingCycle) {
-          submitChanges({
+          submitChanges(
-            start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
+            {
-            end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+              start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-          });
+              end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+            },
+            "end_date"
+          );
           setToastAlert({
             type: "success",
             title: "Success!",
@@ -245,10 +278,13 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
       });
 
       if (isDateValid) {
-        submitChanges({
+        submitChanges(
-          start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
+          {
-          end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+            start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
-        });
+            end_date: renderFormattedPayloadDate(`${watch("end_date")}`),
+          },
+          "end_date"
+        );
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -293,7 +329,11 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const isEndValid = new Date(`${cycleDetails?.end_date}`) >= new Date(`${cycleDetails?.start_date}`);
 
   const progressPercentage = cycleDetails
-    ? Math.round((cycleDetails.completed_issues / cycleDetails.total_issues) * 100)
+    ? isCompleted
+      ? Math.round(
+          (cycleDetails.progress_snapshot.completed_issues / cycleDetails.progress_snapshot.total_issues) * 100
+        )
+      : Math.round((cycleDetails.completed_issues / cycleDetails.total_issues) * 100)
     : null;
 
   if (!cycleDetails)
@@ -317,7 +357,15 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
 
   const issueCount =
-    cycleDetails.total_issues === 0 ? "0 Issue" : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+    isCompleted && !isEmpty(cycleDetails.progress_snapshot)
+      ? cycleDetails.progress_snapshot.total_issues === 0
+        ? "0 Issue"
+        : `${cycleDetails.progress_snapshot.completed_issues}/${cycleDetails.progress_snapshot.total_issues}`
+      : cycleDetails.total_issues === 0
+      ? "0 Issue"
+      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+
+  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date);
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
@@ -375,8 +423,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   backgroundColor: `${currentCycle.color}20`,
                 }}
               >
-                {currentCycle.value === "current"
+                {currentCycle.value === "current" && daysLeft !== undefined
-                  ? `${findHowManyDaysLeft(cycleDetails.end_date ?? new Date())} ${currentCycle.label}`
+                  ? `${daysLeft} ${currentCycle.label}`
                   : `${currentCycle.label}`}
               </span>
             )}
@@ -567,49 +615,105 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <Transition show={open}>
                     <Disclosure.Panel>
                       <div className="flex flex-col gap-3">
-                        {cycleDetails.distribution?.completion_chart &&
+                        {isCompleted && !isEmpty(cycleDetails.progress_snapshot) ? (
-                        cycleDetails.start_date &&
+                          <>
-                        cycleDetails.end_date ? (
+                            {cycleDetails.progress_snapshot.distribution?.completion_chart &&
-                          <div className="h-full w-full pt-4">
+                              cycleDetails.start_date &&
-                            <div className="flex  items-start  gap-4 py-2 text-xs">
+                              cycleDetails.end_date && (
-                              <div className="flex items-center gap-3 text-custom-text-100">
+                                <div className="h-full w-full pt-4">
-                                <div className="flex items-center justify-center gap-1">
+                                  <div className="flex  items-start  gap-4 py-2 text-xs">
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                    <div className="flex items-center gap-3 text-custom-text-100">
-                                  <span>Ideal</span>
+                                      <div className="flex items-center justify-center gap-1">
+                                        <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                        <span>Ideal</span>
+                                      </div>
+                                      <div className="flex items-center justify-center gap-1">
+                                        <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                        <span>Current</span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div className="relative h-40 w-80">
+                                    <ProgressChart
+                                      distribution={cycleDetails.progress_snapshot.distribution?.completion_chart}
+                                      startDate={cycleDetails.start_date}
+                                      endDate={cycleDetails.end_date}
+                                      totalIssues={cycleDetails.progress_snapshot.total_issues}
+                                    />
+                                  </div>
                                 </div>
-                                <div className="flex items-center justify-center gap-1">
+                              )}
-                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                          </>
-                                  <span>Current</span>
-                                </div>
-                              </div>
-                            </div>
-                            <div className="relative h-40 w-80">
-                              <ProgressChart
-                                distribution={cycleDetails.distribution?.completion_chart}
-                                startDate={cycleDetails.start_date}
-                                endDate={cycleDetails.end_date}
-                                totalIssues={cycleDetails.total_issues}
-                              />
-                            </div>
-                          </div>
                         ) : (
-                          ""
+                          <>
+                            {cycleDetails.distribution?.completion_chart &&
+                              cycleDetails.start_date &&
+                              cycleDetails.end_date && (
+                                <div className="h-full w-full pt-4">
+                                  <div className="flex  items-start  gap-4 py-2 text-xs">
+                                    <div className="flex items-center gap-3 text-custom-text-100">
+                                      <div className="flex items-center justify-center gap-1">
+                                        <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                        <span>Ideal</span>
+                                      </div>
+                                      <div className="flex items-center justify-center gap-1">
+                                        <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                        <span>Current</span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div className="relative h-40 w-80">
+                                    <ProgressChart
+                                      distribution={cycleDetails.distribution?.completion_chart}
+                                      startDate={cycleDetails.start_date}
+                                      endDate={cycleDetails.end_date}
+                                      totalIssues={cycleDetails.total_issues}
+                                    />
+                                  </div>
+                                </div>
+                              )}
+                          </>
                         )}
-                        {cycleDetails.total_issues > 0 && cycleDetails.distribution && (
+                        {/* stats */}
-                          <div className="h-full w-full border-t border-custom-border-200 pt-5">
+                        {isCompleted && !isEmpty(cycleDetails.progress_snapshot) ? (
-                            <SidebarProgressStats
+                          <>
-                              distribution={cycleDetails.distribution}
+                            {cycleDetails.progress_snapshot.total_issues > 0 &&
-                              groupedIssues={{
+                              cycleDetails.progress_snapshot.distribution && (
-                                backlog: cycleDetails.backlog_issues,
+                                <div className="h-full w-full border-t border-custom-border-200 pt-5">
-                                unstarted: cycleDetails.unstarted_issues,
+                                  <SidebarProgressStats
-                                started: cycleDetails.started_issues,
+                                    distribution={cycleDetails.progress_snapshot.distribution}
-                                completed: cycleDetails.completed_issues,
+                                    groupedIssues={{
-                                cancelled: cycleDetails.cancelled_issues,
+                                      backlog: cycleDetails.progress_snapshot.backlog_issues,
-                              }}
+                                      unstarted: cycleDetails.progress_snapshot.unstarted_issues,
-                              totalIssues={cycleDetails.total_issues}
+                                      started: cycleDetails.progress_snapshot.started_issues,
-                              isPeekView={Boolean(peekCycle)}
+                                      completed: cycleDetails.progress_snapshot.completed_issues,
-                            />
+                                      cancelled: cycleDetails.progress_snapshot.cancelled_issues,
-                          </div>
+                                    }}
+                                    totalIssues={cycleDetails.progress_snapshot.total_issues}
+                                    isPeekView={Boolean(peekCycle)}
+                                  />
+                                </div>
+                              )}
+                          </>
+                        ) : (
+                          <>
+                            {cycleDetails.total_issues > 0 && cycleDetails.distribution && (
+                              <div className="h-full w-full border-t border-custom-border-200 pt-5">
+                                <SidebarProgressStats
+                                  distribution={cycleDetails.distribution}
+                                  groupedIssues={{
+                                    backlog: cycleDetails.backlog_issues,
+                                    unstarted: cycleDetails.unstarted_issues,
+                                    started: cycleDetails.started_issues,
+                                    completed: cycleDetails.completed_issues,
+                                    cancelled: cycleDetails.cancelled_issues,
+                                  }}
+                                  totalIssues={cycleDetails.total_issues}
+                                  isPeekView={Boolean(peekCycle)}
+                                />
+                              </div>
+                            )}
+                          </>
                         )}
                       </div>
                     </Disclosure.Panel>

web/components/dashboard/widgets/assigned-issues.tsx

@@ -13,7 +13,7 @@ import {
   WidgetProps,
 } from "components/dashboard/widgets";
 // helpers
-import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper";
+import { getCustomDates, getRedirectionFilters, getTabKey } from "helpers/dashboard.helper";
 // types
 import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
 // constants
@@ -30,8 +30,8 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TAssignedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
-  const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
+  const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? "none";
-  const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
+  const selectedTab = getTabKey(selectedDurationFilter, widgetDetails?.widget_filters.tab);
 
   const handleUpdateFilters = async (filters: Partial<TAssignedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -43,7 +43,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
+    const filterDates = getCustomDates(filters.duration ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       issue_type: filters.tab ?? selectedTab,
@@ -86,19 +86,19 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
 
             // switch to pending tab if target date is changed to none
             if (val === "none" && selectedTab !== "completed") {
-              handleUpdateFilters({ target_date: val, tab: "pending" });
+              handleUpdateFilters({ duration: val, tab: "pending" });
               return;
             }
             // switch to upcoming tab if target date is changed to other than none
             if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
               handleUpdateFilters({
-                target_date: val,
+                duration: val,
                 tab: "upcoming",
               });
               return;
             }
 
-            handleUpdateFilters({ target_date: val });
+            handleUpdateFilters({ duration: val });
           }}
         />
       </div>

web/components/dashboard/widgets/created-issues.tsx

@@ -13,7 +13,7 @@ import {
   WidgetProps,
 } from "components/dashboard/widgets";
 // helpers
-import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper";
+import { getCustomDates, getRedirectionFilters, getTabKey } from "helpers/dashboard.helper";
 // types
 import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
 // constants
@@ -30,8 +30,8 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TCreatedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
-  const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
+  const selectedDurationFilter = widgetDetails?.widget_filters.duration ?? "none";
-  const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
+  const selectedTab = getTabKey(selectedDurationFilter, widgetDetails?.widget_filters.tab);
 
   const handleUpdateFilters = async (filters: Partial<TCreatedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -43,7 +43,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
+    const filterDates = getCustomDates(filters.duration ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       issue_type: filters.tab ?? selectedTab,
@@ -83,19 +83,19 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
 
             // switch to pending tab if target date is changed to none
             if (val === "none" && selectedTab !== "completed") {
-              handleUpdateFilters({ target_date: val, tab: "pending" });
+              handleUpdateFilters({ duration: val, tab: "pending" });
               return;
             }
             // switch to upcoming tab if target date is changed to other than none
             if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
               handleUpdateFilters({
-                target_date: val,
+                duration: val,
                 tab: "upcoming",
               });
               return;
             }
 
-            handleUpdateFilters({ target_date: val });
+            handleUpdateFilters({ duration: val });
           }}
         />
       </div>

web/components/dashboard/widgets/issue-panels/issue-list-item.tsx

@@ -83,7 +83,7 @@ export const AssignedOverdueIssueListItem: React.FC<IssueListItemProps> = observ
   const blockedByIssueProjectDetails =
     blockedByIssues.length === 1 ? getProjectById(blockedByIssues[0]?.project_id ?? "") : null;
 
-  const dueBy = findTotalDaysInRange(new Date(issueDetails.target_date ?? ""), new Date(), false);
+  const dueBy = findTotalDaysInRange(new Date(issueDetails.target_date ?? ""), new Date(), false) ?? 0;
 
   return (
     <ControlLink
@@ -212,7 +212,7 @@ export const CreatedOverdueIssueListItem: React.FC<IssueListItemProps> = observe
 
   const projectDetails = getProjectById(issue.project_id);
 
-  const dueBy = findTotalDaysInRange(new Date(issue.target_date ?? ""), new Date(), false);
+  const dueBy = findTotalDaysInRange(new Date(issue.target_date ?? ""), new Date(), false) ?? 0;
 
   return (
     <ControlLink

web/components/dashboard/widgets/issue-panels/tabs-list.tsx

@@ -16,42 +16,40 @@ export const TabsList: React.FC<Props> = observer((props) => {
   const { durationFilter, selectedTab } = props;
 
   const tabsList = durationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
-  const selectedTabIndex = tabsList.findIndex((tab) => tab.key === (selectedTab ?? "pending"));
+  const selectedTabIndex = tabsList.findIndex((tab) => tab.key === selectedTab);
 
   return (
     <Tab.List
       as="div"
-      className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 grid"
+      className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 p-[1px] grid"
       style={{
         gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
       }}
     >
       <div
-        className={cn("absolute bg-custom-background-100 rounded transition-all duration-500 ease-in-out", {
+        className={cn(
-          // right shadow
+          "absolute top-1/2 left-[1px] bg-custom-background-100 rounded-[3px] transition-all duration-500 ease-in-out",
-          "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
+          {
-          // left shadow
+            // right shadow
-          "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
+            "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
-        })}
+            // left shadow
+            "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
+          }
+        )}
         style={{
-          height: "calc(100% - 1px)",
+          height: "calc(100% - 2px)",
-          width: `${100 / tabsList.length}%`,
+          width: `calc(${100 / tabsList.length}% - 1px)`,
-          transform: `translateX(${selectedTabIndex * 100}%)`,
+          transform: `translate(${selectedTabIndex * 100}%, -50%)`,
         }}
       />
       {tabsList.map((tab) => (
         <Tab
           key={tab.key}
           className={cn(
-            "relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none",
+            "relative z-[1] font-semibold text-xs rounded-[3px] py-1.5 text-custom-text-400 focus:outline-none transition duration-500",
-            "transition duration-500",
             {
               "text-custom-text-100 bg-custom-background-100": selectedTab === tab.key,
               "hover:text-custom-text-300": selectedTab !== tab.key,
-              // // right shadow
-              // "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
-              // // left shadow
-              // "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
             }
           )}
         >

web/components/dashboard/widgets/issues-by-priority.tsx

@@ -73,8 +73,10 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
   const { dashboardId, workspaceSlug } = props;
   // store hooks
   const { fetchWidgetStats, getWidgetDetails, getWidgetStats, updateDashboardWidgetFilters } = useDashboard();
+  // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TIssuesByPriorityWidgetResponse[]>(workspaceSlug, dashboardId, WIDGET_KEY);
+  const selectedDuration = widgetDetails?.widget_filters.duration ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TIssuesByPriorityWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -84,7 +86,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(filters.duration ?? selectedDuration);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -92,7 +94,7 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(selectedDuration);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -139,10 +141,10 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
           Assigned by priority
         </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "none"}
+          value={selectedDuration}
           onChange={(val) =>
             handleUpdateFilters({
-              target_date: val,
+              duration: val,
             })
           }
         />

web/components/dashboard/widgets/issues-by-state-group.tsx

@@ -34,6 +34,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
   // derived values
   const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
   const widgetStats = getWidgetStats<TIssuesByStateGroupsWidgetResponse[]>(workspaceSlug, dashboardId, WIDGET_KEY);
+  const selectedDuration = widgetDetails?.widget_filters.duration ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TIssuesByStateGroupsWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -43,7 +44,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       filters,
     });
 
-    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(filters.duration ?? selectedDuration);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -52,7 +53,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
 
   // fetch widget stats
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
+    const filterDates = getCustomDates(selectedDuration);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
       ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
@@ -138,10 +139,10 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
           Assigned by state
         </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "none"}
+          value={selectedDuration}
           onChange={(val) =>
             handleUpdateFilters({
-              target_date: val,
+              duration: val,
             })
           }
         />

web/components/dropdowns/cycle.tsx

@@ -23,6 +23,7 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: string | null) => void;
+  onClose?: () => void;
   projectId: string;
   value: string | null;
 };
@@ -47,6 +48,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    onClose,
     placeholder = "Cycle",
     placement,
     projectId,
@@ -123,8 +125,10 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -163,7 +167,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}

web/components/dropdowns/date.tsx

@@ -23,6 +23,7 @@ type Props = TDropdownProps & {
   minDate?: Date;
   maxDate?: Date;
   onChange: (val: Date | null) => void;
+  onClose?: () => void;
   value: Date | string | null;
   closeOnSelect?: boolean;
 };
@@ -42,6 +43,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
     minDate,
     maxDate,
     onChange,
+    onClose,
     placeholder = "Date",
     placement,
     showTooltip = false,
@@ -74,8 +76,10 @@ export const DateDropdown: React.FC<Props> = (props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -112,7 +116,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
           ref={setReferenceElement}
           type="button"
           className={cn(
-            "block h-full max-w-full outline-none",
+            "clickable block h-full max-w-full outline-none",
             {
               "cursor-not-allowed text-custom-text-200": disabled,
               "cursor-pointer": !disabled,

web/components/dropdowns/estimate.tsx

@@ -22,6 +22,7 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: number | null) => void;
+  onClose?: () => void;
   projectId: string;
   value: number | null;
 };
@@ -46,6 +47,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    onClose,
     placeholder = "Estimate",
     placement,
     projectId,
@@ -112,8 +114,10 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -152,7 +156,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -162,7 +166,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,

web/components/dropdowns/member/project-member.tsx

@@ -21,6 +21,7 @@ import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
 
 type Props = {
   projectId: string;
+  onClose?: () => void;
 } & MemberDropdownProps;
 
 export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
@@ -36,6 +37,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
     hideIcon = false,
     multiple,
     onChange,
+    onClose,
     placeholder = "Members",
     placement,
     projectId,
@@ -105,8 +107,10 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -144,7 +148,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -154,7 +158,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,

web/components/dropdowns/member/types.d.ts

@@ -5,6 +5,7 @@ export type MemberDropdownProps = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   placeholder?: string;
+  onClose?: () => void;
 } & (
     | {
         multiple: false;

web/components/dropdowns/member/workspace-member.tsx

@@ -32,6 +32,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
     hideIcon = false,
     multiple,
     onChange,
+    onClose,
     placeholder = "Members",
     placement,
     showTooltip = false,
@@ -95,8 +96,10 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -134,7 +137,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -144,7 +147,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,

web/components/dropdowns/module.tsx

@@ -24,6 +24,7 @@ type Props = TDropdownProps & {
   dropdownArrowClassName?: string;
   projectId: string;
   showCount?: boolean;
+  onClose?: () => void;
 } & (
     | {
         multiple: false;
@@ -151,6 +152,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     hideIcon = false,
     multiple,
     onChange,
+    onClose,
     placeholder = "Module",
     placement,
     projectId,
@@ -226,8 +228,10 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -271,7 +275,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -281,7 +285,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,

web/components/dropdowns/priority.tsx

@@ -23,6 +23,7 @@ type Props = TDropdownProps & {
   dropdownArrowClassName?: string;
   highlightUrgent?: boolean;
   onChange: (val: TIssuePriorities) => void;
+  onClose?: () => void;
   value: TIssuePriorities;
 };
 
@@ -260,6 +261,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
     hideIcon = false,
     highlightUrgent = true,
     onChange,
+    onClose,
     placement,
     showTooltip = false,
     tabIndex,
@@ -308,8 +310,10 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
     if (referenceElement) referenceElement.blur();
+    onClose && onClose();
   };
 
   const toggleDropdown = () => {
@@ -360,7 +364,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -370,7 +374,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,

web/components/dropdowns/project.tsx

@@ -22,6 +22,7 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: string) => void;
+  onClose?: () => void;
   value: string | null;
 };
 
@@ -37,6 +38,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    onClose,
     placeholder = "Project",
     placement,
     showTooltip = false,
@@ -97,7 +99,9 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose && onClose();
     if (referenceElement) referenceElement.blur();
   };
 
@@ -137,7 +141,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -147,7 +151,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,

web/components/dropdowns/state.tsx

@@ -23,6 +23,7 @@ type Props = TDropdownProps & {
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
   onChange: (val: string) => void;
+  onClose?: () => void;
   projectId: string;
   value: string;
 };
@@ -39,6 +40,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     dropdownArrowClassName = "",
     hideIcon = false,
     onChange,
+    onClose,
     placement,
     projectId,
     showTooltip = false,
@@ -94,7 +96,9 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   };
 
   const handleClose = () => {
-    if (isOpen) setIsOpen(false);
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose && onClose();
     if (referenceElement) referenceElement.blur();
   };
 
@@ -134,7 +138,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
           <button
             ref={setReferenceElement}
             type="button"
-            className={cn("block h-full w-full outline-none", buttonContainerClassName)}
+            className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
             onClick={handleOnClick}
           >
             {button}
@@ -144,7 +148,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
             ref={setReferenceElement}
             type="button"
             className={cn(
-              "block h-full max-w-full outline-none",
+              "clickable block h-full max-w-full outline-none",
               {
                 "cursor-not-allowed text-custom-text-200": disabled,
                 "cursor-pointer": !disabled,

web/components/gantt-chart/helpers/block-structure.tsx

@@ -3,8 +3,7 @@ import { TIssue } from "@plane/types";
 import { IGanttBlock } from "components/gantt-chart";
 
 export const renderIssueBlocksStructure = (blocks: TIssue[]): IGanttBlock[] =>
-  blocks &&
+  blocks?.map((block) => ({
-  blocks.map((block) => ({
     data: block,
     id: block.id,
     sort_order: block.sort_order,

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

@@ -93,7 +93,7 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
             <>
               {blocks ? (
                 blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "");
+                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
 
                   return (
                     <Draggable
@@ -130,9 +130,11 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
                               <div className="flex-grow truncate">
                                 <CycleGanttSidebarBlock data={block.data} />
                               </div>
-                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                              {duration !== undefined && (
-                                {duration} day{duration > 1 ? "s" : ""}
+                                <div className="flex-shrink-0 text-sm text-custom-text-200">
-                              </div>
+                                  {duration} day{duration > 1 ? "s" : ""}
+                                </div>
+                              )}
                             </div>
                           </div>
                         </div>

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

@@ -93,7 +93,7 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
             <>
               {blocks ? (
                 blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "");
+                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
 
                   return (
                     <Draggable
@@ -130,9 +130,11 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
                               <div className="flex-grow truncate">
                                 <ModuleGanttSidebarBlock data={block.data} />
                               </div>
-                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                              {duration !== undefined && (
-                                {duration} day{duration > 1 ? "s" : ""}
+                                <div className="flex-shrink-0 text-sm text-custom-text-200">
-                              </div>
+                                  {duration} day{duration > 1 ? "s" : ""}
+                                </div>
+                              )}
                             </div>
                           </div>
                         </div>

web/components/gantt-chart/sidebar/project-view-sidebar.tsx

@@ -94,7 +94,7 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
             <>
               {blocks ? (
                 blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "");
+                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
 
                   return (
                     <Draggable
@@ -131,9 +131,11 @@ export const ProjectViewGanttSidebar: React.FC<Props> = (props) => {
                               <div className="flex-grow truncate">
                                 <IssueGanttSidebarBlock data={block.data} />
                               </div>
-                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                              {duration !== undefined && (
-                                {duration} day{duration > 1 ? "s" : ""}
+                                <div className="flex-shrink-0 text-sm text-custom-text-200">
-                              </div>
+                                  {duration} day{duration > 1 ? "s" : ""}
+                                </div>
+                              )}
                             </div>
                           </div>
                         </div>

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

@@ -119,10 +119,7 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
                   // hide the block if it doesn't have start and target dates and showAllBlocks is false
                   if (!showAllBlocks && !isBlockVisibleOnSidebar) return;
 
-                  const duration =
+                  const duration = findTotalDaysInRange(block.start_date, block.target_date);
-                    !block.start_date || !block.target_date
-                      ? null
-                      : findTotalDaysInRange(block.start_date, block.target_date);
 
                   return (
                     <Draggable
@@ -166,13 +163,13 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
                               <div className="flex-grow truncate">
                                 <IssueGanttSidebarBlock data={block.data} />
                               </div>
-                              <div className="flex-shrink-0 text-sm text-custom-text-200">
+                              {duration !== undefined && (
-                                {duration && (
+                                <div className="flex-shrink-0 text-sm text-custom-text-200">
                                   <span>
                                     {duration} day{duration > 1 ? "s" : ""}
                                   </span>
-                                )}
+                                </div>
-                              </div>
+                              )}
                             </div>
                           </div>
                         </div>

web/components/headers/cycle-issues.tsx

@@ -23,7 +23,7 @@ import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
 // icons
-import { ArrowRight, Plus } from "lucide-react";
+import { ArrowRight, Plus, PanelRight } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
@@ -32,6 +32,8 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
 // constants
 import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EUserProjectRoles } from "constants/project";
+import { cn } from "helpers/common.helper";
+import { CycleMobileHeader } from "components/cycles/cycle-mobile-header";
 
 const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
   // router
@@ -147,117 +149,136 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-10 w-full items-center gap-x-2 gap-y-4">
-        <div className="flex items-center gap-2">
+        <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-          <SidebarHamburgerToggle />
+          <div className="flex items-center gap-2">
-          <Breadcrumbs>
+            <SidebarHamburgerToggle />
-            <Breadcrumbs.BreadcrumbItem
+            <Breadcrumbs>
-              type="text"
+              <Breadcrumbs.BreadcrumbItem
-              link={
+                type="text"
-                <BreadcrumbLink
+                link={
-                  label={currentProjectDetails?.name ?? "Project"}
+                  <span>
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                    <span className="hidden md:block">
-                  icon={
+                      <BreadcrumbLink
-                    currentProjectDetails?.emoji ? (
+                        label={currentProjectDetails?.name ?? "Project"}
-                      renderEmoji(currentProjectDetails.emoji)
+                        href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                    ) : currentProjectDetails?.icon_prop ? (
+                        icon={
-                      renderEmoji(currentProjectDetails.icon_prop)
+                          currentProjectDetails?.emoji ? (
-                    ) : (
+                            renderEmoji(currentProjectDetails.emoji)
-                      <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
+                          ) : currentProjectDetails?.icon_prop ? (
-                        {currentProjectDetails?.name.charAt(0)}
+                            renderEmoji(currentProjectDetails.icon_prop)
-                      </span>
+                          ) : (
-                    )
+                            <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
-                  }
+                              {currentProjectDetails?.name.charAt(0)}
-                />
+                            </span>
-              }
+                          )
+                        }
+                      />
+                    </span>
+                    <Link href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} className="block md:hidden pl-2 text-custom-text-300">...</Link>
+                  </span>
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <BreadcrumbLink
+                    label="Cycles"
+                    href={`/${workspaceSlug}/projects/${projectId}/cycles`}
+                    icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="component"
+                component={
+                  <CustomMenu
+                    label={
+                      <>
+                        <ContrastIcon className="h-3 w-3" />
+                        {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
+                      </>
+                    }
+                    className="ml-1.5 flex-shrink-0"
+                    placement="bottom-start"
+                  >
+                    {currentProjectCycleIds?.map((cycleId) => (
+                      <CycleDropdownOption key={cycleId} cycleId={cycleId} />
+                    ))}
+                  </CustomMenu>
+                }
+              />
+            </Breadcrumbs>
+          </div>
+          <div className="hidden md:flex items-center gap-2 ">
+            <LayoutSelection
+              layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+              onChange={(layout) => handleLayoutChange(layout)}
+              selectedLayout={activeLayout}
             />
-            <Breadcrumbs.BreadcrumbItem
+            <FiltersDropdown title="Filters" placement="bottom-end">
-              type="text"
+              <FilterSelection
-              link={
+                filters={issueFilters?.filters ?? {}}
-                <BreadcrumbLink
+                handleFiltersUpdate={handleFiltersUpdate}
-                  label="Cycles"
+                layoutDisplayFiltersOptions={
-                  href={`/${workspaceSlug}/projects/${projectId}/cycles`}
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-                  icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+                }
-                />
+                labels={projectLabels}
-              }
+                memberIds={projectMemberIds ?? undefined}
-            />
+                states={projectStates}
-            <Breadcrumbs.BreadcrumbItem
+              />
-              type="component"
+            </FiltersDropdown>
-              component={
+            <FiltersDropdown title="Display" placement="bottom-end">
-                <CustomMenu
+              <DisplayFiltersSelection
-                  label={
+                layoutDisplayFiltersOptions={
-                    <>
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-                      <ContrastIcon className="h-3 w-3" />
+                }
-                      {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
+                displayFilters={issueFilters?.displayFilters ?? {}}
-                    </>
+                handleDisplayFiltersUpdate={handleDisplayFilters}
-                  }
+                displayProperties={issueFilters?.displayProperties ?? {}}
-                  className="ml-1.5 flex-shrink-0"
+                handleDisplayPropertiesUpdate={handleDisplayProperties}
-                  placement="bottom-start"
+              />
-                >
+            </FiltersDropdown>
-                  {currentProjectCycleIds?.map((cycleId) => (
-                    <CycleDropdownOption key={cycleId} cycleId={cycleId} />
-                  ))}
-                </CustomMenu>
-              }
-            />
-          </Breadcrumbs>
-        </div>
-        <div className="flex items-center gap-2">
-          <LayoutSelection
-            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
-            onChange={(layout) => handleLayoutChange(layout)}
-            selectedLayout={activeLayout}
-          />
-          <FiltersDropdown title="Filters" placement="bottom-end">
-            <FilterSelection
-              filters={issueFilters?.filters ?? {}}
-              handleFiltersUpdate={handleFiltersUpdate}
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              labels={projectLabels}
-              memberIds={projectMemberIds ?? undefined}
-              states={projectStates}
-            />
-          </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
-            <DisplayFiltersSelection
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              displayFilters={issueFilters?.displayFilters ?? {}}
-              handleDisplayFiltersUpdate={handleDisplayFilters}
-              displayProperties={issueFilters?.displayProperties ?? {}}
-              handleDisplayPropertiesUpdate={handleDisplayProperties}
-            />
-          </FiltersDropdown>
 
-          {canUserCreateIssue && (
+            {canUserCreateIssue && (
-            <>
+              <>
-              <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+                <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-                Analytics
+                  Analytics
-              </Button>
+                </Button>
-              <Button
+                <Button
-                onClick={() => {
+                  onClick={() => {
-                  setTrackElement("Cycle issues page");
+                    setTrackElement("Cycle issues page");
-                  toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
+                    toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
-                }}
+                  }}
-                size="sm"
+                  size="sm"
-                prependIcon={<Plus />}
+                  prependIcon={<Plus />}
-              >
+                >
-                Add Issue
+                  Add Issue
-              </Button>
+                </Button>
-            </>
+              </>
-          )}
+            )}
+            <button
+              type="button"
+              className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+              onClick={toggleSidebar}
+            >
+              <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+            </button>
+          </div>
           <button
             type="button"
-            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+            className="grid md:hidden h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
             onClick={toggleSidebar}
           >
-            <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+            <PanelRight className={cn("w-4 h-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
           </button>
         </div>
+        <div className="block sm:block md:hidden">
+          <CycleMobileHeader />
+        </div>
       </div>
     </>
   );
 });
+
+

web/components/headers/cycles.tsx

@@ -1,22 +1,24 @@
-import { FC } from "react";
+import { FC, useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { Plus } from "lucide-react";
+import { List, Plus } from "lucide-react";
 // hooks
 import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // ui
-import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { BreadcrumbLink } from "components/common";
+import { TCycleLayout } from "@plane/types";
+import { CYCLE_VIEW_LAYOUTS } from "constants/cycle";
+import useLocalStorage from "hooks/use-local-storage";
 
 export const CyclesHeader: FC = observer(() => {
   // router
   const router = useRouter();
-  const { workspaceSlug } = router.query;
   // store hooks
   const {
     commandPalette: { toggleCreateCycleModal },
@@ -30,54 +32,96 @@ export const CyclesHeader: FC = observer(() => {
   const canUserCreateCycle =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
+  const { workspaceSlug } = router.query as {
+    workspaceSlug: string;
+  };
+  const { setValue: setCycleLayout } = useLocalStorage<TCycleLayout>("cycle_layout", "list");
+
+  const handleCurrentLayout = useCallback(
+    (_layout: TCycleLayout) => {
+      setCycleLayout(_layout);
+    },
+    [setCycleLayout]
+  );
+
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 items-center justify-between gap-x-2 gap-y-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+      <div className="flex border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-        <SidebarHamburgerToggle />
+        <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <div>
+          <SidebarHamburgerToggle />
-          <Breadcrumbs>
+          <div>
-            <Breadcrumbs.BreadcrumbItem
+            <Breadcrumbs>
-              type="text"
+              <Breadcrumbs.BreadcrumbItem
-              link={
+                type="text"
-                <BreadcrumbLink
+                link={
-                  label={currentProjectDetails?.name ?? "Project"}
+                  <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                    label={currentProjectDetails?.name ?? "Project"}
-                  icon={
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                    currentProjectDetails?.emoji ? (
+                    icon={
-                      renderEmoji(currentProjectDetails.emoji)
+                      currentProjectDetails?.emoji ? (
-                    ) : currentProjectDetails?.icon_prop ? (
+                        renderEmoji(currentProjectDetails.emoji)
-                      renderEmoji(currentProjectDetails.icon_prop)
+                      ) : currentProjectDetails?.icon_prop ? (
-                    ) : (
+                        renderEmoji(currentProjectDetails.icon_prop)
-                      <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
+                      ) : (
-                        {currentProjectDetails?.name.charAt(0)}
+                        <span className="flex h-4 w-4 items-center justify-center rounded bg-gray-700 uppercase text-white">
-                      </span>
+                          {currentProjectDetails?.name.charAt(0)}
-                    )
+                        </span>
-                  }
+                      )
-                />
+                    }
-              }
+                  />
-            />
+                }
-            <Breadcrumbs.BreadcrumbItem
+              />
-              type="text"
+              <Breadcrumbs.BreadcrumbItem
-              link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
+                type="text"
-            />
+                link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
-          </Breadcrumbs>
+              />
+            </Breadcrumbs>
+          </div>
         </div>
+        {canUserCreateCycle && (
+          <div className="flex items-center gap-3">
+            <Button
+              variant="primary"
+              size="sm"
+              prependIcon={<Plus />}
+              onClick={() => {
+                setTrackElement("Cycles page");
+                toggleCreateCycleModal(true);
+              }}
+            >
+              Add Cycle
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className="flex justify-center sm:hidden">
+        <CustomMenu
+          maxHeight={"md"}
+          className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+          // placement="bottom-start"
+          customButton={
+            <span className="flex items-center gap-2">
+              <List className="h-4 w-4" />
+              <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
+            </span>
+          }
+          customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
+          closeOnSelect
+        >
+          {CYCLE_VIEW_LAYOUTS.map((layout) => (
+            <CustomMenu.MenuItem
+              onClick={() => {
+                // handleLayoutChange(ISSUE_LAYOUTS[index].key);
+                handleCurrentLayout(layout.key as TCycleLayout);
+              }}
+              className="flex items-center gap-2"
+            >
+              <layout.icon className="w-3 h-3" />
+              <div className="text-custom-text-300">{layout.title}</div>
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
       </div>
-      {canUserCreateCycle && (
-        <div className="flex items-center gap-3">
-          <Button
-            variant="primary"
-            size="sm"
-            prependIcon={<Plus />}
-            onClick={() => {
-              setTrackElement("Cycles page");
-              toggleCreateCycleModal(true);
-            }}
-          >
-            Add Cycle
-          </Button>
-        </div>
-      )}
     </div>
   );
 });

web/components/headers/module-issues.tsx

@@ -23,7 +23,7 @@ import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
 // icons
-import { ArrowRight, Plus } from "lucide-react";
+import { ArrowRight, PanelRight, Plus } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { renderEmoji } from "helpers/emoji.helper";
@@ -32,6 +32,8 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
 // constants
 import { EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 import { EUserProjectRoles } from "constants/project";
+import { cn } from "helpers/common.helper";
+import { ModuleMobileHeader } from "components/modules/module-mobile-header";
 
 const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => {
   // router
@@ -150,116 +152,127 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         moduleDetails={moduleDetails ?? undefined}
       />
-      <div className="relative z-10 flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative z-10 items-center gap-x-2 gap-y-4">
-        <div className="flex items-center gap-2">
+        <div className="flex justify-between border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-          <SidebarHamburgerToggle />
+          <div className="flex items-center gap-2">
-          <Breadcrumbs>
+            <SidebarHamburgerToggle />
-            <Breadcrumbs.BreadcrumbItem
+            <Breadcrumbs>
-              type="text"
+              <Breadcrumbs.BreadcrumbItem
-              link={
+                type="text"
-                <BreadcrumbLink
+                link={
-                  label={currentProjectDetails?.name ?? "Project"}
+                  <span>
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                    <span className="hidden md:block">
-                  icon={
+                      <BreadcrumbLink
-                    currentProjectDetails?.emoji ? (
+                        label={currentProjectDetails?.name ?? "Project"}
-                      renderEmoji(currentProjectDetails.emoji)
+                        href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                    ) : currentProjectDetails?.icon_prop ? (
+                        icon={
-                      renderEmoji(currentProjectDetails.icon_prop)
+                          currentProjectDetails?.emoji ? (
-                    ) : (
+                            renderEmoji(currentProjectDetails.emoji)
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                          ) : currentProjectDetails?.icon_prop ? (
-                        {currentProjectDetails?.name.charAt(0)}
+                            renderEmoji(currentProjectDetails.icon_prop)
-                      </span>
+                          ) : (
-                    )
+                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                              {currentProjectDetails?.name.charAt(0)}
+                            </span>
+                          )
+                        }
+                      />
+                    </span>
+                    <Link href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`} className="block md:hidden pl-2 text-custom-text-300">...</Link>
+                  </span>
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects/${projectId}/modules`}
+                    label="Modules"
+                    icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+              <Breadcrumbs.BreadcrumbItem
+                type="component"
+                component={
+                  <CustomMenu
+                    label={
+                      <>
+                        <DiceIcon className="h-3 w-3" />
+                        {moduleDetails?.name && truncateText(moduleDetails.name, 40)}
+                      </>
+                    }
+                    className="ml-1.5 flex-shrink-0"
+                    placement="bottom-start"
+                  >
+                    {projectModuleIds?.map((moduleId) => (
+                      <ModuleDropdownOption key={moduleId} moduleId={moduleId} />
+                    ))}
+                  </CustomMenu>
+                }
+              />
+            </Breadcrumbs>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="hidden md:flex gap-2">
+              <LayoutSelection
+                layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+                onChange={(layout) => handleLayoutChange(layout)}
+                selectedLayout={activeLayout}
+              />
+              <FiltersDropdown title="Filters" placement="bottom-end">
+                <FilterSelection
+                  filters={issueFilters?.filters ?? {}}
+                  handleFiltersUpdate={handleFiltersUpdate}
+                  layoutDisplayFiltersOptions={
+                    activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
                   }
+                  labels={projectLabels}
+                  memberIds={projectMemberIds ?? undefined}
+                  states={projectStates}
                 />
-              }
+              </FiltersDropdown>
-            />
+              <FiltersDropdown title="Display" placement="bottom-end">
-            <Breadcrumbs.BreadcrumbItem
+                <DisplayFiltersSelection
-              type="text"
+                  layoutDisplayFiltersOptions={
-              link={
+                    activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${projectId}/modules`}
-                  label="Modules"
-                  icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem
-              type="component"
-              component={
-                <CustomMenu
-                  label={
-                    <>
-                      <DiceIcon className="h-3 w-3" />
-                      {moduleDetails?.name && truncateText(moduleDetails.name, 40)}
-                    </>
                   }
-                  className="ml-1.5 flex-shrink-0"
+                  displayFilters={issueFilters?.displayFilters ?? {}}
-                  placement="bottom-start"
+                  handleDisplayFiltersUpdate={handleDisplayFilters}
-                >
+                  displayProperties={issueFilters?.displayProperties ?? {}}
-                  {projectModuleIds?.map((moduleId) => (
+                  handleDisplayPropertiesUpdate={handleDisplayProperties}
-                    <ModuleDropdownOption key={moduleId} moduleId={moduleId} />
+                />
-                  ))}
+              </FiltersDropdown>
-                </CustomMenu>
+            </div>
-              }
-            />
-          </Breadcrumbs>
-        </div>
-        <div className="flex items-center gap-2">
-          <LayoutSelection
-            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
-            onChange={(layout) => handleLayoutChange(layout)}
-            selectedLayout={activeLayout}
-          />
-          <FiltersDropdown title="Filters" placement="bottom-end">
-            <FilterSelection
-              filters={issueFilters?.filters ?? {}}
-              handleFiltersUpdate={handleFiltersUpdate}
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              labels={projectLabels}
-              memberIds={projectMemberIds ?? undefined}
-              states={projectStates}
-            />
-          </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
-            <DisplayFiltersSelection
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              displayFilters={issueFilters?.displayFilters ?? {}}
-              handleDisplayFiltersUpdate={handleDisplayFilters}
-              displayProperties={issueFilters?.displayProperties ?? {}}
-              handleDisplayPropertiesUpdate={handleDisplayProperties}
-            />
-          </FiltersDropdown>
 
-          {canUserCreateIssue && (
+            {canUserCreateIssue && (
-            <>
+              <>
-              <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+                <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-                Analytics
+                  Analytics
-              </Button>
+                </Button>
-              <Button
+                <Button
-                onClick={() => {
+                  onClick={() => {
-                  setTrackElement("Module issues page");
+                    setTrackElement("Module issues page");
-                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
+                    toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
-                }}
+                  }}
-                size="sm"
+                  size="sm"
-                prependIcon={<Plus />}
+                  prependIcon={<Plus />}
-              >
+                >
-                Add Issue
+                  <span className="hidden md:block">Add</span> Issue
-              </Button>
+                </Button>
-            </>
+              </>
-          )}
+            )}
-          <button
+            <button
-            type="button"
+              type="button"
-            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+              className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
-            onClick={toggleSidebar}
+              onClick={toggleSidebar}
-          >
+            >
-            <ArrowRight className={`h-4 w-4 duration-300 ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+              <ArrowRight className={`h-4 w-4 duration-300 hidden md:block ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
-          </button>
+              <PanelRight className={cn("w-4 h-4 block md:hidden", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
+            </button>
+          </div>
         </div>
+        <ModuleMobileHeader />
       </div>
     </>
   );

web/components/headers/pages.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { FileText, Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // ui
 import { Breadcrumbs, Button } from "@plane/ui";
 // helpers
@@ -25,6 +25,7 @@ export const PagesHeader = observer(() => {
     membership: { currentProjectRole },
   } = useUser();
   const { currentProjectDetails } = useProject();
+  const { setTrackElement } = useEventTracker();
 
   const canUserCreatePage =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
@@ -64,7 +65,15 @@ export const PagesHeader = observer(() => {
       </div>
       {canUserCreatePage && (
         <div className="flex items-center gap-2">
-          <Button variant="primary" prependIcon={<Plus />} size="sm" onClick={() => toggleCreatePageModal(true)}>
+          <Button
+            variant="primary"
+            prependIcon={<Plus />}
+            size="sm"
+            onClick={() => {
+              setTrackElement("Project pages page");
+              toggleCreatePageModal(true);
+            }}
+          >
             Create Page
           </Button>
         </div>

web/components/headers/project-draft-issues.tsx

@@ -103,7 +103,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+                <BreadcrumbLink label="Draft Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
               }
             />
           </Breadcrumbs>

web/components/headers/project-issues.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
+import { Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
 // hooks
 import {
   useApplication,
@@ -29,6 +29,7 @@ import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } f
 import { renderEmoji } from "helpers/emoji.helper";
 import { EUserProjectRoles } from "constants/project";
 import { useIssues } from "hooks/store/use-issues";
+import { IssuesMobileHeader } from "components/issues/issues-mobile-header";
 
 export const ProjectIssuesHeader: React.FC = observer(() => {
   // states
@@ -114,118 +115,109 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         projectDetails={currentProjectDetails ?? undefined}
       />
-      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className=" relative z-10 items-center gap-x-2 gap-y-4">
-        <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <div className="flex items-center gap-2 p-4 border-b border-custom-border-200 bg-custom-sidebar-background-100">
-          <SidebarHamburgerToggle />
+          <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <div className="block md:hidden">
+            <SidebarHamburgerToggle />
-            <button
+            <div>
-              type="button"
+              <Breadcrumbs>
-              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
+                <Breadcrumbs.BreadcrumbItem
-              onClick={() => router.back()}
+                  type="text"
-            >
+                  link={
-              <ArrowLeft fontSize={14} strokeWidth={2} />
+                      <BreadcrumbLink
-            </button>
+                        href={`/${workspaceSlug}/projects`}
+                        label={currentProjectDetails?.name ?? "Project"}
+                        icon={
+                          currentProjectDetails ? (
+                            currentProjectDetails?.emoji ? (
+                              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                                {renderEmoji(currentProjectDetails.emoji)}
+                              </span>
+                            ) : currentProjectDetails?.icon_prop ? (
+                              <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                                {renderEmoji(currentProjectDetails.icon_prop)}
+                              </div>
+                            ) : (
+                              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                                {currentProjectDetails?.name.charAt(0)}
+                              </span>
+                            )
+                          ) : (
+                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                              <Briefcase className="h-4 w-4" />
+                            </span>
+                          )
+                        }
+                      />
+                  }
+                />
+
+                <Breadcrumbs.BreadcrumbItem
+                  type="text"
+                  link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
+                />
+              </Breadcrumbs>
+            </div>
+            {currentProjectDetails?.is_deployed && deployUrl && (
+              <a
+                href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`}
+                className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
+                Public
+                <ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
+              </a>
+            )}
           </div>
-          <div>
+          <div className="items-center gap-2 hidden md:flex">
-            <Breadcrumbs>
+            <LayoutSelection
-              <Breadcrumbs.BreadcrumbItem
+              layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
-                type="text"
+              onChange={(layout) => handleLayoutChange(layout)}
-                link={
+              selectedLayout={activeLayout}
-                  <BreadcrumbLink
+            />
-                    href={`/${workspaceSlug}/projects`}
+            <FiltersDropdown title="Filters" placement="bottom-end">
-                    label={currentProjectDetails?.name ?? "Project"}
+              <FilterSelection
-                    icon={
+                filters={issueFilters?.filters ?? {}}
-                      currentProjectDetails ? (
+                handleFiltersUpdate={handleFiltersUpdate}
-                        currentProjectDetails?.emoji ? (
+                layoutDisplayFiltersOptions={
-                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-                            {renderEmoji(currentProjectDetails.emoji)}
-                          </span>
-                        ) : currentProjectDetails?.icon_prop ? (
-                          <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                            {renderEmoji(currentProjectDetails.icon_prop)}
-                          </div>
-                        ) : (
-                          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                            {currentProjectDetails?.name.charAt(0)}
-                          </span>
-                        )
-                      ) : (
-                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                          <Briefcase className="h-4 w-4" />
-                        </span>
-                      )
-                    }
-                  />
                 }
+                labels={projectLabels}
+                memberIds={projectMemberIds ?? undefined}
+                states={projectStates}
               />
-
+            </FiltersDropdown>
-              <Breadcrumbs.BreadcrumbItem
+            <FiltersDropdown title="Display" placement="bottom-end">
-                type="text"
+              <DisplayFiltersSelection
-                link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                }
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                displayProperties={issueFilters?.displayProperties ?? {}}
+                handleDisplayPropertiesUpdate={handleDisplayProperties}
               />
-            </Breadcrumbs>
+            </FiltersDropdown>
           </div>
-          {currentProjectDetails?.is_deployed && deployUrl && (
-            <a
-              href={`${deployUrl}/${workspaceSlug}/${currentProjectDetails?.id}`}
-              className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
-              Public
-              <ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
-            </a>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <LayoutSelection
-            layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
-            onChange={(layout) => handleLayoutChange(layout)}
-            selectedLayout={activeLayout}
-          />
-          <FiltersDropdown title="Filters" placement="bottom-end">
-            <FilterSelection
-              filters={issueFilters?.filters ?? {}}
-              handleFiltersUpdate={handleFiltersUpdate}
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              labels={projectLabels}
-              memberIds={projectMemberIds ?? undefined}
-              states={projectStates}
-            />
-          </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
-            <DisplayFiltersSelection
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              displayFilters={issueFilters?.displayFilters ?? {}}
-              handleDisplayFiltersUpdate={handleDisplayFilters}
-              displayProperties={issueFilters?.displayProperties ?? {}}
-              handleDisplayPropertiesUpdate={handleDisplayProperties}
-            />
-          </FiltersDropdown>
-
           {currentProjectDetails?.inbox_view && inboxDetails && (
-            <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
+              <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxDetails?.id}`}>
-              <span>
+                <span>
-                <Button variant="neutral-primary" size="sm" className="relative">
+                  <Button variant="neutral-primary" size="sm" className="relative">
-                  Inbox
+                    Inbox
-                  {inboxDetails?.pending_issue_count > 0 && (
+                    {inboxDetails?.pending_issue_count > 0 && (
-                    <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-custom-sidebar-border-200 bg-custom-sidebar-background-80 text-custom-text-100">
+                      <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-custom-sidebar-border-200 bg-custom-sidebar-background-80 text-custom-text-100">
-                      {inboxDetails?.pending_issue_count}
+                        {inboxDetails?.pending_issue_count}
-                    </span>
+                      </span>
-                  )}
+                    )}
-                </Button>
+                  </Button>
-              </span>
+                </span>
-            </Link>
+              </Link>
           )}
-
           {canUserCreateIssue && (
             <>
-              <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+              <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
                 Analytics
               </Button>
               <Button
@@ -241,6 +233,9 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             </>
           )}
         </div>
+        <div className="block md:hidden">
+          <IssuesMobileHeader />
+        </div>
       </div>
     </>
   );

web/components/headers/projects.tsx

@@ -23,7 +23,7 @@ export const ProjectsHeader = observer(() => {
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+      <div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
@@ -34,12 +34,12 @@ export const ProjectsHeader = observer(() => {
           </Breadcrumbs>
         </div>
       </div>
-      <div className="flex items-center gap-3">
+      <div className="flex w-full justify-end items-center gap-3">
         {workspaceProjectIds && workspaceProjectIds?.length > 0 && (
-          <div className="flex w-full items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
+          <div className=" flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
-            <Search className="h-3.5 w-3.5" />
+            <Search className="h-3.5" />
             <input
-              className="w-full min-w-[234px] border-none bg-transparent text-sm focus:outline-none"
+              className="border-none w-full bg-transparent text-sm focus:outline-none"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder="Search"
@@ -54,6 +54,7 @@ export const ProjectsHeader = observer(() => {
               setTrackElement("Projects page");
               commandPaletteStore.toggleCreateProjectModal(true);
             }}
+            className="items-center"
           >
             Add Project
           </Button>

web/components/headers/user-profile.tsx

@@ -1,18 +1,78 @@
 // ui
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs, CustomMenu } from "@plane/ui";
 import { BreadcrumbLink } from "components/common";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { cn } from "helpers/common.helper";
+import { FC } from "react";
+import { useApplication, useUser } from "hooks/store";
+import { ChevronDown, PanelRight } from "lucide-react";
+import { observer } from "mobx-react-lite";
+import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "constants/profile";
+import Link from "next/link";
+import { useRouter } from "next/router";
 
-export const UserProfileHeader = () => (
+type TUserProfileHeader = {
-  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+  type?: string | undefined
+}
+
+export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
+  const { type = undefined } = props
+
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const AUTHORIZED_ROLES = [20, 15, 10];
+  const {
+    membership: { currentWorkspaceRole },
+  } = useUser();
+
+  if (!currentWorkspaceRole) return null;
+
+  const isAuthorized = AUTHORIZED_ROLES.includes(currentWorkspaceRole);
+  const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
+
+  const { theme: themStore } = useApplication();
+
+  return (<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
       <SidebarHamburgerToggle />
-      <div>
+      <div className="flex justify-between w-full">
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink href="/profile" label="Activity Overview" />} />
         </Breadcrumbs>
+        <div className="flex gap-4 md:hidden">
+          <CustomMenu
+            maxHeight={"md"}
+            className="flex flex-grow justify-center text-custom-text-200 text-sm"
+            placement="bottom-start"
+            customButton={
+              <div className="flex gap-2 items-center px-2 py-1.5 border border-custom-border-400 rounded-md">
+                <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{type}</span>
+                <ChevronDown className="w-4 h-4 text-custom-text-400" />
+              </div>
+            }
+            customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+            closeOnSelect
+          >
+            <></>
+            {tabsList.map((tab) => (
+              <CustomMenu.MenuItem
+                className="flex items-center gap-2"
+              >
+                <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`} className="text-custom-text-300 w-full">{tab.label}</Link>
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
+          <button className="transition-all block md:hidden" onClick={() => { themStore.toggleProfileSidebar() }}>
+            <PanelRight className={
+              cn("w-4 h-4 block md:hidden", !themStore.profileSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")
+            } />
+          </button>
+        </div>
       </div>
     </div>
-  </div>
+  </div>)
-);
+});
+
+

web/components/headers/workspace-analytics.tsx

@@ -1,13 +1,35 @@
 import { useRouter } from "next/router";
-import { ArrowLeft, BarChart2 } from "lucide-react";
+import { BarChart2, PanelRight } from "lucide-react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { BreadcrumbLink } from "components/common";
+import { useApplication } from "hooks/store";
+import { observer } from "mobx-react";
+import { cn } from "helpers/common.helper";
+import { useEffect } from "react";
 
-export const WorkspaceAnalyticsHeader = () => {
+export const WorkspaceAnalyticsHeader = observer(() => {
   const router = useRouter();
+  const { analytics_tab } = router.query;
+
+  const { theme: themeStore } = useApplication();
+
+  useEffect(() => {
+    const handleToggleWorkspaceAnalyticsSidebar = () => {
+      if (window && window.innerWidth < 768) {
+        themeStore.toggleWorkspaceAnalyticsSidebar(true);
+      }
+      if (window && themeStore.workspaceAnalyticsSidebarCollapsed && window.innerWidth >= 768) {
+        themeStore.toggleWorkspaceAnalyticsSidebar(false);
+      }
+    };
+
+    window.addEventListener("resize", handleToggleWorkspaceAnalyticsSidebar);
+    handleToggleWorkspaceAnalyticsSidebar();
+    return () => window.removeEventListener("resize", handleToggleWorkspaceAnalyticsSidebar);
+  }, [themeStore]);
 
   return (
     <>
@@ -16,16 +38,7 @@ export const WorkspaceAnalyticsHeader = () => {
       >
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />
-          <div className="block md:hidden">
+          <div className="flex items-center justify-between w-full">
-            <button
-              type="button"
-              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-              onClick={() => router.back()}
-            >
-              <ArrowLeft fontSize={14} strokeWidth={2} />
-            </button>
-          </div>
-          <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
@@ -34,9 +47,14 @@ export const WorkspaceAnalyticsHeader = () => {
                 }
               />
             </Breadcrumbs>
+            {analytics_tab === 'custom' &&
+              <button className="block md:hidden" onClick={() => { themeStore.toggleWorkspaceAnalyticsSidebar() }}>
+                <PanelRight className={cn("w-4 h-4 block md:hidden", !themeStore.workspaceAnalyticsSidebarCollapsed ? "text-custom-primary-100" : "text-custom-text-200")} />
+              </button>
+            }
           </div>
         </div>
       </div>
     </>
   );
-};
+});

web/components/headers/workspace-dashboard.tsx

@@ -1,24 +1,26 @@
-import { useState } from "react";
 import { LayoutGrid, Zap } from "lucide-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
+// hooks
+import { useEventTracker } from "hooks/store";
 // components
-import { BreadcrumbLink, ProductUpdatesModal } from "components/common";
+import { BreadcrumbLink } from "components/common";
 import { Breadcrumbs } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+// constants
+import { CHANGELOG_REDIRECTED, GITHUB_REDIRECTED } from "constants/event-tracker";
 
 export const WorkspaceDashboardHeader = () => {
-  const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
   // hooks
+  const { captureEvent } = useEventTracker();
   const { resolvedTheme } = useTheme();
 
   return (
     <>
-      <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
+      <div className="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
-      <div className="relative z-20 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />
           <div>
@@ -34,16 +36,26 @@ export const WorkspaceDashboardHeader = () => {
         </div>
         <div className="flex items-center gap-3 px-3">
           <a
+            onClick={() =>
+              captureEvent(CHANGELOG_REDIRECTED, {
+                element: "navbar",
+              })
+            }
             href="https://plane.so/changelog"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 text-xs font-medium"
+            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
           >
             <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
-            {"What's new?"}
+            <span className="hidden text-xs font-medium sm:hidden md:block">{"What's new?"}</span>
           </a>
           <a
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 text-xs font-medium"
+            onClick={() =>
+              captureEvent(GITHUB_REDIRECTED, {
+                element: "navbar",
+              })
+            }
+            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
             href="https://github.com/makeplane/plane"
             target="_blank"
             rel="noopener noreferrer"
@@ -54,7 +66,7 @@ export const WorkspaceDashboardHeader = () => {
               width={16}
               alt="GitHub Logo"
             />
-            Star us on GitHub
+            <span className="hidden text-xs font-medium sm:hidden md:block">Star us on GitHub</span>
           </a>
         </div>
       </div>

web/components/inbox/inbox-issue-actions.tsx

@@ -20,6 +20,7 @@ import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Trash2, XCircle
 // types
 import type { TInboxStatus, TInboxDetailedStatus } from "@plane/types";
 import { EUserProjectRoles } from "constants/project";
+import { ISSUE_DELETED } from "constants/event-tracker";
 
 type TInboxIssueActionsHeader = {
   workspaceSlug: string;
@@ -86,17 +87,12 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             throw new Error("Missing required parameters");
           await removeInboxIssue(workspaceSlug, projectId, inboxId, inboxIssueId);
           captureIssueEvent({
-            eventName: "Issue deleted",
+            eventName: ISSUE_DELETED,
             payload: {
               id: inboxIssueId,
               state: "SUCCESS",
               element: "Inbox page",
-            },
+            }
-            group: {
-              isGrouping: true,
-              groupType: "Workspace_metrics",
-              groupId: currentWorkspace?.id!,
-            },
           });
           router.push({
             pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`,
@@ -108,17 +104,12 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             message: "Something went wrong while deleting inbox issue. Please try again.",
           });
           captureIssueEvent({
-            eventName: "Issue deleted",
+            eventName: ISSUE_DELETED,
             payload: {
               id: inboxIssueId,
               state: "FAILED",
               element: "Inbox page",
             },
-            group: {
-              isGrouping: true,
-              groupType: "Workspace_metrics",
-              groupId: currentWorkspace?.id!,
-            },
           });
         }
       },

web/components/inbox/modals/create-issue-modal.tsx

@@ -18,6 +18,8 @@ import { GptAssistantPopover } from "components/core";
 import { Button, Input, ToggleSwitch } from "@plane/ui";
 // types
 import { TIssue } from "@plane/types";
+// constants
+import { ISSUE_CREATED } from "constants/event-tracker";
 
 type Props = {
   isOpen: boolean;
@@ -65,7 +67,6 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
     config: { envConfig },
   } = useApplication();
   const { captureIssueEvent } = useEventTracker();
-  const { currentWorkspace } = useWorkspace();
 
   const {
     control,
@@ -94,34 +95,24 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
           handleClose();
         } else reset(defaultValues);
         captureIssueEvent({
-          eventName: "Issue created",
+          eventName: ISSUE_CREATED,
           payload: {
             ...formData,
             state: "SUCCESS",
             element: "Inbox page",
           },
-          group: {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          },
           path: router.pathname,
         });
       })
       .catch((error) => {
         console.error(error);
         captureIssueEvent({
-          eventName: "Issue created",
+          eventName: ISSUE_CREATED,
           payload: {
             ...formData,
             state: "FAILED",
             element: "Inbox page",
           },
-          group: {
-            isGrouping: true,
-            groupType: "Workspace_metrics",
-            groupId: currentWorkspace?.id!,
-          },
           path: router.pathname,
         });
       });

web/components/issues/attachment/root.tsx

@@ -38,7 +38,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
             title: "Attachment uploaded",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: "Issue attachment added",
             payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "attachment",
@@ -47,7 +47,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: "Issue attachment added",
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
           });
           setToastAlert({
@@ -67,7 +67,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
             title: "Attachment removed",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: "Issue attachment deleted",
             payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "attachment",
@@ -76,7 +76,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: "Issue attachment deleted",
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: "attachment",

web/components/issues/index.ts

@@ -1,6 +1,5 @@
 export * from "./attachment";
 export * from "./issue-modal";
-export * from "./view-select";
 export * from "./delete-issue-modal";
 export * from "./description-form";
 export * from "./issue-layouts";

web/components/issues/issue-detail/root.tsx

@@ -16,6 +16,7 @@ import { TIssue } from "@plane/types";
 // constants
 import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
+import { ISSUE_UPDATED, ISSUE_DELETED } from "constants/event-tracker";
 
 export type TIssueOperations = {
   fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@@ -102,7 +103,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             });
           }
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: Object.keys(data).join(","),
@@ -112,7 +113,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: Object.keys(data).join(","),
@@ -138,7 +139,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Issue deleted successfully",
           });
           captureIssueEvent({
-            eventName: "Issue deleted",
+            eventName: ISSUE_DELETED,
             payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
             path: router.asPath,
           });
@@ -149,7 +150,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Issue delete failed",
           });
           captureIssueEvent({
-            eventName: "Issue deleted",
+            eventName: ISSUE_DELETED,
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
             path: router.asPath,
           });
@@ -164,7 +165,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Issue added to issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "cycle_id",
@@ -174,7 +175,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: "cycle_id",
@@ -198,7 +199,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Cycle removed from issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "cycle_id",
@@ -208,7 +209,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: "cycle_id",
@@ -232,7 +233,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Module added to issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "module_id",
@@ -242,7 +243,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: "module_id",
@@ -266,7 +267,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             message: "Module removed from issue successfully",
           });
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
             updates: {
               changed_property: "module_id",
@@ -276,7 +277,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
           });
         } catch (error) {
           captureIssueEvent({
-            eventName: "Issue updated",
+            eventName: ISSUE_UPDATED,
             payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
             updates: {
               changed_property: "module_id",

web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx

@@ -13,6 +13,8 @@ import { createIssuePayload } from "helpers/issue.helper";
 import { PlusIcon } from "lucide-react";
 // types
 import { TIssue } from "@plane/types";
+// constants
+import { ISSUE_CREATED } from "constants/event-tracker";
 
 type Props = {
   formKey: keyof TIssue;
@@ -129,7 +131,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
           viewId
         ).then((res) => {
           captureIssueEvent({
-            eventName: "Issue created",
+            eventName: ISSUE_CREATED,
             payload: { ...res, state: "SUCCESS", element: "Calendar quick add" },
             path: router.asPath,
           });
@@ -142,7 +144,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
     } catch (err: any) {
       console.error(err);
       captureIssueEvent({
-        eventName: "Issue created",
+        eventName: ISSUE_CREATED,
         payload: { ...payload, state: "FAILED", element: "Calendar quick add" },
         path: router.asPath,
       });

web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import isEqual from "lodash/isEqual";
 // hooks
-import { useGlobalView, useIssues, useLabel, useUser } from "hooks/store";
+import { useEventTracker, useGlobalView, useIssues, useLabel, useUser } from "hooks/store";
 //ui
 import { Button } from "@plane/ui";
 // components
@@ -11,6 +11,8 @@ import { AppliedFiltersList } from "components/issues";
 import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
 import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
 import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "constants/workspace";
+// constants
+import { GLOBAL_VIEW_UPDATED } from "constants/event-tracker";
 
 type Props = {
   globalViewId: string;
@@ -27,6 +29,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
   } = useIssues(EIssuesStoreType.GLOBAL);
   const { workspaceLabels } = useLabel();
   const { globalViewMap, updateGlobalView } = useGlobalView();
+  const { captureEvent } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -91,6 +94,13 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
       filters: {
         ...(appliedFilters ?? {}),
       },
+    }).then((res) => {
+      captureEvent(GLOBAL_VIEW_UPDATED, {
+        view_id: res.id,
+        applied_filters: res.filters,
+        state: "SUCCESS",
+        element: "Spreadsheet view",
+      });
     });
   };
 

web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx

@@ -13,10 +13,11 @@ type Props = {
   placement?: Placement;
   disabled?: boolean;
   tabIndex?: number;
+  menuButton?: React.ReactNode;
 };
 
 export const FiltersDropdown: React.FC<Props> = (props) => {
-  const { children, title = "Dropdown", placement, disabled = false, tabIndex } = props;
+  const { children, title = "Dropdown", placement, disabled = false, tabIndex, menuButton } = props;
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -33,7 +34,9 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
         return (
           <>
             <Popover.Button as={React.Fragment}>
-              <Button
+              {menuButton ? <button role="button" ref={setReferenceElement}>
+                {menuButton}
+              </button> : <Button
                 disabled={disabled}
                 ref={setReferenceElement}
                 variant="neutral-primary"
@@ -46,7 +49,7 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
                 <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
                   <span>{title}</span>
                 </div>
-              </Button>
+              </Button>}
             </Popover.Button>
             <Transition
               as={Fragment}