dev: update server configuration commands

* chore: added tab change animation

* chore: widgets filtering logic updated

* refactor: issues list widget

* fix: tab navigation transition

* fix: extra top spacing on opening the peek overview

apiserver/Dockerfile.api

@@ -41,6 +41,7 @@ USER captain
 
 # Add in Django deps and generate Django's static files
 COPY manage.py manage.py
+COPY server.py server.py
 COPY plane plane/
 COPY templates templates/
 COPY package.json package.json

apiserver/bin/takeoff

@@ -28,4 +28,4 @@ python manage.py configure_instance
 # Create the default bucket
 python manage.py create_bucket
 
-exec gunicorn -w $GUNICORN_WORKERS -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:${PORT:-8000} --max-requests 1200 --max-requests-jitter 1000 --access-logfile -
+python server.py

apiserver/plane/api/views/cycle.py

@@ -243,6 +243,29 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
         ):
             serializer = CycleSerializer(data=request.data)
             if serializer.is_valid():
+                if (
+                    request.data.get("external_id")
+                    and request.data.get("external_source")
+                    and Cycle.objects.filter(
+                        project_id=project_id,
+                        workspace__slug=slug,
+                        external_source=request.data.get("external_source"),
+                        external_id=request.data.get("external_id"),
+                    ).exists()
+                ):
+                    cycle = Cycle.objects.filter(
+                        workspace__slug=slug,
+                        project_id=project_id,
+                        external_source=request.data.get("external_source"),
+                        external_id=request.data.get("external_id"),
+                    ).first()
+                    return Response(
+                        {
+                            "error": "Cycle with the same external id and external source already exists",
+                            "id": str(cycle.id),
+                        },
+                        status=status.HTTP_409_CONFLICT,
+                    )
                 serializer.save(
                     project_id=project_id,
                     owned_by=request.user,
@@ -289,6 +312,23 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
 
         serializer = CycleSerializer(cycle, data=request.data, partial=True)
         if serializer.is_valid():
+            if (
+                request.data.get("external_id")
+                and (cycle.external_id != request.data.get("external_id"))
+                and Cycle.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source", cycle.external_source),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                return Response(
+                    {
+                        "error": "Cycle with the same external id and external source already exists",
+                        "id": str(cycle.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
             serializer.save()
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

apiserver/plane/api/views/issue.py

@@ -220,6 +220,30 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
         )
 
         if serializer.is_valid():
+            if (
+                request.data.get("external_id")
+                and request.data.get("external_source")
+                and Issue.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source"),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                issue = Issue.objects.filter(
+                    workspace__slug=slug,
+                    project_id=project_id,
+                    external_id=request.data.get("external_id"),
+                    external_source=request.data.get("external_source"),
+                ).first()
+                return Response(
+                    {
+                        "error": "Issue with the same external id and external source already exists",
+                        "id": str(issue.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
+
             serializer.save()
 
             # Track the issue
@@ -256,6 +280,26 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
             partial=True,
         )
         if serializer.is_valid():
+            if (
+                str(request.data.get("external_id"))
+                and (issue.external_id != str(request.data.get("external_id")))
+                and Issue.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get(
+                        "external_source", issue.external_source
+                    ),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                return Response(
+                    {
+                        "error": "Issue with the same external id and external source already exists",
+                        "id": str(issue.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
+
             serializer.save()
             issue_activity.delay(
                 type="issue.activity.updated",
@@ -263,6 +307,8 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
                 actor_id=str(request.user.id),
                 issue_id=str(pk),
                 project_id=str(project_id),
+                external_id__isnull=False,
+                external_source__isnull=False,
                 current_instance=current_instance,
                 epoch=int(timezone.now().timestamp()),
             )
@@ -318,6 +364,30 @@ class LabelAPIEndpoint(BaseAPIView):
         try:
             serializer = LabelSerializer(data=request.data)
             if serializer.is_valid():
+                if (
+                    request.data.get("external_id")
+                    and request.data.get("external_source")
+                    and Label.objects.filter(
+                        project_id=project_id,
+                        workspace__slug=slug,
+                        external_source=request.data.get("external_source"),
+                        external_id=request.data.get("external_id"),
+                    ).exists()
+                ):
+                    label = Label.objects.filter(
+                        workspace__slug=slug,
+                        project_id=project_id,
+                        external_id=request.data.get("external_id"),
+                        external_source=request.data.get("external_source"),
+                    ).first()
+                    return Response(
+                        {
+                            "error": "Label with the same external id and external source already exists",
+                            "id": str(label.id),
+                        },
+                        status=status.HTTP_409_CONFLICT,
+                    )
+
                 serializer.save(project_id=project_id)
                 return Response(
                     serializer.data, status=status.HTTP_201_CREATED
@@ -326,11 +396,17 @@ class LabelAPIEndpoint(BaseAPIView):
                 serializer.errors, status=status.HTTP_400_BAD_REQUEST
             )
         except IntegrityError:
+            label = Label.objects.filter(
+                workspace__slug=slug,
+                project_id=project_id,
+                name=request.data.get("name"),
+            ).first()
             return Response(
                 {
-                    "error": "Label with the same name already exists in the project"
+                    "error": "Label with the same name already exists in the project",
+                    "id": str(label.id),
                 },
-                status=status.HTTP_400_BAD_REQUEST,
+                status=status.HTTP_409_CONFLICT,
             )
 
     def get(self, request, slug, project_id, pk=None):
@@ -357,6 +433,25 @@ class LabelAPIEndpoint(BaseAPIView):
         label = self.get_queryset().get(pk=pk)
         serializer = LabelSerializer(label, data=request.data, partial=True)
         if serializer.is_valid():
+            if (
+                str(request.data.get("external_id"))
+                and (label.external_id != str(request.data.get("external_id")))
+                and Issue.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get(
+                        "external_source", label.external_source
+                    ),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                return Response(
+                    {
+                        "error": "Label with the same external id and external source already exists",
+                        "id": str(label.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
             serializer.save()
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

apiserver/plane/api/views/module.py

@@ -132,6 +132,29 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
             },
         )
         if serializer.is_valid():
+            if (
+                request.data.get("external_id")
+                and request.data.get("external_source")
+                and Module.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source"),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                module = Module.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source"),
+                    external_id=request.data.get("external_id"),
+                ).first()
+                return Response(
+                    {
+                        "error": "Module with the same external id and external source already exists",
+                        "id": str(module.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
             serializer.save()
             module = Module.objects.get(pk=serializer.data["id"])
             serializer = ModuleSerializer(module)
@@ -149,8 +172,25 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
             partial=True,
         )
         if serializer.is_valid():
+            if (
+                request.data.get("external_id")
+                and (module.external_id != request.data.get("external_id"))
+                and Module.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source", module.external_source),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                return Response(
+                    {
+                        "error": "Module with the same external id and external source already exists",
+                        "id": str(module.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
             serializer.save()
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
+            return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def get(self, request, slug, project_id, pk=None):

apiserver/plane/api/views/state.py

@@ -38,6 +38,30 @@ class StateAPIEndpoint(BaseAPIView):
             data=request.data, context={"project_id": project_id}
         )
         if serializer.is_valid():
+            if (
+                request.data.get("external_id")
+                and request.data.get("external_source")
+                and State.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source"),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                state = State.objects.filter(
+                    workspace__slug=slug,
+                    project_id=project_id,
+                    external_id=request.data.get("external_id"),
+                    external_source=request.data.get("external_source"),
+                ).first()
+                return Response(
+                    {
+                        "error": "State with the same external id and external source already exists",
+                        "id": str(state.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
+
             serializer.save(project_id=project_id)
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@@ -91,6 +115,23 @@ class StateAPIEndpoint(BaseAPIView):
         )
         serializer = StateSerializer(state, data=request.data, partial=True)
         if serializer.is_valid():
+            if (
+                str(request.data.get("external_id"))
+                and (state.external_id != str(request.data.get("external_id")))
+                and State.objects.filter(
+                    project_id=project_id,
+                    workspace__slug=slug,
+                    external_source=request.data.get("external_source", state.external_source),
+                    external_id=request.data.get("external_id"),
+                ).exists()
+            ):
+                return Response(
+                    {
+                        "error": "State with the same external id and external source already exists",
+                        "id": str(state.id),
+                    },
+                    status=status.HTTP_409_CONFLICT,
+                )
             serializer.save()
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

apiserver/plane/app/views/cycle.py

@@ -242,13 +242,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     .values("display_name", "assignee_id", "avatar")
                     .annotate(
                         total_issues=Count(
-                            "assignee_id",
+                            "id",
                             filter=Q(archived_at__isnull=True, is_draft=False),
                         ),
                     )
                     .annotate(
                         completed_issues=Count(
-                            "assignee_id",
+                            "id",
                             filter=Q(
                                 completed_at__isnull=False,
                                 archived_at__isnull=True,
@@ -258,7 +258,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     )
                     .annotate(
                         pending_issues=Count(
-                            "assignee_id",
+                            "id",
                             filter=Q(
                                 completed_at__isnull=True,
                                 archived_at__isnull=True,
@@ -281,13 +281,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     .values("label_name", "color", "label_id")
                     .annotate(
                         total_issues=Count(
-                            "label_id",
+                            "id",
                             filter=Q(archived_at__isnull=True, is_draft=False),
                         )
                     )
                     .annotate(
                         completed_issues=Count(
-                            "label_id",
+                            "id",
                             filter=Q(
                                 completed_at__isnull=False,
                                 archived_at__isnull=True,
@@ -297,7 +297,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                     )
                     .annotate(
                         pending_issues=Count(
-                            "label_id",
+                            "id",
                             filter=Q(
                                 completed_at__isnull=True,
                                 archived_at__isnull=True,
@@ -419,13 +419,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 total_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(archived_at__isnull=True, is_draft=False),
                 ),
             )
             .annotate(
                 completed_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -435,7 +435,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,
@@ -459,13 +459,13 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             .values("label_name", "color", "label_id")
             .annotate(
                 total_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(archived_at__isnull=True, is_draft=False),
                 ),
             )
             .annotate(
                 completed_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -475,7 +475,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,

apiserver/plane/app/views/dashboard.py

@@ -145,6 +145,23 @@ def dashboard_assigned_issues(self, request, slug):
         )
     ).order_by("priority_order")
 
+    if issue_type == "pending":
+        pending_issues_count = assigned_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        ).count()
+        pending_issues = assigned_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        )[:5]
+        return Response(
+            {
+                "issues": IssueSerializer(
+                    pending_issues, many=True, expand=self.expand
+                ).data,
+                "count": pending_issues_count,
+            },
+            status=status.HTTP_200_OK,
+        )
+
     if issue_type == "completed":
         completed_issues_count = assigned_issues.filter(
             state__group__in=["completed"]
@@ -257,6 +274,23 @@ def dashboard_created_issues(self, request, slug):
         )
     ).order_by("priority_order")
 
+    if issue_type == "pending":
+        pending_issues_count = created_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        ).count()
+        pending_issues = created_issues.filter(
+            state__group__in=["backlog", "started", "unstarted"]
+        )[:5]
+        return Response(
+            {
+                "issues": IssueSerializer(
+                    pending_issues, many=True, expand=self.expand
+                ).data,
+                "count": pending_issues_count,
+            },
+            status=status.HTTP_200_OK,
+        )
+
     if issue_type == "completed":
         completed_issues_count = created_issues.filter(
             state__group__in=["completed"]

apiserver/plane/app/views/module.py

@@ -197,7 +197,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 total_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         archived_at__isnull=True,
                         is_draft=False,
@@ -206,7 +206,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 completed_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -216,7 +216,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "assignee_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,
@@ -239,7 +239,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             .values("label_name", "color", "label_id")
             .annotate(
                 total_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         archived_at__isnull=True,
                         is_draft=False,
@@ -248,7 +248,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 completed_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=False,
                         archived_at__isnull=True,
@@ -258,7 +258,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(
                 pending_issues=Count(
-                    "label_id",
+                    "id",
                     filter=Q(
                         completed_at__isnull=True,
                         archived_at__isnull=True,

apiserver/plane/bgtasks/issue_activites_task.py

@@ -353,13 +353,18 @@ def track_assignees(
     issue_activities,
     epoch,
 ):
-    requested_assignees = set(
-        [str(asg) for asg in requested_data.get("assignee_ids", [])]
+    requested_assignees = (
+        set([str(asg) for asg in requested_data.get("assignee_ids", [])])
+        if requested_data is not None
+        else set()
     )
-    current_assignees = set(
-        [str(asg) for asg in current_instance.get("assignee_ids", [])]
+    current_assignees = (
+        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/db/models/user.py

@@ -172,4 +172,9 @@ def create_user_notification(sender, instance, created, **kwargs):
         from plane.db.models import UserNotificationPreference
         UserNotificationPreference.objects.create(
             user=instance,
+            property_change=False,
+            state_change=False,
+            comment=False,
+            mention=False,
+            issue_completed=False,
         )

apiserver/server.py

@@ -0,0 +1,17 @@
+import os
+import uvicorn
+
+if __name__ == "__main__":
+    os.environ.setdefault(
+        "DJANGO_SETTINGS_MODULE", "plane.settings.production"
+    )
+    uvicorn.run(
+        "plane.asgi:application",
+        host=os.environ.get("HOST", "0.0.0.0"),
+        port=os.environ.get("PORT", 8000),
+        ws="auto",
+        workers=int(os.environ.get("GUNICORN_WORKERS", 1)),
+        log_level=os.environ.get("LOG_LEVEL", "info"),
+        lifespan="off",
+        access_log="on",
+    )

deploy/selfhost/install.sh

@@ -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
@@ -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

packages/types/src/dashboard.d.ts

@@ -13,9 +13,10 @@ export type TWidgetKeys =
   | "recent_projects"
   | "recent_collaborators";
 
-export type TIssuesListTypes = "upcoming" | "overdue" | "completed";
+export type TIssuesListTypes = "pending" | "upcoming" | "overdue" | "completed";
 
 export type TDurationFilterOptions =
+  | "none"
   | "today"
   | "this_week"
   | "this_month"

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -2,8 +2,6 @@ import * as React from "react";
 
 // icons
 import { ChevronRight } from "lucide-react";
-// components
-import { Tooltip } from "../tooltip";
 
 type BreadcrumbsProps = {
   children: any;
@@ -25,42 +23,11 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
 type Props = {
   type?: "text" | "component";
   component?: React.ReactNode;
-  label?: string;
-  icon?: React.ReactNode;
-  link?: string;
+  link?: JSX.Element;
 };
 const BreadcrumbItem: React.FC<Props> = (props) => {
-  const { type = "text", component, label, icon, link } = props;
-  return (
-    <>
-      {type != "text" ? (
-        <div className="flex items-center space-x-2">{component}</div>
-      ) : (
-        <Tooltip tooltipContent={label} position="bottom">
-          <li className="flex items-center space-x-2">
-            <div className="flex flex-wrap items-center gap-2.5">
-              {link ? (
-                <a
-                  className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
-                  href={link}
-                >
-                  {icon && (
-                    <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
-                  )}
-                  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-                </a>
-              ) : (
-                <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
-                  {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
-                  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-                </div>
-              )}
-            </div>
-          </li>
-        </Tooltip>
-      )}
-    </>
-  );
+  const { type = "text", component, link } = props;
+  return <>{type != "text" ? <div className="flex items-center space-x-2">{component}</div> : link}</>;
 };
 
 Breadcrumbs.BreadcrumbItem = BreadcrumbItem;

web/components/account/deactivate-account-modal.tsx

@@ -89,8 +89,8 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="">
                     <div className="flex items-start gap-x-4">
-                      <div className="grid place-items-center rounded-full bg-red-500/20 p-4">
-                        <Trash2 className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
+                        <Trash2 className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600" aria-hidden="true" />
                       </div>
                       <div>
                         <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">

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

@@ -1,7 +1,7 @@
 import { Command } from "cmdk";
 import { ContrastIcon, FileText } from "lucide-react";
 // hooks
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 // ui
 import { DiceIcon, PhotoFilterIcon } from "@plane/ui";
 
@@ -14,8 +14,8 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
 
   const {
     commandPalette: { toggleCreateCycleModal, toggleCreateModuleModal, toggleCreatePageModal, toggleCreateViewModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
 
   return (
     <>
@@ -23,7 +23,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
-            setTrackElement("COMMAND_PALETTE");
+            setTrackElement("Command palette");
             toggleCreateCycleModal(true);
           }}
           className="focus:outline-none"
@@ -39,6 +39,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
+            setTrackElement("Command palette");
             toggleCreateModuleModal(true);
           }}
           className="focus:outline-none"
@@ -54,6 +55,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
+            setTrackElement("Command palette");
             toggleCreateViewModal(true);
           }}
           className="focus:outline-none"
@@ -69,6 +71,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
         <Command.Item
           onSelect={() => {
             closePalette();
+            setTrackElement("Command palette");
             toggleCreatePageModal(true);
           }}
           className="focus:outline-none"

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

@@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { FolderPlus, Search, Settings } from "lucide-react";
 // hooks
-import { useApplication, useProject } from "hooks/store";
+import { useApplication, useEventTracker, useProject } from "hooks/store";
 // services
 import { WorkspaceService } from "services/workspace.service";
 import { IssueService } from "services/issue";
@@ -64,8 +64,8 @@ export const CommandModal: React.FC = observer(() => {
       toggleCreateIssueModal,
       toggleCreateProjectModal,
     },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
 
   // router
   const router = useRouter();
@@ -278,7 +278,7 @@ export const CommandModal: React.FC = observer(() => {
                           <Command.Item
                             onSelect={() => {
                               closePalette();
-                              setTrackElement("COMMAND_PALETTE");
+                              setTrackElement("Command Palette");
                               toggleCreateIssueModal(true);
                             }}
                             className="focus:bg-custom-background-80"
@@ -296,7 +296,7 @@ export const CommandModal: React.FC = observer(() => {
                             <Command.Item
                               onSelect={() => {
                                 closePalette();
-                                setTrackElement("COMMAND_PALETTE");
+                                setTrackElement("Command palette");
                                 toggleCreateProjectModal(true);
                               }}
                               className="focus:outline-none"

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

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useIssues, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CommandModal, ShortcutsModal } from "components/command-palette";
@@ -32,8 +32,8 @@ export const CommandPalette: FC = observer(() => {
   const {
     commandPalette,
     theme: { toggleSidebar },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { currentUser } = useUser();
   const {
     issues: { removeIssue },
@@ -118,11 +118,10 @@ export const CommandPalette: FC = observer(() => {
           toggleSidebar();
         }
       } else if (!isAnyModalOpen) {
+        setTrackElement("Shortcut key");
         if (keyPressed === "c") {
-          setTrackElement("SHORTCUT_KEY");
           toggleCreateIssueModal(true);
         } else if (keyPressed === "p") {
-          setTrackElement("SHORTCUT_KEY");
           toggleCreateProjectModal(true);
         } else if (keyPressed === "h") {
           toggleShortcutModal(true);

web/components/common/breadcrumb-link.tsx

@@ -0,0 +1,36 @@
+import { Tooltip } from "@plane/ui";
+import Link from "next/link";
+
+type Props = {
+  label?: string;
+  href?: string;
+  icon?: React.ReactNode | undefined;
+};
+
+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">
+        <div className="flex flex-wrap items-center gap-2.5">
+          {href ? (
+            <Link
+              className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
+              href={href}
+            >
+              {icon && (
+                <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
+              )}
+              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+            </Link>
+          ) : (
+            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
+              {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
+              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+            </div>
+          )}
+        </div>
+      </li>
+    </Tooltip>
+  );
+};

web/components/common/index.ts

@@ -1,3 +1,4 @@
 export * from "./product-updates-modal";
 export * from "./empty-state";
 export * from "./latest-feature-block";
+export * from "./breadcrumb-link";

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

@@ -86,12 +86,15 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
           {
             id: "pending",
             color: "#3F76FF",
-            data: chartData.map((item, index) => ({
-              index,
-              x: item.currentDate,
-              y: item.pending,
-              color: "#3F76FF",
-            })),
+            data:
+              chartData.length > 0
+                ? chartData.map((item, index) => ({
+                    index,
+                    x: item.currentDate,
+                    y: item.pending,
+                    color: "#3F76FF",
+                  }))
+                : [],
             enableArea: true,
           },
           {
@@ -121,7 +124,9 @@ const ProgressChart: React.FC<Props> = ({ distribution, startDate, endDate, tota
         enableArea
         colors={(datum) => datum.color ?? "#3F76FF"}
         customYAxisTickValues={[0, totalIssues]}
-        gridXValues={chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : ""))}
+        gridXValues={
+          chartData.length > 0 ? chartData.map((item, index) => (index % 2 === 0 ? item.currentDate : "")) : undefined
+        }
         enableSlices="x"
         sliceTooltip={(datum) => (
           <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">

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

@@ -125,7 +125,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
         </Tab>
       </Tab.List>
       <Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
-        <Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
+        <Tab.Panel as="div" className="flex min-h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
           {distribution?.assignees.length > 0 ? (
             distribution.assignees.map((assignee, index) => {
               if (assignee.assignee_id)

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

@@ -2,7 +2,7 @@ import { FC, MouseEvent, useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 // hooks
-import { useApplication, useCycle, useUser } from "hooks/store";
+import { useEventTracker, useCycle, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
@@ -33,9 +33,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   // router
   const router = useRouter();
   // store
-  const {
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -117,14 +115,15 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Cycles page board layout");
     setUpdateModal(true);
   };
 
   const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Cycles page board layout");
     setDeleteModal(true);
-    setTrackElement("CYCLE_PAGE_BOARD_LAYOUT");
   };
 
   const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {

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

@@ -2,7 +2,7 @@ import { FC, MouseEvent, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
-import { useApplication, useCycle, useUser } from "hooks/store";
+import { useEventTracker, useCycle, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
@@ -37,9 +37,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   // router
   const router = useRouter();
   // store hooks
-  const {
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -90,14 +88,15 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Cycles page list layout");
     setUpdateModal(true);
   };
 
   const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
+    setTrackElement("Cycles page list layout");
     setDeleteModal(true);
-    setTrackElement("CYCLE_PAGE_LIST_LAYOUT");
   };
 
   const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {

web/components/cycles/delete-modal.tsx

@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 import { AlertTriangle } from "lucide-react";
 // hooks
-import { useApplication, useCycle } from "hooks/store";
+import { useEventTracker, useCycle } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { Button } from "@plane/ui";
@@ -27,9 +27,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
   const router = useRouter();
   const { cycleId, peekCycle } = router.query;
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureCycleEvent } = useEventTracker();
   const { deleteCycle } = useCycle();
   // toast alert
   const { setToastAlert } = useToast();
@@ -46,13 +44,15 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
             title: "Success!",
             message: "Cycle deleted successfully.",
           });
-          postHogEventTracker("CYCLE_DELETE", {
-            state: "SUCCESS",
+          captureCycleEvent({
+            eventName: "Cycle deleted",
+            payload: { ...cycle, state: "SUCCESS" },
           });
         })
         .catch(() => {
-          postHogEventTracker("CYCLE_DELETE", {
-            state: "FAILED",
+          captureCycleEvent({
+            eventName: "Cycle deleted",
+            payload: { ...cycle, state: "FAILED" },
           });
         });
 

web/components/cycles/modal.tsx

@@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
-import { useApplication, useCycle, useProject } from "hooks/store";
+import { useEventTracker, useCycle, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -27,9 +27,7 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
   // states
   const [activeProject, setActiveProject] = useState<string | null>(null);
   // store hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureCycleEvent } = useEventTracker();
   const { workspaceProjectIds } = useProject();
   const { createCycle, updateCycleDetails } = useCycle();
   // toast alert
@@ -48,9 +46,9 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           title: "Success!",
           message: "Cycle created successfully.",
         });
-        postHogEventTracker("CYCLE_CREATE", {
-          ...res,
-          state: "SUCCESS",
+        captureCycleEvent({
+          eventName: "Cycle created",
+          payload: { ...res, state: "SUCCESS" },
         });
       })
       .catch((err) => {
@@ -59,8 +57,9 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
           title: "Error!",
           message: err.detail ?? "Error in creating cycle. Please try again.",
         });
-        postHogEventTracker("CYCLE_CREATE", {
-          state: "FAILED",
+        captureCycleEvent({
+          eventName: "Cycle created",
+          payload: { ...payload, state: "FAILED" },
         });
       });
   };

web/components/cycles/sidebar.tsx

@@ -6,7 +6,7 @@ import { Disclosure, Popover, Transition } from "@headlessui/react";
 // services
 import { CycleService } from "services/cycle.service";
 // hooks
-import { useApplication, useCycle, useMember, useUser } from "hooks/store";
+import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { SidebarProgressStats } from "components/core";
@@ -66,9 +66,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug, projectId, peekCycle } = router.query;
   // store hooks
-  const {
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -319,13 +317,7 @@ 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.total_issues === cycleDetails.completed_issues
-      ? cycleDetails.total_issues > 1
-        ? `${cycleDetails.total_issues}`
-        : `${cycleDetails.total_issues}`
-      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
+    cycleDetails.total_issues === 0 ? "0 Issue" : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
@@ -575,7 +567,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                   <Transition show={open}>
                     <Disclosure.Panel>
                       <div className="flex flex-col gap-3">
-                        {isStartValid && isEndValid ? (
+                        {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">
@@ -589,16 +583,14 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
                                 </div>
                               </div>
                             </div>
-                            {cycleDetails && cycleDetails.distribution && (
-                              <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 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>
                         ) : (
                           ""

web/components/dashboard/project-empty-state.tsx

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useUser } from "hooks/store";
 // ui
 import { Button } from "@plane/ui";
 // assets
@@ -14,6 +14,7 @@ export const DashboardProjectEmptyState = observer(() => {
   const {
     commandPalette: { toggleCreateProjectModal },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -31,7 +32,13 @@ export const DashboardProjectEmptyState = observer(() => {
       <Image src={ProjectEmptyStateImage} className="w-full" alt="Project empty state" />
       {canCreateProject && (
         <div className="flex justify-center">
-          <Button variant="primary" onClick={() => toggleCreateProjectModal(true)}>
+          <Button
+            variant="primary"
+            onClick={() => {
+              setTrackElement("Project empty state");
+              toggleCreateProjectModal(true);
+            }}
+          >
             Build your first project
           </Button>
         </div>

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

@@ -17,7 +17,7 @@ import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"
 // types
 import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
 // constants
-import { ISSUES_TABS_LIST } from "constants/dashboard";
+import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
 const WIDGET_KEY = "assigned_issues";
 
@@ -30,6 +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.target_date ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TAssignedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -41,68 +43,79 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "upcoming",
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      issue_type: filters.tab ?? selectedTab,
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
       expand: "issue_relation",
     }).finally(() => setFetching(false));
   };
 
   useEffect(() => {
-    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week");
+    const filterDates = getCustomDates(selectedDurationFilter);
 
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: widgetDetails?.widget_filters.tab ?? "upcoming",
-      target_date: filterDates,
+      issue_type: selectedTab,
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
       expand: "issue_relation",
     });
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
+  const filterParams = getRedirectionFilters(selectedTab);
+  const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
 
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
-      <div className="flex items-start justify-between gap-2 p-6 pl-7">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Assigned to you
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 p-6 pl-7">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Assigned to you
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
-          onChange={(val) =>
-            handleUpdateFilters({
-              target_date: val,
-            })
-          }
+          value={selectedDurationFilter}
+          onChange={(val) => {
+            if (val === selectedDurationFilter) return;
+
+            // switch to pending tab if target date is changed to none
+            if (val === "none" && selectedTab !== "completed") {
+              handleUpdateFilters({ target_date: 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,
+                tab: "upcoming",
+              });
+              return;
+            }
+
+            handleUpdateFilters({ target_date: val });
+          }}
         />
       </div>
       <Tab.Group
         as="div"
-        defaultIndex={ISSUES_TABS_LIST.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
+        selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
         onChange={(i) => {
-          const selectedTab = ISSUES_TABS_LIST[i];
-          handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
+          const selectedTab = tabsList[i];
+          handleUpdateFilters({ tab: selectedTab?.key ?? "pending" });
         }}
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList />
+          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
         </div>
         <Tab.Panels as="div" className="h-full">
-          {ISSUES_TABS_LIST.map((tab) => (
+          {tabsList.map((tab) => (
             <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
               <WidgetIssuesList
                 issues={widgetStats.issues}

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

@@ -17,7 +17,7 @@ import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"
 // types
 import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
 // constants
-import { ISSUES_TABS_LIST } from "constants/dashboard";
+import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
 const WIDGET_KEY = "created_issues";
 
@@ -30,6 +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.target_date ?? "none";
 
   const handleUpdateFilters = async (filters: Partial<TCreatedIssuesWidgetFilters>) => {
     if (!widgetDetails) return;
@@ -41,64 +43,76 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "upcoming",
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      issue_type: filters.tab ?? selectedTab,
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     }).finally(() => setFetching(false));
   };
 
   useEffect(() => {
+    const filterDates = getCustomDates(selectedDurationFilter);
+
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      issue_type: widgetDetails?.widget_filters.tab ?? "upcoming",
-      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
+      issue_type: selectedTab,
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
+  const filterParams = getRedirectionFilters(selectedTab);
+  const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
 
   if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
-      <div className="flex items-start justify-between gap-2 p-6 pl-7">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Created by you
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 p-6 pl-7">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Created by you
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
-          onChange={(val) =>
-            handleUpdateFilters({
-              target_date: val,
-            })
-          }
+          value={selectedDurationFilter}
+          onChange={(val) => {
+            if (val === selectedDurationFilter) return;
+
+            // switch to pending tab if target date is changed to none
+            if (val === "none" && selectedTab !== "completed") {
+              handleUpdateFilters({ target_date: 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,
+                tab: "upcoming",
+              });
+              return;
+            }
+
+            handleUpdateFilters({ target_date: val });
+          }}
         />
       </div>
       <Tab.Group
         as="div"
-        defaultIndex={ISSUES_TABS_LIST.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
+        selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
         onChange={(i) => {
-          const selectedTab = ISSUES_TABS_LIST[i];
-          handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
+          const selectedTab = tabsList[i];
+          handleUpdateFilters({ tab: selectedTab.key ?? "pending" });
         }}
         className="h-full flex flex-col"
       >
         <div className="px-6">
-          <TabsList />
+          <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
         </div>
         <Tab.Panels as="div" className="h-full">
-          {ISSUES_TABS_LIST.map((tab) => (
+          {tabsList.map((tab) => (
             <Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
               <WidgetIssuesList
                 issues={widgetStats.issues}

web/components/dashboard/widgets/dropdowns/duration-filter.tsx

@@ -26,11 +26,11 @@ export const DurationFilterDropdown: React.FC<Props> = (props) => {
       placement="bottom-end"
       closeOnSelect
     >
-      {DURATION_FILTER_OPTIONS.map((option) => (
-        <CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
-          {option.label}
-        </CustomMenu.MenuItem>
-      ))}
+        {DURATION_FILTER_OPTIONS.map((option) => (
+          <CustomMenu.MenuItem key={option.key} onClick={() => onChange(option.key)}>
+            {option.label}
+          </CustomMenu.MenuItem>
+        ))}
     </CustomMenu>
   );
 };

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

@@ -14,7 +14,7 @@ import {
   IssueListItemProps,
 } from "components/dashboard/widgets";
 // ui
-import { Loader, getButtonStyling } from "@plane/ui";
+import { getButtonStyling } from "@plane/ui";
 // helpers
 import { cn } from "helpers/common.helper";
 import { getRedirectionFilters } from "helpers/dashboard.helper";
@@ -41,16 +41,18 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
   const filterParams = getRedirectionFilters(tab);
 
   const ISSUE_LIST_ITEM: {
-    [key in string]: {
+    [key: string]: {
       [key in TIssuesListTypes]: React.FC<IssueListItemProps>;
     };
   } = {
     assigned: {
+      pending: AssignedUpcomingIssueListItem,
       upcoming: AssignedUpcomingIssueListItem,
       overdue: AssignedOverdueIssueListItem,
       completed: AssignedCompletedIssueListItem,
     },
     created: {
+      pending: CreatedUpcomingIssueListItem,
       upcoming: CreatedUpcomingIssueListItem,
       overdue: CreatedOverdueIssueListItem,
       completed: CreatedCompletedIssueListItem,
@@ -61,12 +63,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
     <>
       <div className="h-full">
         {isLoading ? (
-          <Loader className="mt-7 mx-6 space-y-4">
-            <Loader.Item height="25px" />
-            <Loader.Item height="25px" />
-            <Loader.Item height="25px" />
-            <Loader.Item height="25px" />
-          </Loader>
+          <></>
         ) : issues.length > 0 ? (
           <>
             <div className="mt-7 mx-6 border-b-[0.5px] border-custom-border-200 grid grid-cols-6 gap-1 text-xs text-custom-text-300 pb-1">
@@ -77,11 +74,11 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
                 })}
               >
                 Issues
-                <span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl h-4 min-w-6 flex items-center text-center justify-center">
+                <span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl px-3 flex items-center text-center justify-center">
                   {totalIssues}
                 </span>
               </h6>
-              {tab === "upcoming" && <h6 className="text-center">Due date</h6>}
+              {["upcoming", "pending"].includes(tab) && <h6 className="text-center">Due date</h6>}
               {tab === "overdue" && <h6 className="text-center">Due by</h6>}
               {type === "assigned" && tab !== "completed" && <h6 className="text-center">Blocked by</h6>}
               {type === "created" && <h6 className="text-center">Assigned to</h6>}

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

@@ -1,26 +1,63 @@
+import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 // helpers
 import { cn } from "helpers/common.helper";
+// types
+import { TDurationFilterOptions, TIssuesListTypes } from "@plane/types";
 // constants
-import { ISSUES_TABS_LIST } from "constants/dashboard";
+import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
 
-export const TabsList = () => (
-  <Tab.List
-    as="div"
-    className="border-[0.5px] border-custom-border-200 rounded grid grid-cols-3 bg-custom-background-80"
-  >
-    {ISSUES_TABS_LIST.map((tab) => (
-      <Tab
-        key={tab.key}
-        className={({ selected }) =>
-          cn("font-semibold text-xs rounded py-1.5 focus:outline-none", {
-            "bg-custom-background-100 text-custom-text-300 shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selected,
-            "text-custom-text-400": !selected,
-          })
-        }
-      >
-        {tab.label}
-      </Tab>
-    ))}
-  </Tab.List>
-);
+type Props = {
+  durationFilter: TDurationFilterOptions;
+  selectedTab: TIssuesListTypes;
+};
+
+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"));
+
+  return (
+    <Tab.List
+      as="div"
+      className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 grid"
+      style={{
+        gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
+      }}
+    >
+      <div
+        className={cn("absolute bg-custom-background-100 rounded transition-all duration-500 ease-in-out", {
+          // 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,
+        })}
+        style={{
+          height: "calc(100% - 1px)",
+          width: `${100 / tabsList.length}%`,
+          transform: `translateX(${selectedTabIndex * 100}%)`,
+        }}
+      />
+      {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",
+            "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,
+            }
+          )}
+        >
+          <span className="scale-110">{tab.label}</span>
+        </Tab>
+      ))}
+    </Tab.List>
+  );
+});

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

@@ -84,16 +84,18 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
   };
 
   useEffect(() => {
+    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -129,21 +131,15 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
-      <div className="flex items-start justify-between gap-2 pl-7 pr-6">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/assigned`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Assigned by priority
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/assigned`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Assigned by priority
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
+          value={widgetDetails.widget_filters.target_date ?? "none"}
           onChange={(val) =>
             handleUpdateFilters({
               target_date: val,

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

@@ -43,17 +43,19 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       filters,
     });
 
+    const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
   };
 
   // fetch widget stats
   useEffect(() => {
+    const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
     fetchWidgetStats(workspaceSlug, dashboardId, {
       widget_key: WIDGET_KEY,
-      target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
+      ...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -72,14 +74,14 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       startedCount > 0
         ? "started"
         : unStartedCount > 0
-          ? "unstarted"
-          : backlogCount > 0
-            ? "backlog"
-            : completedCount > 0
-              ? "completed"
-              : canceledCount > 0
-                ? "cancelled"
-                : null;
+        ? "unstarted"
+        : backlogCount > 0
+        ? "backlog"
+        : completedCount > 0
+        ? "completed"
+        : canceledCount > 0
+        ? "cancelled"
+        : null;
 
     setActiveStateGroup(stateGroup);
     setDefaultStateGroup(stateGroup);
@@ -128,21 +130,15 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
 
   return (
     <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
-      <div className="flex items-start justify-between gap-2 pl-7 pr-6">
-        <div>
-          <Link
-            href={`/${workspaceSlug}/workspace-views/assigned`}
-            className="text-lg font-semibold text-custom-text-300 hover:underline"
-          >
-            Assigned by state
-          </Link>
-          <p className="mt-3 text-xs font-medium text-custom-text-300">
-            Filtered by{" "}
-            <span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
-          </p>
-        </div>
+      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
+        <Link
+          href={`/${workspaceSlug}/workspace-views/assigned`}
+          className="text-lg font-semibold text-custom-text-300 hover:underline"
+        >
+          Assigned by state
+        </Link>
         <DurationFilterDropdown
-          value={widgetDetails.widget_filters.target_date ?? "this_week"}
+          value={widgetDetails.widget_filters.target_date ?? "none"}
           onChange={(val) =>
             handleUpdateFilters({
               target_date: val,

web/components/dashboard/widgets/overview-stats.tsx

@@ -9,6 +9,7 @@ import { WidgetLoader } from "components/dashboard/widgets";
 import { renderFormattedPayloadDate } from "helpers/date-time.helper";
 // types
 import { TOverviewStatsWidgetResponse } from "@plane/types";
+import { cn } from "helpers/common.helper";
 
 export type WidgetProps = {
   dashboardId: string;
@@ -71,10 +72,18 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
         [&>div:nth-child(2)>a>div]:lg:border-r
         "
     >
-      {STATS_LIST.map((stat) => (
-        <div className="w-full flex flex-col gap-2 hover:bg-custom-background-80 rounded-[10px]">
+      {STATS_LIST.map((stat, index) => (
+        <div
+          className={cn(
+            `w-full flex flex-col gap-2 hover:bg-custom-background-80`,
+            index === 0 ? "rounded-tl-xl lg:rounded-l-xl" : "",
+            index === STATS_LIST.length - 1 ? "rounded-br-xl lg:rounded-r-xl" : "",
+            index === 1 ? "rounded-tr-xl lg:rounded-[0px]" : "",
+            index == 2 ? "rounded-bl-xl lg:rounded-[0px]" : ""
+          )}
+        >
           <Link href={stat.link} className="py-4 duration-300 rounded-[10px] w-full ">
-            <div className={`relative flex justify-center items-center`}>
+            <div className={`relative flex pl-10 sm:pl-20 md:pl-20 lg:pl-20 items-center`}>
               <div>
                 <h5 className="font-semibold text-xl">{stat.count}</h5>
                 <p className="text-custom-text-300 text-sm xl:text-base">{stat.title}</p>

web/components/dashboard/widgets/recent-projects.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useDashboard, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useDashboard, useProject, useUser } from "hooks/store";
 // components
 import { WidgetLoader, WidgetProps } from "components/dashboard/widgets";
 // ui
@@ -72,6 +72,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
   const {
     commandPalette: { toggleCreateProjectModal },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -105,6 +106,7 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
+              setTrackElement("Sidebar");
               toggleCreateProjectModal(true);
             }}
           >

web/components/dropdowns/date.tsx

@@ -105,6 +105,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
       tabIndex={tabIndex}
       className={cn("h-full", className)}
       onKeyDown={handleKeyDown}
+      disabled={disabled}
     >
       <Combobox.Button as={React.Fragment}>
         <button

web/components/headers/cycle-issues.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 // hooks
 import {
   useApplication,
+  useEventTracker,
   useCycle,
   useLabel,
   useMember,
@@ -18,6 +19,7 @@ import useLocalStorage from "hooks/use-local-storage";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
 // icons
@@ -69,8 +71,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
   const { currentProjectCycleIds, getCycleById } = useCycle();
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -151,25 +153,33 @@ export const CycleIssuesHeader: React.FC = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : 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>
-                )
+              link={
+                <BreadcrumbLink
+                  label={currentProjectDetails?.name ?? "Project"}
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : 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>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Cycles"
-              link={`/${workspaceSlug}/projects/${projectId}/cycles`}
+              link={
+                <BreadcrumbLink
+                  label="Cycles"
+                  href={`/${workspaceSlug}/projects/${projectId}/cycles`}
+                  icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
             <Breadcrumbs.BreadcrumbItem
               type="component"
@@ -229,7 +239,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               </Button>
               <Button
                 onClick={() => {
-                  setTrackElement("CYCLE_PAGE_HEADER");
+                  setTrackElement("Cycle issues page");
                   toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                 }}
                 size="sm"

web/components/headers/cycles.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 // ui
 import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
 // helpers
@@ -11,6 +11,7 @@ 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";
 
 export const CyclesHeader: FC = observer(() => {
   // router
@@ -19,8 +20,8 @@ export const CyclesHeader: FC = observer(() => {
   // store hooks
   const {
     commandPalette: { toggleCreateCycleModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -32,29 +33,32 @@ export const CyclesHeader: FC = 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">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={currentProjectDetails?.name ?? "Project"}
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : 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>
-                )
+              link={
+                <BreadcrumbLink
+                  label={currentProjectDetails?.name ?? "Project"}
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : 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>
+                    )
+                  }
+                />
               }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Cycles"
+              link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
         </div>
@@ -66,7 +70,7 @@ export const CyclesHeader: FC = observer(() => {
             size="sm"
             prependIcon={<Plus />}
             onClick={() => {
-              setTrackElement("CYCLES_PAGE_HEADER");
+              setTrackElement("Cycles page");
               toggleCreateCycleModal(true);
             }}
           >

web/components/headers/global-issues.tsx

@@ -8,6 +8,7 @@ import { useLabel, useMember, useUser, useIssues } from "hooks/store";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
 import { CreateUpdateWorkspaceViewModal } from "components/workspace";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, LayersIcon, PhotoFilterIcon, Tooltip } from "@plane/ui";
 // icons
@@ -108,18 +109,22 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <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 flex gap-2">
-        <SidebarHamburgerToggle/>
+          <SidebarHamburgerToggle />
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                activeLayout === "spreadsheet" ? (
-                  <LayersIcon className="h-4 w-4 text-custom-text-300" />
-                ) : (
-                  <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
-                )
+              link={
+                <BreadcrumbLink
+                  label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
+                  icon={
+                    activeLayout === "spreadsheet" ? (
+                      <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                    ) : (
+                      <PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />
+                    )
+                  }
+                />
               }
-              label={`All ${activeLayout === "spreadsheet" ? "Issues" : "Views"}`}
             />
           </Breadcrumbs>
         </div>

web/components/headers/module-issues.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 // hooks
 import {
   useApplication,
+  useEventTracker,
   useLabel,
   useMember,
   useModule,
@@ -18,6 +19,7 @@ import useLocalStorage from "hooks/use-local-storage";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
 // icons
@@ -72,8 +74,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
   const { projectModuleIds, getModuleById } = useModule();
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -154,25 +156,33 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <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>
-                )
+              link={
+                <BreadcrumbLink
+                  label={currentProjectDetails?.name ?? "Project"}
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <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>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Modules"
-              link={`/${workspaceSlug}/projects/${projectId}/modules`}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/modules`}
+                  label="Modules"
+                  icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
             <Breadcrumbs.BreadcrumbItem
               type="component"
@@ -232,7 +242,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               </Button>
               <Button
                 onClick={() => {
-                  setTrackElement("MODULE_PAGE_HEADER");
+                  setTrackElement("Module issues page");
                   toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                 }}
                 size="sm"

web/components/headers/modules-list.tsx

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useProject, useUser } from "hooks/store";
 import useLocalStorage from "hooks/use-local-storage";
 // ui
 import { Breadcrumbs, Button, Tooltip, DiceIcon } from "@plane/ui";
@@ -13,6 +13,7 @@ import { MODULE_VIEW_LAYOUTS } from "constants/module";
 import { EUserProjectRoles } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export const ModulesListHeader: React.FC = observer(() => {
   // router
@@ -20,6 +21,7 @@ export const ModulesListHeader: React.FC = observer(() => {
   const { workspaceSlug } = router.query;
   // store hooks
   const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -33,29 +35,32 @@ export const ModulesListHeader: React.FC = 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">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={currentProjectDetails?.name ?? "Project"}
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <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>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <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>
+                    )
+                  }
+                />
               }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Modules"
+              link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
         </div>
@@ -86,7 +91,10 @@ export const ModulesListHeader: React.FC = observer(() => {
             variant="primary"
             size="sm"
             prependIcon={<Plus />}
-            onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
+            onClick={() => {
+              setTrackElement("Modules page");
+              commandPaletteStore.toggleCreateModuleModal(true);
+            }}
           >
             Add Module
           </Button>

web/components/headers/page-details.tsx

@@ -10,6 +10,7 @@ import { Breadcrumbs, Button } from "@plane/ui";
 import { renderEmoji } from "helpers/emoji.helper";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export interface IPagesHeaderProps {
   showButton?: boolean;
@@ -29,35 +30,47 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
   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/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={currentProjectDetails?.name ?? "Project"}
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <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>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <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>
+                    )
+                  }
+                />
               }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
-              label="Pages"
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages`}
+                  label="Pages"
+                  icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
-              label={pageDetails?.name ?? "Page"}
+              link={
+                <BreadcrumbLink
+                  label={pageDetails?.name ?? "Page"}
+                  icon={<FileText className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
           </Breadcrumbs>
         </div>

web/components/headers/pages.tsx

@@ -11,6 +11,7 @@ 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";
 
 export const PagesHeader = observer(() => {
   // router
@@ -31,29 +32,32 @@ export const PagesHeader = 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">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={currentProjectDetails?.name ?? "Project"}
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <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>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <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>
+                    )
+                  }
+                />
               }
-              link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
             />
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<FileText className="h-4 w-4 text-custom-text-300" />}
-              label="Pages"
+              link={<BreadcrumbLink label="Pages" icon={<FileText className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
         </div>

web/components/headers/profile-preferences.tsx

@@ -1,12 +1,13 @@
 // components
 import { Breadcrumbs } from "@plane/ui";
+import { BreadcrumbLink } from "components/common";
 
 export const ProfilePreferencesHeader = () => (
   <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>
         <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem type="text" label="My Profile Preferences" />
+          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="My Profile Preferences" />} />
         </Breadcrumbs>
       </div>
     </div>

web/components/headers/profile-settings.tsx

@@ -2,6 +2,7 @@ import { FC } from "react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 import { Settings } from "lucide-react";
+import { BreadcrumbLink } from "components/common";
 
 interface IProfileSettingHeader {
   title: string;
@@ -17,11 +18,15 @@ export const ProfileSettingsHeader: FC<IProfileSettingHeader> = (props) => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label="My Profile"
-              icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-              link="/profile"
+              link={
+                <BreadcrumbLink
+                  href="/profile"
+                  label="My Profile"
+                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
-            <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+            <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
           </Breadcrumbs>
         </div>
       </div>

web/components/headers/project-archived-issue-details.tsx

@@ -16,6 +16,7 @@ import { IssueArchiveService } from "services/issue";
 import { renderEmoji } from "helpers/emoji.helper";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 const issueArchiveService = new IssueArchiveService();
 
@@ -41,37 +42,50 @@ export const ProjectArchivedIssueDetailsHeader: FC = 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">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <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>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <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>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Archived Issues"
-              link={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/archived-issues`}
+                  label="Archived Issues"
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={
-                `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ?? "..."
+              link={
+                <BreadcrumbLink
+                  label={
+                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
+                    "..."
+                  }
+                />
               }
             />
           </Breadcrumbs>

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

@@ -11,6 +11,7 @@ import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // components
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // types
@@ -71,7 +72,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
   return (
     <div className="relative z-10 flex h-14 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/>
+        <SidebarHamburgerToggle />
         <div className="block md:hidden">
           <button
             type="button"
@@ -85,25 +86,33 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <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>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <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>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Archived Issues"
+              link={
+                <BreadcrumbLink
+                  label="Archived Issues"
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
           </Breadcrumbs>
         </div>

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

@@ -6,6 +6,7 @@ import { useIssues, useLabel, useMember, useProject, useProjectState } from "hoo
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, LayersIcon } from "@plane/ui";
 // helper
@@ -75,30 +76,35 @@ export const ProjectDraftIssueHeader: FC = 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">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <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>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <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>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Draft Issues"
+              link={
+                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+              }
             />
           </Breadcrumbs>
         </div>

web/components/headers/project-inbox.tsx

@@ -9,6 +9,7 @@ import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // components
 import { CreateInboxIssueModal } from "components/inbox";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // helper
 import { renderEmoji } from "helpers/emoji.helper";
 
@@ -24,30 +25,35 @@ export const ProjectInboxHeader: FC = 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">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <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>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <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>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Inbox Issues"
+              link={
+                <BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+              }
             />
           </Breadcrumbs>
         </div>

web/components/headers/project-issue-details.tsx

@@ -14,6 +14,7 @@ import { IssueService } from "services/issue";
 import { ISSUE_DETAILS } from "constants/fetch-keys";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 // services
 const issueService = new IssueService();
@@ -35,37 +36,50 @@ export const ProjectIssueDetailsHeader: FC = 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">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={
-                currentProjectDetails?.emoji ? (
-                  renderEmoji(currentProjectDetails.emoji)
-                ) : currentProjectDetails?.icon_prop ? (
-                  renderEmoji(currentProjectDetails.icon_prop)
-                ) : (
-                  <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>
-                )
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails?.emoji ? (
+                      renderEmoji(currentProjectDetails.emoji)
+                    ) : currentProjectDetails?.icon_prop ? (
+                      renderEmoji(currentProjectDetails.icon_prop)
+                    ) : (
+                      <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>
+                    )
+                  }
+                />
               }
-              label={currentProjectDetails?.name ?? "Project"}
-              link={`/${workspaceSlug}/projects`}
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-              label="Issues"
-              link={`/${workspaceSlug}/projects/${projectId}/issues`}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/issues`}
+                  label="Issues"
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label={
-                `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ?? "..."
+              link={
+                <BreadcrumbLink
+                  label={
+                    `${getProjectById(issueDetails?.project_id || "")?.identifier}-${issueDetails?.sequence_id}` ??
+                    "..."
+                  }
+                />
               }
             />
           </Breadcrumbs>

web/components/headers/project-issues.tsx

@@ -4,11 +4,21 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
 // hooks
-import { useApplication, useLabel, useProject, useProjectState, useUser, useInbox, useMember } from "hooks/store";
+import {
+  useApplication,
+  useEventTracker,
+  useLabel,
+  useProject,
+  useProjectState,
+  useUser,
+  useInbox,
+  useMember,
+} from "hooks/store";
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
 // types
@@ -35,8 +45,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
   } = useIssues(EIssuesStoreType.PROJECT);
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
@@ -106,7 +116,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
       />
       <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/>
+          <SidebarHamburgerToggle />
           <div className="block md:hidden">
             <button
               type="button"
@@ -120,35 +130,38 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                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>
-                  )
+                link={
+                  <BreadcrumbLink
+                    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>
+                      )
+                    }
+                  />
                 }
-                label={currentProjectDetails?.name ?? "Project"}
-                link={`/${workspaceSlug}/projects`}
               />
 
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                label="Issues"
+                link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
               />
             </Breadcrumbs>
           </div>
@@ -217,7 +230,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               </Button>
               <Button
                 onClick={() => {
-                  setTrackElement("PROJECT_PAGE_HEADER");
+                  setTrackElement("Project issues page");
                   toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
                 }}
                 size="sm"

web/components/headers/project-settings.tsx

@@ -11,6 +11,7 @@ import { useProject, useUser } from "hooks/store";
 import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export interface IProjectSettingHeader {
   title: string;
@@ -38,22 +39,26 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                label={currentProjectDetails?.name ?? "Project"}
-                icon={
-                  currentProjectDetails?.emoji ? (
-                    renderEmoji(currentProjectDetails.emoji)
-                  ) : currentProjectDetails?.icon_prop ? (
-                    renderEmoji(currentProjectDetails.icon_prop)
-                  ) : (
-                    <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>
-                  )
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                    label={currentProjectDetails?.name ?? "Project"}
+                    icon={
+                      currentProjectDetails?.emoji ? (
+                        renderEmoji(currentProjectDetails.emoji)
+                      ) : currentProjectDetails?.icon_prop ? (
+                        renderEmoji(currentProjectDetails.icon_prop)
+                      ) : (
+                        <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>
+                      )
+                    }
+                  />
                 }
-                link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
               />
               <div className="hidden sm:hidden md:block lg:block">
-                <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+                <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
               </div>
             </Breadcrumbs>
           </div>
@@ -62,13 +67,18 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
           className="flex-shrink-0 block sm:block md:hidden lg:hidden"
           maxHeight="lg"
           customButton={
-            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">{title}</span>
+            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
+              {title}
+            </span>
           }
           placement="bottom-start"
           closeOnSelect
         >
           {PROJECT_SETTINGS_LINKS.map((item) => (
-            <CustomMenu.MenuItem key={item.key} onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}>
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}
+            >
               {item.label}
             </CustomMenu.MenuItem>
           ))}

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

@@ -6,6 +6,7 @@ import Link from "next/link";
 // hooks
 import {
   useApplication,
+  useEventTracker,
   useIssues,
   useLabel,
   useMember,
@@ -17,6 +18,7 @@ import {
 // components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // ui
 import { Breadcrumbs, Button, CustomMenu, PhotoFilterIcon } from "@plane/ui";
 // helpers
@@ -40,9 +42,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+  const { setTrackElement } = useEventTracker();
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
   const {
     membership: { currentProjectRole },
@@ -112,29 +114,37 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            label={currentProjectDetails?.name ?? "Project"}
-            icon={
-              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>
-              )
+            link={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                label={currentProjectDetails?.name ?? "Project"}
+                icon={
+                  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>
+                  )
+                }
+              />
             }
-            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
           />
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
-            label="Views"
-            link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
+            link={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/views`}
+                label="Views"
+                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
           />
           <Breadcrumbs.BreadcrumbItem
             type="component"

web/components/headers/project-views.tsx

@@ -6,6 +6,7 @@ import { useApplication, useProject, useUser } from "hooks/store";
 // components
 import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // constants
@@ -31,33 +32,38 @@ export const ProjectViewsHeader: React.FC = observer(() => {
     <>
       <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/>
+          <SidebarHamburgerToggle />
           <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                label={currentProjectDetails?.name ?? "Project"}
-                icon={
-                  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>
-                  )
+                link={
+                  <BreadcrumbLink
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                    label={currentProjectDetails?.name ?? "Project"}
+                    icon={
+                      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>
+                      )
+                    }
+                  />
                 }
-                link={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
               />
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />}
-                label="Views"
+                link={
+                  <BreadcrumbLink label="Views" icon={<PhotoFilterIcon className="h-4 w-4 text-custom-text-300" />} />
+                }
               />
             </Breadcrumbs>
           </div>

web/components/headers/projects.tsx

@@ -1,20 +1,19 @@
 import { observer } from "mobx-react-lite";
 import { Search, Plus, Briefcase } 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";
 // constants
 import { EUserWorkspaceRoles } from "constants/workspace";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export const ProjectsHeader = observer(() => {
   // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
@@ -25,13 +24,12 @@ 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">
-        <SidebarHamburgerToggle/>
+        <SidebarHamburgerToggle />
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              icon={<Briefcase className="h-4 w-4 text-custom-text-300" />}
-              label="Projects"
+              link={<BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
         </div>
@@ -53,7 +51,7 @@ export const ProjectsHeader = observer(() => {
             prependIcon={<Plus />}
             size="sm"
             onClick={() => {
-              setTrackElement("PROJECTS_PAGE_HEADER");
+              setTrackElement("Projects page");
               commandPaletteStore.toggleCreateProjectModal(true);
             }}
           >

web/components/headers/user-profile.tsx

@@ -1,15 +1,16 @@
 // ui
 import { Breadcrumbs } from "@plane/ui";
+import { BreadcrumbLink } from "components/common";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
 export const UserProfileHeader = () => (
   <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/>
+      <SidebarHamburgerToggle />
       <div>
         <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem type="text" label="Activity Overview" link="/profile" />
+          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink href="/profile" label="Activity Overview" />} />
         </Breadcrumbs>
       </div>
     </div>

web/components/headers/workspace-active-cycles.tsx

@@ -1,9 +1,10 @@
 import { observer } from "mobx-react-lite";
 // ui
 import { Breadcrumbs, ContrastIcon } from "@plane/ui";
+import { BreadcrumbLink } from "components/common";
+import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 // icons
 import { Crown } from "lucide-react";
-import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
 export const WorkspaceActiveCycleHeader = observer(() => (
   <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">
@@ -13,8 +14,12 @@ export const WorkspaceActiveCycleHeader = observer(() => (
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
-            label="Active Cycles"
+            link={
+              <BreadcrumbLink
+                label="Active Cycles"
+                icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
+              />
+            }
           />
         </Breadcrumbs>
         <Crown className="h-3.5 w-3.5 text-amber-400" />

web/components/headers/workspace-analytics.tsx

@@ -4,6 +4,7 @@ import { ArrowLeft, BarChart2 } from "lucide-react";
 import { Breadcrumbs } from "@plane/ui";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
+import { BreadcrumbLink } from "components/common";
 
 export const WorkspaceAnalyticsHeader = () => {
   const router = useRouter();
@@ -28,8 +29,9 @@ export const WorkspaceAnalyticsHeader = () => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />}
-                label="Analytics"
+                link={
+                  <BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />} />
+                }
               />
             </Breadcrumbs>
           </div>

web/components/headers/workspace-dashboard.tsx

@@ -6,7 +6,7 @@ import { useTheme } from "next-themes";
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // components
-import { ProductUpdatesModal } from "components/common";
+import { BreadcrumbLink, ProductUpdatesModal } from "components/common";
 import { Breadcrumbs } from "@plane/ui";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 
@@ -18,15 +18,16 @@ export const WorkspaceDashboardHeader = () => {
   return (
     <>
       <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
-      <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-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>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />}
-                label="Dashboard"
+                link={
+                  <BreadcrumbLink label="Dashboard" icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />} />
+                }
               />
             </Breadcrumbs>
           </div>

web/components/headers/workspace-settings.tsx

@@ -8,6 +8,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
+import { BreadcrumbLink } from "components/common";
 
 export interface IWorkspaceSettingHeader {
   title: string;
@@ -27,12 +28,16 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              label="Settings"
-              icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-              link={`/${workspaceSlug}/settings`}
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/settings`}
+                  label="Settings"
+                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
             />
             <div className="hidden sm:hidden md:block lg:block">
-              <Breadcrumbs.BreadcrumbItem type="text" label={title} />
+              <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
             </div>
           </Breadcrumbs>
         </div>
@@ -40,7 +45,9 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
           className="flex-shrink-0 block sm:block md:hidden lg:hidden"
           maxHeight="lg"
           customButton={
-            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">{title}</span>
+            <span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
+              {title}
+            </span>
           }
           placement="bottom-start"
           closeOnSelect

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

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import DatePicker from "react-datepicker";
 import { Popover } from "@headlessui/react";
 // hooks
-import { useApplication, useUser, useInboxIssues, useIssueDetail, useWorkspace } from "hooks/store";
+import { useUser, useInboxIssues, useIssueDetail, useWorkspace, useEventTracker } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import {
@@ -38,9 +38,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
   // router
   const router = useRouter();
   // hooks
-  const {
-    eventTracker: { postHogEventTracker },
-  } = useApplication();
+  const { captureIssueEvent } = useEventTracker();
   const { currentWorkspace } = useWorkspace();
   const {
     issues: { getInboxIssuesByInboxId, getInboxIssueByIssueId, updateInboxIssueStatus, removeInboxIssue },
@@ -87,17 +85,19 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
           if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !currentWorkspace)
             throw new Error("Missing required parameters");
           await removeInboxIssue(workspaceSlug, projectId, inboxId, inboxIssueId);
-          postHogEventTracker(
-            "ISSUE_DELETED",
-            {
+          captureIssueEvent({
+            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}`,
           });
@@ -107,17 +107,19 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             title: "Error!",
             message: "Something went wrong while deleting inbox issue. Please try again.",
           });
-          postHogEventTracker(
-            "ISSUE_DELETED",
-            {
+          captureIssueEvent({
+            eventName: "Issue deleted",
+            payload: {
+              id: inboxIssueId,
               state: "FAILED",
+              element: "Inbox page",
             },
-            {
+            group: {
               isGrouping: true,
               groupType: "Workspace_metrics",
               groupId: currentWorkspace?.id!,
-            }
-          );
+            },
+          });
         }
       },
     }),
@@ -130,7 +132,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
       updateInboxIssueStatus,
       removeInboxIssue,
       setToastAlert,
-      postHogEventTracker,
+      captureIssueEvent,
       router,
     ]
   );

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

@@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 import { Sparkle } from "lucide-react";
 // hooks
-import { useApplication, useWorkspace, useInboxIssues, useMention } from "hooks/store";
+import { useApplication, useEventTracker, useWorkspace, useInboxIssues, useMention } from "hooks/store";
 import useToast from "hooks/use-toast";
 // services
 import { FileService } from "services/file.service";
@@ -63,8 +63,8 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
   } = useInboxIssues();
   const {
     config: { envConfig },
-    eventTracker: { postHogEventTracker },
   } = useApplication();
+  const { captureIssueEvent } = useEventTracker();
   const { currentWorkspace } = useWorkspace();
 
   const {
@@ -93,32 +93,37 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
           router.push(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${res.id}`);
           handleClose();
         } else reset(defaultValues);
-        postHogEventTracker(
-          "ISSUE_CREATED",
-          {
-            ...res,
+        captureIssueEvent({
+          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);
-        postHogEventTracker(
-          "ISSUE_CREATED",
-          {
+        captureIssueEvent({
+          eventName: "Issue created",
+          payload: {
+            ...formData,
             state: "FAILED",
+            element: "Inbox page",
           },
-          {
+          group: {
             isGrouping: true,
             groupType: "Workspace_metrics",
             groupId: currentWorkspace?.id!,
-          }
-        );
+          },
+          path: router.pathname,
+        });
       });
   };
 

web/components/integration/jira/give-details.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { useFormContext, Controller } from "react-hook-form";
 import { Plus } from "lucide-react";
 // hooks
-import { useApplication, useProject } from "hooks/store";
+import { useApplication, useEventTracker, useProject } from "hooks/store";
 // components
 import { CustomSelect, Input } from "@plane/ui";
 // helpers
@@ -14,10 +14,8 @@ import { IJiraImporterForm } from "@plane/types";
 
 export const JiraGetImportDetail: React.FC = observer(() => {
   // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { workspaceProjectIds, getProjectById } = useProject();
   // form info
   const {
@@ -202,7 +200,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                   <button
                     type="button"
                     onClick={() => {
-                      setTrackElement("JIRA_IMPORT_DETAIL");
+                      setTrackElement("Jira import detail page");
                       commandPaletteStore.toggleCreateProjectModal(true);
                     }}
                     className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"

web/components/issues/attachment/root.tsx

@@ -1,6 +1,6 @@
 import { FC, useMemo } from "react";
 // hooks
-import { useIssueDetail } from "hooks/store";
+import { useEventTracker, useIssueDetail } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { IssueAttachmentUpload } from "./attachment-upload";
@@ -23,6 +23,7 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
   const { workspaceSlug, projectId, issueId, disabled = false } = props;
   // hooks
   const { createAttachment, removeAttachment } = useIssueDetail();
+  const { captureIssueEvent } = useEventTracker();
   const { setToastAlert } = useToast();
 
   const handleAttachmentOperations: TAttachmentOperations = useMemo(
@@ -30,13 +31,25 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
       create: async (data: FormData) => {
         try {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
-          await createAttachment(workspaceSlug, projectId, issueId, data);
+          const res = await createAttachment(workspaceSlug, projectId, issueId, data);
           setToastAlert({
             message: "The attachment has been successfully uploaded",
             type: "success",
             title: "Attachment uploaded",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "attachment",
+              change_details: res.id,
+            },
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+          });
           setToastAlert({
             message: "The attachment could not be uploaded",
             type: "error",
@@ -53,7 +66,23 @@ export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = (props) => {
             type: "success",
             title: "Attachment removed",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "attachment",
+              change_details: "",
+            },
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "attachment",
+              change_details: "",
+            },
+          });
           setToastAlert({
             message: "The Attachment could not be removed",
             type: "error",

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

@@ -1,10 +1,11 @@
 import { FC, useMemo } from "react";
+import { useRouter } from "next/router";
 import useSWR from "swr";
 // components
 import { InboxIssueMainContent } from "./main-content";
 import { InboxIssueDetailsSidebar } from "./sidebar";
 // hooks
-import { useInboxIssues, useIssueDetail, useUser } from "hooks/store";
+import { useEventTracker, useInboxIssues, useIssueDetail, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // types
 import { TIssue } from "@plane/types";
@@ -21,6 +22,8 @@ export type TInboxIssueDetailRoot = {
 
 export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
   const { workspaceSlug, projectId, inboxId, issueId } = props;
+  // router
+  const router = useRouter();
   // hooks
   const {
     issues: { fetchInboxIssueById, updateInboxIssue, removeInboxIssue },
@@ -28,6 +31,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+  const { captureIssueEvent } = useEventTracker();
   const { setToastAlert } = useToast();
   const {
     membership: { currentProjectRole },
@@ -50,7 +54,7 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
         showToast: boolean = true
       ) => {
         try {
-          await updateInboxIssue(workspaceSlug, projectId, inboxId, issueId, data);
+          const response = await updateInboxIssue(workspaceSlug, projectId, inboxId, issueId, data);
           if (showToast) {
             setToastAlert({
               title: "Issue updated successfully",
@@ -58,12 +62,30 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
               message: "Issue updated successfully",
             });
           }
+          captureIssueEvent({
+            eventName: "Inbox issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Inbox" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
         } catch (error) {
           setToastAlert({
             title: "Issue update failed",
             type: "error",
             message: "Issue update failed",
           });
+          captureIssueEvent({
+            eventName: "Inbox issue updated",
+            payload: { state: "SUCCESS", element: "Inbox" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
         }
       },
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
@@ -74,7 +96,17 @@ export const InboxIssueDetailRoot: FC<TInboxIssueDetailRoot> = (props) => {
             type: "success",
             message: "Issue deleted successfully",
           });
+          captureIssueEvent({
+            eventName: "Inbox issue deleted",
+            payload: { id: issueId, state: "SUCCESS", element: "Inbox" },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Inbox issue deleted",
+            payload: { id: issueId, state: "FAILED", element: "Inbox" },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Issue delete failed",
             type: "error",

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

@@ -9,7 +9,7 @@ import { EmptyState } from "components/common";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // hooks
-import { useIssueDetail, useIssues, useUser } from "hooks/store";
+import { useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // types
 import { TIssue } from "@plane/types";
@@ -70,6 +70,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
   const {
     issues: { removeIssue: removeArchivedIssue },
   } = useIssues(EIssuesStoreType.ARCHIVED);
+  const { captureIssueEvent } = useEventTracker();
   const { setToastAlert } = useToast();
   const {
     membership: { currentProjectRole },
@@ -92,7 +93,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
         showToast: boolean = true
       ) => {
         try {
-          await updateIssue(workspaceSlug, projectId, issueId, data);
+          const response = await updateIssue(workspaceSlug, projectId, issueId, data);
           if (showToast) {
             setToastAlert({
               title: "Issue updated successfully",
@@ -100,7 +101,25 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
               message: "Issue updated successfully",
             });
           }
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Issue update failed",
             type: "error",
@@ -110,30 +129,59 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
-          if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
-          else await removeIssue(workspaceSlug, projectId, issueId);
+          let response;
+          if (is_archived) response = await removeArchivedIssue(workspaceSlug, projectId, issueId);
+          else response = await removeIssue(workspaceSlug, projectId, issueId);
           setToastAlert({
             title: "Issue deleted successfully",
             type: "success",
             message: "Issue deleted successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue deleted",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            path: router.asPath,
+          });
         } catch (error) {
           setToastAlert({
             title: "Issue delete failed",
             type: "error",
             message: "Issue delete failed",
           });
+          captureIssueEvent({
+            eventName: "Issue deleted",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            path: router.asPath,
+          });
         }
       },
       addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
         try {
-          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+          const response = await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
           setToastAlert({
             title: "Cycle added to issue successfully",
             type: "success",
             message: "Issue added to issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: cycleId,
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: cycleId,
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Cycle add to issue failed",
             type: "error",
@@ -143,13 +191,31 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
         try {
-          await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+          const response = await removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
           setToastAlert({
             title: "Cycle removed from issue successfully",
             type: "success",
             message: "Cycle removed from issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "cycle_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Cycle remove from issue failed",
             type: "error",
@@ -159,13 +225,31 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
       },
       addModulesToIssue: async (workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) => {
         try {
-          await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
+          const response = await addModulesToIssue(workspaceSlug, projectId, issueId, moduleIds);
           setToastAlert({
             title: "Module added to issue successfully",
             type: "success",
             message: "Module added to issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { ...response, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "module_id",
+              change_details: moduleIds,
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "module_id",
+              change_details: moduleIds,
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Module add to issue failed",
             type: "error",
@@ -181,7 +265,25 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = (props) => {
             type: "success",
             message: "Module removed from issue successfully",
           });
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: "module_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
         } catch (error) {
+          captureIssueEvent({
+            eventName: "Issue updated",
+            payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: "module_id",
+              change_details: "",
+            },
+            path: router.asPath,
+          });
           setToastAlert({
             title: "Module remove from issue failed",
             type: "error",

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

@@ -11,11 +11,12 @@ import { TGroupedIssues, TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 import { EIssueActions } from "../types";
 import { handleDragDrop } from "./utils";
-import { useIssues } from "hooks/store";
+import { useIssues, useUser } from "hooks/store";
 import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle";
 import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
 import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
 import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
+import { EUserProjectRoles } from "constants/project";
 
 interface IBaseCalendarRoot {
   issueStore: IProjectIssues | IModuleIssues | ICycleIssues | IProjectViewIssues;
@@ -27,10 +28,11 @@ interface IBaseCalendarRoot {
     [EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
   };
   viewId?: string;
+  isCompletedCycle?: boolean;
 }
 
 export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
-  const { issueStore, issuesFilterStore, QuickActions, issueActions, viewId } = props;
+  const { issueStore, issuesFilterStore, QuickActions, issueActions, viewId, isCompletedCycle = false } = props;
 
   // router
   const router = useRouter();
@@ -39,6 +41,11 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
   // hooks
   const { setToastAlert } = useToast();
   const { issueMap } = useIssues();
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
   const displayFilters = issuesFilterStore.issueFilters?.displayFilters;
 
@@ -107,10 +114,12 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
                     ? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.REMOVE)
                     : undefined
                 }
+                readOnly={!isEditingAllowed || isCompletedCycle}
               />
             )}
             quickAddCallback={issueStore.quickAddIssue}
             viewId={viewId}
+            readOnly={!isEditingAllowed || isCompletedCycle}
           />
         </DragDropContext>
       </div>

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

@@ -31,11 +31,21 @@ type Props = {
     viewId?: string
   ) => Promise<TIssue | undefined>;
   viewId?: string;
+  readOnly?: boolean;
 };
 
 export const CalendarChart: React.FC<Props> = observer((props) => {
-  const { issuesFilterStore, issues, groupedIssueIds, layout, showWeekends, quickActions, quickAddCallback, viewId } =
-    props;
+  const {
+    issuesFilterStore,
+    issues,
+    groupedIssueIds,
+    layout,
+    showWeekends,
+    quickActions,
+    quickAddCallback,
+    viewId,
+    readOnly = false,
+  } = props;
   // store hooks
   const {
     issues: { viewFlags },
@@ -80,6 +90,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                     quickActions={quickActions}
                     quickAddCallback={quickAddCallback}
                     viewId={viewId}
+                    readOnly={readOnly}
                   />
                 ))}
             </div>
@@ -95,6 +106,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
               quickActions={quickActions}
               quickAddCallback={quickAddCallback}
               viewId={viewId}
+              readOnly={readOnly}
             />
           )}
         </div>

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

@@ -28,6 +28,7 @@ type Props = {
     viewId?: string
   ) => Promise<TIssue | undefined>;
   viewId?: string;
+  readOnly?: boolean;
 };
 
 export const CalendarDayTile: React.FC<Props> = observer((props) => {
@@ -41,6 +42,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
     disableIssueCreation,
     quickAddCallback,
     viewId,
+    readOnly = false,
   } = props;
   const [showAllIssues, setShowAllIssues] = useState(false);
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@@ -73,7 +75,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
 
         {/* content */}
         <div className="h-full w-full">
-          <Droppable droppableId={formattedDatePayload} isDropDisabled={false}>
+          <Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
             {(provided, snapshot) => (
               <div
                 className={`h-full w-full select-none overflow-y-auto ${
@@ -89,9 +91,10 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                   issueIdList={issueIdList}
                   quickActions={quickActions}
                   showAllIssues={showAllIssues}
+                  isDragDisabled={readOnly}
                 />
 
-                {enableQuickIssueCreate && !disableIssueCreation && (
+                {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
                   <div className="px-2 py-1">
                     <CalendarQuickAddIssueForm
                       formKey="target_date"

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

@@ -17,10 +17,11 @@ type Props = {
   issueIdList: string[] | null;
   quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
   showAllIssues?: boolean;
+  isDragDisabled?: boolean;
 };
 
 export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
-  const { issues, issueIdList, quickActions, showAllIssues = false } = props;
+  const { issues, issueIdList, quickActions, showAllIssues = false, isDragDisabled = false } = props;
   // hooks
   const {
     router: { workspaceSlug, projectId },
@@ -65,7 +66,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
           getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
 
         return (
-          <Draggable key={issue.id} draggableId={issue.id} index={index}>
+          <Draggable key={issue.id} draggableId={issue.id} index={index} isDragDisabled={isDragDisabled}>
             {(provided, snapshot) => (
               <div
                 className="relative cursor-pointer p-1 px-2"

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

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject } from "hooks/store";
+import { useEventTracker, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -64,6 +64,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { getProjectById } = useProject();
+  const { captureIssueEvent } = useEventTracker();
   // refs
   const ref = useRef<HTMLDivElement>(null);
   // states
@@ -126,7 +127,13 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
             ...payload,
           },
           viewId
-        ));
+        ).then((res) => {
+          captureIssueEvent({
+            eventName: "Issue created",
+            payload: { ...res, state: "SUCCESS", element: "Calendar quick add" },
+            path: router.asPath,
+          });
+        }));
       setToastAlert({
         type: "success",
         title: "Success!",
@@ -134,6 +141,11 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
       });
     } catch (err: any) {
       console.error(err);
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...payload, state: "FAILED", element: "Calendar quick add" },
+        path: router.asPath,
+      });
       setToastAlert({
         type: "error",
         title: "Error!",

web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 //hooks
-import { useIssues } from "hooks/store";
+import { useCycle, useIssues } from "hooks/store";
 // components
 import { CycleIssueQuickActions } from "components/issues";
 // types
@@ -13,6 +13,7 @@ import { useMemo } from "react";
 
 export const CycleCalendarLayout: React.FC = observer(() => {
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCompletedCycleIds } = useCycle();
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
@@ -38,6 +39,9 @@ export const CycleCalendarLayout: React.FC = observer(() => {
 
   if (!cycleId) return null;
 
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+
   return (
     <BaseCalendarRoot
       issueStore={issues}
@@ -45,6 +49,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
       QuickActions={CycleIssueQuickActions}
       issueActions={issueActions}
       viewId={cycleId.toString()}
+      isCompletedCycle={isCompletedCycle}
     />
   );
 });

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

@@ -26,6 +26,7 @@ type Props = {
     viewId?: string
   ) => Promise<TIssue | undefined>;
   viewId?: string;
+  readOnly?: boolean;
 };
 
 export const CalendarWeekDays: React.FC<Props> = observer((props) => {
@@ -39,6 +40,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     disableIssueCreation,
     quickAddCallback,
     viewId,
+    readOnly = false,
   } = props;
 
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@@ -67,6 +69,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
             disableIssueCreation={disableIssueCreation}
             quickAddCallback={quickAddCallback}
             viewId={viewId}
+            readOnly={readOnly}
           />
         );
       })}

web/components/issues/issue-layouts/empty-states/cycle.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useApplication, useIssueDetail, useIssues, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useIssueDetail, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { EmptyState } from "components/common";
@@ -32,8 +32,8 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
   const { updateIssue, fetchIssue } = useIssueDetail();
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole: userRole },
   } = useUser();
@@ -81,7 +81,7 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
             text: "New issue",
             icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
             onClick: () => {
-              setTrackElement("CYCLE_EMPTY_STATE");
+              setTrackElement("Cycle issue empty state");
               toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
             },
           }}

web/components/issues/issue-layouts/empty-states/global-view.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { Plus, PlusIcon } from "lucide-react";
 // hooks
-import { useApplication, useProject } from "hooks/store";
+import { useApplication, useEventTracker, useProject } from "hooks/store";
 // components
 import { EmptyState } from "components/common";
 // assets
@@ -12,8 +12,8 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
   // store hooks
   const {
     commandPalette: { toggleCreateIssueModal, toggleCreateProjectModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const { workspaceProjectIds } = useProject();
 
   return (
@@ -27,7 +27,7 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
             icon: <Plus className="h-4 w-4" />,
             text: "New Project",
             onClick: () => {
-              setTrackElement("ALL_ISSUES_EMPTY_STATE");
+              setTrackElement("All issues empty state");
               toggleCreateProjectModal(true);
             },
           }}
@@ -41,7 +41,7 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
             text: "New issue",
             icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
             onClick: () => {
-              setTrackElement("ALL_ISSUES_EMPTY_STATE");
+              setTrackElement("All issues empty state");
               toggleCreateIssueModal(true);
             },
           }}

web/components/issues/issue-layouts/empty-states/module.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useApplication, useIssues, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // components
 import { EmptyState } from "components/common";
@@ -32,8 +32,8 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
 
   const {
     commandPalette: { toggleCreateIssueModal },
-    eventTracker: { setTrackElement },
   } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole: userRole },
   } = useUser();
@@ -76,7 +76,7 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
             text: "New issue",
             icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
             onClick: () => {
-              setTrackElement("MODULE_EMPTY_STATE");
+              setTrackElement("Module issue empty state");
               toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
             },
           }}

web/components/issues/issue-layouts/empty-states/project-issues.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import size from "lodash/size";
 import { useTheme } from "next-themes";
 // hooks
-import { useApplication, useIssues, useUser } from "hooks/store";
+import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
 // components
 import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // constants
@@ -30,10 +30,8 @@ export const ProjectEmptyState: React.FC = observer(() => {
   // theme
   const { resolvedTheme } = useTheme();
   // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
     currentUser,
@@ -90,7 +88,7 @@ export const ProjectEmptyState: React.FC = observer(() => {
             text: "Create your first issue",
 
             onClick: () => {
-              setTrackElement("PROJECT_EMPTY_STATE");
+              setTrackElement("Project issue empty state");
               commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
             },
           },

web/components/issues/issue-layouts/empty-states/project-view.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useApplication } from "hooks/store";
+import { useApplication, useEventTracker } from "hooks/store";
 // components
 import { EmptyState } from "components/common";
 // assets
@@ -10,10 +10,8 @@ import { EIssuesStoreType } from "constants/issue";
 
 export const ProjectViewEmptyState: React.FC = observer(() => {
   // store hooks
-  const {
-    commandPalette: commandPaletteStore,
-    eventTracker: { setTrackElement },
-  } = useApplication();
+  const { commandPalette: commandPaletteStore } = useApplication();
+  const { setTrackElement } = useEventTracker();
 
   return (
     <div className="grid h-full w-full place-items-center">
@@ -25,7 +23,7 @@ export const ProjectViewEmptyState: React.FC = observer(() => {
           text: "New issue",
           icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
           onClick: () => {
-            setTrackElement("VIEW_EMPTY_STATE");
+            setTrackElement("View issue empty state");
             commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
           },
         }}

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

@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useProject } from "hooks/store";
+import { useEventTracker, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -66,6 +66,7 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
   const { workspaceSlug, projectId } = router.query;
   // hooks
   const { getProjectById } = useProject();
+  const { captureIssueEvent } = useEventTracker();
   const { setToastAlert } = useToast();
 
   const projectDetail = (projectId && getProjectById(projectId.toString())) || undefined;
@@ -108,13 +109,24 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
 
     try {
       quickAddCallback &&
-        (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId));
+        (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => {
+          captureIssueEvent({
+            eventName: "Issue created",
+            payload: { ...res, state: "SUCCESS", element: "Gantt quick add" },
+            path: router.asPath,
+          });
+        }));
       setToastAlert({
         type: "success",
         title: "Success!",
         message: "Issue created successfully.",
       });
     } catch (err: any) {
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...payload, state: "FAILED", element: "Gantt quick add" },
+        path: router.asPath,
+      });
       setToastAlert({
         type: "error",
         title: "Error!",

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -3,7 +3,7 @@ import { DragDropContext, DragStart, DraggableLocation, DropResult, Droppable }
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useUser } from "hooks/store";
+import { useEventTracker, useUser } from "hooks/store";
 import useToast from "hooks/use-toast";
 // ui
 import { Spinner } from "@plane/ui";
@@ -46,6 +46,7 @@ export interface IBaseKanBanLayout {
   storeType?: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
+  isCompletedCycle?: boolean;
 }
 
 type KanbanDragState = {
@@ -65,6 +66,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
     storeType,
     addIssuesToView,
     canEditPropertiesBasedOnProject,
+    isCompletedCycle = false,
   } = props;
   // router
   const router = useRouter();
@@ -73,6 +75,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const { captureIssueEvent } = useEventTracker();
   const { issueMap } = useIssues();
   // toast alert
   const { setToastAlert } = useToast();
@@ -182,6 +185,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         handleRemoveFromView={
           issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
         }
+        readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -205,6 +209,11 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       handleIssues(issueMap[dragState.draggedIssueId!], EIssueActions.DELETE);
       setDeleteIssueModal(false);
       setDragState({});
+      captureIssueEvent({
+        eventName: "Issue deleted",
+        payload: { id: dragState.draggedIssueId!, state: "FAILED", element: "Kanban layout drag & drop" },
+        path: router.asPath,
+      });
     });
   };
 
@@ -237,7 +246,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       )}
 
       <div className="horizontal-scroll-enable relative h-full w-full overflow-auto bg-custom-background-90">
-        <div className="relative h-full w-max min-w-full bg-custom-background-90 px-2">
+        <div className="relative h-max w-max min-w-full bg-custom-background-90 px-2">
           <DragDropContext onDragStart={onDragStart} onDragEnd={onDragEnd}>
             {/* drag and delete component */}
             <div
@@ -276,7 +285,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
               quickAddCallback={issues?.quickAddIssue}
               viewId={viewId}
-              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+              disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
               canEditProperties={canEditProperties}
               storeType={storeType}
               addIssuesToView={addIssuesToView}

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

@@ -44,8 +44,8 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
   } = useApplication();
   const { setPeekIssue } = useIssueDetail();
 
-  const updateIssue = (issueToUpdate: TIssue) => {
-    if (issueToUpdate) handleIssues(issueToUpdate, EIssueActions.UPDATE);
+  const updateIssue = async (issueToUpdate: TIssue) => {
+    if (issueToUpdate) await handleIssues(issueToUpdate, EIssueActions.UPDATE);
   };
 
   const handleIssuePeekOverview = (issue: TIssue) =>
@@ -81,6 +81,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
         className="flex flex-wrap items-center gap-2 whitespace-nowrap"
         issue={issue}
         displayProperties={displayProperties}
+        activeLayout="Kanban"
         handleIssues={updateIssue}
         isReadOnly={isReadOnly}
       />

web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -8,6 +8,7 @@ import { CreateUpdateIssueModal, CreateUpdateDraftIssueModal } from "components/
 import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // mobx
 import { observer } from "mobx-react-lite";
 // types
@@ -44,10 +45,12 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
     addIssuesToView,
   } = props;
   const verticalAlignPosition = sub_group_by ? false : kanbanFilters?.group_by.includes(column_id);
-
+  // states
   const [isOpen, setIsOpen] = React.useState(false);
   const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
-
+  // hooks
+  const { setTrackElement } = useEventTracker();
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
 
@@ -143,17 +146,30 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
                 </span>
               }
             >
-              <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setTrackElement("Kanban layout");
+                  setIsOpen(true);
+                }}
+              >
                 <span className="flex items-center justify-start gap-2">Create issue</span>
               </CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setTrackElement("Kanban layout");
+                  setOpenExistingIssueListModal(true);
+                }}
+              >
                 <span className="flex items-center justify-start gap-2">Add an existing issue</span>
               </CustomMenu.MenuItem>
             </CustomMenu>
           ) : (
             <div
               className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
-              onClick={() => setIsOpen(true)}
+              onClick={() => {
+                setTrackElement("Kanban layout");
+                setIsOpen(true);
+              }}
             >
               <Plus width={14} strokeWidth={2} />
             </div>

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

@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // hooks
-import { useProject } from "hooks/store";
+import { useEventTracker, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -60,6 +60,7 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
   const { workspaceSlug, projectId } = router.query;
   // store hooks
   const { getProjectById } = useProject();
+  const { captureIssueEvent } = useEventTracker();
 
   const projectDetail = projectId ? getProjectById(projectId.toString()) : null;
 
@@ -103,13 +104,24 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
             ...payload,
           },
           viewId
-        ));
+        ).then((res) => {
+          captureIssueEvent({
+            eventName: "Issue created",
+            payload: { ...res, state: "SUCCESS", element: "Kanban quick add" },
+            path: router.asPath,
+          });
+        }));
       setToastAlert({
         type: "success",
         title: "Success!",
         message: "Issue created successfully.",
       });
     } catch (err: any) {
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...payload, state: "FAILED", element: "Kanban quick add" },
+        path: router.asPath,
+      });
       console.error(err);
       setToastAlert({
         type: "error",

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

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssues } from "hooks/store";
+import { useCycle, useIssues } from "hooks/store";
 // ui
 import { CycleIssueQuickActions } from "components/issues";
 // types
@@ -20,6 +20,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
 
   // store
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCompletedCycleIds } = useCycle();
 
   const issueActions = useMemo(
     () => ({
@@ -42,6 +43,11 @@ export const CycleKanBanLayout: React.FC = observer(() => {
     [issues, workspaceSlug, cycleId]
   );
 
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+
+  const canEditIssueProperties = () => !isCompletedCycle;
+
   return (
     <BaseKanBanRoot
       issueActions={issueActions}
@@ -55,6 +61,8 @@ export const CycleKanBanLayout: React.FC = observer(() => {
         if (!workspaceSlug || !projectId || !cycleId) throw new Error();
         return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
       }}
+      canEditPropertiesBasedOnProject={canEditIssueProperties}
+      isCompletedCycle={isCompletedCycle}
     />
   );
 });

web/components/issues/issue-layouts/list/base-list-root.tsx

@@ -51,6 +51,7 @@ interface IBaseListRoot {
   storeType: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
+  isCompletedCycle?: boolean;
 }
 
 export const BaseListRoot = observer((props: IBaseListRoot) => {
@@ -63,6 +64,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
     storeType,
     addIssuesToView,
     canEditPropertiesBasedOnProject,
+    isCompletedCycle = false,
   } = props;
   // mobx store
   const {
@@ -112,6 +114,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
         handleRemoveFromView={
           issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
         }
+        readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -136,6 +139,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
           disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
           storeType={storeType}
           addIssuesToView={addIssuesToView}
+          isCompletedCycle={isCompletedCycle}
         />
       </div>
     </>

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

@@ -14,7 +14,7 @@ import { EIssueActions } from "../types";
 interface IssueBlockProps {
   issueId: string;
   issuesMap: TIssueMap;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
   quickActions: (issue: TIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | undefined;
   canEditProperties: (projectId: string | undefined) => boolean;
@@ -29,8 +29,8 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
   const { getProjectById } = useProject();
   const { peekIssue, setPeekIssue } = useIssueDetail();
 
-  const updateIssue = (issueToUpdate: TIssue) => {
-    handleIssues(issueToUpdate, EIssueActions.UPDATE);
+  const updateIssue = async (issueToUpdate: TIssue) => {
+    await handleIssues(issueToUpdate, EIssueActions.UPDATE);
   };
 
   const handleIssuePeekOverview = (issue: TIssue) =>
@@ -88,6 +88,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
                 isReadOnly={!canEditIssueProperties}
                 handleIssues={updateIssue}
                 displayProperties={displayProperties}
+                activeLayout="List"
               />
               {quickActions(issue)}
             </>

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

@@ -9,7 +9,7 @@ interface Props {
   issueIds: TGroupedIssues | TUnGroupedIssues | any;
   issuesMap: TIssueMap;
   canEditProperties: (projectId: string | undefined) => boolean;
-  handleIssues: (issue: TIssue, action: EIssueActions) => void;
+  handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
   quickActions: (issue: TIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | undefined;
 }

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

@@ -37,6 +37,7 @@ export interface IGroupByList {
   storeType: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   viewId?: string;
+  isCompletedCycle?: boolean;
 }
 
 const GroupByList: React.FC<IGroupByList> = (props) => {
@@ -55,6 +56,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     disableIssueCreation,
     storeType,
     addIssuesToView,
+    isCompletedCycle = false,
   } = props;
   // store hooks
   const member = useMember();
@@ -115,7 +117,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                     title={_list.name || ""}
                     count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
                     issuePayload={_list.payload}
-                    disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
+                    disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
                     storeType={storeType}
                     addIssuesToView={addIssuesToView}
                   />
@@ -132,7 +134,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                   />
                 )}
 
-                {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && (
+                {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
                   <div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
                     <ListQuickAddIssueForm
                       prePopulatedData={prePopulateQuickAddData(group_by, _list.id)}
@@ -168,6 +170,7 @@ export interface IList {
   disableIssueCreation?: boolean;
   storeType: TCreateModalStoreTypes;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  isCompletedCycle?: boolean;
 }
 
 export const List: React.FC<IList> = (props) => {
@@ -186,6 +189,7 @@ export const List: React.FC<IList> = (props) => {
     disableIssueCreation,
     storeType,
     addIssuesToView,
+    isCompletedCycle = false,
   } = props;
 
   return (
@@ -205,6 +209,7 @@ export const List: React.FC<IList> = (props) => {
         disableIssueCreation={disableIssueCreation}
         storeType={storeType}
         addIssuesToView={addIssuesToView}
+        isCompletedCycle={isCompletedCycle}
       />
     </div>
   );

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -7,6 +7,8 @@ import { ExistingIssuesListModal } from "components/core";
 import { CustomMenu } from "@plane/ui";
 // mobx
 import { observer } from "mobx-react-lite";
+// hooks
+import { useEventTracker } from "hooks/store";
 // types
 import { TIssue, ISearchIssueResponse } from "@plane/types";
 import useToast from "hooks/use-toast";
@@ -27,6 +29,8 @@ export const HeaderGroupByCard = observer(
   ({ icon, title, count, issuePayload, disableIssueCreation, storeType, addIssuesToView }: IHeaderGroupByCard) => {
     const router = useRouter();
     const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
+    // hooks
+    const { setTrackElement } = useEventTracker();
 
     const [isOpen, setIsOpen] = useState(false);
 
@@ -76,17 +80,30 @@ export const HeaderGroupByCard = observer(
                   </span>
                 }
               >
-                <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    setTrackElement("List layout");
+                    setIsOpen(true);
+                  }}
+                >
                   <span className="flex items-center justify-start gap-2">Create issue</span>
                 </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    setTrackElement("List layout");
+                    setOpenExistingIssueListModal(true);
+                  }}
+                >
                   <span className="flex items-center justify-start gap-2">Add an existing issue</span>
                 </CustomMenu.MenuItem>
               </CustomMenu>
             ) : (
               <div
                 className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
-                onClick={() => setIsOpen(true)}
+                onClick={() => {
+                  setTrackElement("List layout");
+                  setIsOpen(true);
+                }}
               >
                 <Plus width={14} strokeWidth={2} />
               </div>

web/components/issues/issue-layouts/list/list-view-types.d.ts

@@ -5,4 +5,5 @@ export interface IQuickActionProps {
   handleRemoveFromView?: () => Promise<void>;
   customActionButton?: React.ReactElement;
   portalElement?: HTMLDivElement | null;
+  readOnly?: boolean;
 }

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

@@ -1,10 +1,10 @@
-import { FC, useEffect, useState, useRef } from "react";
+import { FC, useEffect, useState, useRef, use } from "react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import { PlusIcon } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject } from "hooks/store";
+import { useEventTracker, useProject } from "hooks/store";
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -64,6 +64,7 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
   const { workspaceSlug, projectId } = router.query;
   // hooks
   const { getProjectById } = useProject();
+  const { captureIssueEvent } = useEventTracker();
 
   const projectDetail = (projectId && getProjectById(projectId.toString())) || undefined;
 
@@ -100,13 +101,24 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
 
     try {
       quickAddCallback &&
-        (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId));
+        (await quickAddCallback(workspaceSlug.toString(), projectId.toString(), { ...payload }, viewId).then((res) => {
+          captureIssueEvent({
+            eventName: "Issue created",
+            payload: { ...res, state: "SUCCESS", element: "List quick add" },
+            path: router.asPath,
+          });
+        }));
       setToastAlert({
         type: "success",
         title: "Success!",
         message: "Issue created successfully.",
       });
     } catch (err: any) {
+      captureIssueEvent({
+        eventName: "Issue created",
+        payload: { ...payload, state: "FAILED", element: "List quick add" },
+        path: router.asPath,
+      });
       setToastAlert({
         type: "error",
         title: "Error!",

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

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useIssues } from "hooks/store";
+import { useCycle, useIssues } from "hooks/store";
 // components
 import { CycleIssueQuickActions } from "components/issues";
 // types
@@ -19,6 +19,7 @@ export const CycleListLayout: React.FC = observer(() => {
   const { workspaceSlug, projectId, cycleId } = router.query;
   // store
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCompletedCycleIds } = useCycle();
 
   const issueActions = useMemo(
     () => ({
@@ -40,6 +41,10 @@ export const CycleListLayout: React.FC = observer(() => {
     }),
     [issues, workspaceSlug, cycleId]
   );
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+
+  const canEditIssueProperties = () => !isCompletedCycle;
 
   return (
     <BaseListRoot
@@ -53,6 +58,8 @@ export const CycleListLayout: React.FC = observer(() => {
         if (!workspaceSlug || !projectId || !cycleId) throw new Error();
         return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
       }}
+      canEditPropertiesBasedOnProject={canEditIssueProperties}
+      isCompletedCycle={isCompletedCycle}
     />
   );
 });

web/components/issues/issue-layouts/properties/all-properties.tsx

@@ -1,7 +1,8 @@
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
 // hooks
-import { useEstimate, useLabel } from "hooks/store";
+import { useEventTracker, useEstimate, useLabel } from "hooks/store";
 // components
 import { IssuePropertyLabels } from "../properties/labels";
 import { Tooltip } from "@plane/ui";
@@ -20,43 +21,118 @@ import { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types"
 
 export interface IIssueProperties {
   issue: TIssue;
-  handleIssues: (issue: TIssue) => void;
+  handleIssues: (issue: TIssue) => Promise<void>;
   displayProperties: IIssueDisplayProperties | undefined;
   isReadOnly: boolean;
   className: string;
+  activeLayout: string;
 }
 
 export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
-  const { issue, handleIssues, displayProperties, isReadOnly, className } = props;
+  const { issue, handleIssues, displayProperties, activeLayout, isReadOnly, className } = props;
+  // store hooks
   const { labelMap } = useLabel();
+  const { captureIssueEvent } = useEventTracker();
+  // router
+  const router = useRouter();
   const { areEstimatesEnabledForCurrentProject } = useEstimate();
-
+  const currentLayout = `${activeLayout} layout`;
   const handleState = (stateId: string) => {
-    handleIssues({ ...issue, state_id: stateId });
+    handleIssues({ ...issue, state_id: stateId }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "state",
+          change_details: stateId,
+        },
+      });
+    });
   };
 
   const handlePriority = (value: TIssuePriorities) => {
-    handleIssues({ ...issue, priority: value });
+    handleIssues({ ...issue, priority: value }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "priority",
+          change_details: value,
+        },
+      });
+    });
   };
 
   const handleLabel = (ids: string[]) => {
-    handleIssues({ ...issue, label_ids: ids });
+    handleIssues({ ...issue, label_ids: ids }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "labels",
+          change_details: ids,
+        },
+      });
+    });
   };
 
   const handleAssignee = (ids: string[]) => {
-    handleIssues({ ...issue, assignee_ids: ids });
+    handleIssues({ ...issue, assignee_ids: ids }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "assignees",
+          change_details: ids,
+        },
+      });
+    });
   };
 
   const handleStartDate = (date: Date | null) => {
-    handleIssues({ ...issue, start_date: date ? renderFormattedPayloadDate(date) : null });
+    handleIssues({ ...issue, start_date: date ? renderFormattedPayloadDate(date) : null }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "start_date",
+          change_details: date ? renderFormattedPayloadDate(date) : null,
+        },
+      });
+    });
   };
 
   const handleTargetDate = (date: Date | null) => {
-    handleIssues({ ...issue, target_date: date ? renderFormattedPayloadDate(date) : null });
+    handleIssues({ ...issue, target_date: date ? renderFormattedPayloadDate(date) : null }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "target_date",
+          change_details: date ? renderFormattedPayloadDate(date) : null,
+        },
+      });
+    });
   };
 
   const handleEstimate = (value: number | null) => {
-    handleIssues({ ...issue, estimate_point: value });
+    handleIssues({ ...issue, estimate_point: value }).then(() => {
+      captureIssueEvent({
+        eventName: "Issue updated",
+        payload: { ...issue, state: "SUCCESS", element: currentLayout },
+        path: router.asPath,
+        updates: {
+          changed_property: "estimate_point",
+          change_details: value,
+        },
+      });
+    });
   };
 
   if (!displayProperties) return null;

web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -4,6 +4,7 @@ import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -15,7 +16,7 @@ import { IQuickActionProps } from "../list/list-view-types";
 import { EIssuesStoreType } from "constants/issue";
 
 export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
+  const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@@ -23,6 +24,8 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
+  // hooks
+  const { setTrackElement } = useEventTracker();
   // toast alert
   const { setToastAlert } = useToast();
 
@@ -79,37 +82,44 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
+        {!readOnly && (
+          <>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement("Global issues");
             setIssueToEdit(issue);
+                setCreateUpdateIssueModal(true);
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Pencil className="h-3 w-3" />
+                Edit issue
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement("Global issues");
             setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Pencil className="h-3 w-3" />
-            Edit issue
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Copy className="h-3 w-3" />
-            Make a copy
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Copy className="h-3 w-3" />
+                Make a copy
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement("Global issues");
             setDeleteIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Trash2 className="h-3 w-3" />
-            Delete issue
-          </div>
-        </CustomMenu.MenuItem>
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Trash2 className="h-3 w-3" />
+                Delete issue
+              </div>
+            </CustomMenu.MenuItem>
+          </>
+        )}
       </CustomMenu>
     </>
   );

web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx

@@ -4,24 +4,38 @@ import { CustomMenu } from "@plane/ui";
 import { Link, Trash2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker, useIssues ,useUser} from "hooks/store";
 // components
 import { DeleteArchivedIssueModal } from "components/issues";
 // helpers
 import { copyUrlToClipboard } from "helpers/string.helper";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
+import { EUserProjectRoles } from "constants/project";
+import { EIssuesStoreType } from "constants/issue";
 
 export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, customActionButton, portalElement } = props;
-
+  const { issue, handleDelete, customActionButton, portalElement, readOnly = false } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
   // states
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-
+  // toast alert
   const { setToastAlert } = useToast();
 
+  // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+  // store hooks
+  const { setTrackElement } = useEventTracker();
+  const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
+
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+
   const handleCopyIssueLink = () => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`).then(() =>
       setToastAlert({
@@ -57,16 +71,19 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
+        {isEditingAllowed && !readOnly && (
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setTrackElement(activeLayout);
             setDeleteIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Trash2 className="h-3 w-3" />
-            Delete issue
-          </div>
-        </CustomMenu.MenuItem>
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <Trash2 className="h-3 w-3" />
+              Delete issue
+            </div>
+          </CustomMenu.MenuItem>
+        )}
       </CustomMenu>
     </>
   );

web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -4,6 +4,7 @@ import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+import { useEventTracker, useIssues,useUser } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -13,9 +14,18 @@ import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 // constants
 import { EIssuesStoreType } from "constants/issue";
+import { EUserProjectRoles } from "constants/project";
 
 export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleRemoveFromView,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+  } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@@ -23,9 +33,21 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug, cycleId } = router.query;
+  // store hooks
+  const { setTrackElement } = useEventTracker();
+  const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
   // toast alert
   const { setToastAlert } = useToast();
 
+  // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+
   const handleCopyIssueLink = () => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
       setToastAlert({
@@ -79,50 +101,57 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setIssueToEdit({
-              ...issue,
-              cycle: cycleId?.toString() ?? null,
-            });
+        {isEditingAllowed && !readOnly && (
+          <>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setIssueToEdit({
+                  ...issue,
+                  cycle: cycleId?.toString() ?? null,
+                });
+                setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Pencil className="h-3 w-3" />
-            Edit issue
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            handleRemoveFromView && handleRemoveFromView();
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <XCircle className="h-3 w-3" />
-            Remove from cycle
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Pencil className="h-3 w-3" />
+                Edit issue
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                handleRemoveFromView && handleRemoveFromView();
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <XCircle className="h-3 w-3" />
+                Remove from cycle
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Copy className="h-3 w-3" />
-            Make a copy
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Copy className="h-3 w-3" />
+                Make a copy
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement(activeLayout);
             setDeleteIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Trash2 className="h-3 w-3" />
-            Delete issue
-          </div>
-        </CustomMenu.MenuItem>
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Trash2 className="h-3 w-3" />
+                Delete issue
+              </div>
+            </CustomMenu.MenuItem>
+          </>
+        )}
       </CustomMenu>
     </>
   );

web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -4,6 +4,7 @@ import { CustomMenu } from "@plane/ui";
 import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
+import { useIssues, useEventTracker ,useUser } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -13,9 +14,18 @@ import { TIssue } from "@plane/types";
 import { IQuickActionProps } from "../list/list-view-types";
 // constants
 import { EIssuesStoreType } from "constants/issue";
+import { EUserProjectRoles } from "constants/project";
 
 export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleRemoveFromView,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+  } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
   const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@@ -23,9 +33,21 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   // router
   const router = useRouter();
   const { workspaceSlug, moduleId } = router.query;
+  // store hooks
+  const { setTrackElement } = useEventTracker();
+  const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
   // toast alert
   const { setToastAlert } = useToast();
 
+  // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
+
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+
   const handleCopyIssueLink = () => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`).then(() =>
       setToastAlert({
@@ -79,49 +101,56 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
+        {isEditingAllowed && !readOnly && (
+          <>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
+                setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Pencil className="h-3 w-3" />
-            Edit issue
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            handleRemoveFromView && handleRemoveFromView();
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <XCircle className="h-3 w-3" />
-            Remove from module
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Pencil className="h-3 w-3" />
+                Edit issue
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                handleRemoveFromView && handleRemoveFromView();
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <XCircle className="h-3 w-3" />
+                Remove from module
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={() => {
+                setTrackElement(activeLayout);
             setCreateUpdateIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Copy className="h-3 w-3" />
-            Make a copy
-          </div>
-        </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Copy className="h-3 w-3" />
+                Make a copy
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setTrackElement(activeLayout);
             setDeleteIssueModal(true);
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <Trash2 className="h-3 w-3" />
-            Delete issue
-          </div>
-        </CustomMenu.MenuItem>
+              }}
+            >
+              <div className="flex items-center gap-2">
+                <Trash2 className="h-3 w-3" />
+                Delete issue
+              </div>
+            </CustomMenu.MenuItem>
+          </>
+        )}
       </CustomMenu>
     </>
   );