Merge branch 'sync/ce-ee' of github.com:makeplane/plane-ee into develop

apiserver/plane/app/views/cycle/base.py

@@ -14,6 +14,8 @@ from django.db.models import (
     When,
     Value,
     CharField,
+    Subquery,
+    IntegerField,
 )
 from django.utils import timezone
 from django.contrib.postgres.aggregates import ArrayAgg
@@ -73,6 +75,60 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             project_id=self.kwargs.get("project_id"),
             workspace__slug=self.kwargs.get("slug"),
         )
+        cancelled_issues = (
+            Issue.issue_objects.filter(
+                state__group="cancelled",
+                issue_cycle__cycle_id=OuterRef("pk"),
+            )
+            .values("issue_cycle__cycle_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        completed_issues = (
+            Issue.issue_objects.filter(
+                state__group="completed",
+                issue_cycle__cycle_id=OuterRef("pk"),
+            )
+            .values("issue_cycle__cycle_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        started_issues = (
+            Issue.issue_objects.filter(
+                state__group="started",
+                issue_cycle__cycle_id=OuterRef("pk"),
+            )
+            .values("issue_cycle__cycle_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        unstarted_issues = (
+            Issue.issue_objects.filter(
+                state__group="unstarted",
+                issue_cycle__cycle_id=OuterRef("pk"),
+            )
+            .values("issue_cycle__cycle_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        backlog_issues = (
+            Issue.issue_objects.filter(
+                state__group="backlog",
+                issue_cycle__cycle_id=OuterRef("pk"),
+            )
+            .values("issue_cycle__cycle_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        total_issues = (
+            Issue.issue_objects.filter(
+                issue_cycle__cycle_id=OuterRef("pk"),
+            )
+            .values("issue_cycle__cycle_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+
         return self.filter_queryset(
             super()
             .get_queryset()
@@ -102,58 +158,39 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
             )
             .annotate(is_favorite=Exists(favorite_subquery))
             .annotate(
-                completed_issues=Count(
-                    "issue_cycle__issue__state__group",
-                    filter=Q(
-                        issue_cycle__issue__state__group="completed",
-                        issue_cycle__issue__archived_at__isnull=True,
-                        issue_cycle__issue__is_draft=False,
-                    ),
-                    distinct=True,
+                completed_issues=Coalesce(
+                    Subquery(completed_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                cancelled_issues=Count(
-                    "issue_cycle__issue__state__group",
-                    filter=Q(
-                        issue_cycle__issue__state__group="cancelled",
-                        issue_cycle__issue__archived_at__isnull=True,
-                        issue_cycle__issue__is_draft=False,
-                    ),
-                    distinct=True,
+                cancelled_issues=Coalesce(
+                    Subquery(cancelled_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                started_issues=Count(
-                    "issue_cycle__issue__state__group",
-                    filter=Q(
-                        issue_cycle__issue__state__group="started",
-                        issue_cycle__issue__archived_at__isnull=True,
-                        issue_cycle__issue__is_draft=False,
-                    ),
-                    distinct=True,
+                started_issues=Coalesce(
+                    Subquery(started_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                unstarted_issues=Count(
-                    "issue_cycle__issue__state__group",
-                    filter=Q(
-                        issue_cycle__issue__state__group="unstarted",
-                        issue_cycle__issue__archived_at__isnull=True,
-                        issue_cycle__issue__is_draft=False,
-                    ),
-                    distinct=True,
+                unstarted_issues=Coalesce(
+                    Subquery(unstarted_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                backlog_issues=Count(
-                    "issue_cycle__issue__state__group",
-                    filter=Q(
-                        issue_cycle__issue__state__group="backlog",
-                        issue_cycle__issue__archived_at__isnull=True,
-                        issue_cycle__issue__is_draft=False,
-                    ),
-                    distinct=True,
+                backlog_issues=Coalesce(
+                    Subquery(backlog_issues[:1]),
+                    Value(0, output_field=IntegerField()),
+                )
+            )
+            .annotate(
+                total_issues=Coalesce(
+                    Subquery(total_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
@@ -195,19 +232,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
         )
 
     def list(self, request, slug, project_id):
-        queryset = (
-            self.get_queryset()
-            .filter(archived_at__isnull=True)
-            .annotate(
-                total_issues=Count(
-                    "issue_cycle",
-                    filter=Q(
-                        issue_cycle__issue__archived_at__isnull=True,
-                        issue_cycle__issue__is_draft=False,
-                    ),
-                )
-            )
-        )
+        queryset = self.get_queryset().filter(archived_at__isnull=True)
         cycle_view = request.GET.get("cycle_view", "all")
 
         # Update the order by
@@ -409,6 +434,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                         # meta fields
                         "is_favorite",
                         "cancelled_issues",
+                        "total_issues",
                         "completed_issues",
                         "started_issues",
                         "unstarted_issues",
@@ -484,6 +510,7 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
                 "progress_snapshot",
                 # meta fields
                 "is_favorite",
+                "total_issues",
                 "cancelled_issues",
                 "completed_issues",
                 "started_issues",
@@ -497,32 +524,11 @@ class CycleViewSet(WebhookMixin, BaseViewSet):
 
     def retrieve(self, request, slug, project_id, pk):
         queryset = (
-            self.get_queryset()
-            .filter(archived_at__isnull=True)
-            .filter(pk=pk)
-            .annotate(
-                total_issues=Count(
-                    "issue_cycle",
-                    filter=Q(
-                        issue_cycle__issue__archived_at__isnull=True,
-                        issue_cycle__issue__is_draft=False,
-                    ),
-                )
-            )
+            self.get_queryset().filter(archived_at__isnull=True).filter(pk=pk)
         )
         data = (
             self.get_queryset()
             .filter(pk=pk)
-            .annotate(
-                total_issues=Issue.issue_objects.filter(
-                    project_id=self.kwargs.get("project_id"),
-                    parent__isnull=True,
-                    issue_cycle__cycle_id=pk,
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
             .annotate(
                 sub_issues=Issue.issue_objects.filter(
                     project_id=self.kwargs.get("project_id"),

apiserver/plane/app/views/module/base.py

@@ -3,7 +3,17 @@ import json
 
 # Django Imports
 from django.utils import timezone
-from django.db.models import Prefetch, F, OuterRef, Exists, Count, Q, Func
+from django.db.models import (
+    Prefetch,
+    F,
+    OuterRef,
+    Exists,
+    Count,
+    Q,
+    Func,
+    Subquery,
+    IntegerField,
+)
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
 from django.db.models import Value, UUIDField
@@ -61,6 +71,59 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             project_id=self.kwargs.get("project_id"),
             workspace__slug=self.kwargs.get("slug"),
         )
+        cancelled_issues = (
+            Issue.issue_objects.filter(
+                state__group="cancelled",
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        completed_issues = (
+            Issue.issue_objects.filter(
+                state__group="completed",
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        started_issues = (
+            Issue.issue_objects.filter(
+                state__group="started",
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        unstarted_issues = (
+            Issue.issue_objects.filter(
+                state__group="unstarted",
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        backlog_issues = (
+            Issue.issue_objects.filter(
+                state__group="backlog",
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
+        total_issues = (
+            Issue.issue_objects.filter(
+                issue_module__module_id=OuterRef("pk"),
+            )
+            .values("issue_module__module_id")
+            .annotate(cnt=Count("pk"))
+            .values("cnt")
+        )
         return (
             super()
             .get_queryset()
@@ -80,68 +143,39 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                 )
             )
             .annotate(
-                total_issues=Count(
-                    "issue_module",
-                    filter=Q(
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
-                    distinct=True,
-                ),
-            )
-            .annotate(
-                completed_issues=Count(
-                    "issue_module__issue__state__group",
-                    filter=Q(
-                        issue_module__issue__state__group="completed",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
-                    distinct=True,
+                completed_issues=Coalesce(
+                    Subquery(completed_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                cancelled_issues=Count(
-                    "issue_module__issue__state__group",
-                    filter=Q(
-                        issue_module__issue__state__group="cancelled",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
-                    distinct=True,
+                cancelled_issues=Coalesce(
+                    Subquery(cancelled_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                started_issues=Count(
-                    "issue_module__issue__state__group",
-                    filter=Q(
-                        issue_module__issue__state__group="started",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
-                    distinct=True,
+                started_issues=Coalesce(
+                    Subquery(started_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                unstarted_issues=Count(
-                    "issue_module__issue__state__group",
-                    filter=Q(
-                        issue_module__issue__state__group="unstarted",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
-                    distinct=True,
+                unstarted_issues=Coalesce(
+                    Subquery(unstarted_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
-                backlog_issues=Count(
-                    "issue_module__issue__state__group",
-                    filter=Q(
-                        issue_module__issue__state__group="backlog",
-                        issue_module__issue__archived_at__isnull=True,
-                        issue_module__issue__is_draft=False,
-                    ),
-                    distinct=True,
+                backlog_issues=Coalesce(
+                    Subquery(backlog_issues[:1]),
+                    Value(0, output_field=IntegerField()),
+                )
+            )
+            .annotate(
+                total_issues=Coalesce(
+                    Subquery(total_issues[:1]),
+                    Value(0, output_field=IntegerField()),
                 )
             )
             .annotate(
@@ -191,6 +225,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                     "is_favorite",
                     "cancelled_issues",
                     "completed_issues",
+                    "total_issues",
                     "started_issues",
                     "unstarted_issues",
                     "backlog_issues",
@@ -246,16 +281,6 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
             self.get_queryset()
             .filter(archived_at__isnull=True)
             .filter(pk=pk)
-            .annotate(
-                total_issues=Issue.issue_objects.filter(
-                    project_id=self.kwargs.get("project_id"),
-                    parent__isnull=True,
-                    issue_module__module_id=pk,
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
             .annotate(
                 sub_issues=Issue.issue_objects.filter(
                     project_id=self.kwargs.get("project_id"),
@@ -418,6 +443,7 @@ class ModuleViewSet(WebhookMixin, BaseViewSet):
                 "cancelled_issues",
                 "completed_issues",
                 "started_issues",
+                "total_issues",
                 "unstarted_issues",
                 "backlog_issues",
                 "created_at",

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

@@ -11,7 +11,9 @@ import { Tooltip, Loader, PriorityIcon, Avatar } from "@plane/ui";
 // components
 import { SingleProgressStats } from "@/components/core";
 import { StateDropdown } from "@/components/dropdowns";
+import { EmptyState } from "@/components/empty-state";
 // constants
+import { EmptyStateType } from "@/constants/empty-state";
 import { CYCLE_ISSUES_WITH_PARAMS } from "@/constants/fetch-keys";
 import { EIssuesStoreType } from "@/constants/issue";
 // helper
@@ -177,8 +179,12 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                     </Link>
                   ))
                 ) : (
-                  <div className="flex items-center justify-center text-center h-full text-sm text-custom-text-200">
-                    <span>There are no high priority issues present in this cycle.</span>
+                  <div className="flex items-center justify-center h-full w-full">
+                    <EmptyState
+                      type={EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE}
+                      layout="screen-simple"
+                      size="sm"
+                    />
                   </div>
                 )
               ) : (
@@ -195,63 +201,75 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
             as="div"
             className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-custom-text-200 vertical-scrollbar scrollbar-sm"
           >
-            {cycle.distribution?.assignees?.map((assignee, index) => {
-              if (assignee.assignee_id)
-                return (
-                  <SingleProgressStats
-                    key={assignee.assignee_id}
-                    title={
-                      <div className="flex items-center gap-2">
-                        <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
+            {cycleIssues.length > 0 ? (
+              cycle.distribution?.assignees?.map((assignee, index) => {
+                if (assignee.assignee_id)
+                  return (
+                    <SingleProgressStats
+                      key={assignee.assignee_id}
+                      title={
+                        <div className="flex items-center gap-2">
+                          <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
 
-                        <span>{assignee.display_name}</span>
-                      </div>
-                    }
-                    completed={assignee.completed_issues}
-                    total={assignee.total_issues}
-                  />
-                );
-              else
-                return (
-                  <SingleProgressStats
-                    key={`unassigned-${index}`}
-                    title={
-                      <div className="flex items-center gap-2">
-                        <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
-                          <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
+                          <span>{assignee.display_name}</span>
                         </div>
-                        <span>No assignee</span>
-                      </div>
-                    }
-                    completed={assignee.completed_issues}
-                    total={assignee.total_issues}
-                  />
-                );
-            })}
+                      }
+                      completed={assignee.completed_issues}
+                      total={assignee.total_issues}
+                    />
+                  );
+                else
+                  return (
+                    <SingleProgressStats
+                      key={`unassigned-${index}`}
+                      title={
+                        <div className="flex items-center gap-2">
+                          <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
+                            <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
+                          </div>
+                          <span>No assignee</span>
+                        </div>
+                      }
+                      completed={assignee.completed_issues}
+                      total={assignee.total_issues}
+                    />
+                  );
+              })
+            ) : (
+              <div className="flex items-center justify-center h-full w-full">
+                <EmptyState type={EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE} layout="screen-simple" size="sm" />
+              </div>
+            )}
           </Tab.Panel>
 
           <Tab.Panel
             as="div"
             className="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-custom-text-200 vertical-scrollbar scrollbar-sm"
           >
-            {cycle.distribution?.labels?.map((label, index) => (
-              <SingleProgressStats
-                key={label.label_id ?? `no-label-${index}`}
-                title={
-                  <div className="flex items-center gap-2">
-                    <span
-                      className="block h-3 w-3 rounded-full"
-                      style={{
-                        backgroundColor: label.color ?? "#000000",
-                      }}
-                    />
-                    <span className="text-xs">{label.label_name ?? "No labels"}</span>
-                  </div>
-                }
-                completed={label.completed_issues}
-                total={label.total_issues}
-              />
-            ))}
+            {cycleIssues.length > 0 ? (
+              cycle.distribution?.labels?.map((label, index) => (
+                <SingleProgressStats
+                  key={label.label_id ?? `no-label-${index}`}
+                  title={
+                    <div className="flex items-center gap-2">
+                      <span
+                        className="block h-3 w-3 rounded-full"
+                        style={{
+                          backgroundColor: label.color ?? "#000000",
+                        }}
+                      />
+                      <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                    </div>
+                  }
+                  completed={label.completed_issues}
+                  total={label.total_issues}
+                />
+              ))
+            ) : (
+              <div className="flex items-center justify-center h-full w-full">
+                <EmptyState type={EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE} layout="screen-simple" size="sm" />
+              </div>
+            )}
           </Tab.Panel>
         </Tab.Panels>
       </Tab.Group>

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

@@ -3,6 +3,9 @@ import { FC } from "react";
 import { ICycle } from "@plane/types";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { EmptyState } from "@/components/empty-state";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
 
 export type ActiveCycleProductivityProps = {
   cycle: ICycle;
@@ -16,31 +19,40 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props)
       <div className="flex items-center justify-between gap-4">
         <h3 className="text-base text-custom-text-300 font-semibold">Issue burndown</h3>
       </div>
-
-      <div className="h-full w-full px-2">
-        <div className="flex items-center justify-between gap-4 py-1 text-xs text-custom-text-300">
-          <div className="flex items-center gap-3 text-custom-text-300">
-            <div className="flex items-center justify-center gap-1">
-              <span className="h-2 w-2 rounded-full bg-[#A9BBD0]" />
-              <span>Ideal</span>
+      {cycle.total_issues > 0 ? (
+        <>
+          <div className="h-full w-full px-2">
+            <div className="flex items-center justify-between gap-4 py-1 text-xs text-custom-text-300">
+              <div className="flex items-center gap-3 text-custom-text-300">
+                <div className="flex items-center justify-center gap-1">
+                  <span className="h-2 w-2 rounded-full bg-[#A9BBD0]" />
+                  <span>Ideal</span>
+                </div>
+                <div className="flex items-center justify-center gap-1">
+                  <span className="h-2 w-2 rounded-full bg-[#4C8FFF]" />
+                  <span>Current</span>
+                </div>
+              </div>
+              <span>{`Pending issues - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}</span>
             </div>
-            <div className="flex items-center justify-center gap-1">
-              <span className="h-2 w-2 rounded-full bg-[#4C8FFF]" />
-              <span>Current</span>
+            <div className="relative  h-full">
+              <ProgressChart
+                className="h-full"
+                distribution={cycle.distribution?.completion_chart ?? {}}
+                startDate={cycle.start_date ?? ""}
+                endDate={cycle.end_date ?? ""}
+                totalIssues={cycle.total_issues}
+              />
             </div>
           </div>
-          <span>{`Pending issues - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}</span>
-        </div>
-        <div className="relative  h-full">
-          <ProgressChart
-            className="h-full"
-            distribution={cycle.distribution?.completion_chart ?? {}}
-            startDate={cycle.start_date ?? ""}
-            endDate={cycle.end_date ?? ""}
-            totalIssues={cycle.total_issues}
-          />
-        </div>
-      </div>
+        </>
+      ) : (
+        <>
+          <div className="flex items-center justify-center h-full w-full">
+            <EmptyState type={EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE} layout="screen-simple" size="sm" />
+          </div>
+        </>
+      )}
     </div>
   );
 };

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

@@ -3,8 +3,11 @@ import { FC } from "react";
 import { ICycle } from "@plane/types";
 // ui
 import { LinearProgressIndicator } from "@plane/ui";
+// components
+import { EmptyState } from "@/components/empty-state";
 // constants
 import { CYCLE_STATE_GROUPS_DETAILS } from "@/constants/cycle";
+import { EmptyStateType } from "@/constants/empty-state";
 
 export type ActiveCycleProgressProps = {
   cycle: ICycle;
@@ -32,48 +35,56 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
       <div className="flex flex-col gap-3">
         <div className="flex items-center justify-between gap-4">
           <h3 className="text-base text-custom-text-300 font-semibold">Progress</h3>
-          <span className="flex gap-1 text-sm text-custom-text-400 font-medium whitespace-nowrap rounded-sm px-3 py-1 ">
-            {`${cycle.completed_issues + cycle.cancelled_issues}/${cycle.total_issues - cycle.cancelled_issues} ${
-              cycle.completed_issues + cycle.cancelled_issues > 1 ? "Issues" : "Issue"
-            } closed`}
-          </span>
+          {cycle.total_issues > 0 && (
+            <span className="flex gap-1 text-sm text-custom-text-400 font-medium whitespace-nowrap rounded-sm px-3 py-1 ">
+              {`${cycle.completed_issues + cycle.cancelled_issues}/${cycle.total_issues - cycle.cancelled_issues} ${
+                cycle.completed_issues + cycle.cancelled_issues > 1 ? "Issues" : "Issue"
+              } closed`}
+            </span>
+          )}
         </div>
-        <LinearProgressIndicator size="lg" data={progressIndicatorData} />
+        {cycle.total_issues > 0 && <LinearProgressIndicator size="lg" data={progressIndicatorData} />}
       </div>
 
-      <div className="flex flex-col gap-5">
-        {Object.keys(groupedIssues).map((group, index) => (
-          <>
-            {groupedIssues[group] > 0 && (
-              <div key={index}>
-                <div className="flex items-center justify-between gap-2 text-sm">
-                  <div className="flex items-center gap-1.5">
-                    <span
-                      className="block h-3 w-3 rounded-full"
-                      style={{
-                        backgroundColor: CYCLE_STATE_GROUPS_DETAILS[index].color,
-                      }}
-                    />
-                    <span className="text-custom-text-300 capitalize font-medium w-16">{group}</span>
+      {cycle.total_issues > 0 ? (
+        <div className="flex flex-col gap-5">
+          {Object.keys(groupedIssues).map((group, index) => (
+            <>
+              {groupedIssues[group] > 0 && (
+                <div key={index}>
+                  <div className="flex items-center justify-between gap-2 text-sm">
+                    <div className="flex items-center gap-1.5">
+                      <span
+                        className="block h-3 w-3 rounded-full"
+                        style={{
+                          backgroundColor: CYCLE_STATE_GROUPS_DETAILS[index].color,
+                        }}
+                      />
+                      <span className="text-custom-text-300 capitalize font-medium w-16">{group}</span>
+                    </div>
+                    <span className="text-custom-text-300">{`${groupedIssues[group]} ${
+                      groupedIssues[group] > 1 ? "Issues" : "Issue"
+                    }`}</span>
                   </div>
-                  <span className="text-custom-text-300">{`${groupedIssues[group]} ${
-                    groupedIssues[group] > 1 ? "Issues" : "Issue"
-                  }`}</span>
                 </div>
-              </div>
-            )}
-          </>
-        ))}
-        {cycle.cancelled_issues > 0 && (
-          <span className="flex items-center gap-2 text-sm text-custom-text-300">
-            <span>
-              {`${cycle.cancelled_issues} cancelled ${
-                cycle.cancelled_issues > 1 ? "issues are" : "issue is"
-              } excluded from this report.`}{" "}
+              )}
+            </>
+          ))}
+          {cycle.cancelled_issues > 0 && (
+            <span className="flex items-center gap-2 text-sm text-custom-text-300">
+              <span>
+                {`${cycle.cancelled_issues} cancelled ${
+                  cycle.cancelled_issues > 1 ? "issues are" : "issue is"
+                } excluded from this report.`}{" "}
+              </span>
             </span>
-          </span>
-        )}
-      </div>
+          )}
+        </div>
+      ) : (
+        <div className="flex items-center justify-center h-full w-full">
+          <EmptyState type={EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE} layout="screen-simple" size="sm" />
+        </div>
+      )}
     </div>
   );
 };

web/components/cycles/active-cycle/upcoming-cycles-list.tsx

@@ -1,5 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
 // components
 import { UpcomingCycleListItem } from "@/components/cycles";
 // hooks
@@ -14,6 +16,11 @@ export const UpcomingCyclesList: FC<Props> = observer((props) => {
   // store hooks
   const { currentProjectUpcomingCycleIds } = useCycle();
 
+  // theme
+  const { resolvedTheme } = useTheme();
+
+  const resolvedEmptyStatePath = `/empty-state/active-cycle/cycle-${resolvedTheme === "light" ? "light" : "dark"}.webp`;
+
   if (!currentProjectUpcomingCycleIds) return null;
 
   return (
@@ -28,8 +35,18 @@ export const UpcomingCyclesList: FC<Props> = observer((props) => {
           ))}
         </div>
       ) : (
-        <div className="w-full grid place-items-center py-20">
-          <div className="text-center">
+        <div className="flex items-center justify-center h-full w-full py-20">
+          <div className="text-center flex flex-col gap-2.5 items-center">
+            <div className="h-24 w-24">
+              <Image
+                src={resolvedEmptyStatePath}
+                alt="button image"
+                width={78}
+                height={78}
+                layout="responsive"
+                lazyBoundary="100%"
+              />
+            </div>
             <h5 className="text-xl font-medium mb-1">No upcoming cycles</h5>
             <p className="text-custom-text-400 text-base">
               Create new cycles to find them here or check

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

@@ -151,12 +151,12 @@ export const EmptyState: React.FC<EmptyStateProps> = (props) => {
       )}
       {layout === "screen-simple" && (
         <div className="text-center flex flex-col gap-2.5 items-center">
-          <div className="h-28 w-28">
+          <div className={`${size === "sm" ? "h-24 w-24" : "h-28 w-28"}`}>
             <Image
               src={resolvedEmptyStatePath}
               alt={key || "button image"}
-              width={96}
-              height={96}
+              width={size === "sm" ? 78 : 96}
+              height={size === "sm" ? 78 : 96}
               layout="responsive"
               lazyBoundary="100%"
             />

web/constants/empty-state.ts

@@ -84,6 +84,12 @@ export enum EmptyStateType {
   NOTIFICATION_ARCHIVED_EMPTY_STATE = "notification-archived-empty-state",
   NOTIFICATION_SNOOZED_EMPTY_STATE = "notification-snoozed-empty-state",
   NOTIFICATION_UNREAD_EMPTY_STATE = "notification-unread-empty-state",
+
+  ACTIVE_CYCLE_PROGRESS_EMPTY_STATE = "active-cycle-progress-empty-state",
+  ACTIVE_CYCLE_CHART_EMPTY_STATE = "active-cycle-chart-empty-state",
+  ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE = "active-cycle-priority-issue-empty-state",
+  ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE = "active-cycle-assignee-empty-state",
+  ACTIVE_CYCLE_LABEL_EMPTY_STATE = "active-cycle-label-empty-state",
 }
 
 const emptyStateDetails = {
@@ -584,6 +590,31 @@ const emptyStateDetails = {
     description: "Any notification you archive will be \n available here to help you focus",
     path: "/empty-state/search/archive",
   },
+  [EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE]: {
+    key: EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE,
+    title: "Add issues to the cycle to view it's \n progress",
+    path: "/empty-state/active-cycle/progress",
+  },
+  [EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE]: {
+    key: EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE,
+    title: "Add issues to the cycle to view the \n burndown chart.",
+    path: "/empty-state/active-cycle/chart",
+  },
+  [EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE]: {
+    key: EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE,
+    title: "Observe high priority issues tackled in \n the cycle at a glance.",
+    path: "/empty-state/active-cycle/priority",
+  },
+  [EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE]: {
+    key: EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE,
+    title: "Add assignees to issues to see a \n breakdown of work by assignees.",
+    path: "/empty-state/active-cycle/assignee",
+  },
+  [EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE]: {
+    key: EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE,
+    title: "Add labels to issues to see the \n breakdown of work by labels.",
+    path: "/empty-state/active-cycle/label",
+  },
 } as const;
 
 export const EMPTY_STATE_DETAILS: Record<EmptyStateType, EmptyStateDetails> = emptyStateDetails;