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

apiserver/plane/api/views/cycle.py

@@ -262,7 +262,7 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
                     return Response(
                         {
                             "error": "Cycle with the same external id and external source already exists",
-                            "cycle": str(cycle.id),
+                            "id": str(cycle.id),
                         },
                         status=status.HTTP_409_CONFLICT,
                     )
@@ -325,7 +325,7 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
                 return Response(
                     {
                         "error": "Cycle with the same external id and external source already exists",
-                        "cycle_id": str(cycle.id),
+                        "id": str(cycle.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )

apiserver/plane/api/views/issue.py

@@ -239,7 +239,7 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
                 return Response(
                     {
                         "error": "Issue with the same external id and external source already exists",
-                        "issue_id": str(issue.id),
+                        "id": str(issue.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )
@@ -286,14 +286,16 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
                 and Issue.objects.filter(
                     project_id=project_id,
                     workspace__slug=slug,
-                    external_source=request.data.get("external_source", issue.external_source),
+                    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",
-                        "issue_id": str(issue.id),
+                        "id": str(issue.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )
@@ -362,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
@@ -370,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):
@@ -401,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

@@ -151,7 +151,7 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
                 return Response(
                     {
                         "error": "Module with the same external id and external source already exists",
-                        "module_id": str(module.id),
+                        "id": str(module.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )
@@ -185,7 +185,7 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
                 return Response(
                     {
                         "error": "Module with the same external id and external source already exists",
-                        "module_id": str(module.id),
+                        "id": str(module.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )

apiserver/plane/api/views/state.py

@@ -57,7 +57,7 @@ class StateAPIEndpoint(BaseAPIView):
                 return Response(
                     {
                         "error": "State with the same external id and external source already exists",
-                        "state_id": str(state.id),
+                        "id": str(state.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )
@@ -128,7 +128,7 @@ class StateAPIEndpoint(BaseAPIView):
                 return Response(
                     {
                         "error": "State with the same external id and external source already exists",
-                        "state_id": str(state.id),
+                        "id": str(state.id),
                     },
                     status=status.HTTP_409_CONFLICT,
                 )

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

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

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"

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

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

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/cycle-mobile-header.tsx

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

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

@@ -159,10 +159,10 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         projectId={projectId}
       />
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
-        <div className="group flex h-16 w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
-          <div className="flex w-full items-center gap-3 truncate">
-            <div className="flex items-center gap-4 truncate">
-              <span className="flex-shrink-0">
+        <div className="group flex flex-col md:flex-row w-full items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90">
+          <div className="relative w-full flex items-center justify-between gap-3 overflow-hidden">
+            <div className="relative w-full flex items-center gap-3 overflow-hidden">
+              <div className="flex-shrink-0">
                 <CircularProgressIndicator size={38} percentage={progress}>
                   {isCompleted ? (
                     progress === 100 ? (
@@ -176,95 +176,97 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                     <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
                   )}
                 </CircularProgressIndicator>
-              </span>
+              </div>
 
-              <div className="flex items-center gap-2.5">
-                <span className="flex-shrink-0">
-                  <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
-                </span>
+              <div className="relative flex items-center gap-2.5 overflow-hidden">
+                <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
                 <Tooltip tooltipContent={cycleDetails.name} position="top">
-                  <span className="truncate text-base font-medium">{cycleDetails.name}</span>
+                  <span className="truncate line-clamp-1 inline-block overflow-hidden text-base font-medium">
+                    {cycleDetails.name}
+                  </span>
                 </Tooltip>
               </div>
-            </div>
-            <button onClick={openCycleOverview} className="z-10 hidden flex-shrink-0 group-hover:flex">
-              <Info className="h-4 w-4 text-custom-text-400" />
-            </button>
-          </div>
 
-          <div className="flex w-full items-center justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
-            <div className="flex items-center justify-center">
-              {currentCycle && (
-                <span
-                  className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
-                  style={{
-                    color: currentCycle.color,
-                    backgroundColor: `${currentCycle.color}20`,
-                  }}
-                >
-                  {currentCycle.value === "current"
-                    ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
-                    : `${currentCycle.label}`}
-                </span>
-              )}
+              <button onClick={openCycleOverview} className="flex-shrink-0 z-10 invisible group-hover:visible">
+                <Info className="h-4 w-4 text-custom-text-400" />
+              </button>
             </div>
 
-            {renderDate && (
-              <span className="flex w-40 items-center justify-center gap-2 text-xs text-custom-text-300">
-                {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-              </span>
-            )}
-
-            <Tooltip tooltipContent={`${cycleDetails.assignees.length} Members`}>
-              <div className="flex w-16 cursor-default items-center justify-center gap-1">
-                {cycleDetails.assignees.length > 0 ? (
-                  <AvatarGroup showTooltip={false}>
-                    {cycleDetails.assignees.map((assignee) => (
-                      <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
-                    ))}
-                  </AvatarGroup>
-                ) : (
-                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                    <User2 className="h-4 w-4 text-custom-text-400" />
-                  </span>
-                )}
+            {currentCycle && (
+              <div
+                className="flex-shrink-0 relative flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
+                style={{
+                  color: currentCycle.color,
+                  backgroundColor: `${currentCycle.color}20`,
+                }}
+              >
+                {currentCycle.value === "current"
+                  ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
+                  : `${currentCycle.label}`}
               </div>
-            </Tooltip>
-            {isEditingAllowed &&
-              (cycleDetails.is_favorite ? (
-                <button type="button" onClick={handleRemoveFromFavorites}>
-                  <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
-                </button>
-              ) : (
-                <button type="button" onClick={handleAddToFavorites}>
-                  <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                </button>
-              ))}
+            )}
+          </div>
+          <div className="flex-shrink-0 relative overflow-hidden flex w-full items-center justify-between md:justify-end gap-2.5 md:w-auto md:flex-shrink-0 ">
+            <div className="text-xs text-custom-text-300">
+              {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
+            </div>
 
-            <CustomMenu ellipsis>
-              {!isCompleted && isEditingAllowed && (
+            <div className="flex-shrink-0 relative flex items-center gap-3">
+              <Tooltip tooltipContent={`${cycleDetails.assignees.length} Members`}>
+                <div className="flex w-10 cursor-default items-center justify-center">
+                  {cycleDetails.assignees.length > 0 ? (
+                    <AvatarGroup showTooltip={false}>
+                      {cycleDetails.assignees.map((assignee) => (
+                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
+                      ))}
+                    </AvatarGroup>
+                  ) : (
+                    <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                      <User2 className="h-4 w-4 text-custom-text-400" />
+                    </span>
+                  )}
+                </div>
+              </Tooltip>
+
+              {isEditingAllowed && (
                 <>
-                  <CustomMenu.MenuItem onClick={handleEditCycle}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Pencil className="h-3 w-3" />
-                      <span>Edit cycle</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem onClick={handleDeleteCycle}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Trash2 className="h-3 w-3" />
-                      <span>Delete cycle</span>
-                    </span>
-                  </CustomMenu.MenuItem>
+                  {cycleDetails.is_favorite ? (
+                    <button type="button" onClick={handleRemoveFromFavorites}>
+                      <Star className="h-3.5 w-3.5 fill-current text-amber-500" />
+                    </button>
+                  ) : (
+                    <button type="button" onClick={handleAddToFavorites}>
+                      <Star className="h-3.5 w-3.5 text-custom-text-200" />
+                    </button>
+                  )}
+
+                  <CustomMenu ellipsis>
+                    {!isCompleted && isEditingAllowed && (
+                      <>
+                        <CustomMenu.MenuItem onClick={handleEditCycle}>
+                          <span className="flex items-center justify-start gap-2">
+                            <Pencil className="h-3 w-3" />
+                            <span>Edit cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                        <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                          <span className="flex items-center justify-start gap-2">
+                            <Trash2 className="h-3 w-3" />
+                            <span>Delete cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      </>
+                    )}
+                    <CustomMenu.MenuItem onClick={handleCopyText}>
+                      <span className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-3 w-3" />
+                        <span>Copy cycle link</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
                 </>
               )}
-              <CustomMenu.MenuItem onClick={handleCopyText}>
-                <span className="flex items-center justify-start gap-2">
-                  <LinkIcon className="h-3 w-3" />
-                  <span>Copy cycle link</span>
-                </span>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
+            </div>
           </div>
         </div>
       </Link>

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/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">
@@ -81,7 +78,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
                   {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/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

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

web/components/headers/cycles.tsx

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

web/components/headers/module-issues.tsx

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

web/components/headers/project-issues.tsx

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

web/components/headers/projects.tsx

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

web/components/headers/workspace-analytics.tsx

@@ -16,15 +16,6 @@ export const WorkspaceAnalyticsHeader = () => {
       >
         <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />
-          <div className="block md:hidden">
-            <button
-              type="button"
-              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
-              onClick={() => router.back()}
-            >
-              <ArrowLeft fontSize={14} strokeWidth={2} />
-            </button>
-          </div>
           <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem

web/components/headers/workspace-dashboard.tsx

@@ -18,7 +18,7 @@ export const WorkspaceDashboardHeader = () => {
   return (
     <>
       <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
-      <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="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
           <SidebarHamburgerToggle />
           <div>
@@ -37,13 +37,13 @@ export const WorkspaceDashboardHeader = () => {
             href="https://plane.so/changelog"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 text-xs font-medium"
+            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5"
           >
             <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
-            {"What's new?"}
+            <span className="text-xs hidden sm:hidden md:block font-medium">{"What's new?"}</span>
           </a>
           <a
-            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 text-xs font-medium"
+            className="flex flex-shrink-0 items-center gap-1.5 rounded bg-custom-background-80 px-3 py-1.5 "
             href="https://github.com/makeplane/plane"
             target="_blank"
             rel="noopener noreferrer"
@@ -54,7 +54,7 @@ export const WorkspaceDashboardHeader = () => {
               width={16}
               alt="GitHub Logo"
             />
-            Star us on GitHub
+            <span className="text-xs font-medium hidden sm:hidden md:block">Star us on GitHub</span>
           </a>
         </div>
       </div>

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/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/filters/header/helpers/dropdown.tsx

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

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

@@ -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();
@@ -183,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
@@ -282,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/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/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/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/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/quick-action-dropdowns/all-issue.tsx

@@ -16,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);
@@ -82,40 +82,44 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setTrackElement("Global issues");
+        {!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={() => {
-            setTrackElement("Global issues");
-            setCreateUpdateIssueModal(true);
-          }}
-        >
-          <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");
+              }}
+            >
+              <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,18 +4,18 @@ import { CustomMenu } from "@plane/ui";
 import { Link, Trash2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
-import { useEventTracker, useIssues } from "hooks/store";
+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";
-// constants
+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;
@@ -23,6 +23,13 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
   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);
@@ -64,17 +71,19 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setTrackElement(activeLayout);
+        {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,7 +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 } from "hooks/store";
+import { useEventTracker, useIssues,useUser } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -14,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);
@@ -30,6 +39,13 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   // 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 = () => {
@@ -85,53 +101,57 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setIssueToEdit({
-              ...issue,
-              cycle: cycleId?.toString() ?? null,
-            });
-            setTrackElement(activeLayout);
+        {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={() => {
-            setTrackElement(activeLayout);
+              }}
+            >
+              <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={() => {
-            setTrackElement(activeLayout);
+              }}
+            >
+              <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,7 +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 } from "hooks/store";
+import { useIssues, useEventTracker ,useUser } from "hooks/store";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
@@ -14,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);
@@ -30,6 +39,13 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
   // 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 = () => {
@@ -85,52 +101,56 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem
-          onClick={() => {
-            setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
-            setTrackElement(activeLayout);
+        {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={() => {
-            setTrackElement(activeLayout);
+              }}
+            >
+              <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();
-            setTrackElement(activeLayout);
+              }}
+            >
+              <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>
     </>
   );

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

@@ -17,7 +17,7 @@ import { EUserProjectRoles } from "constants/project";
 import { EIssuesStoreType } from "constants/issue";
 
 export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
-  const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
+  const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -91,7 +91,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
             Copy link
           </div>
         </CustomMenu.MenuItem>
-        {isEditingAllowed && (
+        {isEditingAllowed && !readOnly && (
           <>
             <CustomMenu.MenuItem
               onClick={() => {

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

@@ -28,10 +28,19 @@ interface IBaseSpreadsheetRoot {
     [EIssueActions.REMOVE]?: (issue: TIssue) => void;
   };
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
+  isCompletedCycle?: boolean;
 }
 
 export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
-  const { issueFiltersStore, issueStore, viewId, QuickActions, issueActions, canEditPropertiesBasedOnProject } = props;
+  const {
+    issueFiltersStore,
+    issueStore,
+    viewId,
+    QuickActions,
+    issueActions,
+    canEditPropertiesBasedOnProject,
+    isCompletedCycle = false,
+  } = props;
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
@@ -95,6 +104,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
           issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
         }
         portalElement={portalElement}
+        readOnly={!isEditingAllowed || isCompletedCycle}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -113,7 +123,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
       quickAddCallback={issueStore.quickAddIssue}
       viewId={viewId}
       enableQuickCreateIssue={enableQuickAdd}
-      disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+      disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
     />
   );
 });

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

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // mobx store
-import { useIssues } from "hooks/store";
+import { useCycle, useIssues } from "hooks/store";
 // components
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 import { EIssueActions } from "../../types";
@@ -15,6 +15,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
   const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
 
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCompletedCycleIds } = useCycle();
 
   const issueActions = useMemo(
     () => ({
@@ -35,6 +36,11 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
     [issues, workspaceSlug, cycleId]
   );
 
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+
+  const canEditIssueProperties = () => !isCompletedCycle;
+
   return (
     <BaseSpreadsheetRoot
       issueStore={issues}
@@ -42,6 +48,8 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
       viewId={cycleId}
       issueActions={issueActions}
       QuickActions={CycleIssueQuickActions}
+      canEditPropertiesBasedOnProject={canEditIssueProperties}
+      isCompletedCycle={isCompletedCycle}
     />
   );
 });

web/components/issues/issues-mobile-header.tsx

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

web/components/modules/form.tsx

@@ -70,7 +70,7 @@ export const ModuleForm: React.FC<Props> = ({
   const startDate = watch("start_date");
   const targetDate = watch("target_date");
 
-  const minDate = startDate ? new Date(startDate) : new Date();
+  const minDate = startDate ? new Date(startDate) : null;
   minDate?.setDate(minDate.getDate());
 
   const maxDate = targetDate ? new Date(targetDate) : null;
@@ -159,7 +159,6 @@ export const ModuleForm: React.FC<Props> = ({
                     onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
                     buttonVariant="border-with-text"
                     placeholder="Start date"
-                    minDate={new Date()}
                     maxDate={maxDate ?? undefined}
                     tabIndex={3}
                   />

web/components/modules/module-mobile-header.tsx

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

web/components/modules/sidebar.tsx

@@ -168,18 +168,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     if (!watch("target_date") || watch("target_date") === "") endDateButtonRef.current?.click();
 
     if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
-      if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Unable to create module in past date. Please enter a valid date.",
-        });
-        reset({
-          ...moduleDetails,
-        });
-        return;
-      }
-
       submitChanges({
         start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
         target_date: renderFormattedPayloadDate(`${watch("target_date")}`),
@@ -198,18 +186,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
     if (!watch("start_date") || watch("start_date") === "") endDateButtonRef.current?.click();
 
     if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
-      if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Unable to create module in past date. Please enter a valid date.",
-        });
-        reset({
-          ...moduleDetails,
-        });
-        return;
-      }
-
       submitChanges({
         start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
         target_date: renderFormattedPayloadDate(`${watch("target_date")}`),

web/components/page-views/workspace-dashboard.tsx

@@ -62,16 +62,18 @@ export const WorkspaceDashboardView = observer(() => {
       {homeDashboardId && joinedProjectIds ? (
         <>
           {joinedProjectIds.length > 0 ? (
-            <div className="flex h-full w-full flex-col space-y-7 overflow-y-auto bg-custom-background-90 p-7">
+            <>
               <IssuePeekOverview />
-              {currentUser && <UserGreetingsView user={currentUser} />}
-              {currentUser && !currentUser.is_tour_completed && (
-                <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
-                  <TourRoot onComplete={handleTourCompleted} />
-                </div>
-              )}
-              <DashboardWidgets />
-            </div>
+              <div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
+                {currentUser && <UserGreetingsView user={currentUser} />}
+                {currentUser && !currentUser.is_tour_completed && (
+                  <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
+                    <TourRoot onComplete={handleTourCompleted} />
+                  </div>
+                )}
+                <DashboardWidgets />
+              </div>
+            </>
           ) : (
             <EmptyState
               image={emptyStateImage}

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

@@ -19,7 +19,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
   const isDarkMode = currentUser?.theme.theme === "dark";
 
   return (
-    <div className="flex flex-col gap-10 p-8 rounded-xl">
+    <div className="flex flex-col gap-10 pt-8 px-8 rounded-xl h-full">
       <div
         className={cn("flex item-center justify-between rounded-xl min-h-[25rem]", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": currentUser?.theme.theme === "dark",
@@ -43,17 +43,6 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
               <Crown className="h-3.5 w-3.5" />
               Upgrade
             </a>
-            <a
-              className={cn("text-sm underline", {
-                "text-white": currentUser?.theme.theme === "dark",
-                "text-blue-600": currentUser?.theme.theme === "light",
-              })}
-              href="https://plane.so/pricing"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Talk custom pricing
-            </a>
           </div>
           <span className="absolute left-0 top-0">
             <Image
@@ -84,7 +73,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
           </span>
         </div>
       </div>
-      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5">
+      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5 pb-8 h-full">
         {WORKSPACE_ACTIVE_CYCLES_DETAILS.map((item) => (
           <div className="flex flex-col gap-2 p-4 min-h-32 w-full bg-custom-background-80 rounded-md">
             <div className="flex items-center gap-2">

web/constants/dashboard.ts

@@ -121,21 +121,25 @@ export const DURATION_FILTER_OPTIONS: {
   key: TDurationFilterOptions;
   label: string;
 }[] = [
+  {
+    key: "none",
+    label: "None",
+  },
   {
     key: "today",
-    label: "Today",
+    label: "Due today",
   },
   {
     key: "this_week",
-    label: "This week",
+    label: " Due this week",
   },
   {
     key: "this_month",
-    label: "This month",
+    label: "Due this month",
   },
   {
     key: "this_year",
-    label: "This year",
+    label: "Due this year",
   },
 ];
 
@@ -152,7 +156,7 @@ export const PROJECT_BACKGROUND_COLORS = [
 ];
 
 // assigned and created issues widgets tabs list
-export const ISSUES_TABS_LIST: {
+export const FILTERED_ISSUES_TABS_LIST: {
   key: TIssuesListTypes;
   label: string;
 }[] = [
@@ -170,7 +174,27 @@ export const ISSUES_TABS_LIST: {
   },
 ];
 
+// assigned and created issues widgets tabs list
+export const UNFILTERED_ISSUES_TABS_LIST: {
+  key: TIssuesListTypes;
+  label: string;
+}[] = [
+  {
+    key: "pending",
+    label: "Pending",
+  },
+  {
+    key: "completed",
+    label: "Marked completed",
+  },
+];
+
 export const ASSIGNED_ISSUES_EMPTY_STATES = {
+  pending: {
+    title: "Issues assigned to you that are pending\nwill show up here.",
+    darkImage: UpcomingIssuesDark,
+    lightImage: UpcomingIssuesLight,
+  },
   upcoming: {
     title: "Upcoming issues assigned to\nyou will show up here.",
     darkImage: UpcomingIssuesDark,
@@ -189,6 +213,11 @@ export const ASSIGNED_ISSUES_EMPTY_STATES = {
 };
 
 export const CREATED_ISSUES_EMPTY_STATES = {
+  pending: {
+    title: "Issues created by you that are pending\nwill show up here.",
+    darkImage: UpcomingIssuesDark,
+    lightImage: UpcomingIssuesLight,
+  },
   upcoming: {
     title: "Upcoming issues you created\nwill show up here.",
     darkImage: UpcomingIssuesDark,

web/helpers/dashboard.helper.ts

@@ -9,6 +9,8 @@ export const getCustomDates = (duration: TDurationFilterOptions): string => {
   let firstDay, lastDay;
 
   switch (duration) {
+    case "none":
+      return "";
     case "today":
       firstDay = renderFormattedPayloadDate(today);
       lastDay = renderFormattedPayloadDate(today);
@@ -32,7 +34,9 @@ export const getRedirectionFilters = (type: TIssuesListTypes): string => {
   const today = renderFormattedPayloadDate(new Date());
 
   const filterParams =
-    type === "upcoming"
+    type === "pending"
+      ? "?state_group=backlog,unstarted,started"
+      : type === "upcoming"
       ? `?target_date=${today};after`
       : type === "overdue"
       ? `?target_date=${today};before`

web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx

@@ -108,14 +108,13 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
           selectedIndex={CYCLE_TAB_LIST.findIndex((i) => i.key == cycleTab)}
           onChange={(i) => handleCurrentView(CYCLE_TAB_LIST[i]?.key ?? "active")}
         >
-          <div className="flex flex-col items-end justify-between gap-4 border-b border-custom-border-200 px-4 pb-4 sm:flex-row sm:items-center sm:px-5 sm:pb-0">
+          <div className="flex flex-col items-start justify-between gap-4 border-b border-custom-border-200 px-4 sm:flex-row sm:items-center sm:px-5 sm:pb-0">
             <Tab.List as="div" className="flex items-center overflow-x-scroll">
               {CYCLE_TAB_LIST.map((tab) => (
                 <Tab
                   key={tab.key}
                   className={({ selected }) =>
-                    `border-b-2 p-4 text-sm font-medium outline-none ${
-                      selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent"
+                    `border-b-2 p-4 text-sm font-medium outline-none ${selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent"
                     }`
                   }
                 >
@@ -123,32 +122,32 @@ const ProjectCyclesPage: NextPageWithLayout = observer(() => {
                 </Tab>
               ))}
             </Tab.List>
-            {cycleTab !== "active" && (
-              <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
-                {CYCLE_VIEW_LAYOUTS.map((layout) => {
-                  if (layout.key === "gantt" && cycleTab === "draft") return null;
+            <div className="hidden sm:block">
+              {cycleTab !== "active" && (
+                <div className="flex items-center self-end sm:self-center md:self-center lg:self-center gap-1 rounded bg-custom-background-80 p-1">
+                  {CYCLE_VIEW_LAYOUTS.map((layout) => {
+                    if (layout.key === "gantt" && cycleTab === "draft") return null;
 
-                  return (
-                    <Tooltip key={layout.key} tooltipContent={layout.title}>
-                      <button
-                        type="button"
-                        className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
-                          cycleLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
-                        }`}
-                        onClick={() => handleCurrentLayout(layout.key as TCycleLayout)}
-                      >
-                        <layout.icon
-                          strokeWidth={2}
-                          className={`h-3.5 w-3.5 ${
-                            cycleLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
-                          }`}
-                        />
-                      </button>
-                    </Tooltip>
-                  );
-                })}
-              </div>
-            )}
+                    return (
+                      <Tooltip key={layout.key} tooltipContent={layout.title}>
+                        <button
+                          type="button"
+                          className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${cycleLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                            }`}
+                          onClick={() => handleCurrentLayout(layout.key as TCycleLayout)}
+                        >
+                          <layout.icon
+                            strokeWidth={2}
+                            className={`h-3.5 w-3.5 ${cycleLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"
+                              }`}
+                          />
+                        </button>
+                      </Tooltip>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
           </div>
 
           <Tab.Panels as={Fragment}>