feat: Instance activate page added

.deepsource.toml

@@ -1,17 +0,0 @@
-version = 1
-
-[[analyzers]]
-name = "shell"
-
-[[analyzers]]
-name = "javascript"
-
-  [analyzers.meta]
-  plugins = ["react"]
-  environment = ["nodejs"]
-
-[[analyzers]]
-name = "python"
-
-  [analyzers.meta]
-  runtime_version = "3.x.x"

apiserver/plane/api/serializers/module.py

@@ -19,7 +19,7 @@ from plane.db.models import (
 
 
 class ModuleWriteSerializer(BaseSerializer):
-    members = serializers.ListField(
+    members_list = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
         write_only=True,
         required=False,
@@ -39,11 +39,6 @@ class ModuleWriteSerializer(BaseSerializer):
             "created_at",
             "updated_at",
         ]
-    
-    def to_representation(self, instance):
-        data = super().to_representation(instance)
-        data['members'] = [str(member.id) for member in instance.members.all()]
-        return data
 
     def validate(self, data):
         if data.get("start_date", None) is not None and data.get("target_date", None) is not None and data.get("start_date", None) > data.get("target_date", None):
@@ -51,7 +46,7 @@ class ModuleWriteSerializer(BaseSerializer):
         return data    
 
     def create(self, validated_data):
-        members = validated_data.pop("members", None)
+        members = validated_data.pop("members_list", None)
 
         project = self.context["project"]
 
@@ -77,7 +72,7 @@ class ModuleWriteSerializer(BaseSerializer):
         return module
 
     def update(self, instance, validated_data):
-        members = validated_data.pop("members", None)
+        members = validated_data.pop("members_list", None)
 
         if members is not None:
             ModuleMember.objects.filter(module=instance).delete()

apiserver/plane/api/serializers/page.py

@@ -33,7 +33,7 @@ class PageBlockLiteSerializer(BaseSerializer):
 class PageSerializer(BaseSerializer):
     is_favorite = serializers.BooleanField(read_only=True)
     label_details = LabelLiteSerializer(read_only=True, source="labels", many=True)
-    labels = serializers.ListField(
+    labels_list = serializers.ListField(
         child=serializers.PrimaryKeyRelatedField(queryset=Label.objects.all()),
         write_only=True,
         required=False,
@@ -50,13 +50,9 @@ class PageSerializer(BaseSerializer):
             "project",
             "owned_by",
         ]
-    def to_representation(self, instance):
-        data = super().to_representation(instance)
-        data['labels'] = [str(label.id) for label in instance.labels.all()]
-        return data
 
     def create(self, validated_data):
-        labels = validated_data.pop("labels", None)
+        labels = validated_data.pop("labels_list", None)
         project_id = self.context["project_id"]
         owned_by_id = self.context["owned_by_id"]
         page = Page.objects.create(
@@ -81,7 +77,7 @@ class PageSerializer(BaseSerializer):
         return page
 
     def update(self, instance, validated_data):
-        labels = validated_data.pop("labels", None)
+        labels = validated_data.pop("labels_list", None)
         if labels is not None:
             PageLabel.objects.filter(page=instance).delete()
             PageLabel.objects.bulk_create(

apiserver/plane/api/serializers/user.py

@@ -79,14 +79,14 @@ class UserMeSettingsSerializer(BaseSerializer):
             email=obj.email
         ).count()
         if obj.last_workspace_id is not None:
-            workspace = Workspace.objects.filter(
+            workspace = Workspace.objects.get(
                 pk=obj.last_workspace_id, workspace_member__member=obj.id
-            ).first()
+            )
             return {
                 "last_workspace_id": obj.last_workspace_id,
-                "last_workspace_slug": workspace.slug if workspace is not None else "",
+                "last_workspace_slug": workspace.slug,
                 "fallback_workspace_id": obj.last_workspace_id,
-                "fallback_workspace_slug": workspace.slug if workspace is not None else "",
+                "fallback_workspace_slug": workspace.slug,
                 "invites": workspace_invites,
             }
         else:

apiserver/plane/api/urls/project.py

@@ -4,15 +4,17 @@ from plane.api.views import (
     ProjectViewSet,
     InviteProjectEndpoint,
     ProjectMemberViewSet,
+    ProjectMemberEndpoint,
     ProjectMemberInvitationsViewset,
     ProjectMemberUserEndpoint,
+    AddMemberToProjectEndpoint,
     ProjectJoinEndpoint,
     AddTeamToProjectEndpoint,
     ProjectUserViewsEndpoint,
     ProjectIdentifierEndpoint,
     ProjectFavoritesViewSet,
     LeaveProjectEndpoint,
-    ProjectPublicCoverImagesEndpoint,
+    ProjectPublicCoverImagesEndpoint
 )
 
 
@@ -51,7 +53,7 @@ urlpatterns = [
     ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/members/",
-        ProjectMemberViewSet.as_view({"get": "list", "post": "create"}),
+        ProjectMemberViewSet.as_view({"get": "list"}),
         name="project-member",
     ),
     path(
@@ -65,6 +67,16 @@ urlpatterns = [
         ),
         name="project-member",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/project-members/",
+        ProjectMemberEndpoint.as_view(),
+        name="project-member",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/members/add/",
+        AddMemberToProjectEndpoint.as_view(),
+        name="project",
+    ),
     path(
         "workspaces/<str:slug>/projects/join/",
         ProjectJoinEndpoint.as_view(),

apiserver/plane/api/urls/workspace.py

@@ -5,6 +5,7 @@ from plane.api.views import (
     WorkSpaceViewSet,
     InviteWorkspaceEndpoint,
     WorkSpaceMemberViewSet,
+    WorkspaceMembersEndpoint,
     WorkspaceInvitationsViewset,
     WorkspaceMemberUserEndpoint,
     WorkspaceMemberUserViewsEndpoint,
@@ -85,6 +86,11 @@ urlpatterns = [
         ),
         name="workspace-member",
     ),
+    path(
+        "workspaces/<str:slug>/workspace-members/",
+        WorkspaceMembersEndpoint.as_view(),
+        name="workspace-members",
+    ),
     path(
         "workspaces/<str:slug>/teams/",
         TeamMemberViewSet.as_view(

apiserver/plane/api/views/__init__.py

@@ -7,12 +7,14 @@ from .project import (
     ProjectMemberInvitationsViewset,
     ProjectMemberInviteDetailViewSet,
     ProjectIdentifierEndpoint,
+    AddMemberToProjectEndpoint,
     ProjectJoinEndpoint,
     ProjectUserViewsEndpoint,
     ProjectMemberUserEndpoint,
     ProjectFavoritesViewSet,
     ProjectDeployBoardViewSet,
     ProjectDeployBoardPublicSettingsEndpoint,
+    ProjectMemberEndpoint,
     WorkspaceProjectDeployBoardEndpoint,
     LeaveProjectEndpoint,
     ProjectPublicCoverImagesEndpoint,
@@ -51,6 +53,7 @@ from .workspace import (
     WorkspaceUserProfileEndpoint,
     WorkspaceUserProfileIssuesEndpoint,
     WorkspaceLabelsEndpoint,
+    WorkspaceMembersEndpoint,
     LeaveWorkspaceEndpoint,
 )
 from .state import StateViewSet

apiserver/plane/api/views/authentication.py

@@ -249,11 +249,11 @@ class MagicSignInGenerateEndpoint(BaseAPIView):
 
         ## Generate a random token
         token = (
-            "".join(random.choices(string.ascii_lowercase, k=4))
+            "".join(random.choices(string.ascii_lowercase + string.digits, k=4))
             + "-"
-            + "".join(random.choices(string.ascii_lowercase, k=4))
+            + "".join(random.choices(string.ascii_lowercase + string.digits, k=4))
             + "-"
-            + "".join(random.choices(string.ascii_lowercase, k=4))
+            + "".join(random.choices(string.ascii_lowercase + string.digits, k=4))
         )
 
         ri = redis_instance()

apiserver/plane/api/views/importer.py

@@ -39,7 +39,6 @@ from plane.utils.integrations.github import get_github_repo_details
 from plane.utils.importers.jira import jira_project_issue_summary
 from plane.bgtasks.importer_task import service_importer
 from plane.utils.html_processor import strip_tags
-from plane.api.permissions import WorkSpaceAdminPermission
 
 
 class ServiceIssueImportSummaryEndpoint(BaseAPIView):
@@ -120,9 +119,6 @@ class ServiceIssueImportSummaryEndpoint(BaseAPIView):
 
 
 class ImportServiceEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkSpaceAdminPermission,
-    ]
     def post(self, request, slug, service):
         project_id = request.data.get("project_id", False)
 

apiserver/plane/api/views/project.py

@@ -482,83 +482,6 @@ class ProjectMemberViewSet(BaseViewSet):
             .select_related("workspace", "workspace__owner")
         )
 
-    def create(self, request, slug, project_id):
-        members = request.data.get("members", [])
-
-        # get the project
-        project = Project.objects.get(pk=project_id, workspace__slug=slug)
-
-        if not len(members):
-            return Response(
-                {"error": "Atleast one member is required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-        bulk_project_members = []
-        bulk_issue_props = []
-
-        project_members = (
-            ProjectMember.objects.filter(
-                workspace__slug=slug,
-                member_id__in=[member.get("member_id") for member in members],
-            )
-            .values("member_id", "sort_order")
-            .order_by("sort_order")
-        )
-
-        for member in members:
-            sort_order = [
-                project_member.get("sort_order")
-                for project_member in project_members
-                if str(project_member.get("member_id")) == str(member.get("member_id"))
-            ]
-            bulk_project_members.append(
-                ProjectMember(
-                    member_id=member.get("member_id"),
-                    role=member.get("role", 10),
-                    project_id=project_id,
-                    workspace_id=project.workspace_id,
-                    sort_order=sort_order[0] - 10000 if len(sort_order) else 65535,
-                )
-            )
-            bulk_issue_props.append(
-                IssueProperty(
-                    user_id=member.get("member_id"),
-                    project_id=project_id,
-                    workspace_id=project.workspace_id,
-                )
-            )
-
-        project_members = ProjectMember.objects.bulk_create(
-            bulk_project_members,
-            batch_size=10,
-            ignore_conflicts=True,
-        )
-
-        _ = IssueProperty.objects.bulk_create(
-            bulk_issue_props, batch_size=10, ignore_conflicts=True
-        )
-
-        serializer = ProjectMemberSerializer(project_members, many=True)
-
-        return Response(serializer.data, status=status.HTTP_201_CREATED)
-
-    def list(self, request, slug, project_id):
-        project_member = ProjectMember.objects.get(
-            member=request.user, workspace__slug=slug, project_id=project_id
-        )
-
-        project_members = ProjectMember.objects.filter(
-            project_id=project_id,
-            workspace__slug=slug,
-            member__is_bot=False,
-        ).select_related("project", "member", "workspace")
-
-        if project_member.role > 10:
-            serializer = ProjectMemberAdminSerializer(project_members, many=True)
-        else:
-            serializer = ProjectMemberSerializer(project_members, many=True)
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
     def partial_update(self, request, slug, project_id, pk):
         project_member = ProjectMember.objects.get(
             pk=pk, workspace__slug=slug, project_id=project_id
@@ -644,6 +567,73 @@ class ProjectMemberViewSet(BaseViewSet):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
+class AddMemberToProjectEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectBasePermission,
+    ]
+
+    def post(self, request, slug, project_id):
+        members = request.data.get("members", [])
+
+        # get the project
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+
+        if not len(members):
+            return Response(
+                {"error": "Atleast one member is required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        bulk_project_members = []
+        bulk_issue_props = []
+
+        project_members = (
+            ProjectMember.objects.filter(
+                workspace__slug=slug,
+                member_id__in=[member.get("member_id") for member in members],
+            )
+            .values("member_id", "sort_order")
+            .order_by("sort_order")
+        )
+
+        for member in members:
+            sort_order = [
+                project_member.get("sort_order")
+                for project_member in project_members
+                if str(project_member.get("member_id"))
+                == str(member.get("member_id"))
+            ]
+            bulk_project_members.append(
+                ProjectMember(
+                    member_id=member.get("member_id"),
+                    role=member.get("role", 10),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                    sort_order=sort_order[0] - 10000 if len(sort_order) else 65535,
+                )
+            )
+            bulk_issue_props.append(
+                IssueProperty(
+                    user_id=member.get("member_id"),
+                    project_id=project_id,
+                    workspace_id=project.workspace_id,
+                )
+            )
+
+        project_members = ProjectMember.objects.bulk_create(
+            bulk_project_members,
+            batch_size=10,
+            ignore_conflicts=True,
+        )
+
+        _ = IssueProperty.objects.bulk_create(
+            bulk_issue_props, batch_size=10, ignore_conflicts=True
+        )
+
+        serializer = ProjectMemberSerializer(project_members, many=True)
+
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+
 class AddTeamToProjectEndpoint(BaseAPIView):
     permission_classes = [
         ProjectBasePermission,
@@ -943,6 +933,21 @@ class ProjectDeployBoardViewSet(BaseViewSet):
         return Response(serializer.data, status=status.HTTP_200_OK)
 
 
+class ProjectMemberEndpoint(BaseAPIView):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def get(self, request, slug, project_id):
+        project_members = ProjectMember.objects.filter(
+            project_id=project_id,
+            workspace__slug=slug,
+            member__is_bot=False,
+        ).select_related("project", "member", "workspace")
+        serializer = ProjectMemberSerializer(project_members, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+
 class ProjectDeployBoardPublicSettingsEndpoint(BaseAPIView):
     permission_classes = [
         AllowAny,

apiserver/plane/api/views/workspace.py

@@ -472,7 +472,7 @@ class WorkSpaceMemberViewSet(BaseViewSet):
     model = WorkspaceMember
 
     permission_classes = [
-        WorkspaceEntityPermission,
+        WorkSpaceAdminPermission,
     ]
 
     search_fields = [
@@ -489,25 +489,6 @@ class WorkSpaceMemberViewSet(BaseViewSet):
             .select_related("member")
         )
 
-    def list(self, request, slug):
-        workspace_member = WorkspaceMember.objects.get(
-            member=request.user, workspace__slug=slug
-        )
-
-        workspace_members = WorkspaceMember.objects.filter(
-            workspace__slug=slug,
-            member__is_bot=False,
-        ).select_related("workspace", "member")
-
-        if workspace_member.role > 10:
-            serializer = WorkspaceMemberAdminSerializer(workspace_members, many=True)
-        else:
-            serializer = WorkSpaceMemberSerializer(
-                workspace_members,
-                many=True,
-            )
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
     def partial_update(self, request, slug, pk):
         workspace_member = WorkspaceMember.objects.get(pk=pk, workspace__slug=slug)
         if request.user.id == workspace_member.member_id:
@@ -1271,6 +1252,20 @@ class WorkspaceLabelsEndpoint(BaseAPIView):
         return Response(labels, status=status.HTTP_200_OK)
 
 
+class WorkspaceMembersEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkspaceEntityPermission,
+    ]
+
+    def get(self, request, slug):
+        workspace_members = WorkspaceMember.objects.filter(
+            workspace__slug=slug,
+            member__is_bot=False,
+        ).select_related("workspace", "member")
+        serialzier = WorkSpaceMemberSerializer(workspace_members, many=True)
+        return Response(serialzier.data, status=status.HTTP_200_OK)
+
+
 class LeaveWorkspaceEndpoint(BaseAPIView):
     permission_classes = [
         WorkspaceEntityPermission,

apiserver/plane/bgtasks/issue_activites_task.py

@@ -82,7 +82,7 @@ def track_description(
         if (
             last_activity is not None
             and last_activity.field == "description"
-            and actor_id == str(last_activity.actor_id)
+            and actor_id == last_activity.actor_id
         ):
             last_activity.created_at = timezone.now()
             last_activity.save(update_fields=["created_at"])
@@ -276,7 +276,7 @@ def track_labels(
     issue_activities,
     epoch,
 ):
-    requested_labels = set([str(lab) for lab in requested_data.get("labels", [])])
+    requested_labels = set([str(lab) for lab in requested_data.get("labels_list", [])])
     current_labels = set([str(lab) for lab in current_instance.get("labels", [])])
 
     added_labels = requested_labels - current_labels
@@ -335,7 +335,7 @@ def track_assignees(
     epoch,
 ):
     requested_assignees = set(
-        [str(asg) for asg in requested_data.get("assignees", [])]
+        [str(asg) for asg in requested_data.get("assignees_list", [])]
     )
     current_assignees = set([str(asg) for asg in current_instance.get("assignees", [])])
 
@@ -523,8 +523,8 @@ def update_issue_activity(
         "description_html": track_description,
         "target_date": track_target_date,
         "start_date": track_start_date,
-        "labels": track_labels,
-        "assignees": track_assignees,
+        "labels_list": track_labels,
+        "assignees_list": track_assignees,
         "estimate_point": track_estimate_points,
         "archived_at": track_archive_at,
         "closed_to": track_closed_to,

apiserver/plane/utils/issue_filters.py

@@ -198,7 +198,7 @@ def filter_start_date(params, filter, method):
             date_filter(filter=filter, date_term="start_date", queries=start_dates)
     else:
         if params.get("start_date", None) and len(params.get("start_date")):
-            filter["start_date"] = params.get("start_date")
+            date_filter(filter=filter, date_term="start_date", queries=params.get("start_date", []))
     return filter
 
 
@@ -209,7 +209,7 @@ def filter_target_date(params, filter, method):
             date_filter(filter=filter, date_term="target_date", queries=target_dates)
     else:
         if params.get("target_date", None) and len(params.get("target_date")):
-            filter["target_date"] = params.get("target_date")
+            date_filter(filter=filter, date_term="target_date", queries=params.get("target_date", []))
     return filter
 
 

package.json

@@ -27,7 +27,7 @@
     "prettier": "latest",
     "prettier-plugin-tailwindcss": "^0.5.4",
     "tailwindcss": "^3.3.3",
-    "turbo": "^1.10.16"
+    "turbo": "^1.10.14"
   },
   "resolutions": {
     "@types/react": "18.2.0"

packages/editor/core/src/ui/extensions/image/image-resize.tsx

@@ -23,8 +23,8 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
         origin={false}
         edge={false}
         throttleDrag={0}
-        keepRatio
-        resizable
+        keepRatio={true}
+        resizable={true}
         throttleResize={0}
         onResize={({ target, width, height, delta }: any) => {
           delta[0] && (target!.style.width = `${width}px`);
@@ -33,7 +33,7 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
         onResizeEnd={() => {
           updateMediaSize();
         }}
-        scalable
+        scalable={true}
         renderDirections={["w", "e"]}
         onScale={({ target, transform }: any) => {
           target!.style.transform = transform;

packages/editor/core/src/ui/hooks/useEditor.tsx

@@ -1,23 +1,18 @@
 import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
-import {
-  useImperativeHandle,
-  useRef,
-  MutableRefObject,
-  useEffect,
-} from "react";
-import { DeleteImage } from "../../types/delete-image";
+import { useImperativeHandle, useRef, MutableRefObject } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { DeleteImage } from '../../types/delete-image';
 import { CoreEditorProps } from "../props";
 import { CoreEditorExtensions } from "../extensions";
-import { EditorProps } from "@tiptap/pm/view";
+import { EditorProps } from '@tiptap/pm/view';
 import { getTrimmedHTML } from "../../lib/utils";
 import { UploadImage } from "../../types/upload-image";
-import { useInitializedContent } from "./useInitializedContent";
+
+const DEBOUNCE_DELAY = 1500;
 
 interface CustomEditorProps {
   uploadFile: UploadImage;
-  setIsSubmitting?: (
-    isSubmitting: "submitting" | "submitted" | "saved",
-  ) => void;
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
   setShouldShowAlert?: (showAlert: boolean) => void;
   value: string;
   deleteFile: DeleteImage;
@@ -28,37 +23,25 @@ interface CustomEditorProps {
   forwardedRef?: any;
 }
 
-export const useEditor = ({
-  uploadFile,
-  deleteFile,
-  editorProps = {},
-  value,
-  extensions = [],
-  onChange,
-  setIsSubmitting,
-  forwardedRef,
-  setShouldShowAlert,
-}: CustomEditorProps) => {
-  const editor = useCustomEditor(
-    {
-      editorProps: {
-        ...CoreEditorProps(uploadFile, setIsSubmitting),
-        ...editorProps,
-      },
-      extensions: [...CoreEditorExtensions(deleteFile), ...extensions],
-      content:
-        typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
-      onUpdate: async ({ editor }) => {
-        // for instant feedback loop
-        setIsSubmitting?.("submitting");
-        setShouldShowAlert?.(true);
-        onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
-      },
+export const useEditor = ({ uploadFile, deleteFile, editorProps = {}, value, extensions = [], onChange, setIsSubmitting, debouncedUpdatesEnabled, forwardedRef, setShouldShowAlert, }: CustomEditorProps) => {
+  const editor = useCustomEditor({
+    editorProps: {
+      ...CoreEditorProps(uploadFile, setIsSubmitting),
+      ...editorProps,
     },
-    [],
-  );
-
-  useInitializedContent(editor, value);
+    extensions: [...CoreEditorExtensions(deleteFile), ...extensions],
+    content: (typeof value === "string" && value.trim() !== "") ? value : "<p></p>",
+    onUpdate: async ({ editor }) => {
+      // for instant feedback loop
+      setIsSubmitting?.("submitting");
+      setShouldShowAlert?.(true);
+      if (debouncedUpdatesEnabled) {
+        debouncedUpdates({ onChange: onChange, editor });
+      } else {
+        onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
+      }
+    },
+  });
 
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
   editorRef.current = editor;
@@ -72,6 +55,12 @@ export const useEditor = ({
     },
   }));
 
+  const debouncedUpdates = useDebouncedCallback(async ({ onChange, editor }) => {
+    if (onChange) {
+      onChange(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
+    }
+  }, DEBOUNCE_DELAY);
+
   if (!editor) {
     return null;
   }

packages/editor/core/src/ui/hooks/useInitializedContent.tsx

@@ -1,19 +0,0 @@
-import { Editor } from "@tiptap/react";
-import { useEffect, useRef } from "react";
-
-export const useInitializedContent = (editor: Editor | null, value: string) => {
-  const hasInitializedContent = useRef(false);
-
-  useEffect(() => {
-    if (editor) {
-      const cleanedValue =
-        typeof value === "string" && value.trim() !== "" ? value : "<p></p>";
-      if (cleanedValue !== "<p></p>" && !hasInitializedContent.current) {
-        editor.commands.setContent(cleanedValue);
-        hasInitializedContent.current = true;
-      } else if (cleanedValue === "<p></p>" && hasInitializedContent.current) {
-        hasInitializedContent.current = false;
-      }
-    }
-  }, [value, editor]);
-};

packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx

@@ -1,13 +1,8 @@
 import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
-import {
-  useImperativeHandle,
-  useRef,
-  MutableRefObject,
-  useEffect,
-} from "react";
+import { useImperativeHandle, useRef, MutableRefObject } from "react";
 import { CoreReadOnlyEditorExtensions } from "../../ui/read-only/extensions";
 import { CoreReadOnlyEditorProps } from "../../ui/read-only/props";
-import { EditorProps } from "@tiptap/pm/view";
+import { EditorProps } from '@tiptap/pm/view';
 
 interface CustomReadOnlyEditorProps {
   value: string;
@@ -16,16 +11,10 @@ interface CustomReadOnlyEditorProps {
   editorProps?: EditorProps;
 }
 
-export const useReadOnlyEditor = ({
-  value,
-  forwardedRef,
-  extensions = [],
-  editorProps = {},
-}: CustomReadOnlyEditorProps) => {
+export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editorProps = {} }: CustomReadOnlyEditorProps) => {
   const editor = useCustomEditor({
     editable: false,
-    content:
-      typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
+    content: (typeof value === "string" && value.trim() !== "") ? value : "<p></p>",
     editorProps: {
       ...CoreReadOnlyEditorProps,
       ...editorProps,
@@ -33,14 +22,6 @@ export const useReadOnlyEditor = ({
     extensions: [...CoreReadOnlyEditorExtensions, ...extensions],
   });
 
-  const hasIntiliazedContent = useRef(false);
-  useEffect(() => {
-    if (editor && !value && !hasIntiliazedContent.current) {
-      editor.commands.setContent(value);
-      hasIntiliazedContent.current = true;
-    }
-  }, [value]);
-
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
   editorRef.current = editor;
 
@@ -53,6 +34,7 @@ export const useReadOnlyEditor = ({
     },
   }));
 
+
   if (!editor) {
     return null;
   }

packages/editor/core/src/ui/plugins/delete-image.tsx

@@ -16,7 +16,7 @@ const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
   new Plugin({
     key: deleteKey,
     appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
-      const newImageSources = new Set<string>();
+      const newImageSources = new Set();
       newState.doc.descendants((node) => {
         if (node.type.name === IMAGE_NODE_TYPE) {
           newImageSources.add(node.attrs.src);

packages/editor/lite-text-editor/src/ui/extensions/custom-list-extension.tsx

@@ -0,0 +1,9 @@
+import ListItem from '@tiptap/extension-list-item'
+
+export const CustomListItem = ListItem.extend({
+  addKeyboardShortcuts() {
+    return {
+      'Shift-Enter': () => this.editor.chain().focus().splitListItem('listItem').run(),
+    }
+  },
+})

packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx

@@ -1,25 +1,16 @@
-import { Extension } from "@tiptap/core";
+import { Extension } from '@tiptap/core';
 
-export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
-  Extension.create({
-    name: "enterKey",
+export const EnterKeyExtension = (onEnterKeyPress?: () => void) => Extension.create({
+  name: 'enterKey',
 
-    addKeyboardShortcuts() {
-      return {
-        Enter: () => {
-          if (onEnterKeyPress) {
-            onEnterKeyPress();
-          }
-          return true;
-        },
-        "Shift-Enter": ({ editor }) =>
-          editor.commands.first(({ commands }) => [
-            () => commands.newlineInCode(),
-            () => commands.splitListItem("listItem"),
-            () => commands.createParagraphNear(),
-            () => commands.liftEmptyBlock(),
-            () => commands.splitBlock(),
-          ]),
-      };
-    },
-  });
+  addKeyboardShortcuts() {
+    return {
+      'Enter': () => {
+        if (onEnterKeyPress) {
+          onEnterKeyPress();
+        }
+        return true;
+      },
+    }
+  },
+});

packages/editor/lite-text-editor/src/ui/extensions/index.tsx

@@ -1,5 +1,7 @@
+import { CustomListItem } from "./custom-list-extension";
 import { EnterKeyExtension } from "./enter-key-extension";
 
 export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
+  CustomListItem,
   EnterKeyExtension(onEnterKeyPress),
 ];

packages/ui/package.json

@@ -10,13 +10,13 @@
     "dist/**"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
-    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
     "lint": "eslint src/",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
-    "@types/react-color": "^3.0.9",
+    "@types/react-color" : "^3.0.9",
     "@types/node": "^20.5.2",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",

packages/ui/src/avatar/avatar-group.tsx

@@ -1,85 +0,0 @@
-import React from "react";
-// ui
-import { Tooltip } from "../tooltip";
-// types
-import { TAvatarSize, getSizeInfo, isAValidNumber } from "./avatar";
-
-type Props = {
-  /**
-   * The children of the avatar group.
-   * These should ideally should be `Avatar` components
-   */
-  children: React.ReactNode;
-  /**
-   * The maximum number of avatars to display.
-   * If the number of children exceeds this value, the additional avatars will be replaced by a count of the remaining avatars.
-   * @default 2
-   */
-  max?: number;
-  /**
-   * Whether to show the tooltip or not
-   * @default true
-   */
-  showTooltip?: boolean;
-  /**
-   * The size of the avatars
-   * Possible values: "sm", "md", "base", "lg"
-   * @default "md"
-   */
-  size?: TAvatarSize;
-};
-
-export const AvatarGroup: React.FC<Props> = (props) => {
-  const { children, max = 2, showTooltip = true, size = "md" } = props;
-
-  // calculate total length of avatars inside the group
-  const totalAvatars = React.Children.toArray(children).length;
-
-  // slice the children to the maximum number of avatars
-  const avatars = React.Children.toArray(children).slice(0, max);
-
-  // assign the necessary props from the AvatarGroup component to the Avatar components
-  const avatarsWithUpdatedProps = avatars.map((avatar) => {
-    const updatedProps: Partial<Props> = {
-      showTooltip,
-      size,
-    };
-
-    return React.cloneElement(avatar as React.ReactElement, updatedProps);
-  });
-
-  // get size details based on the size prop
-  const sizeInfo = getSizeInfo(size);
-
-  return (
-    <div className={`flex ${sizeInfo.spacing}`}>
-      {avatarsWithUpdatedProps.map((avatar, index) => (
-        <div key={index} className="ring-1 ring-custom-border-200 rounded-full">
-          {avatar}
-        </div>
-      ))}
-      {max < totalAvatars && (
-        <Tooltip
-          tooltipContent={`${totalAvatars} total`}
-          disabled={!showTooltip}
-        >
-          <div
-            className={`${
-              !isAValidNumber(size) ? sizeInfo.avatarSize : ""
-            } ring-1 ring-custom-border-200 bg-custom-primary-500 text-white rounded-full grid place-items-center text-[9px]`}
-            style={
-              isAValidNumber(size)
-                ? {
-                    width: `${size}px`,
-                    height: `${size}px`,
-                  }
-                : {}
-            }
-          >
-            +{totalAvatars - max}
-          </div>
-        </Tooltip>
-      )}
-    </div>
-  );
-};

packages/ui/src/avatar/avatar.tsx

@@ -1,168 +0,0 @@
-import React from "react";
-// ui
-import { Tooltip } from "../tooltip";
-
-export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
-
-type Props = {
-  /**
-   * The name of the avatar which will be displayed on the tooltip
-   */
-  name?: string;
-  /**
-   * The background color if the avatar image fails to load
-   */
-  fallbackBackgroundColor?: string;
-  /**
-   * The text to display if the avatar image fails to load
-   */
-  fallbackText?: string;
-  /**
-   * The text color if the avatar image fails to load
-   */
-  fallbackTextColor?: string;
-  /**
-   * Whether to show the tooltip or not
-   * @default true
-   */
-  showTooltip?: boolean;
-  /**
-   * The size of the avatars
-   * Possible values: "sm", "md", "base", "lg"
-   * @default "md"
-   */
-  size?: TAvatarSize;
-  /**
-   * The shape of the avatar
-   * Possible values: "circle", "square"
-   * @default "circle"
-   */
-  shape?: "circle" | "square";
-  /**
-   * The source of the avatar image
-   */
-  src?: string;
-};
-
-/**
- * Get the size details based on the size prop
- * @param size The size of the avatar
- * @returns The size details
- */
-export const getSizeInfo = (size: TAvatarSize) => {
-  switch (size) {
-    case "sm":
-      return {
-        avatarSize: "h-4 w-4",
-        fontSize: "text-xs",
-        spacing: "-space-x-1",
-      };
-    case "md":
-      return {
-        avatarSize: "h-5 w-5",
-        fontSize: "text-xs",
-        spacing: "-space-x-1",
-      };
-    case "base":
-      return {
-        avatarSize: "h-6 w-6",
-        fontSize: "text-sm",
-        spacing: "-space-x-1.5",
-      };
-    case "lg":
-      return {
-        avatarSize: "h-7 w-7",
-        fontSize: "text-sm",
-        spacing: "-space-x-1.5",
-      };
-    default:
-      return {
-        avatarSize: "h-5 w-5",
-        fontSize: "text-xs",
-        spacing: "-space-x-1",
-      };
-  }
-};
-
-/**
- * Get the border radius based on the shape prop
- * @param shape The shape of the avatar
- * @returns The border radius
- */
-export const getBorderRadius = (shape: "circle" | "square") => {
-  switch (shape) {
-    case "circle":
-      return "rounded-full";
-    case "square":
-      return "rounded-md";
-    default:
-      return "rounded-full";
-  }
-};
-
-/**
- * Check if the value is a valid number
- * @param value The value to check
- * @returns Whether the value is a valid number or not
- */
-export const isAValidNumber = (value: any) => {
-  return typeof value === "number" && !isNaN(value);
-};
-
-export const Avatar: React.FC<Props> = (props) => {
-  const {
-    name,
-    fallbackBackgroundColor,
-    fallbackText,
-    fallbackTextColor,
-    showTooltip = true,
-    size = "md",
-    shape = "circle",
-    src,
-  } = props;
-
-  // get size details based on the size prop
-  const sizeInfo = getSizeInfo(size);
-
-  return (
-    <Tooltip
-      tooltipContent={fallbackText ?? name ?? "?"}
-      disabled={!showTooltip}
-    >
-      <div
-        className={`${
-          !isAValidNumber(size) ? sizeInfo.avatarSize : ""
-        } overflow-hidden grid place-items-center ${getBorderRadius(shape)}`}
-        style={
-          isAValidNumber(size)
-            ? {
-                height: `${size}px`,
-                width: `${size}px`,
-              }
-            : {}
-        }
-      >
-        {src ? (
-          <img
-            src={src}
-            className={`h-full w-full ${getBorderRadius(shape)}`}
-            alt={name}
-          />
-        ) : (
-          <div
-            className={`${
-              sizeInfo.fontSize
-            } grid place-items-center h-full w-full ${getBorderRadius(shape)}`}
-            style={{
-              backgroundColor:
-                fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
-              color: fallbackTextColor ?? "#ffffff",
-            }}
-          >
-            {name ? name[0].toUpperCase() : fallbackText ?? "?"}
-          </div>
-        )}
-      </div>
-    </Tooltip>
-  );
-};

packages/ui/src/avatar/index.ts

@@ -1,2 +0,0 @@
-export * from "./avatar-group";
-export * from "./avatar";

packages/ui/src/dropdowns/helper.tsx

@@ -1,4 +1,3 @@
-// FIXME: fix this!!!
 import { Placement } from "@blueprintjs/popover2";
 
 export interface IDropdownProps {

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

@@ -11,14 +11,12 @@ export interface InputColorPickerProps {
   value: string | undefined;
   onChange: (value: string) => void;
   name: string;
-  className?: string;
-  style?: React.CSSProperties;
+  className: string;
   placeholder: string;
 }
 
 export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
-  const { value, hasError, onChange, name, className, style, placeholder } =
-    props;
+  const { value, hasError, onChange, name, className, placeholder } = props;
 
   const [referenceElement, setReferenceElement] =
     React.useState<HTMLButtonElement | null>(null);
@@ -34,12 +32,12 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
     onChange(hex);
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(e.target.value);
+  const handleInputChange = (value: any) => {
+    onChange(value);
   };
 
   return (
-    <div className="relative">
+    <div className="flex items-center justify-between rounded border border-custom-border-200 px-1">
       <Input
         id={name}
         name={name}
@@ -48,14 +46,10 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
         onChange={handleInputChange}
         hasError={hasError}
         placeholder={placeholder}
-        className={`border-[0.5px] border-custom-border-200 ${className}`}
-        style={style}
+        className={`border-none ${className}`}
       />
 
-      <Popover
-        as="div"
-        className="absolute top-1/2 -translate-y-1/2 right-1 z-10"
-      >
+      <Popover as="div">
         {({ open }) => {
           if (open) {
           }
@@ -66,26 +60,26 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
                   ref={setReferenceElement}
                   variant="neutral-primary"
                   size="sm"
-                  className="border-none !bg-transparent"
+                  className="border-none !p-1.5"
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="14"
-                    height="14"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    className="lucide lucide-palette"
-                  >
-                    <circle cx="13.5" cy="6.5" r=".5" />
-                    <circle cx="17.5" cy="10.5" r=".5" />
-                    <circle cx="8.5" cy="7.5" r=".5" />
-                    <circle cx="6.5" cy="12.5" r=".5" />
-                    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
-                  </svg>
+                  {value && value !== "" ? (
+                    <span
+                      className="h-3.5 w-3.5 rounded"
+                      style={{
+                        backgroundColor: `${value}`,
+                      }}
+                    />
+                  ) : (
+                    <svg
+                      width={14}
+                      height={14}
+                      viewBox="0 0 14 14"
+                      stroke="currentColor"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="M0.8125 13.7508C0.65 13.7508 0.515625 13.6977 0.409375 13.5914C0.303125 13.4852 0.25 13.3508 0.25 13.1883V10.8258C0.25 10.7508 0.2625 10.682 0.2875 10.6195C0.3125 10.557 0.35625 10.4945 0.41875 10.432L7.31875 3.53203L6.34375 2.55703C6.24375 2.45703 6.19688 2.32891 6.20312 2.17266C6.20938 2.01641 6.2625 1.88828 6.3625 1.78828C6.4625 1.68828 6.59063 1.63828 6.74688 1.63828C6.90313 1.63828 7.03125 1.68828 7.13125 1.78828L8.4625 3.13828L11.125 0.475781C11.2625 0.338281 11.4094 0.269531 11.5656 0.269531C11.7219 0.269531 11.8688 0.338281 12.0063 0.475781L13.525 1.99453C13.6625 2.13203 13.7313 2.27891 13.7313 2.43516C13.7313 2.59141 13.6625 2.73828 13.525 2.87578L10.8625 5.53828L12.2125 6.88828C12.3125 6.98828 12.3625 7.11328 12.3625 7.26328C12.3625 7.41328 12.3125 7.53828 12.2125 7.63828C12.1125 7.73828 11.9844 7.78828 11.8281 7.78828C11.6719 7.78828 11.5438 7.73828 11.4438 7.63828L10.4688 6.68203L3.56875 13.582C3.50625 13.6445 3.44375 13.6883 3.38125 13.7133C3.31875 13.7383 3.25 13.7508 3.175 13.7508H0.8125ZM1.375 12.6258H3.00625L9.6625 5.96953L8.03125 4.33828L1.375 10.9945V12.6258ZM10.0563 4.75078L12.3813 2.42578L11.575 1.61953L9.25 3.94453L10.0563 4.75078Z" />
+                    </svg>
+                  )}
                 </Button>
               </Popover.Button>
               <Transition

packages/ui/src/icons/contrast-icon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ISvgIcons } from "../type";
+import { ISvgIcons } from "./type";
 
 export const ContrastIcon: React.FC<ISvgIcons> = ({
   className = "text-current",

packages/ui/src/icons/cycle/circle-dot-full-icon.tsx

@@ -1,20 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "../type";
-
-export const CircleDotFullIcon: React.FC<ISvgIcons> = ({
-  className = "text-current",
-  ...rest
-}) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <circle cx="8.33333" cy="8.33333" r="5.33333" stroke-linecap="round" />
-    <circle cx="8.33333" cy="8.33333" r="4.33333" fill="currentColor" />
-  </svg>
-);

packages/ui/src/icons/cycle/cycle-group-icon.tsx

@@ -1,33 +0,0 @@
-import * as React from "react";
-
-import { ContrastIcon } from "./contrast-icon";
-import { CircleDotFullIcon } from "./circle-dot-full-icon";
-import { CircleDotDashed, Circle } from "lucide-react";
-
-import { CYCLE_GROUP_COLORS, ICycleGroupIcon } from "./helper";
-
-const iconComponents = {
-  current: ContrastIcon,
-  upcoming: CircleDotDashed,
-  completed: CircleDotFullIcon,
-  draft: Circle,
-};
-
-export const CycleGroupIcon: React.FC<ICycleGroupIcon> = ({
-  className = "",
-  color,
-  cycleGroup,
-  height = "12px",
-  width = "12px",
-}) => {
-  const CycleIconComponent = iconComponents[cycleGroup] || ContrastIcon;
-
-  return (
-    <CycleIconComponent
-      height={height}
-      width={width}
-      color={color ?? CYCLE_GROUP_COLORS[cycleGroup]}
-      className={`flex-shrink-0 ${className}`}
-    />
-  );
-};

packages/ui/src/icons/cycle/helper.tsx

@@ -1,18 +0,0 @@
-export interface ICycleGroupIcon {
-  className?: string;
-  color?: string;
-  cycleGroup: TCycleGroups;
-  height?: string;
-  width?: string;
-}
-
-export type TCycleGroups = "current" | "upcoming" | "completed" | "draft";
-
-export const CYCLE_GROUP_COLORS: {
-  [key in TCycleGroups]: string;
-} = {
-  current: "#F59E0B",
-  upcoming: "#3F76FF",
-  completed: "#16A34A",
-  draft: "#525252",
-};

packages/ui/src/icons/cycle/index.ts

@@ -1,5 +0,0 @@
-export * from "./double-circle-icon";
-export * from "./circle-dot-full-icon";
-export * from "./contrast-icon";
-export * from "./circle-dot-full-icon";
-export * from "./cycle-group-icon";

packages/ui/src/icons/double-circle-icon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { ISvgIcons } from "../type";
+import { ISvgIcons } from "./type";
 
 export const DoubleCircleIcon: React.FC<ISvgIcons> = ({
   className = "text-current",

packages/ui/src/icons/index.tsx

@@ -1,4 +1,5 @@
 export * from "./user-group-icon";
+export * from "./contrast-icon";
 export * from "./dice-icon";
 export * from "./layers-icon";
 export * from "./photo-filter-icon";
@@ -6,6 +7,7 @@ export * from "./archive-icon";
 export * from "./admin-profile-icon";
 export * from "./create-icon";
 export * from "./subscribe-icon";
+export * from "./double-circle-icon";
 export * from "./external-link-icon";
 export * from "./copy-icon";
 export * from "./layer-stack";
@@ -18,7 +20,6 @@ export * from "./blocked-icon";
 export * from "./blocker-icon";
 export * from "./related-icon";
 export * from "./module";
-export * from "./cycle";
 export * from "./github-icon";
 export * from "./discord-icon";
 export * from "./transfer-icon";

packages/ui/src/index.tsx

@@ -1,10 +1,9 @@
-export * from "./avatar";
-export * from "./breadcrumbs";
 export * from "./button";
-export * from "./dropdowns";
 export * from "./form-fields";
-export * from "./icons";
 export * from "./progress";
 export * from "./spinners";
-export * from "./tooltip";
 export * from "./loader";
+export * from "./tooltip";
+export * from "./icons";
+export * from "./breadcrumbs";
+export * from "./dropdowns";

web/components/account/email-password-form.tsx

@@ -12,10 +12,20 @@ export interface EmailPasswordFormValues {
 
 export interface IEmailPasswordForm {
   onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+  buttonText?: string;
+  submittingButtonText?: string;
+  withForgetPassword?: boolean;
+  withSignUpLink?: boolean;
 }
 
 export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
-  const { onSubmit } = props;
+  const {
+    onSubmit,
+    buttonText = "Sign in",
+    submittingButtonText = "Signing in...",
+    withForgetPassword = false,
+    withSignUpLink = false,
+  } = props;
   // router
   const router = useRouter();
   // form info
@@ -82,15 +92,17 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
             )}
           />
         </div>
-        <div className="text-right text-xs">
-          <button
-            type="button"
-            onClick={() => router.push("/accounts/forgot-password")}
-            className="text-custom-text-200 hover:text-custom-primary-100"
-          >
-            Forgot your password?
-          </button>
-        </div>
+        {withForgetPassword && (
+          <div className="text-right text-xs">
+            <button
+              type="button"
+              onClick={() => router.push("/accounts/forgot-password")}
+              className="text-custom-text-200 hover:text-custom-primary-100"
+            >
+              Forgot your password?
+            </button>
+          </div>
+        )}
         <div>
           <Button
             variant="primary"
@@ -100,18 +112,20 @@ export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >
-            {isSubmitting ? "Signing in..." : "Sign in"}
+            {isSubmitting ? submittingButtonText : buttonText}
           </Button>
         </div>
-        <div className="text-xs">
-          <button
-            type="button"
-            onClick={() => router.push("/accounts/sign-up")}
-            className="text-custom-text-200 hover:text-custom-primary-100"
-          >
-            {"Don't have an account? Sign Up"}
-          </button>
-        </div>
+        {withSignUpLink && (
+          <div className="text-xs">
+            <button
+              type="button"
+              onClick={() => router.push("/accounts/sign-up")}
+              className="text-custom-text-200 hover:text-custom-primary-100"
+            >
+              {"Don't have an account? Sign Up"}
+            </button>
+          </div>
+        )}
       </form>
     </>
   );

web/components/account/email-signup-form.tsx

@@ -4,7 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, Input } from "@plane/ui";
 // types
-type EmailPasswordFormValues = {
+export type EmailPasswordSignUpFormValues = {
   email: string;
   password?: string;
   confirm_password: string;
@@ -12,7 +12,7 @@ type EmailPasswordFormValues = {
 };
 
 type Props = {
-  onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
+  onSubmit: (formData: EmailPasswordSignUpFormValues) => Promise<void>;
 };
 
 export const EmailSignUpForm: React.FC<Props> = (props) => {
@@ -23,7 +23,7 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
     control,
     watch,
     formState: { errors, isSubmitting, isValid, isDirty },
-  } = useForm<EmailPasswordFormValues>({
+  } = useForm<EmailPasswordSignUpFormValues>({
     defaultValues: {
       email: "",
       password: "",

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

@@ -144,7 +144,7 @@ export const CommandModal: React.FC<Props> = (props) => {
     } else {
       updatedAssignees.push(assignee);
     }
-    updateIssue({ assignees: updatedAssignees });
+    updateIssue({ assignees_list: updatedAssignees });
   };
 
   const redirect = (path: string) => {

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

@@ -9,7 +9,7 @@ import useProjectMembers from "hooks/use-project-members";
 // constants
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 // ui
-import { Avatar } from "@plane/ui";
+import { Avatar } from "components/ui";
 // icons
 import { Check } from "lucide-react";
 // types
@@ -31,13 +31,13 @@ export const ChangeIssueAssignee: FC<Props> = ({ setIsPaletteOpen, issue, user }
   const { members } = useProjectMembers(workspaceSlug as string, projectId as string);
 
   const options =
-    members?.map(({ member }) => ({
+    members?.map(({ member }: any) => ({
       value: member.id,
       query: member.display_name,
       content: (
         <>
           <div className="flex items-center gap-2">
-            <Avatar name={member.display_name} src={member.avatar} showTooltip={false} />
+            <Avatar user={member} />
             {member.display_name}
           </div>
           {issue.assignees.includes(member.id) && (
@@ -79,7 +79,7 @@ export const ChangeIssueAssignee: FC<Props> = ({ setIsPaletteOpen, issue, user }
   );
 
   const handleIssueAssignees = (assignee: string) => {
-    const updatedAssignees = issue.assignees ?? [];
+    const updatedAssignees = issue.assignees_list ?? [];
 
     if (updatedAssignees.includes(assignee)) {
       updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
@@ -87,7 +87,7 @@ export const ChangeIssueAssignee: FC<Props> = ({ setIsPaletteOpen, issue, user }
       updatedAssignees.push(assignee);
     }
 
-    updateIssue({ assignees: updatedAssignees });
+    updateIssue({ assignees_list: updatedAssignees });
     setIsPaletteOpen(false);
   };
 

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

@@ -1,14 +1,18 @@
 import React from "react";
-import { X } from "lucide-react";
+
+// icons
+import { PriorityIcon, StateGroupIcon } from "@plane/ui";
 // ui
-import { Avatar, PriorityIcon, StateGroupIcon } from "@plane/ui";
+import { Avatar } from "components/ui";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
+import { X } from "lucide-react";
 
 type Props = {
   filters: Partial<IIssueFilterOptions>;
@@ -145,7 +149,7 @@ export const FiltersList: React.FC<Props> = ({ filters, setFilters, clearAllFilt
                             key={memberId}
                             className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1"
                           >
-                            <Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} />
+                            <Avatar user={member} />
                             <span>{member?.display_name}</span>
                             <span
                               className="cursor-pointer"
@@ -169,7 +173,7 @@ export const FiltersList: React.FC<Props> = ({ filters, setFilters, clearAllFilt
                             key={`${memberId}-${key}`}
                             className="inline-flex items-center gap-x-1 rounded-full bg-custom-background-90 px-1 capitalize"
                           >
-                            <Avatar name={member?.display_name} src={member?.avatar} />
+                            <Avatar user={member} />
                             <span>{member?.display_name}</span>
                             <span
                               className="cursor-pointer"

web/components/core/filters/index.ts

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

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

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

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

@@ -10,9 +10,10 @@ import useIssuesView from "hooks/use-issues-view";
 import emptyLabel from "public/empty-state/empty_label.svg";
 import emptyMembers from "public/empty-state/empty_members.svg";
 // components
+import { StateGroupIcon } from "@plane/ui";
 import { SingleProgressStats } from "components/core";
 // ui
-import { Avatar, StateGroupIcon } from "@plane/ui";
+import { Avatar } from "components/ui";
 // types
 import {
   IModule,
@@ -35,7 +36,7 @@ type Props = {
   module?: IModule;
   roundedTab?: boolean;
   noBackground?: boolean;
-  isPeekView?: boolean;
+  isPeekModuleDetails?: boolean;
 };
 
 export const SidebarProgressStats: React.FC<Props> = ({
@@ -45,7 +46,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
   module,
   roundedTab,
   noBackground,
-  isPeekView = false,
+  isPeekModuleDetails = false,
 }) => {
   const { filters, setFilters } = useIssuesView();
 
@@ -137,13 +138,23 @@ export const SidebarProgressStats: React.FC<Props> = ({
                     key={assignee.assignee_id}
                     title={
                       <div className="flex items-center gap-2">
-                        <Avatar name={assignee.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
+                        <Avatar
+                          user={{
+                            id: assignee.assignee_id,
+                            avatar: assignee.avatar ?? "",
+                            first_name: assignee.first_name ?? "",
+                            last_name: assignee.last_name ?? "",
+                            display_name: assignee.display_name ?? "",
+                          }}
+                          height="18px"
+                          width="18px"
+                        />
                         <span>{assignee.display_name}</span>
                       </div>
                     }
                     completed={assignee.completed_issues}
                     total={assignee.total_issues}
-                    {...(!isPeekView && {
+                    {...(!isPeekModuleDetails && {
                       onClick: () => {
                         if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
                           setFilters({
@@ -202,7 +213,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
                 }
                 completed={label.completed_issues}
                 total={label.total_issues}
-                {...(!isPeekView && {
+                {...(!isPeekModuleDetails && {
                   onClick: () => {
                     if (filters.labels?.includes(label.label_id ?? ""))
                       setFilters({

web/components/core/theme/custom-theme-selector.tsx

@@ -1,40 +1,27 @@
-import { observer } from "mobx-react-lite";
-import { Controller, useForm } from "react-hook-form";
+import { FC } from "react";
 import { useTheme } from "next-themes";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+import { Controller, useForm } from "react-hook-form";
 // ui
 import { Button, InputColorPicker } from "@plane/ui";
 // types
 import { IUserTheme } from "types";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 
-const inputRules = {
-  required: "Background color is required",
-  minLength: {
-    value: 7,
-    message: "Enter a valid hex code of 6 characters",
-  },
-  maxLength: {
-    value: 7,
-    message: "Enter a valid hex code of 6 characters",
-  },
-  pattern: {
-    value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
-    message: "Enter a valid hex code of 6 characters",
-  },
-};
+type Props = {};
 
-export const CustomThemeSelector: React.FC = observer(() => {
+export const CustomThemeSelector: FC<Props> = observer(() => {
   const { user: userStore } = useMobxStore();
   const userTheme = userStore?.currentUser?.theme;
   // hooks
   const { setTheme } = useTheme();
 
   const {
-    control,
     formState: { errors, isSubmitting },
     handleSubmit,
-    watch,
+    control,
   } = useForm<IUserTheme>({
     defaultValues: {
       background: userTheme?.background !== "" ? userTheme?.background : "#0d101b",
@@ -64,151 +51,100 @@ export const CustomThemeSelector: React.FC = observer(() => {
     return userStore.updateCurrentUser({ theme: payload });
   };
 
-  const handleValueChange = (val: string | undefined, onChange: any) => {
-    let hex = val;
-
-    // prepend a hashtag if it doesn't exist
-    if (val && val[0] !== "#") hex = `#${val}`;
-
-    onChange(hex);
-  };
-
   return (
     <form onSubmit={handleSubmit(handleUpdateTheme)}>
       <div className="space-y-5">
         <h3 className="text-lg font-semibold text-custom-text-100">Customize your theme</h3>
         <div className="space-y-4">
-          <div className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
+          <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
             <div className="flex flex-col items-start gap-2">
               <h3 className="text-left text-sm font-medium text-custom-text-200">Background color</h3>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="background"
-                  rules={inputRules}
-                  render={({ field: { value, onChange } }) => (
-                    <InputColorPicker
-                      name="background"
-                      value={value}
-                      onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#0d101b"
-                      className="w-full"
-                      style={{
-                        backgroundColor: value,
-                        color: watch("text"),
-                      }}
-                      hasError={Boolean(errors?.background)}
-                    />
-                  )}
-                />
-                {errors.background && <p className="text-xs text-red-500 mt-1">{errors.background.message}</p>}
-              </div>
+              <Controller
+                control={control}
+                name="background"
+                render={({ field: { value, onChange } }) => (
+                  <InputColorPicker
+                    name="background"
+                    value={value}
+                    onChange={onChange}
+                    className=""
+                    placeholder="#ffffff"
+                    hasError={Boolean(errors?.background)}
+                  />
+                )}
+              />
             </div>
 
             <div className="flex flex-col items-start gap-2">
               <h3 className="text-left text-sm font-medium text-custom-text-200">Text color</h3>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="text"
-                  rules={inputRules}
-                  render={({ field: { value, onChange } }) => (
-                    <InputColorPicker
-                      name="text"
-                      value={value}
-                      onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#c5c5c5"
-                      className="w-full"
-                      style={{
-                        backgroundColor: watch("background"),
-                        color: value,
-                      }}
-                      hasError={Boolean(errors?.text)}
-                    />
-                  )}
-                />
-                {errors.text && <p className="text-xs text-red-500 mt-1">{errors.text.message}</p>}
-              </div>
+              <Controller
+                control={control}
+                name="text"
+                render={({ field: { value, onChange } }) => (
+                  <InputColorPicker
+                    name="text"
+                    value={value}
+                    onChange={onChange}
+                    className=""
+                    placeholder="#ffffff"
+                    hasError={Boolean(errors?.text)}
+                  />
+                )}
+              />
             </div>
 
             <div className="flex flex-col items-start gap-2">
               <h3 className="text-left text-sm font-medium text-custom-text-200">Primary(Theme) color</h3>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="primary"
-                  rules={inputRules}
-                  render={({ field: { value, onChange } }) => (
-                    <InputColorPicker
-                      name="primary"
-                      value={value}
-                      onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#3f76ff"
-                      className="w-full"
-                      style={{
-                        backgroundColor: value,
-                        color: watch("text"),
-                      }}
-                      hasError={Boolean(errors?.primary)}
-                    />
-                  )}
-                />
-                {errors.primary && <p className="text-xs text-red-500 mt-1">{errors.primary.message}</p>}
-              </div>
+              <Controller
+                control={control}
+                name="primary"
+                render={({ field: { value, onChange } }) => (
+                  <InputColorPicker
+                    name="primary"
+                    value={value}
+                    onChange={onChange}
+                    className=""
+                    placeholder="#ffffff"
+                    hasError={Boolean(errors?.primary)}
+                  />
+                )}
+              />
             </div>
 
             <div className="flex flex-col items-start gap-2">
               <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar background color</h3>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="sidebarBackground"
-                  rules={inputRules}
-                  render={({ field: { value, onChange } }) => (
-                    <InputColorPicker
-                      name="sidebarBackground"
-                      value={value}
-                      onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#0d101b"
-                      className="w-full"
-                      style={{
-                        backgroundColor: value,
-                        color: watch("sidebarText"),
-                      }}
-                      hasError={Boolean(errors?.sidebarBackground)}
-                    />
-                  )}
-                />
-                {errors.sidebarBackground && (
-                  <p className="text-xs text-red-500 mt-1">{errors.sidebarBackground.message}</p>
+              <Controller
+                control={control}
+                name="sidebarBackground"
+                render={({ field: { value, onChange } }) => (
+                  <InputColorPicker
+                    name="sidebarBackground"
+                    value={value}
+                    onChange={onChange}
+                    className=""
+                    placeholder="#ffffff"
+                    hasError={Boolean(errors?.sidebarBackground)}
+                  />
                 )}
-              </div>
+              />
             </div>
 
             <div className="flex flex-col items-start gap-2">
               <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar text color</h3>
-              <div className="w-full">
-                <Controller
-                  control={control}
-                  name="sidebarText"
-                  rules={inputRules}
-                  render={({ field: { value, onChange } }) => (
-                    <InputColorPicker
-                      name="sidebarText"
-                      value={value}
-                      onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#c5c5c5"
-                      className="w-full"
-                      style={{
-                        backgroundColor: watch("sidebarBackground"),
-                        color: value,
-                      }}
-                      hasError={Boolean(errors?.sidebarText)}
-                    />
-                  )}
-                />
-                {errors.sidebarText && <p className="text-xs text-red-500 mt-1">{errors.sidebarText.message}</p>}
-              </div>
+              <Controller
+                control={control}
+                name="sidebarText"
+                render={({ field: { value, onChange } }) => (
+                  <InputColorPicker
+                    name="sidebarText"
+                    value={value}
+                    onChange={onChange}
+                    className=""
+                    placeholder="#ffffff"
+                    hasError={Boolean(errors?.sidebarText)}
+                  />
+                )}
+              />
             </div>
           </div>
         </div>

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

@@ -198,7 +198,8 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
 
         if (onSuccess) await onSuccess(res);
 
-        if (formData.assignees?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE(workspaceSlug as string));
+        if (formData.assignees_list?.some((assignee) => assignee === user?.id))
+          mutate(USER_ISSUE(workspaceSlug as string));
 
         if (formData.parent && formData.parent !== "") mutate(SUB_ISSUES(formData.parent));
       })

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

@@ -1,14 +1,16 @@
 import { MouseEvent } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
+// services
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
+import { AssigneesList } from "components/ui/avatar";
 import { SingleProgressStats } from "components/core";
 import {
-  AvatarGroup,
   Loader,
   Tooltip,
   LinearProgressIndicator,
@@ -17,7 +19,6 @@ import {
   LayersIcon,
   StateGroupIcon,
   PriorityIcon,
-  Avatar,
 } from "@plane/ui";
 // components
 import ProgressChart from "components/core/sidebar/progress-chart";
@@ -30,7 +31,9 @@ import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } fro
 import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
-import { ICycle } from "types";
+import { ICycle, IIssue } from "types";
+// fetch-keys
+import { CURRENT_CYCLE_LIST, CYCLES_LIST, CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
 
 const stateGroups = [
   {
@@ -66,6 +69,9 @@ interface IActiveCycleDetails {
 }
 
 export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
+  // services
+  const cycleService = new CycleService();
+
   const router = useRouter();
 
   const { workspaceSlug, projectId } = props;
@@ -300,11 +306,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
 
                 {cycle.assignees.length > 0 && (
                   <div className="flex items-center gap-1 text-custom-text-200">
-                    <AvatarGroup>
-                      {cycle.assignees.map((assignee) => (
-                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
-                      ))}
-                    </AvatarGroup>
+                    <AssigneesList users={cycle.assignees} length={4} />
                   </div>
                 )}
               </div>
@@ -404,11 +406,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
                         <div className={`flex items-center gap-2 text-custom-text-200`}>
                           {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
                             <div className="-my-0.5 flex items-center justify-center gap-2">
-                              <AvatarGroup showTooltip={false}>
-                                {issue.assignee_details.map((assignee: any) => (
-                                  <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
-                                ))}
-                              </AvatarGroup>
+                              <AssigneesList users={issue.assignee_details} length={3} showLength={false} />
                             </div>
                           ) : (
                             ""

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

@@ -1,14 +1,16 @@
 import React, { Fragment } from "react";
+
+// headless ui
 import { Tab } from "@headlessui/react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
-import { Avatar } from "@plane/ui";
+import { Avatar } from "components/ui";
 // types
 import { ICycle } from "types";
-
+// types
 type Props = {
   cycle: ICycle;
 };
@@ -69,7 +71,10 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
       </Tab.List>
       {cycle.total_issues > 0 ? (
         <Tab.Panels as={Fragment}>
-          <Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
+          <Tab.Panel
+            as="div"
+            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
+          >
             {cycle.distribution.assignees.map((assignee, index) => {
               if (assignee.assignee_id)
                 return (
@@ -77,8 +82,15 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     key={assignee.assignee_id}
                     title={
                       <div className="flex items-center gap-2">
-                        <Avatar name={assignee?.display_name ?? undefined} src={assignee?.avatar ?? undefined} />
-
+                        <Avatar
+                          user={{
+                            id: assignee.assignee_id,
+                            avatar: assignee.avatar ?? "",
+                            first_name: assignee.first_name ?? "",
+                            last_name: assignee.last_name ?? "",
+                            display_name: assignee.display_name ?? "",
+                          }}
+                        />
                         <span>{assignee.display_name}</span>
                       </div>
                     }
@@ -93,7 +105,13 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                     title={
                       <div className="flex items-center gap-2">
                         <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
-                          <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
+                          <img
+                            src="/user.png"
+                            height="100%"
+                            width="100%"
+                            className="rounded-full"
+                            alt="User"
+                          />
                         </div>
                         <span>No assignee</span>
                       </div>
@@ -104,7 +122,10 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
                 );
             })}
           </Tab.Panel>
-          <Tab.Panel as="div" className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4">
+          <Tab.Panel
+            as="div"
+            className="w-full gap-1 overflow-y-scroll items-center text-custom-text-200 p-4"
+          >
             {cycle.distribution.labels.map((label, index) => (
               <SingleProgressStats
                 key={label.label_id ?? `no-label-${index}`}

web/components/cycles/cycle-peek-overview.tsx

@@ -1,55 +0,0 @@
-import React, { useEffect } from "react";
-
-import { useRouter } from "next/router";
-
-// mobx
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// components
-import { CycleDetailsSidebar } from "./sidebar";
-
-type Props = {
-  projectId: string;
-  workspaceSlug: string;
-};
-
-export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
-  const router = useRouter();
-  const { peekCycle } = router.query;
-
-  const ref = React.useRef(null);
-
-  const { cycle: cycleStore } = useMobxStore();
-
-  const { fetchCycleWithId } = cycleStore;
-
-  const handleClose = () => {
-    delete router.query.peekCycle;
-    router.push({
-      pathname: router.pathname,
-      query: { ...router.query },
-    });
-  };
-
-  useEffect(() => {
-    if (!peekCycle) return;
-    fetchCycleWithId(workspaceSlug, projectId, peekCycle.toString());
-  }, [fetchCycleWithId, peekCycle, projectId, workspaceSlug]);
-
-  return (
-    <>
-      {peekCycle && (
-        <div
-          ref={ref}
-          className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
-          style={{
-            boxShadow:
-              "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
-          }}
-        >
-          <CycleDetailsSidebar cycleId={peekCycle?.toString() ?? ""} handleClose={handleClose} />
-        </div>
-      )}
-    </>
-  );
-});

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

@@ -1,28 +1,64 @@
 import { FC, MouseEvent, useState } from "react";
-import { useRouter } from "next/router";
+// next imports
 import Link from "next/link";
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
 // hooks
 import useToast from "hooks/use-toast";
 // components
+import { SingleProgressStats } from "components/core";
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
 // ui
-import { Avatar, AvatarGroup, CustomMenu, Tooltip, LayersIcon, CycleGroupIcon } from "@plane/ui";
+import { AssigneesList } from "components/ui/avatar";
+import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 // icons
-import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
-// helpers
 import {
-  getDateRangeStatus,
-  findHowManyDaysLeft,
-  renderShortDate,
-  renderShortMonthDate,
-} from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
+  AlarmClock,
+  AlertTriangle,
+  ArrowRight,
+  CalendarDays,
+  ChevronDown,
+  LinkIcon,
+  Pencil,
+  Star,
+  Target,
+  Trash2,
+} from "lucide-react";
+// helpers
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import { ICycle } from "types";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
-// constants
-import { CYCLE_STATUS } from "constants/cycle";
+
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];
 
 export interface ICyclesBoardCard {
   workspaceSlug: string;
@@ -45,34 +81,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
   const endDate = new Date(cycle.end_date ?? "");
   const startDate = new Date(cycle.start_date ?? "");
 
-  const router = useRouter();
-
-  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
-
-  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
-
-  const cycleTotalIssues =
-    cycle.backlog_issues +
-    cycle.unstarted_issues +
-    cycle.started_issues +
-    cycle.completed_issues +
-    cycle.cancelled_issues;
-
-  const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100;
-
-  const issueCount = cycle
-    ? cycleTotalIssues === 0
-      ? "0 Issue"
-      : cycleTotalIssues === cycle.completed_issues
-      ? cycleTotalIssues > 1
-        ? `${cycleTotalIssues} Issues`
-        : `${cycleTotalIssues} Issue`
-      : `${cycle.completed_issues}/${cycleTotalIssues} Issues`
-    : "0 Issue";
-
-  const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleCopyText = () => {
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
 
     copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
@@ -84,6 +93,21 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     });
   };
 
+  const progressIndicatorData = stateGroups.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
+    color: group.color,
+  }));
+
+  const groupedIssues: any = {
+    backlog: cycle.backlog_issues,
+    unstarted: cycle.unstarted_issues,
+    started: cycle.started_issues,
+    completed: cycle.completed_issues,
+    cancelled: cycle.cancelled_issues,
+  };
+
   const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
@@ -110,29 +134,6 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
     });
   };
 
-  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setUpdateModal(true);
-  };
-
-  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDeleteModal(true);
-  };
-
-  const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
-    const { query } = router;
-    e.preventDefault();
-    e.stopPropagation();
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekCycle: cycle.id },
-    });
-  };
-
   return (
     <div>
       <CycleCreateUpdateModal
@@ -151,123 +152,267 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
         projectId={projectId}
       />
 
-      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-        <a className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
-          <div>
-            <div className="flex items-center justify-between gap-2">
-              <div className="flex items-center gap-3">
-                <span className="flex-shrink-0">
-                  <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
-                </span>
-                <Tooltip tooltipContent={cycle.name} position="top">
-                  <span className="text-base font-medium truncate">{cycle.name}</span>
-                </Tooltip>
-              </div>
-              <div className="flex items-center gap-2">
-                {currentCycle && (
-                  <span
-                    className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
-                    style={{
-                      color: currentCycle.color,
-                      backgroundColor: `${currentCycle.color}20`,
-                    }}
-                  >
-                    {currentCycle.value === "current"
-                      ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}`
-                      : `${currentCycle.label}`}
+      <div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-200 text-xs shadow">
+        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+          <a className="w-full">
+            <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
+              <div className="flex items-center justify-between gap-1">
+                <span className="flex items-center gap-1">
+                  <span className="h-5 w-5">
+                    <ContrastIcon
+                      className="h-5 w-5"
+                      color={`${
+                        cycleStatus === "current"
+                          ? "#09A953"
+                          : cycleStatus === "upcoming"
+                          ? "#F7AE59"
+                          : cycleStatus === "completed"
+                          ? "#3F76FF"
+                          : cycleStatus === "draft"
+                          ? "rgb(var(--color-text-200))"
+                          : ""
+                      }`}
+                    />
                   </span>
+                  <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
+                    <h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 15)}</h3>
+                  </Tooltip>
+                </span>
+                <span className="flex items-center gap-1 capitalize">
+                  <span
+                    className={`rounded-full px-1.5 py-0.5
+                  ${
+                    cycleStatus === "current"
+                      ? "bg-green-600/5 text-green-600"
+                      : cycleStatus === "upcoming"
+                      ? "bg-orange-300/5 text-orange-300"
+                      : cycleStatus === "completed"
+                      ? "bg-blue-500/5 text-blue-500"
+                      : cycleStatus === "draft"
+                      ? "bg-neutral-400/5 text-neutral-400"
+                      : ""
+                  }`}
+                  >
+                    {cycleStatus === "current" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        <RunningIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "upcoming" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        <AlarmClock className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "completed" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        {cycle.total_issues - cycle.completed_issues > 0 && (
+                          <Tooltip
+                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
+                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
+                            }`}
+                          >
+                            <span>
+                              <AlertTriangle className="h-3.5 w-3.5" />
+                            </span>
+                          </Tooltip>
+                        )}{" "}
+                        Completed
+                      </span>
+                    ) : (
+                      cycleStatus
+                    )}
+                  </span>
+                  {cycle.is_favorite ? (
+                    <button onClick={handleRemoveFromFavorites}>
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button onClick={handleAddToFavorites}>
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                    </button>
+                  )}
+                </span>
+              </div>
+              <div className="flex h-4 items-center justify-start gap-5 text-custom-text-200">
+                {cycleStatus !== "draft" && (
+                  <>
+                    <div className="flex items-start gap-1">
+                      <CalendarDays className="h-4 w-4" />
+                      <span>{renderShortDateWithYearFormat(startDate)}</span>
+                    </div>
+                    <ArrowRight className="h-4 w-4" />
+                    <div className="flex items-start gap-1">
+                      <Target className="h-4 w-4" />
+                      <span>{renderShortDateWithYearFormat(endDate)}</span>
+                    </div>
+                  </>
                 )}
-                <button onClick={openCycleOverview}>
-                  <Info className="h-4 w-4 text-custom-text-400" />
-                </button>
               </div>
-            </div>
-          </div>
 
-          <div className="flex flex-col gap-3">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-1.5 text-custom-text-200">
-                <LayersIcon className="h-4 w-4 text-custom-text-300" />
-                <span className="text-xs text-custom-text-300">{issueCount}</span>
-              </div>
-              {cycle.assignees.length > 0 && (
-                <Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
-                  <div className="flex items-center gap-1 cursor-default">
-                    <AvatarGroup showTooltip={false}>
-                      {cycle.assignees.map((assignee) => (
-                        <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
-                      ))}
-                    </AvatarGroup>
+              <div className="flex justify-between items-end">
+                <div className="flex flex-col gap-2 text-xs text-custom-text-200">
+                  <div className="flex items-center gap-2">
+                    <div className="w-16">Creator:</div>
+                    <div className="flex items-center gap-2.5 text-custom-text-200">
+                      {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                        <img
+                          src={cycle.owned_by.avatar}
+                          height={16}
+                          width={16}
+                          className="rounded-full"
+                          alt={cycle.owned_by.display_name}
+                        />
+                      ) : (
+                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
+                          {cycle.owned_by.display_name.charAt(0)}
+                        </span>
+                      )}
+                      <span className="text-custom-text-200">{cycle.owned_by.display_name}</span>
+                    </div>
                   </div>
-                </Tooltip>
-              )}
-            </div>
+                  <div className="flex h-5 items-center gap-2">
+                    <div className="w-16">Members:</div>
+                    {cycle.assignees.length > 0 ? (
+                      <div className="flex items-center gap-1 text-custom-text-200">
+                        <AssigneesList users={cycle.assignees} length={4} />
+                      </div>
+                    ) : (
+                      "No members"
+                    )}
+                  </div>
+                </div>
 
-            <Tooltip
-              tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
-              position="top-left"
-            >
-              <div className="flex items-center w-full">
-                <div
-                  className="bar relative h-1.5 w-full rounded bg-custom-background-90"
-                  style={{
-                    boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
-                  }}
-                >
-                  <div
-                    className="absolute top-0 left-0 h-1.5 rounded bg-blue-600 duration-300"
-                    style={{
-                      width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
-                    }}
-                  />
+                <div className="flex items-center">
+                  {!isCompleted && (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setUpdateModal(true);
+                      }}
+                      className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
+                    >
+                      <Pencil className="h-4 w-4" />
+                    </button>
+                  )}
+
+                  <CustomMenu width="auto" verticalEllipsis>
+                    {!isCompleted && (
+                      <CustomMenu.MenuItem
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setDeleteModal(true);
+                        }}
+                      >
+                        <span className="flex items-center justify-start gap-2">
+                          <Trash2 className="h-4 w-4" />
+                          <span>Delete cycle</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    )}
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleCopyText();
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-4 w-4" />
+                        <span>Copy cycle link</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
                 </div>
               </div>
-            </Tooltip>
-
-            <div className="flex items-center justify-between">
-              <span className="text-xs text-custom-text-300">
-                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
-                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
-              </span>
-              <div className="flex items-center gap-1.5 z-10">
-                {cycle.is_favorite ? (
-                  <button type="button" onClick={handleRemoveFromFavorites}>
-                    <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
-                  </button>
-                ) : (
-                  <button type="button" onClick={handleAddToFavorites}>
-                    <Star className="h-3.5 w-3.5 text-custom-text-200" />
-                  </button>
-                )}
-                <CustomMenu width="auto" ellipsis className="z-10">
-                  {!isCompleted && (
-                    <>
-                      <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 module</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>
-              </div>
             </div>
-          </div>
-        </a>
-      </Link>
+          </a>
+        </Link>
+
+        <div className="flex h-full flex-col rounded-b-[10px]">
+          <Disclosure>
+            {({ open }) => (
+              <div
+                className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-200 bg-custom-background-80 text-custom-text-200 ${
+                  open ? "" : "flex-row"
+                }`}
+              >
+                <div className="flex w-full items-center gap-2 px-4 py-1">
+                  <span>Progress</span>
+                  <Tooltip
+                    tooltipContent={
+                      <div className="flex w-56 flex-col">
+                        {Object.keys(groupedIssues).map((group, index) => (
+                          <SingleProgressStats
+                            key={index}
+                            title={
+                              <div className="flex items-center gap-2">
+                                <span
+                                  className="block h-3 w-3 rounded-full "
+                                  style={{
+                                    backgroundColor: stateGroups[index].color,
+                                  }}
+                                />
+                                <span className="text-xs capitalize">{group}</span>
+                              </div>
+                            }
+                            completed={groupedIssues[group]}
+                            total={cycle.total_issues}
+                          />
+                        ))}
+                      </div>
+                    }
+                    position="bottom"
+                  >
+                    <div className="flex w-full items-center">
+                      <LinearProgressIndicator data={progressIndicatorData} noTooltip={true} />
+                    </div>
+                  </Tooltip>
+                  <Disclosure.Button>
+                    <span className="p-1">
+                      <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                    </span>
+                  </Disclosure.Button>
+                </div>
+                <Transition show={open}>
+                  <Disclosure.Panel>
+                    <div className="overflow-hidden rounded-b-md bg-custom-background-80 py-3 shadow">
+                      <div className="col-span-2 space-y-3 px-4">
+                        <div className="space-y-3 text-xs">
+                          {stateGroups.map((group) => (
+                            <div key={group.key} className="flex items-center justify-between gap-2">
+                              <div className="flex  items-center gap-2">
+                                <span
+                                  className="block h-2 w-2 rounded-full"
+                                  style={{
+                                    backgroundColor: group.color,
+                                  }}
+                                />
+                                <h6 className="text-xs">{group.title}</h6>
+                              </div>
+                              <div>
+                                <span>
+                                  {cycle[group.key as keyof ICycle] as number}{" "}
+                                  <span className="text-custom-text-200">
+                                    -{" "}
+                                    {cycle.total_issues > 0
+                                      ? `${Math.round(
+                                          ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
+                                        )}%`
+                                      : "0%"}
+                                  </span>
+                                </span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </Disclosure.Panel>
+                </Transition>
+              </div>
+            )}
+          </Disclosure>
+        </div>
+      </div>
     </div>
   );
 };

web/components/cycles/cycles-board.tsx

@@ -2,41 +2,26 @@ import { FC } from "react";
 // types
 import { ICycle } from "types";
 // components
-import { CyclePeekOverview, CyclesBoardCard } from "components/cycles";
+import { CyclesBoardCard } from "components/cycles";
 
 export interface ICyclesBoard {
   cycles: ICycle[];
   filter: string;
   workspaceSlug: string;
   projectId: string;
-  peekCycle: string;
 }
 
 export const CyclesBoard: FC<ICyclesBoard> = (props) => {
-  const { cycles, filter, workspaceSlug, projectId, peekCycle } = props;
+  const { cycles, filter, workspaceSlug, projectId } = props;
 
   return (
-    <>
+    <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
       {cycles.length > 0 ? (
-        <div className="h-full w-full">
-          <div className="flex justify-between h-full w-full">
-            <div
-              className={`grid grid-cols-1 gap-6 p-8 h-full w-full overflow-y-auto ${
-                peekCycle
-                  ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
-                  : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
-              } auto-rows-max transition-all `}
-            >
-              {cycles.map((cycle) => (
-                <CyclesBoardCard key={cycle.id} workspaceSlug={workspaceSlug} projectId={projectId} cycle={cycle} />
-              ))}
-            </div>
-            <CyclePeekOverview
-              projectId={projectId?.toString() ?? ""}
-              workspaceSlug={workspaceSlug?.toString() ?? ""}
-            />
-          </div>
-        </div>
+        <>
+          {cycles.map((cycle) => (
+            <CyclesBoardCard key={cycle.id} workspaceSlug={workspaceSlug} projectId={projectId} cycle={cycle} />
+          ))}
+        </>
       ) : (
         <div className="h-full grid place-items-center text-center">
           <div className="space-y-2">
@@ -65,6 +50,6 @@ export const CyclesBoard: FC<ICyclesBoard> = (props) => {
           </div>
         </div>
       )}
-    </>
+    </div>
   );
 };

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

@@ -1,29 +1,29 @@
 import { FC, MouseEvent, useState } from "react";
 import Link from "next/link";
-import { useRouter } from "next/router";
-
-// stores
-import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // components
 import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
 // ui
-import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar } from "@plane/ui";
+import { CustomMenu, RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 // icons
-import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
-// helpers
 import {
-  getDateRangeStatus,
-  findHowManyDaysLeft,
-  renderShortDate,
-  renderShortMonthDate,
-} from "helpers/date-time.helper";
+  AlarmClock,
+  AlertTriangle,
+  ArrowRight,
+  CalendarDays,
+  LinkIcon,
+  Pencil,
+  Star,
+  Target,
+  Trash2,
+} from "lucide-react";
+// helpers
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import { ICycle } from "types";
-// constants
-import { CYCLE_STATUS } from "constants/cycle";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 type TCyclesListItem = {
   cycle: ICycle;
@@ -35,6 +35,34 @@ type TCyclesListItem = {
   projectId: string;
 };
 
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];
+
 export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const { cycle, workspaceSlug, projectId } = props;
   // store
@@ -50,28 +78,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
   const endDate = new Date(cycle.end_date ?? "");
   const startDate = new Date(cycle.start_date ?? "");
 
-  const router = useRouter();
-
-  const cycleTotalIssues =
-    cycle.backlog_issues +
-    cycle.unstarted_issues +
-    cycle.started_issues +
-    cycle.completed_issues +
-    cycle.cancelled_issues;
-
-  const renderDate = cycle.start_date || cycle.end_date;
-
-  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
-
-  const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100;
-
-  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
-
-  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
-
-  const handleCopyText = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const handleCopyText = () => {
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
 
     copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
@@ -83,6 +90,13 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
     });
   };
 
+  const progressIndicatorData = stateGroups.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
+    color: group.color,
+  }));
+
   const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     if (!workspaceSlug || !projectId) return;
@@ -109,31 +123,224 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
     });
   };
 
-  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setUpdateModal(true);
-  };
-
-  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDeleteModal(true);
-  };
-
-  const openCycleOverview = (e: MouseEvent<HTMLButtonElement>) => {
-    const { query } = router;
-    e.preventDefault();
-    e.stopPropagation();
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekCycle: cycle.id },
-    });
-  };
-
   return (
     <>
+      <div className="relative flex items-center gap-1 hover:bg-custom-background-80 transition-all rounded px-2 pl-3">
+        <div className="w-full text-xs py-3">
+          <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+            <a className="w-full h-full relative overflow-hidden flex items-center gap-2">
+              {/* left content */}
+              <div className="relative flex items-center gap-2 overflow-hidden">
+                {/* cycle state */}
+                <div className="flex-shrink-0">
+                  <ContrastIcon
+                    className="h-5 w-5"
+                    color={`${
+                      cycleStatus === "current"
+                        ? "#09A953"
+                        : cycleStatus === "upcoming"
+                        ? "#F7AE59"
+                        : cycleStatus === "completed"
+                        ? "#3F76FF"
+                        : cycleStatus === "draft"
+                        ? "rgb(var(--color-text-200))"
+                        : ""
+                    }`}
+                  />
+                </div>
+
+                {/* cycle title and description */}
+                <div className="max-w-xl">
+                  <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
+                    <div className="text-base font-semibold line-clamp-1 pr-5 overflow-hidden break-words">
+                      {cycle.name}
+                    </div>
+                  </Tooltip>
+                  {cycle.description && (
+                    <div className="mt-1 text-custom-text-200 break-words w-full line-clamp-2">{cycle.description}</div>
+                  )}
+                </div>
+              </div>
+
+              {/* right content */}
+              <div className="ml-auto flex-shrink-0 relative flex items-center gap-3 p-2">
+                {/* cycle status */}
+                <div
+                  className={`rounded-full px-2 py-1
+                    ${
+                      cycleStatus === "current"
+                        ? "bg-green-600/10 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "bg-orange-300/10 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "bg-blue-500/10 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "bg-neutral-400/10 text-neutral-400"
+                        : ""
+                    }`}
+                >
+                  {cycleStatus === "current" ? (
+                    <span className="flex items-center gap-1 whitespace-nowrap">
+                      <RunningIcon className="h-3.5 w-3.5" />
+                      {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
+                    </span>
+                  ) : cycleStatus === "upcoming" ? (
+                    <span className="flex items-center gap-1">
+                      <AlarmClock className="h-3.5 w-3.5" />
+                      {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
+                    </span>
+                  ) : cycleStatus === "completed" ? (
+                    <span className="flex items-center gap-1">
+                      {cycle.total_issues - cycle.completed_issues > 0 && (
+                        <Tooltip
+                          tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
+                            cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
+                          }`}
+                        >
+                          <span>
+                            <AlertTriangle className="h-3.5 w-3.5" />
+                          </span>
+                        </Tooltip>
+                      )}{" "}
+                      Completed
+                    </span>
+                  ) : (
+                    cycleStatus
+                  )}
+                </div>
+
+                {/* cycle start_date and target_date */}
+                {cycleStatus !== "draft" && (
+                  <div className="flex items-center justify-start gap-2 text-custom-text-200">
+                    <div className="flex items-start gap-1 whitespace-nowrap">
+                      <CalendarDays className="h-4 w-4" />
+                      <span>{renderShortDateWithYearFormat(startDate)}</span>
+                    </div>
+
+                    <ArrowRight className="h-4 w-4" />
+
+                    <div className="flex items-start gap-1 whitespace-nowrap">
+                      <Target className="h-4 w-4" />
+                      <span>{renderShortDateWithYearFormat(endDate)}</span>
+                    </div>
+                  </div>
+                )}
+
+                {/* cycle created by */}
+                <div className="flex items-center text-custom-text-200">
+                  {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                    <img
+                      src={cycle.owned_by.avatar}
+                      height={16}
+                      width={16}
+                      className="rounded-full"
+                      alt={cycle.owned_by.display_name}
+                    />
+                  ) : (
+                    <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
+                      {cycle.owned_by.display_name.charAt(0)}
+                    </span>
+                  )}
+                </div>
+
+                {/* cycle progress */}
+                <Tooltip
+                  position="top-right"
+                  tooltipContent={
+                    <div className="flex w-80 items-center gap-2 px-4 py-1">
+                      <span>Progress</span>
+                      <LinearProgressIndicator data={progressIndicatorData} />
+                    </div>
+                  }
+                >
+                  <span
+                    className={`rounded-md px-1.5 py-1
+                    ${
+                      cycleStatus === "current"
+                        ? "border border-green-600 bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "border border-orange-300 bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "border border-blue-500 bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "border border-neutral-400 bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
+                  >
+                    {cycleStatus === "current" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        {cycle.total_issues > 0 ? (
+                          <>
+                            <RadialProgressBar progress={(cycle.completed_issues / cycle.total_issues) * 100} />
+                            <span>{Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} %</span>
+                          </>
+                        ) : (
+                          <span className="normal-case">No issues present</span>
+                        )}
+                      </span>
+                    ) : cycleStatus === "upcoming" ? (
+                      <span className="flex gap-1">
+                        <RadialProgressBar progress={100} /> Yet to start
+                      </span>
+                    ) : cycleStatus === "completed" ? (
+                      <span className="flex gap-1">
+                        <RadialProgressBar progress={100} />
+                        <span>{100} %</span>
+                      </span>
+                    ) : (
+                      <span className="flex gap-1">
+                        <RadialProgressBar progress={(cycle.total_issues / cycle.completed_issues) * 100} />
+                        {cycleStatus}
+                      </span>
+                    )}
+                  </span>
+                </Tooltip>
+
+                {/* cycle favorite */}
+                {cycle.is_favorite ? (
+                  <button type="button" onClick={handleRemoveFromFavorites}>
+                    <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  </button>
+                ) : (
+                  <button type="button" onClick={handleAddToFavorites}>
+                    <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                  </button>
+                )}
+              </div>
+            </a>
+          </Link>
+        </div>
+
+        <div className="flex-shrink-0">
+          <CustomMenu width="auto" verticalEllipsis>
+            {!isCompleted && (
+              <CustomMenu.MenuItem onClick={() => setUpdateModal(true)}>
+                <span className="flex items-center justify-start gap-2">
+                  <Pencil className="h-4 w-4" />
+                  <span>Edit Cycle</span>
+                </span>
+              </CustomMenu.MenuItem>
+            )}
+
+            {!isCompleted && (
+              <CustomMenu.MenuItem onClick={() => setDeleteModal(true)}>
+                <span className="flex items-center justify-start gap-2">
+                  <Trash2 className="h-4 w-4" />
+                  <span>Delete cycle</span>
+                </span>
+              </CustomMenu.MenuItem>
+            )}
+
+            <CustomMenu.MenuItem onClick={handleCopyText}>
+              <span className="flex items-center justify-start gap-2">
+                <LinkIcon className="h-4 w-4" />
+                <span>Copy cycle link</span>
+              </span>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
+      </div>
+
       <CycleCreateUpdateModal
         data={cycle}
         isOpen={updateModal}
@@ -141,6 +348,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         workspaceSlug={workspaceSlug}
         projectId={projectId}
       />
+
       <CycleDeleteModal
         cycle={cycle}
         isOpen={deleteModal}
@@ -148,114 +356,6 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
         workspaceSlug={workspaceSlug}
         projectId={projectId}
       />
-      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
-        <a className="group flex items-center justify-between gap-5 px-10 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
-          <div className="flex items-center gap-3 w-full truncate">
-            <div className="flex items-center gap-4 truncate">
-              <span className="flex-shrink-0">
-                <CircularProgressIndicator size={38} percentage={progress}>
-                  {isCompleted ? (
-                    <span className="text-sm text-custom-primary-100">{`!`}</span>
-                  ) : progress === 100 ? (
-                    <Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
-                  ) : (
-                    <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
-                  )}
-                </CircularProgressIndicator>
-              </span>
-
-              <div className="flex items-center gap-2.5">
-                <span className="flex-shrink-0">
-                  <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
-                </span>
-                <Tooltip tooltipContent={cycle.name} position="top">
-                  <span className="text-base font-medium truncate">{cycle.name}</span>
-                </Tooltip>
-              </div>
-            </div>
-            <button onClick={openCycleOverview} className="flex-shrink-0 hidden group-hover:flex z-10">
-              <Info className="h-4 w-4 text-custom-text-400" />
-            </button>
-          </div>
-
-          <div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
-            <div className="flex items-center justify-center">
-              {currentCycle && (
-                <span
-                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
-                  style={{
-                    color: currentCycle.color,
-                    backgroundColor: `${currentCycle.color}20`,
-                  }}
-                >
-                  {currentCycle.value === "current"
-                    ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}`
-                    : `${currentCycle.label}`}
-                </span>
-              )}
-            </div>
-
-            {renderDate && (
-              <span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
-                {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
-                {" - "}
-                {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
-              </span>
-            )}
-
-            <Tooltip tooltipContent={`${cycle.assignees.length} Members`}>
-              <div className="flex items-center justify-center gap-1 cursor-default w-16">
-                {cycle.assignees.length > 0 ? (
-                  <AvatarGroup showTooltip={false}>
-                    {cycle.assignees.map((assignee) => (
-                      <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
-                    ))}
-                  </AvatarGroup>
-                ) : (
-                  <span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
-                    <User2 className="h-4 w-4 text-custom-text-400" />
-                  </span>
-                )}
-              </div>
-            </Tooltip>
-
-            {cycle.is_favorite ? (
-              <button type="button" onClick={handleRemoveFromFavorites}>
-                <Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
-              </button>
-            ) : (
-              <button type="button" onClick={handleAddToFavorites}>
-                <Star className="h-3.5 w-3.5 text-custom-text-200" />
-              </button>
-            )}
-
-            <CustomMenu width="auto" ellipsis className="z-10">
-              {!isCompleted && (
-                <>
-                  <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 module</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>
-          </div>
-        </a>
-      </Link>
     </>
   );
 };

web/components/cycles/cycles-list.tsx

@@ -1,7 +1,6 @@
 import { FC } from "react";
 // components
-import { CyclePeekOverview, CyclesListItem } from "components/cycles";
-
+import { CyclesListItem } from "./cycles-list-item";
 // ui
 import { Loader } from "@plane/ui";
 // types
@@ -18,22 +17,18 @@ export const CyclesList: FC<ICyclesList> = (props) => {
   const { cycles, filter, workspaceSlug, projectId } = props;
 
   return (
-    <>
+    <div>
       {cycles ? (
         <>
           {cycles.length > 0 ? (
-            <div className="h-full overflow-y-auto">
-              <div className="flex justify-between h-full w-full">
-                <div className="flex flex-col h-full w-full overflow-y-auto">
-                  {cycles.map((cycle) => (
+            <div className="divide-y divide-custom-border-200">
+              {cycles.map((cycle) => (
+                <div className="hover:bg-custom-background-80" key={cycle.id}>
+                  <div className="flex flex-col border-custom-border-200">
                     <CyclesListItem cycle={cycle} workspaceSlug={workspaceSlug} projectId={projectId} />
-                  ))}
+                  </div>
                 </div>
-                <CyclePeekOverview
-                  projectId={projectId?.toString() ?? ""}
-                  workspaceSlug={workspaceSlug?.toString() ?? ""}
-                />
-              </div>
+              ))}
             </div>
           ) : (
             <div className="h-full grid place-items-center text-center">
@@ -73,6 +68,6 @@ export const CyclesList: FC<ICyclesList> = (props) => {
           <Loader.Item height="50px" />
         </Loader>
       )}
-    </>
+    </div>
   );
 };

web/components/cycles/cycles-view.tsx

@@ -15,17 +15,16 @@ export interface ICyclesView {
   layout: TCycleLayout;
   workspaceSlug: string;
   projectId: string;
-  peekCycle: string;
 }
 
 export const CyclesView: FC<ICyclesView> = observer((props) => {
-  const { filter, layout, workspaceSlug, projectId, peekCycle } = props;
+  const { filter, layout, workspaceSlug, projectId } = props;
 
   // store
   const { cycle: cycleStore } = useMobxStore();
 
   // api call to fetch cycles list
-  useSWR(
+  const { isLoading } = useSWR(
     workspaceSlug && projectId && filter ? `CYCLES_LIST_${projectId}_${filter}` : null,
     workspaceSlug && projectId && filter ? () => cycleStore.fetchCycles(workspaceSlug, projectId, filter) : null
   );
@@ -36,10 +35,10 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
     <>
       {layout === "list" && (
         <>
-          {cyclesList ? (
+          {!isLoading ? (
             <CyclesList cycles={cyclesList} filter={filter} workspaceSlug={workspaceSlug} projectId={projectId} />
           ) : (
-            <Loader className="space-y-4 p-8">
+            <Loader className="space-y-4">
               <Loader.Item height="50px" />
               <Loader.Item height="50px" />
               <Loader.Item height="50px" />
@@ -50,16 +49,10 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
 
       {layout === "board" && (
         <>
-          {cyclesList ? (
-            <CyclesBoard
-              cycles={cyclesList}
-              filter={filter}
-              workspaceSlug={workspaceSlug}
-              projectId={projectId}
-              peekCycle={peekCycle}
-            />
+          {!isLoading ? (
+            <CyclesBoard cycles={cyclesList} filter={filter} workspaceSlug={workspaceSlug} projectId={projectId} />
           ) : (
-            <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3 p-8">
+            <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
               <Loader.Item height="200px" />
               <Loader.Item height="200px" />
               <Loader.Item height="200px" />
@@ -70,7 +63,7 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
 
       {layout === "gantt" && (
         <>
-          {cyclesList ? (
+          {!isLoading ? (
             <CyclesListGanttChartView cycles={cyclesList} workspaceSlug={workspaceSlug} />
           ) : (
             <Loader className="space-y-4">

web/components/cycles/index.ts

@@ -7,6 +7,8 @@ export * from "./form";
 export * from "./modal";
 export * from "./select";
 export * from "./sidebar";
+export * from "./single-cycle-card";
+export * from "./single-cycle-list";
 export * from "./transfer-issues-modal";
 export * from "./transfer-issues";
 export * from "./cycles-list";
@@ -15,5 +17,3 @@ export * from "./cycles-board";
 export * from "./cycles-board-card";
 export * from "./cycles-gantt";
 export * from "./delete-modal";
-export * from "./cycle-peek-overview";
-export * from "./cycles-list-item";

web/components/cycles/sidebar.tsx

@@ -16,28 +16,35 @@ import ProgressChart from "components/core/sidebar/progress-chart";
 import { CycleDeleteModal } from "components/cycles/delete-modal";
 // ui
 import { CustomRangeDatePicker } from "components/ui";
-import { Avatar, CustomMenu, Loader, LayersIcon } from "@plane/ui";
+import { CustomMenu, Loader, ProgressBar } from "@plane/ui";
 // icons
-import { ChevronDown, LinkIcon, Trash2, UserCircle2, AlertCircle, ChevronRight, MoveRight } from "lucide-react";
-// helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
 import {
-  findHowManyDaysLeft,
+  CalendarDays,
+  ChevronDown,
+  File,
+  MoveRight,
+  LinkIcon,
+  PieChart,
+  Trash2,
+  UserCircle2,
+  AlertCircle,
+} from "lucide-react";
+// helpers
+import { capitalizeFirstLetter, copyUrlToClipboard } from "helpers/string.helper";
+import {
   getDateRangeStatus,
   isDateGreaterThanToday,
   renderDateFormat,
-  renderShortDate,
-  renderShortMonthDate,
+  renderShortDateWithYearFormat,
 } from "helpers/date-time.helper";
 // types
 import { ICycle } from "types";
 // fetch-keys
 import { CYCLE_DETAILS } from "constants/fetch-keys";
-import { CYCLE_STATUS } from "constants/cycle";
 
 type Props = {
+  isOpen: boolean;
   cycleId: string;
-  handleClose: () => void;
 };
 
 // services
@@ -45,12 +52,12 @@ const cycleService = new CycleService();
 
 // TODO: refactor the whole component
 export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
-  const { cycleId, handleClose } = props;
+  const { isOpen, cycleId } = props;
 
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, peekCycle } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const { user: userStore, cycle: cycleDetailsStore } = useMobxStore();
 
@@ -137,7 +144,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         });
 
         if (isDateValidForExistingCycle) {
-          submitChanges({
+          await submitChanges({
             start_date: renderDateFormat(`${watch("start_date")}`),
             end_date: renderDateFormat(`${watch("end_date")}`),
           });
@@ -211,7 +218,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         });
 
         if (isDateValidForExistingCycle) {
-          submitChanges({
+          await submitChanges({
             start_date: renderDateFormat(`${watch("start_date")}`),
             end_date: renderDateFormat(`${watch("end_date")}`),
           });
@@ -273,22 +280,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
   if (!cycleDetails) return null;
 
-  const endDate = new Date(cycleDetails.end_date ?? "");
-  const startDate = new Date(cycleDetails.start_date ?? "");
-
-  const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
-
-  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
-
-  const issueCount =
-    cycleDetails.total_issues === 0
-      ? "0 Issue"
-      : cycleDetails.total_issues === cycleDetails.completed_issues
-      ? cycleDetails.total_issues > 1
-        ? `${cycleDetails.total_issues}`
-        : `${cycleDetails.total_issues}`
-      : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
-
   return (
     <>
       {cycleDetails && workspaceSlug && projectId && (
@@ -300,262 +291,327 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
           projectId={projectId.toString()}
         />
       )}
+      <div
+        className={`fixed top-[66px] ${
+          isOpen ? "right-0" : "-right-[24rem]"
+        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-200 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
+      >
+        {cycleDetails ? (
+          <>
+            <div className="flex flex-col items-start justify-center">
+              <div className="flex gap-2.5 px-5 text-sm">
+                <div className="flex items-center">
+                  <span className="flex items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
+                    {capitalizeFirstLetter(cycleStatus)}
+                  </span>
+                </div>
+                <div className="relative flex h-full w-52 items-center gap-2">
+                  <Popover className="flex h-full items-center justify-center rounded-lg">
+                    {({}) => (
+                      <>
+                        <Popover.Button
+                          disabled={isCompleted ?? false}
+                          className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-xs ${
+                            cycleDetails.start_date ? "" : "text-custom-text-200"
+                          }`}
+                        >
+                          <CalendarDays className="h-3 w-3" />
+                          <span>
+                            {renderShortDateWithYearFormat(
+                              new Date(`${watch("start_date") ? watch("start_date") : cycleDetails?.start_date}`),
+                              "Start date"
+                            )}
+                          </span>
+                        </Popover.Button>
 
-      {cycleDetails ? (
-        <>
-          <div className="flex items-center justify-between w-full">
-            <div>
-              {peekCycle && (
-                <button
-                  className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
-                  onClick={() => handleClose()}
-                >
-                  <ChevronRight className="h-3 w-3 text-white stroke-2" />
-                </button>
-              )}
-            </div>
-            <div className="flex items-center gap-3.5">
-              <button onClick={handleCopyText}>
-                <LinkIcon className="h-3 w-3 text-custom-text-300" />
-              </button>
-              {!isCompleted && (
-                <CustomMenu width="lg" ellipsis>
-                  <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
-                    <span className="flex items-center justify-start gap-2">
-                      <Trash2 className="h-4 w-4" />
-                      <span>Delete</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                </CustomMenu>
-              )}
-            </div>
-          </div>
+                        <Transition
+                          as={React.Fragment}
+                          enter="transition ease-out duration-200"
+                          enterFrom="opacity-0 translate-y-1"
+                          enterTo="opacity-100 translate-y-0"
+                          leave="transition ease-in duration-150"
+                          leaveFrom="opacity-100 translate-y-0"
+                          leaveTo="opacity-0 translate-y-1"
+                        >
+                          <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
+                            <CustomRangeDatePicker
+                              value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
+                              onChange={(val) => {
+                                if (val) {
+                                  handleStartDateChange(val);
+                                }
+                              }}
+                              startDate={watch("start_date") ? `${watch("start_date")}` : null}
+                              endDate={watch("end_date") ? `${watch("end_date")}` : null}
+                              maxDate={new Date(`${watch("end_date")}`)}
+                              selectsStart
+                            />
+                          </Popover.Panel>
+                        </Transition>
+                      </>
+                    )}
+                  </Popover>
+                  <span>
+                    <MoveRight className="h-3 w-3 text-custom-text-200" />
+                  </span>
+                  <Popover className="flex h-full items-center justify-center rounded-lg">
+                    {({}) => (
+                      <>
+                        <Popover.Button
+                          disabled={isCompleted ?? false}
+                          className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-xs ${
+                            cycleDetails.end_date ? "" : "text-custom-text-200"
+                          }`}
+                        >
+                          <CalendarDays className="h-3 w-3" />
 
-          <div className="flex flex-col gap-3">
-            <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{cycleDetails.name}</h4>
-            <div className="flex items-center gap-5">
-              {currentCycle && (
-                <span
-                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
-                  style={{
-                    color: currentCycle.color,
-                    backgroundColor: `${currentCycle.color}20`,
-                  }}
-                >
-                  {currentCycle.value === "current"
-                    ? `${findHowManyDaysLeft(cycleDetails.end_date ?? new Date())} ${currentCycle.label}`
-                    : `${currentCycle.label}`}
-                </span>
-              )}
-              <div className="relative flex h-full w-52 items-center gap-2.5">
-                <Popover className="flex h-full items-center justify-center rounded-lg">
-                  <Popover.Button
-                    disabled={isCompleted ?? false}
-                    className="text-sm text-custom-text-300 font-medium cursor-default"
-                  >
-                    {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
-                  </Popover.Button>
+                          <span>
+                            {renderShortDateWithYearFormat(
+                              new Date(`${watch("end_date") ? watch("end_date") : cycleDetails?.end_date}`),
+                              "End date"
+                            )}
+                          </span>
+                        </Popover.Button>
 
-                  <Transition
-                    as={React.Fragment}
-                    enter="transition ease-out duration-200"
-                    enterFrom="opacity-0 translate-y-1"
-                    enterTo="opacity-100 translate-y-0"
-                    leave="transition ease-in duration-150"
-                    leaveFrom="opacity-100 translate-y-0"
-                    leaveTo="opacity-0 translate-y-1"
-                  >
-                    <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
-                      <CustomRangeDatePicker
-                        value={watch("start_date") ? watch("start_date") : cycleDetails?.start_date}
-                        onChange={(val) => {
-                          if (val) {
-                            handleStartDateChange(val);
-                          }
-                        }}
-                        startDate={watch("start_date") ? `${watch("start_date")}` : null}
-                        endDate={watch("end_date") ? `${watch("end_date")}` : null}
-                        maxDate={new Date(`${watch("end_date")}`)}
-                        selectsStart
-                      />
-                    </Popover.Panel>
-                  </Transition>
-                </Popover>
-                <MoveRight className="h-4 w-4 text-custom-text-300" />
-                <Popover className="flex h-full items-center justify-center rounded-lg">
-                  {({}) => (
-                    <>
-                      <Popover.Button
-                        disabled={isCompleted ?? false}
-                        className="text-sm text-custom-text-300 font-medium cursor-default"
-                      >
-                        {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
-                      </Popover.Button>
-
-                      <Transition
-                        as={React.Fragment}
-                        enter="transition ease-out duration-200"
-                        enterFrom="opacity-0 translate-y-1"
-                        enterTo="opacity-100 translate-y-0"
-                        leave="transition ease-in duration-150"
-                        leaveFrom="opacity-100 translate-y-0"
-                        leaveTo="opacity-0 translate-y-1"
-                      >
-                        <Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
-                          <CustomRangeDatePicker
-                            value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
-                            onChange={(val) => {
-                              if (val) {
-                                handleEndDateChange(val);
-                              }
-                            }}
-                            startDate={watch("start_date") ? `${watch("start_date")}` : null}
-                            endDate={watch("end_date") ? `${watch("end_date")}` : null}
-                            minDate={new Date(`${watch("start_date")}`)}
-                            selectsEnd
-                          />
-                        </Popover.Panel>
-                      </Transition>
-                    </>
-                  )}
-                </Popover>
+                        <Transition
+                          as={React.Fragment}
+                          enter="transition ease-out duration-200"
+                          enterFrom="opacity-0 translate-y-1"
+                          enterTo="opacity-100 translate-y-0"
+                          leave="transition ease-in duration-150"
+                          leaveFrom="opacity-100 translate-y-0"
+                          leaveTo="opacity-0 translate-y-1"
+                        >
+                          <Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
+                            <CustomRangeDatePicker
+                              value={watch("end_date") ? watch("end_date") : cycleDetails?.end_date}
+                              onChange={(val) => {
+                                if (val) {
+                                  handleEndDateChange(val);
+                                }
+                              }}
+                              startDate={watch("start_date") ? `${watch("start_date")}` : null}
+                              endDate={watch("end_date") ? `${watch("end_date")}` : null}
+                              minDate={new Date(`${watch("start_date")}`)}
+                              selectsEnd
+                            />
+                          </Popover.Panel>
+                        </Transition>
+                      </>
+                    )}
+                  </Popover>
+                </div>
               </div>
-            </div>
-          </div>
 
-          {cycleDetails.description && (
-            <span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
-              {cycleDetails.description}
-            </span>
-          )}
+              <div className="flex w-full flex-col gap-6 px-6 py-6">
+                <div className="flex w-full flex-col items-start justify-start gap-2">
+                  <div className="flex w-full items-start justify-between gap-2">
+                    <div className="max-w-[300px]">
+                      <h4 className="text-xl font-semibold text-custom-text-100 break-words w-full">
+                        {cycleDetails.name}
+                      </h4>
+                    </div>
+                    <CustomMenu width="lg" ellipsis>
+                      {!isCompleted && (
+                        <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
+                          <span className="flex items-center justify-start gap-2">
+                            <Trash2 className="h-4 w-4" />
+                            <span>Delete</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      )}
+                      <CustomMenu.MenuItem onClick={handleCopyText}>
+                        <span className="flex items-center justify-start gap-2">
+                          <LinkIcon className="h-4 w-4" />
+                          <span>Copy link</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    </CustomMenu>
+                  </div>
 
-          <div className="flex flex-col gap-5 pt-2.5 pb-6">
-            <div className="flex items-center justify-start gap-1">
-              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
-                <UserCircle2 className="h-4 w-4" />
-                <span className="text-base">Lead</span>
-              </div>
-              <div className="flex items-center w-1/2 rounded-sm">
-                <div className="flex items-center gap-2.5">
-                  <Avatar name={cycleDetails.owned_by.display_name} src={cycleDetails.owned_by.avatar} />
-                  <span className="text-sm text-custom-text-200">{cycleDetails.owned_by.display_name}</span>
+                  <span className="whitespace-normal text-sm leading-5 text-custom-text-200 break-words w-full">
+                    {cycleDetails.description}
+                  </span>
+                </div>
+
+                <div className="flex flex-col  gap-4  text-sm">
+                  <div className="flex items-center justify-start gap-1">
+                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
+                      <UserCircle2 className="h-5 w-5" />
+                      <span>Lead</span>
+                    </div>
+
+                    <div className="flex items-center gap-2.5">
+                      {cycleDetails.owned_by.avatar && cycleDetails.owned_by.avatar !== "" ? (
+                        <img
+                          src={cycleDetails.owned_by.avatar}
+                          height={12}
+                          width={12}
+                          className="rounded-full"
+                          alt={cycleDetails.owned_by.display_name}
+                        />
+                      ) : (
+                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-800 capitalize  text-white">
+                          {cycleDetails.owned_by.display_name.charAt(0)}
+                        </span>
+                      )}
+                      <span className="text-custom-text-200">{cycleDetails.owned_by.display_name}</span>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center justify-start gap-1">
+                    <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
+                      <PieChart className="h-5 w-5" />
+                      <span>Progress</span>
+                    </div>
+
+                    <div className="flex items-center gap-2.5 text-custom-text-200">
+                      <span className="h-4 w-4">
+                        <ProgressBar value={cycleDetails.completed_issues} maxValue={cycleDetails.total_issues} />
+                      </span>
+                      {cycleDetails.completed_issues}/{cycleDetails.total_issues}
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
-
-            <div className="flex items-center justify-start gap-1">
-              <div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
-                <LayersIcon className="h-4 w-4" />
-                <span className="text-base">Issues</span>
-              </div>
-              <div className="flex items-center w-1/2">
-                <span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex flex-col">
-            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
-              <Disclosure>
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
+              <Disclosure defaultOpen>
                 {({ open }) => (
                   <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
-                    <div className="flex w-full items-center justify-between gap-2">
+                    <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Progress</span>
-                      </div>
-
-                      <div className="flex items-center gap-2.5">
-                        {progressPercentage ? (
-                          <span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
+                        {!open && progressPercentage ? (
+                          <span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
                             {progressPercentage ? `${progressPercentage}%` : ""}
                           </span>
                         ) : (
                           ""
                         )}
-                        {isStartValid && isEndValid ? (
-                          <Disclosure.Button className="p-1.5">
-                            <ChevronDown
-                              className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                              aria-hidden="true"
-                            />
-                          </Disclosure.Button>
-                        ) : (
-                          <div className="flex items-center gap-1">
-                            <AlertCircle height={14} width={14} className="text-custom-text-200" />
-                            <span className="text-xs italic text-custom-text-200">
-                              Invalid date. Please enter valid date.
-                            </span>
-                          </div>
-                        )}
                       </div>
+                      {isStartValid && isEndValid ? (
+                        <Disclosure.Button>
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                        </Disclosure.Button>
+                      ) : (
+                        <div className="flex items-center gap-1">
+                          <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
+                          <span className="text-xs italic text-custom-text-200">
+                            {cycleStatus === "upcoming"
+                              ? "Cycle is yet to start."
+                              : "Invalid date. Please enter valid date."}
+                          </span>
+                        </div>
+                      )}
                     </div>
                     <Transition show={open}>
                       <Disclosure.Panel>
-                        <div className="flex flex-col gap-3">
-                          {isStartValid && isEndValid ? (
-                            <div className="h-full w-full pt-4">
-                              <div className="flex  items-start  gap-4 py-2 text-xs">
-                                <div className="flex items-center gap-3 text-custom-text-100">
-                                  <div className="flex items-center justify-center gap-1">
-                                    <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
-                                    <span>Ideal</span>
-                                  </div>
-                                  <div className="flex items-center justify-center gap-1">
-                                    <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-                                    <span>Current</span>
-                                  </div>
+                        {isStartValid && isEndValid ? (
+                          <div className=" h-full w-full py-4">
+                            <div className="flex  items-start justify-between gap-4 py-2 text-xs">
+                              <div className="flex items-center gap-1">
+                                <span>
+                                  <File className="h-3 w-3 text-custom-text-200" />
+                                </span>
+                                <span>
+                                  Pending Issues -{" "}
+                                  {cycleDetails.total_issues -
+                                    (cycleDetails.completed_issues + cycleDetails.cancelled_issues)}
+                                </span>
+                              </div>
+
+                              <div className="flex items-center gap-3 text-custom-text-100">
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+                                  <span>Ideal</span>
+                                </div>
+                                <div className="flex items-center justify-center gap-1">
+                                  <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+                                  <span>Current</span>
                                 </div>
                               </div>
-                              <div className="relative h-40 w-80">
-                                <ProgressChart
-                                  distribution={cycleDetails.distribution.completion_chart}
-                                  startDate={cycleDetails.start_date ?? ""}
-                                  endDate={cycleDetails.end_date ?? ""}
-                                  totalIssues={cycleDetails.total_issues}
-                                />
-                              </div>
                             </div>
-                          ) : (
-                            ""
-                          )}
-                          {cycleDetails.total_issues > 0 && (
-                            <div className="h-full w-full pt-5 border-t border-custom-border-200">
-                              <SidebarProgressStats
-                                distribution={cycleDetails.distribution}
-                                groupedIssues={{
-                                  backlog: cycleDetails.backlog_issues,
-                                  unstarted: cycleDetails.unstarted_issues,
-                                  started: cycleDetails.started_issues,
-                                  completed: cycleDetails.completed_issues,
-                                  cancelled: cycleDetails.cancelled_issues,
-                                }}
+                            <div className="relative">
+                              <ProgressChart
+                                distribution={cycleDetails.distribution.completion_chart}
+                                startDate={cycleDetails.start_date ?? ""}
+                                endDate={cycleDetails.end_date ?? ""}
                                 totalIssues={cycleDetails.total_issues}
-                                isPeekView={Boolean(peekCycle)}
                               />
                             </div>
-                          )}
-                        </div>
+                          </div>
+                        ) : (
+                          ""
+                        )}
                       </Disclosure.Panel>
                     </Transition>
                   </div>
                 )}
               </Disclosure>
             </div>
-          </div>
-        </>
-      ) : (
-        <Loader className="px-5">
-          <div className="space-y-2">
-            <Loader.Item height="15px" width="50%" />
-            <Loader.Item height="15px" width="30%" />
-          </div>
-          <div className="mt-8 space-y-3">
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-          </div>
-        </Loader>
-      )}
+            <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
+              <Disclosure defaultOpen>
+                {({ open }) => (
+                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                    <div className="flex w-full items-center justify-between gap-2">
+                      <div className="flex items-center justify-start gap-2 text-sm">
+                        <span className="font-medium text-custom-text-200">Other Information</span>
+                      </div>
+
+                      {cycleDetails.total_issues > 0 ? (
+                        <Disclosure.Button>
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                        </Disclosure.Button>
+                      ) : (
+                        <div className="flex items-center gap-1">
+                          <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
+                          <span className="text-xs italic text-custom-text-200">
+                            No issues found. Please add issue.
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                    <Transition show={open}>
+                      <Disclosure.Panel>
+                        {cycleDetails.total_issues > 0 ? (
+                          <div className="h-full w-full py-4">
+                            <SidebarProgressStats
+                              distribution={cycleDetails.distribution}
+                              groupedIssues={{
+                                backlog: cycleDetails.backlog_issues,
+                                unstarted: cycleDetails.unstarted_issues,
+                                started: cycleDetails.started_issues,
+                                completed: cycleDetails.completed_issues,
+                                cancelled: cycleDetails.cancelled_issues,
+                              }}
+                              totalIssues={cycleDetails.total_issues}
+                            />
+                          </div>
+                        ) : (
+                          ""
+                        )}
+                      </Disclosure.Panel>
+                    </Transition>
+                  </div>
+                )}
+              </Disclosure>
+            </div>
+          </>
+        ) : (
+          <Loader className="px-5">
+            <div className="space-y-2">
+              <Loader.Item height="15px" width="50%" />
+              <Loader.Item height="15px" width="30%" />
+            </div>
+            <div className="mt-8 space-y-3">
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+            </div>
+          </Loader>
+        )}
+      </div>
     </>
   );
 });

web/components/cycles/single-cycle-card.tsx

@@ -0,0 +1,389 @@
+import React from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { SingleProgressStats } from "components/core";
+// ui
+import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
+import { AssigneesList } from "components/ui/avatar";
+// icons
+import {
+  AlarmClock,
+  AlertTriangle,
+  ArrowRight,
+  CalendarDays,
+  ChevronDown,
+  LinkIcon,
+  Pencil,
+  Star,
+  Target,
+  Trash2,
+} from "lucide-react";
+// helpers
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// types
+import { ICycle } from "types";
+
+type TSingleStatProps = {
+  cycle: ICycle;
+  handleEditCycle: () => void;
+  handleDeleteCycle: () => void;
+  handleAddToFavorites: () => void;
+  handleRemoveFromFavorites: () => void;
+};
+
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];
+
+export const SingleCycleCard: React.FC<TSingleStatProps> = ({
+  cycle,
+  handleEditCycle,
+  handleDeleteCycle,
+  handleAddToFavorites,
+  handleRemoveFromFavorites,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+  const isCompleted = cycleStatus === "completed";
+  const endDate = new Date(cycle.end_date ?? "");
+  const startDate = new Date(cycle.start_date ?? "");
+
+  const handleCopyText = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
+      });
+    });
+  };
+
+  const progressIndicatorData = stateGroups.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
+    color: group.color,
+  }));
+
+  const groupedIssues: any = {
+    backlog: cycle.backlog_issues,
+    unstarted: cycle.unstarted_issues,
+    started: cycle.started_issues,
+    completed: cycle.completed_issues,
+    cancelled: cycle.cancelled_issues,
+  };
+
+  return (
+    <div>
+      <div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-200 text-xs shadow">
+        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+          <a className="w-full">
+            <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
+              <div className="flex items-center justify-between gap-1">
+                <span className="flex items-center gap-1">
+                  <span className="h-5 w-5">
+                    <ContrastIcon
+                      className="h-5 w-5"
+                      color={`${
+                        cycleStatus === "current"
+                          ? "#09A953"
+                          : cycleStatus === "upcoming"
+                          ? "#F7AE59"
+                          : cycleStatus === "completed"
+                          ? "#3F76FF"
+                          : cycleStatus === "draft"
+                          ? "rgb(var(--color-text-200))"
+                          : ""
+                      }`}
+                    />
+                  </span>
+                  <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
+                    <h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 15)}</h3>
+                  </Tooltip>
+                </span>
+                <span className="flex items-center gap-1 capitalize">
+                  <span
+                    className={`rounded-full px-1.5 py-0.5
+                    ${
+                      cycleStatus === "current"
+                        ? "bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
+                  >
+                    {cycleStatus === "current" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        <RunningIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "upcoming" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        <AlarmClock className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "completed" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        {cycle.total_issues - cycle.completed_issues > 0 && (
+                          <Tooltip
+                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
+                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
+                            }`}
+                          >
+                            <span>
+                              <AlertTriangle className="h-3.5 w-3.5" />
+                            </span>
+                          </Tooltip>
+                        )}{" "}
+                        Completed
+                      </span>
+                    ) : (
+                      cycleStatus
+                    )}
+                  </span>
+                  {cycle.is_favorite ? (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleRemoveFromFavorites();
+                      }}
+                    >
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleAddToFavorites();
+                      }}
+                    >
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                    </button>
+                  )}
+                </span>
+              </div>
+              <div className="flex h-4 items-center justify-start gap-5 text-custom-text-200">
+                {cycleStatus !== "draft" && (
+                  <>
+                    <div className="flex items-start gap-1">
+                      <CalendarDays className="h-4 w-4" />
+                      <span>{renderShortDateWithYearFormat(startDate)}</span>
+                    </div>
+                    <ArrowRight className="h-4 w-4" />
+                    <div className="flex items-start gap-1">
+                      <Target className="h-4 w-4" />
+                      <span>{renderShortDateWithYearFormat(endDate)}</span>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              <div className="flex justify-between items-end">
+                <div className="flex flex-col gap-2 text-xs text-custom-text-200">
+                  <div className="flex items-center gap-2">
+                    <div className="w-16">Creator:</div>
+                    <div className="flex items-center gap-2.5 text-custom-text-200">
+                      {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                        <img
+                          src={cycle.owned_by.avatar}
+                          height={16}
+                          width={16}
+                          className="rounded-full"
+                          alt={cycle.owned_by.display_name}
+                        />
+                      ) : (
+                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
+                          {cycle.owned_by.display_name.charAt(0)}
+                        </span>
+                      )}
+                      <span className="text-custom-text-200">{cycle.owned_by.display_name}</span>
+                    </div>
+                  </div>
+                  <div className="flex h-5 items-center gap-2">
+                    <div className="w-16">Members:</div>
+                    {cycle.assignees.length > 0 ? (
+                      <div className="flex items-center gap-1 text-custom-text-200">
+                        <AssigneesList users={cycle.assignees} length={4} />
+                      </div>
+                    ) : (
+                      "No members"
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex items-center">
+                  {!isCompleted && (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleEditCycle();
+                      }}
+                      className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
+                    >
+                      <Pencil className="h-4 w-4" />
+                    </button>
+                  )}
+
+                  <CustomMenu width="auto" verticalEllipsis>
+                    {!isCompleted && (
+                      <CustomMenu.MenuItem
+                        onClick={(e) => {
+                          e.preventDefault();
+                          handleDeleteCycle();
+                        }}
+                      >
+                        <span className="flex items-center justify-start gap-2">
+                          <Trash2 className="h-4 w-4" />
+                          <span>Delete cycle</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    )}
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleCopyText();
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-4 w-4" />
+                        <span>Copy cycle link</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+
+        <div className="flex h-full flex-col rounded-b-[10px]">
+          <Disclosure>
+            {({ open }) => (
+              <div
+                className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-200 bg-custom-background-80 text-custom-text-200 ${
+                  open ? "" : "flex-row"
+                }`}
+              >
+                <div className="flex w-full items-center gap-2 px-4 py-1">
+                  <span>Progress</span>
+                  <Tooltip
+                    tooltipContent={
+                      <div className="flex w-56 flex-col">
+                        {Object.keys(groupedIssues).map((group, index) => (
+                          <SingleProgressStats
+                            key={index}
+                            title={
+                              <div className="flex items-center gap-2">
+                                <span
+                                  className="block h-3 w-3 rounded-full "
+                                  style={{
+                                    backgroundColor: stateGroups[index].color,
+                                  }}
+                                />
+                                <span className="text-xs capitalize">{group}</span>
+                              </div>
+                            }
+                            completed={groupedIssues[group]}
+                            total={cycle.total_issues}
+                          />
+                        ))}
+                      </div>
+                    }
+                    position="bottom"
+                  >
+                    <div className="flex w-full items-center">
+                      <LinearProgressIndicator data={progressIndicatorData} noTooltip={true} />
+                    </div>
+                  </Tooltip>
+                  <Disclosure.Button>
+                    <span className="p-1">
+                      <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                    </span>
+                  </Disclosure.Button>
+                </div>
+                <Transition show={open}>
+                  <Disclosure.Panel>
+                    <div className="overflow-hidden rounded-b-md bg-custom-background-80 py-3 shadow">
+                      <div className="col-span-2 space-y-3 px-4">
+                        <div className="space-y-3 text-xs">
+                          {stateGroups.map((group) => (
+                            <div key={group.key} className="flex items-center justify-between gap-2">
+                              <div className="flex  items-center gap-2">
+                                <span
+                                  className="block h-2 w-2 rounded-full"
+                                  style={{
+                                    backgroundColor: group.color,
+                                  }}
+                                />
+                                <h6 className="text-xs">{group.title}</h6>
+                              </div>
+                              <div>
+                                <span>
+                                  {cycle[group.key as keyof ICycle] as number}{" "}
+                                  <span className="text-custom-text-200">
+                                    -{" "}
+                                    {cycle.total_issues > 0
+                                      ? `${Math.round(
+                                          ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
+                                        )}%`
+                                      : "0%"}
+                                  </span>
+                                </span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </Disclosure.Panel>
+                </Transition>
+              </div>
+            )}
+          </Disclosure>
+        </div>
+      </div>
+    </div>
+  );
+};

web/components/cycles/single-cycle-list.tsx

@@ -0,0 +1,369 @@
+import React, { useEffect, useState } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
+// icons
+import {
+  AlarmClock,
+  AlertTriangle,
+  ArrowRight,
+  CalendarDays,
+  LinkIcon,
+  Pencil,
+  Star,
+  Target,
+  Trash2,
+} from "lucide-react";
+// helpers
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// types
+import { ICycle } from "types";
+
+type TSingleStatProps = {
+  cycle: ICycle;
+  handleEditCycle: () => void;
+  handleDeleteCycle: () => void;
+  handleAddToFavorites: () => void;
+  handleRemoveFromFavorites: () => void;
+};
+
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];
+
+type progress = {
+  progress: number;
+};
+
+function RadialProgressBar({ progress }: progress) {
+  const [circumference, setCircumference] = useState(0);
+
+  useEffect(() => {
+    const radius = 40;
+    const circumference = 2 * Math.PI * radius;
+    setCircumference(circumference);
+  }, []);
+
+  const progressOffset = ((100 - progress) / 100) * circumference;
+
+  return (
+    <div className="relative h-4 w-4">
+      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
+        <circle
+          className={"stroke-current opacity-10"}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+        />
+        <circle
+          className={`stroke-current`}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={progressOffset}
+          transform="rotate(-90 50 50)"
+        />
+      </svg>
+    </div>
+  );
+}
+
+export const SingleCycleList: React.FC<TSingleStatProps> = ({
+  cycle,
+  handleEditCycle,
+  handleDeleteCycle,
+  handleAddToFavorites,
+  handleRemoveFromFavorites,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+  const isCompleted = cycleStatus === "completed";
+  const endDate = new Date(cycle.end_date ?? "");
+  const startDate = new Date(cycle.start_date ?? "");
+
+  const handleCopyText = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
+      });
+    });
+  };
+
+  const progressIndicatorData = stateGroups.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
+    color: group.color,
+  }));
+
+  const completedIssues = cycle.completed_issues + cycle.cancelled_issues;
+
+  const percentage = cycle.total_issues > 0 ? (completedIssues / cycle.total_issues) * 100 : 0;
+
+  return (
+    <div>
+      <div className="flex flex-col text-xs hover:bg-custom-background-80">
+        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+          <a className="w-full">
+            <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
+              <div className="flex items-center justify-between gap-1">
+                <div className="flex items-start gap-2">
+                  <ContrastIcon
+                    className="mt-1 h-5 w-5"
+                    color={`${
+                      cycleStatus === "current"
+                        ? "#09A953"
+                        : cycleStatus === "upcoming"
+                        ? "#F7AE59"
+                        : cycleStatus === "completed"
+                        ? "#3F76FF"
+                        : cycleStatus === "draft"
+                        ? "rgb(var(--color-text-200))"
+                        : ""
+                    }`}
+                  />
+                  <div className="max-w-2xl">
+                    <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
+                      <h3 className="break-words w-full text-base font-semibold">{truncateText(cycle.name, 60)}</h3>
+                    </Tooltip>
+                    <p className="mt-2 text-custom-text-200 break-words w-full">{cycle.description}</p>
+                  </div>
+                </div>
+                <div className="flex-shrink-0 flex items-center gap-4">
+                  <span
+                    className={`rounded-full px-1.5 py-0.5
+                    ${
+                      cycleStatus === "current"
+                        ? "bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
+                  >
+                    {cycleStatus === "current" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        <RunningIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
+                      </span>
+                    ) : cycleStatus === "upcoming" ? (
+                      <span className="flex gap-1">
+                        <AlarmClock className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
+                      </span>
+                    ) : cycleStatus === "completed" ? (
+                      <span className="flex items-center gap-1">
+                        {cycle.total_issues - cycle.completed_issues > 0 && (
+                          <Tooltip
+                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
+                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
+                            }`}
+                          >
+                            <span>
+                              <AlertTriangle className="h-3.5 w-3.5" />
+                            </span>
+                          </Tooltip>
+                        )}{" "}
+                        Completed
+                      </span>
+                    ) : (
+                      cycleStatus
+                    )}
+                  </span>
+
+                  {cycleStatus !== "draft" && (
+                    <div className="flex items-center justify-start gap-2 text-custom-text-200">
+                      <div className="flex items-start gap-1 whitespace-nowrap">
+                        <CalendarDays className="h-4 w-4" />
+                        <span>{renderShortDateWithYearFormat(startDate)}</span>
+                      </div>
+                      <ArrowRight className="h-4 w-4" />
+                      <div className="flex items-start gap-1 whitespace-nowrap">
+                        <Target className="h-4 w-4" />
+                        <span>{renderShortDateWithYearFormat(endDate)}</span>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-2.5 text-custom-text-200">
+                    {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                      <img
+                        src={cycle.owned_by.avatar}
+                        height={16}
+                        width={16}
+                        className="rounded-full"
+                        alt={cycle.owned_by.display_name}
+                      />
+                    ) : (
+                      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
+                        {cycle.owned_by.display_name.charAt(0)}
+                      </span>
+                    )}
+                  </div>
+                  <Tooltip
+                    position="top-right"
+                    tooltipContent={
+                      <div className="flex w-80 items-center gap-2 px-4 py-1">
+                        <span>Progress</span>
+                        <LinearProgressIndicator data={progressIndicatorData} />
+                      </div>
+                    }
+                  >
+                    <span
+                      className={`rounded-md px-1.5 py-1
+                    ${
+                      cycleStatus === "current"
+                        ? "border border-green-600 bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "border border-orange-300 bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "border border-blue-500 bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "border border-neutral-400 bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
+                    >
+                      {cycleStatus === "current" ? (
+                        <span className="flex gap-1 whitespace-nowrap">
+                          {cycle.total_issues > 0 ? (
+                            <>
+                              <RadialProgressBar progress={(cycle.completed_issues / cycle.total_issues) * 100} />
+                              <span>{Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} %</span>
+                            </>
+                          ) : (
+                            <span className="normal-case">No issues present</span>
+                          )}
+                        </span>
+                      ) : cycleStatus === "upcoming" ? (
+                        <span className="flex gap-1">
+                          <RadialProgressBar progress={100} /> Yet to start
+                        </span>
+                      ) : cycleStatus === "completed" ? (
+                        <span className="flex gap-1">
+                          <RadialProgressBar progress={100} />
+                          <span>{Math.round(percentage)} %</span>
+                        </span>
+                      ) : (
+                        <span className="flex gap-1">
+                          <RadialProgressBar progress={(cycle.total_issues / cycle.completed_issues) * 100} />
+                          {cycleStatus}
+                        </span>
+                      )}
+                    </span>
+                  </Tooltip>
+                  {cycle.is_favorite ? (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleRemoveFromFavorites();
+                      }}
+                    >
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleAddToFavorites();
+                      }}
+                    >
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                    </button>
+                  )}
+                  <div className="flex items-center">
+                    <CustomMenu width="auto" verticalEllipsis>
+                      {!isCompleted && (
+                        <CustomMenu.MenuItem
+                          onClick={(e) => {
+                            e.preventDefault();
+                            handleEditCycle();
+                          }}
+                        >
+                          <span className="flex items-center justify-start gap-2">
+                            <Pencil className="h-4 w-4" />
+                            <span>Edit Cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      )}
+                      {!isCompleted && (
+                        <CustomMenu.MenuItem
+                          onClick={(e) => {
+                            e.preventDefault();
+                            handleDeleteCycle();
+                          }}
+                        >
+                          <span className="flex items-center justify-start gap-2">
+                            <Trash2 className="h-4 w-4" />
+                            <span>Delete cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      )}
+                      <CustomMenu.MenuItem
+                        onClick={(e) => {
+                          e.preventDefault();
+                          handleCopyText();
+                        }}
+                      >
+                        <span className="flex items-center justify-start gap-2">
+                          <LinkIcon className="h-4 w-4" />
+                          <span>Copy cycle link</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    </CustomMenu>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+      </div>
+    </div>
+  );
+};

web/components/estimates/create-update-estimate-modal.tsx

@@ -1,11 +1,15 @@
 import React, { useEffect } from "react";
-import { useRouter } from "next/router";
-import { Controller, useForm } from "react-hook-form";
-import { Dialog, Transition } from "@headlessui/react";
 
-// store
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import { ProjectEstimateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -13,15 +17,29 @@ import { Button, Input, TextArea } from "@plane/ui";
 // helpers
 import { checkDuplicates } from "helpers/array.helper";
 // types
-import { IEstimate, IEstimateFormData } from "types";
+import { IUser, IEstimate, IEstimateFormData } from "types";
+// fetch-keys
+import { ESTIMATES_LIST, ESTIMATE_DETAILS } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data?: IEstimate;
+  user: IUser | undefined;
 };
 
-const defaultValues = {
+type FormValues = {
+  name: string;
+  description: string;
+  value1: string;
+  value2: string;
+  value3: string;
+  value4: string;
+  value5: string;
+  value6: string;
+};
+
+const defaultValues: Partial<FormValues> = {
   name: "",
   description: "",
   value1: "",
@@ -32,18 +50,10 @@ const defaultValues = {
   value6: "",
 };
 
-type FormValues = typeof defaultValues;
-
-export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
-  const { handleClose, data, isOpen } = props;
-
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  // store
-  const { projectEstimates: projectEstimatesStore } = useMobxStore();
+// services
+const projectEstimateService = new ProjectEstimateService();
 
+export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, user }) => {
   const {
     formState: { errors, isSubmitting },
     handleSubmit,
@@ -58,47 +68,71 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
     reset();
   };
 
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
   const { setToastAlert } = useToast();
 
   const createEstimate = async (payload: IEstimateFormData) => {
     if (!workspaceSlug || !projectId) return;
 
-    await projectEstimatesStore
-      .createEstimate(workspaceSlug.toString(), projectId.toString(), payload)
+    await projectEstimateService
+      .createEstimate(workspaceSlug as string, projectId as string, payload, user)
       .then(() => {
+        mutate(ESTIMATES_LIST(projectId as string));
         onClose();
       })
       .catch((err) => {
-        const error = err?.error;
-        const errorString = Array.isArray(error) ? error[0] : error;
-
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message:
-            errorString ?? err.status === 400
-              ? "Estimate with that name already exists. Please try again with another name."
-              : "Estimate could not be created. Please try again.",
-        });
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Estimate with that name already exists. Please try again with another name.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Estimate could not be created. Please try again.",
+          });
       });
   };
 
   const updateEstimate = async (payload: IEstimateFormData) => {
     if (!workspaceSlug || !projectId || !data) return;
 
-    await projectEstimatesStore
-      .updateEstimate(workspaceSlug.toString(), projectId.toString(), data.id, payload)
+    mutate<IEstimate[]>(
+      ESTIMATES_LIST(projectId.toString()),
+      (prevData) =>
+        prevData?.map((p) => {
+          if (p.id === data.id)
+            return {
+              ...p,
+              name: payload.estimate.name,
+              description: payload.estimate.description,
+              points: p.points.map((point, index) => ({
+                ...point,
+                value: payload.estimate_points[index].value,
+              })),
+            };
+
+          return p;
+        }),
+      false
+    );
+
+    await projectEstimateService
+      .patchEstimate(workspaceSlug as string, projectId as string, data?.id as string, payload, user)
       .then(() => {
+        mutate(ESTIMATES_LIST(projectId.toString()));
+        mutate(ESTIMATE_DETAILS(data.id));
         handleClose();
       })
-      .catch((err) => {
-        const error = err?.error;
-        const errorString = Array.isArray(error) ? error[0] : error;
-
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: errorString ?? "Estimate could not be updated. Please try again.",
+          message: "Estimate could not be updated. Please try again.",
         });
       });
 
@@ -257,38 +291,151 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
                           )}
                         />
                       </div>
-
-                      {/* list of all the points */}
-                      {/* since they are all the same, we can use a loop to render them */}
                       <div className="grid grid-cols-3 gap-3">
-                        {Array(6)
-                          .fill(0)
-                          .map((_, i) => (
-                            <div className="flex items-center">
-                              <span className="flex h-full items-center rounded-lg bg-custom-background-80">
-                                <span className="rounded-lg px-2 text-sm text-custom-text-200">{i + 1}</span>
-                                <span className="rounded-r-lg bg-custom-background-100">
-                                  <Controller
-                                    control={control}
-                                    name={`value${i + 1}` as keyof FormValues}
-                                    render={({ field: { value, onChange, ref } }) => (
-                                      <Input
-                                        ref={ref}
-                                        type="text"
-                                        value={value}
-                                        onChange={onChange}
-                                        id={`value${i + 1}`}
-                                        name={`value${i + 1}`}
-                                        placeholder={`Point ${i + 1}`}
-                                        className="rounded-l-none w-full"
-                                        hasError={Boolean(errors[`value${i + 1}` as keyof FormValues])}
-                                      />
-                                    )}
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">1</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
+                              <Controller
+                                control={control}
+                                name="value1"
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value1"
+                                    name="value1"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value1)}
+                                    placeholder="Point 1"
+                                    className="rounded-l-none w-full"
                                   />
-                                </span>
-                              </span>
-                            </div>
-                          ))}
+                                )}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">2</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
+                              <Controller
+                                control={control}
+                                name="value2"
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value2"
+                                    name="value2"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value2)}
+                                    placeholder="Point 2"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">3</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
+                              <Controller
+                                control={control}
+                                name="value3"
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value3"
+                                    name="value3"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value3)}
+                                    placeholder="Point 3"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">4</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
+                              <Controller
+                                control={control}
+                                name="value4"
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value4"
+                                    name="value4"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value4)}
+                                    placeholder="Point 4"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">5</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
+                              <Controller
+                                control={control}
+                                name="value5"
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value5"
+                                    name="value5"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value5)}
+                                    placeholder="Point 5"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
+                              />
+                            </span>
+                          </span>
+                        </div>
+                        <div className="flex items-center">
+                          <span className="flex h-full items-center rounded-lg bg-custom-background-80">
+                            <span className="rounded-lg px-2 text-sm text-custom-text-200">6</span>
+                            <span className="rounded-r-lg bg-custom-background-100">
+                              <Controller
+                                control={control}
+                                name="value6"
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value6"
+                                    name="value6"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value6)}
+                                    placeholder="Point 6"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
+                              />
+                            </span>
+                          </span>
+                        </div>
                       </div>
                     </div>
                     <div className="mt-5 flex justify-end gap-2">
@@ -314,4 +461,4 @@ export const CreateUpdateEstimateModal: React.FC<Props> = observer((props) => {
       </Transition.Root>
     </>
   );
-});
+};

web/components/estimates/delete-estimate-modal.tsx

@@ -1,13 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
+
+// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// store
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// hooks
-import useToast from "hooks/use-toast";
 // types
 import { IEstimate } from "types";
+
 // icons
 import { AlertTriangle } from "lucide-react";
 // ui
@@ -15,43 +12,14 @@ import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
-  data: IEstimate | null;
   handleClose: () => void;
+  data: IEstimate;
+  handleDelete: () => void;
 };
 
-export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
-  const { isOpen, handleClose, data } = props;
-
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  // store
-  const { projectEstimates: projectEstimatesStore } = useMobxStore();
-
-  // states
+export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data, handleDelete }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
-  // hooks
-  const { setToastAlert } = useToast();
-
-  const handleEstimateDelete = () => {
-    if (!workspaceSlug || !projectId) return;
-
-    const estimateId = data?.id!;
-
-    projectEstimatesStore.deleteEstimate(workspaceSlug.toString(), projectId.toString(), estimateId).catch((err) => {
-      const error = err?.error;
-      const errorString = Array.isArray(error) ? error[0] : error;
-
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: errorString ?? "Estimate could not be deleted. Please try again",
-      });
-    });
-  };
-
   useEffect(() => {
     setIsDeleteLoading(false);
   }, [isOpen]);
@@ -100,7 +68,7 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
                   <span>
                     <p className="break-words text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete estimate-{" "}
-                      <span className="break-words font-medium text-custom-text-100">{data?.name}</span>
+                      <span className="break-words font-medium text-custom-text-100">{data.name}</span>
                       {""}? All of the data related to the estiamte will be permanently removed. This action cannot be
                       undone.
                     </p>
@@ -113,7 +81,7 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
                       variant="danger"
                       onClick={() => {
                         setIsDeleteLoading(true);
-                        handleEstimateDelete();
+                        handleDelete();
                       }}
                       loading={isDeleteLoading}
                     >
@@ -128,4 +96,4 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
       </Dialog>
     </Transition.Root>
   );
-});
+};

web/components/estimates/estimate-list.tsx

@@ -1,139 +0,0 @@
-import React, { useState } from "react";
-import { useRouter } from "next/router";
-
-// store
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// components
-import { CreateUpdateEstimateModal, DeleteEstimateModal, EstimateListItem } from "components/estimates";
-//hooks
-import useToast from "hooks/use-toast";
-// ui
-import { Button, Loader } from "@plane/ui";
-import { EmptyState } from "components/common";
-// icons
-import { Plus } from "lucide-react";
-// images
-import emptyEstimate from "public/empty-state/estimate.svg";
-// types
-import { IEstimate } from "types";
-
-export const EstimatesList: React.FC = observer(() => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  // store
-  const { project: projectStore } = useMobxStore();
-
-  // states
-  const [estimateFormOpen, setEstimateFormOpen] = useState(false);
-  const [estimateToDelete, setEstimateToDelete] = useState<string | null>(null);
-  const [estimateToUpdate, setEstimateToUpdate] = useState<IEstimate | undefined>();
-
-  // hooks
-  const { setToastAlert } = useToast();
-
-  // derived values
-  const estimatesList = projectStore.projectEstimates;
-  const projectDetails = projectStore.project_details?.[projectId?.toString()!];
-
-  const editEstimate = (estimate: IEstimate) => {
-    setEstimateFormOpen(true);
-    setEstimateToUpdate(estimate);
-  };
-
-  const disableEstimates = () => {
-    if (!workspaceSlug || !projectId) return;
-
-    projectStore.updateProject(workspaceSlug.toString(), projectId.toString(), { estimate: null }).catch((err) => {
-      const error = err?.error;
-      const errorString = Array.isArray(error) ? error[0] : error;
-
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: errorString ?? "Estimate could not be disabled. Please try again",
-      });
-    });
-  };
-
-  return (
-    <>
-      <CreateUpdateEstimateModal
-        isOpen={estimateFormOpen}
-        data={estimateToUpdate}
-        handleClose={() => {
-          setEstimateFormOpen(false);
-          setEstimateToUpdate(undefined);
-        }}
-      />
-
-      <DeleteEstimateModal
-        isOpen={!!estimateToDelete}
-        handleClose={() => setEstimateToDelete(null)}
-        data={projectStore.getProjectEstimateById(estimateToDelete!)}
-      />
-
-      <section className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
-        <h3 className="text-xl font-medium">Estimates</h3>
-        <div className="col-span-12 space-y-5 sm:col-span-7">
-          <div className="flex items-center gap-2">
-            <Button
-              variant="primary"
-              onClick={() => {
-                setEstimateFormOpen(true);
-                setEstimateToUpdate(undefined);
-              }}
-            >
-              Add Estimate
-            </Button>
-            {projectDetails?.estimate && (
-              <Button variant="neutral-primary" onClick={disableEstimates}>
-                Disable Estimates
-              </Button>
-            )}
-          </div>
-        </div>
-      </section>
-
-      {estimatesList ? (
-        estimatesList.length > 0 ? (
-          <section className="h-full bg-custom-background-100 overflow-y-auto">
-            {estimatesList.map((estimate) => (
-              <EstimateListItem
-                key={estimate.id}
-                estimate={estimate}
-                editEstimate={(estimate) => editEstimate(estimate)}
-                deleteEstimate={(estimateId) => setEstimateToDelete(estimateId)}
-              />
-            ))}
-          </section>
-        ) : (
-          <div className="h-full w-full overflow-y-auto">
-            <EmptyState
-              title="No estimates yet"
-              description="Estimates help you communicate the complexity of an issue."
-              image={emptyEstimate}
-              primaryButton={{
-                icon: <Plus className="h-4 w-4" />,
-                text: "Add Estimate",
-                onClick: () => {
-                  setEstimateFormOpen(true);
-                  setEstimateToUpdate(undefined);
-                },
-              }}
-            />
-          </div>
-        )
-      ) : (
-        <Loader className="mt-5 space-y-5">
-          <Loader.Item height="40px" />
-          <Loader.Item height="40px" />
-          <Loader.Item height="40px" />
-          <Loader.Item height="40px" />
-        </Loader>
-      )}
-    </>
-  );
-});

web/components/estimates/index.ts

@@ -1,4 +1,4 @@
 export * from "./create-update-estimate-modal";
 export * from "./delete-estimate-modal";
 export * from "./estimate-select";
-export * from "./estimate-list-item";
+export * from "./single-estimate";

web/components/estimates/single-estimate.tsx

@@ -1,12 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { useRouter } from "next/router";
 
-// store
-import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { ProjectService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { DeleteEstimateModal } from "components/estimates";
 // ui
 import { Button, CustomMenu } from "@plane/ui";
 //icons
@@ -14,46 +16,48 @@ import { Pencil, Trash2 } from "lucide-react";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import { IEstimate } from "types";
+import { IUser, IEstimate } from "types";
 
 type Props = {
+  user: IUser | undefined;
   estimate: IEstimate;
   editEstimate: (estimate: IEstimate) => void;
-  deleteEstimate: (estimateId: string) => void;
+  handleEstimateDelete: (estimateId: string) => void;
 };
 
-export const EstimateListItem: React.FC<Props> = observer((props) => {
-  const { estimate, editEstimate, deleteEstimate } = props;
+// services
+const projectService = new ProjectService();
+
+export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate, handleEstimateDelete }) => {
+  const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
 
-  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  // store
-  const { project: projectStore } = useMobxStore();
-
   const { setToastAlert } = useToast();
 
-  // derived values
-  const projectDetails = projectStore.project_details?.[projectId?.toString()!];
+  const { projectDetails, mutateProjectDetails } = useProjectDetails();
 
   const handleUseEstimate = async () => {
     if (!workspaceSlug || !projectId) return;
 
-    await projectStore
-      .updateProject(workspaceSlug.toString(), projectId.toString(), {
-        estimate: estimate.id,
-      })
-      .catch((err) => {
-        const error = err?.error;
-        const errorString = Array.isArray(error) ? error[0] : error;
+    const payload = {
+      estimate: estimate.id,
+    };
 
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: errorString ?? "Estimate points could not be used. Please try again.",
-        });
+    mutateProjectDetails((prevData: any) => {
+      if (!prevData) return prevData;
+
+      return { ...prevData, estimate: estimate.id };
+    }, false);
+
+    await projectService.updateProject(workspaceSlug as string, projectId as string, payload, user).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Estimate points could not be used. Please try again.",
       });
+    });
   };
 
   return (
@@ -72,7 +76,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
             </p>
           </div>
           <div className="flex items-center gap-2">
-            {projectDetails?.estimate !== estimate?.id && estimate?.points?.length > 0 && (
+            {projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
               <Button variant="neutral-primary" onClick={handleUseEstimate}>
                 Use
               </Button>
@@ -91,7 +95,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
               {projectDetails?.estimate !== estimate.id && (
                 <CustomMenu.MenuItem
                   onClick={() => {
-                    deleteEstimate(estimate.id);
+                    setIsDeleteEstimateModalOpen(true);
                   }}
                 >
                   <div className="flex items-center justify-start gap-2">
@@ -103,7 +107,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
             </CustomMenu>
           </div>
         </div>
-        {estimate?.points?.length > 0 ? (
+        {estimate.points.length > 0 ? (
           <div className="flex text-xs text-custom-text-200">
             Estimate points (
             <span className="flex gap-1">
@@ -122,6 +126,16 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
           </div>
         )}
       </div>
+
+      <DeleteEstimateModal
+        isOpen={isDeleteEstimateModalOpen}
+        handleClose={() => setIsDeleteEstimateModalOpen(false)}
+        data={estimate}
+        handleDelete={() => {
+          handleEstimateDelete(estimate.id);
+          setIsDeleteEstimateModalOpen(false);
+        }}
+      />
     </>
   );
-});
+};

web/components/exporter/export-modal.tsx

@@ -128,7 +128,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
                       value={value ?? []}
                       onChange={(val: string[]) => onChange(val)}
                       options={options}
-                      input
+                      input={true}
                       label={
                         value && value.length > 0
                           ? projects &&

web/components/exporter/guide.tsx

@@ -150,7 +150,7 @@ const IntegrationGuide = () => {
         </>
         {provider && (
           <Exporter
-            isOpen
+            isOpen={true}
             handleClose={() => handleCsvClose()}
             data={null}
             user={user}

web/components/headers/cycle-issues.tsx

@@ -147,7 +147,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
-          <FiltersDropdown title="Filters" placement="bottom-end">
+          <FiltersDropdown title="Filters">
             <FilterSelection
               filters={cycleIssueFilterStore.cycleFilters}
               handleFiltersUpdate={handleFiltersUpdate}
@@ -159,7 +159,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
+          <FiltersDropdown title="Display">
             <DisplayFiltersSelection
               displayFilters={issueFilterStore.userDisplayFilters}
               displayProperties={issueFilterStore.userDisplayProperties}

web/components/headers/global-issues.tsx

@@ -128,19 +128,18 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
           {activeLayout === "spreadsheet" && (
             <>
               {!STATIC_VIEW_TYPES.some((word) => router.pathname.includes(word)) && (
-                <FiltersDropdown title="Filters" placement="bottom-end">
+                <FiltersDropdown title="Filters">
                   <FilterSelection
                     filters={storedFilters ?? {}}
                     handleFiltersUpdate={handleFiltersUpdate}
                     layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
                     labels={workspaceStore.workspaceLabels ?? undefined}
-                    members={workspaceStore.workspaceMembers?.map((m) => m.member) ?? undefined}
                     projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
                   />
                 </FiltersDropdown>
               )}
 
-              <FiltersDropdown title="Display" placement="bottom-end">
+              <FiltersDropdown title="Display">
                 <DisplayFiltersSelection
                   displayFilters={workspaceFilterStore.workspaceDisplayFilters}
                   displayProperties={workspaceFilterStore.workspaceDisplayProperties}

web/components/headers/module-issues.tsx

@@ -150,7 +150,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
-          <FiltersDropdown title="Filters" placement="bottom-end">
+          <FiltersDropdown title="Filters">
             <FilterSelection
               filters={moduleFilterStore.moduleFilters}
               handleFiltersUpdate={handleFiltersUpdate}
@@ -162,7 +162,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
+          <FiltersDropdown title="Display">
             <DisplayFiltersSelection
               displayFilters={issueFilterStore.userDisplayFilters}
               displayProperties={issueFilterStore.userDisplayProperties}

web/components/headers/project-issues.tsx

@@ -130,7 +130,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
           {projectDetails?.is_deployed && deployUrl && (
             <a
               href={`${deployUrl}/${workspaceSlug}/${projectDetails?.id}`}
-              className="group bg-custom-primary-100/10 text-custom-primary-100 px-2.5 py-1 text-xs flex items-center gap-1.5 rounded font-medium"
+              className="group bg-custom-primary-100/20 text-custom-primary-100 px-2.5 py-1 text-xs flex items-center gap-1.5 rounded font-medium"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -146,7 +146,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
-          <FiltersDropdown title="Filters" placement="bottom-end">
+          <FiltersDropdown title="Filters">
             <FilterSelection
               filters={issueFilterStore.userFilters}
               handleFiltersUpdate={handleFiltersUpdate}
@@ -158,7 +158,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
+          <FiltersDropdown title="Display">
             <DisplayFiltersSelection
               displayFilters={issueFilterStore.userDisplayFilters}
               displayProperties={issueFilterStore.userDisplayProperties}

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

@@ -135,7 +135,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
           onChange={(layout) => handleLayoutChange(layout)}
           selectedLayout={activeLayout}
         />
-        <FiltersDropdown title="Filters" placement="bottom-end">
+        <FiltersDropdown title="Filters">
           <FilterSelection
             filters={storedFilters ?? {}}
             handleFiltersUpdate={handleFiltersUpdate}
@@ -147,7 +147,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
           />
         </FiltersDropdown>
-        <FiltersDropdown title="Display" placement="bottom-end">
+        <FiltersDropdown title="Display">
           <DisplayFiltersSelection
             displayFilters={issueFilterStore.userDisplayFilters}
             displayProperties={issueFilterStore.userDisplayProperties}

web/components/inbox/main-content.tsx

@@ -22,10 +22,10 @@ import { IInboxIssue, IIssue } from "types";
 const defaultValues: Partial<IInboxIssue> = {
   name: "",
   description_html: "",
-  assignees: [],
+  assignees_list: [],
   priority: "low",
   target_date: new Date().toString(),
-  labels: [],
+  labels_list: [],
 };
 
 export const InboxMainContent: React.FC = observer(() => {
@@ -122,8 +122,8 @@ export const InboxMainContent: React.FC = observer(() => {
 
     reset({
       ...issueDetails,
-      assignees: issueDetails.assignees ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
-      labels: issueDetails.labels ?? issueDetails.labels,
+      assignees_list: issueDetails.assignees_list ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
+      labels_list: issueDetails.labels_list ?? issueDetails.labels,
     });
   }, [issueDetails, reset, inboxIssueId]);
 

web/components/integration/github/single-user-select.tsx

@@ -1,9 +1,12 @@
 import { useRouter } from "next/router";
+
 import useSWR from "swr";
+
 // services
 import { WorkspaceService } from "services/workspace.service";
 // ui
-import { Avatar, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
+import { Avatar } from "components/ui";
+import { CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
 // types
 import { IGithubRepoCollaborator } from "types";
 import { IUserDetails } from "./root";
@@ -41,7 +44,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
 
   const { data: members } = useSWR(
     workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug.toString()) : null
+    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug.toString()) : null
   );
 
   const options = members?.map((member) => ({
@@ -49,7 +52,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
     query: member.member.display_name ?? "",
     content: (
       <div className="flex items-center gap-2">
-        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
+        <Avatar user={member.member} />
         {member.member.display_name}
       </div>
     ),

web/components/integration/jira/import-users.tsx

@@ -2,14 +2,15 @@ import { FC } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { useFormContext, useFieldArray, Controller } from "react-hook-form";
+// fetch keys
+import { WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
 // services
 import { WorkspaceService } from "services/workspace.service";
-// ui
-import { Avatar, CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
+// components
+import { Avatar } from "components/ui";
+import { CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
 // types
 import { IJiraImporterForm } from "types";
-// fetch keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 
 const workspaceService = new WorkspaceService();
 
@@ -29,8 +30,8 @@ export const JiraImportUsers: FC = () => {
   });
 
   const { data: members } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug?.toString() ?? "") : null,
-    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug?.toString() ?? "") : null
+    workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug?.toString() ?? "") : null,
+    workspaceSlug ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug?.toString() ?? "") : null
   );
 
   const options = members?.map((member) => ({
@@ -38,7 +39,7 @@ export const JiraImportUsers: FC = () => {
     query: member.member.display_name ?? "",
     content: (
       <div className="flex items-center gap-2">
-        <Avatar name={member?.member.display_name} src={member?.member.avatar} />
+        <Avatar user={member.member} />
         {member.member.display_name}
       </div>
     ),

web/components/issues/attachment/attachments.tsx

@@ -44,7 +44,7 @@ export const IssueAttachments = () => {
   const { data: people } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => projectService.fetchProjectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 

web/components/issues/comment/add-comment.tsx

@@ -7,7 +7,7 @@ import { FileService } from "services/file.service";
 // components
 import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
 // ui
-import { Button } from "@plane/ui";
+import { Button, Tooltip } from "@plane/ui";
 import { Globe2, Lock } from "lucide-react";
 
 // types
@@ -72,6 +72,35 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAc
       <form onSubmit={handleSubmit(handleAddComment)}>
         <div>
           <div className="relative">
+            {showAccessSpecifier && (
+              <div className="absolute bottom-2 left-3 z-[1]">
+                <Controller
+                  control={control}
+                  name="access"
+                  render={({ field: { onChange, value } }) => (
+                    <div className="flex border border-custom-border-300 divide-x divide-custom-border-300 rounded overflow-hidden">
+                      {commentAccess.map((access) => (
+                        <Tooltip key={access.key} tooltipContent={access.label}>
+                          <button
+                            type="button"
+                            onClick={() => onChange(access.key)}
+                            className={`grid place-items-center p-1 hover:bg-custom-background-80 ${
+                              value === access.key ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            <access.icon
+                              className={`w-4 h-4 -mt-1 ${
+                                value === access.key ? "!text-custom-text-100" : "!text-custom-text-400"
+                              }`}
+                            />
+                          </button>
+                        </Tooltip>
+                      ))}
+                    </div>
+                  )}
+                />
+              </div>
+            )}
             <Controller
               name="access"
               control={control}

web/components/issues/comment/comment-card.tsx

@@ -116,8 +116,7 @@ export const CommentCard: React.FC<Props> = ({
             </div>
             <div className="flex gap-1 self-end">
               <button
-                type="button"
-                onClick={handleSubmit(onEnter)}
+                type="submit"
                 disabled={isSubmitting}
                 className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
               >

web/components/issues/description-form.tsx

@@ -49,14 +49,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
     },
   });
 
-  const [localTitleValue, setLocalTitleValue] = useState("");
-  const issueTitleCurrentValue = watch("name");
-  useEffect(() => {
-    if (localTitleValue === "" && issueTitleCurrentValue !== "") {
-      setLocalTitleValue(issueTitleCurrentValue);
-    }
-  }, [issueTitleCurrentValue, localTitleValue]);
-
   const handleDescriptionFormSubmit = useCallback(
     async (formData: Partial<IIssue>) => {
       if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
@@ -89,7 +81,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
     });
   }, [issue, reset]);
 
-  const debouncedFormSave = useDebouncedCallback(async () => {
+  const debouncedTitleSave = useDebouncedCallback(async () => {
     handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
   }, 1500);
 
@@ -100,21 +92,20 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
           <Controller
             name="name"
             control={control}
-            render={({ field: { onChange } }) => (
+            render={({ field: { value, onChange } }) => (
               <TextArea
-                value={localTitleValue}
                 id="name"
                 name="name"
+                value={value}
                 placeholder="Enter issue name"
                 onFocus={() => setCharacterLimit(true)}
                 onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
                   setCharacterLimit(false);
                   setIsSubmitting("submitting");
-                  setLocalTitleValue(e.target.value);
+                  debouncedTitleSave();
                   onChange(e.target.value);
-                  debouncedFormSave();
                 }}
-                required
+                required={true}
                 className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
                 hasError={Boolean(errors?.description)}
                 role="textbox"
@@ -144,6 +135,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
               uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
               deleteFile={fileService.deleteImage}
               value={value}
+              debouncedUpdatesEnabled={true}
               setShouldShowAlert={setShowAlert}
               setIsSubmitting={setIsSubmitting}
               customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
@@ -152,7 +144,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
                 setShowAlert(true);
                 setIsSubmitting("submitting");
                 onChange(description_html);
-                debouncedFormSave();
+                handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
               }}
             />
           )}

web/components/issues/draft-issue-form.tsx

@@ -51,7 +51,9 @@ const defaultValues: Partial<IIssue> = {
   parent: null,
   priority: "none",
   assignees: [],
+  assignees_list: [],
   labels: [],
+  labels_list: [],
   start_date: null,
   target_date: null,
 };
@@ -297,12 +299,21 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
     <>
       {projectId && (
         <>
-          <CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
+          <CreateStateModal
+            isOpen={stateModal}
+            handleClose={() => setStateModal(false)}
+            projectId={projectId}
+            user={user}
+          />
           <CreateLabelModal
             isOpen={labelModal}
             handleClose={() => setLabelModal(false)}
             projectId={projectId}
-            onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
+            user={user}
+            onSuccess={(response) => {
+              setValue("labels", [...watch("labels"), response.id]);
+              setValue("labels_list", [...watch("labels_list"), response.id]);
+            }}
           />
         </>
       )}

web/components/issues/draft-issue-modal.tsx

@@ -208,7 +208,8 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
           message: "Issue created successfully.",
         });
 
-        if (payload.assignees?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE(workspaceSlug as string));
+        if (payload.assignees_list?.some((assignee) => assignee === user?.id))
+          mutate(USER_ISSUE(workspaceSlug as string));
       })
       .catch(() => {
         setToastAlert({
@@ -324,7 +325,8 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
 
         if (!createMore) onClose();
 
-        if (payload.assignees?.some((assignee) => assignee === user?.id)) mutate(USER_ISSUE(workspaceSlug as string));
+        if (payload.assignees_list?.some((assignee) => assignee === user?.id))
+          mutate(USER_ISSUE(workspaceSlug as string));
 
         if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
       })
@@ -345,6 +347,8 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
 
     const payload: Partial<IIssue> = {
       ...formData,
+      assignees_list: formData.assignees ?? [],
+      labels_list: formData.labels ?? [],
       description: formData.description ?? "",
       description_html: formData.description_html ?? "<p></p>",
     };

web/components/issues/form.tsx

@@ -41,7 +41,9 @@ const defaultValues: Partial<IIssue> = {
   parent: null,
   priority: "none",
   assignees: [],
+  assignees_list: [],
   labels: [],
+  labels_list: [],
   start_date: null,
   target_date: null,
 };
@@ -249,12 +251,21 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
     <>
       {projectId && (
         <>
-          <CreateStateModal isOpen={stateModal} handleClose={() => setStateModal(false)} projectId={projectId} />
+          <CreateStateModal
+            isOpen={stateModal}
+            handleClose={() => setStateModal(false)}
+            projectId={projectId}
+            user={user ?? undefined}
+          />
           <CreateLabelModal
             isOpen={labelModal}
             handleClose={() => setLabelModal(false)}
             projectId={projectId}
-            onSuccess={(response) => setValue("labels", [...watch("labels"), response.id])}
+            user={user ?? undefined}
+            onSuccess={(response) => {
+              setValue("labels", [...watch("labels"), response.id]);
+              setValue("labels_list", [...watch("labels_list"), response.id]);
+            }}
           />
         </>
       )}

web/components/issues/index.ts

@@ -1,5 +1,6 @@
 export * from "./attachment";
 export * from "./comment";
+export * from "./my-issues";
 export * from "./sidebar-select";
 export * from "./view-select";
 export * from "./activity";

web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx

@@ -147,6 +147,18 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) =
     const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
       ...(prePopulatedData ?? {}),
       ...formData,
+      labels_list:
+        formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list?.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
     });
 
     try {

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

@@ -1,25 +0,0 @@
-import { PlusIcon } from "lucide-react";
-// components
-import { EmptyState } from "components/common";
-// assets
-import emptyIssue from "public/empty-state/issue.svg";
-
-export const CycleEmptyState: React.FC = () => (
-  <div className="h-full w-full grid place-items-center">
-    <EmptyState
-      title="Cycle issues will appear here"
-      description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-      image={emptyIssue}
-      primaryButton={{
-        text: "New issue",
-        icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
-        onClick: () => {
-          const e = new KeyboardEvent("keydown", {
-            key: "c",
-          });
-          document.dispatchEvent(e);
-        },
-      }}
-    />
-  </div>
-);

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

@@ -1,25 +0,0 @@
-import { PlusIcon } from "lucide-react";
-// components
-import { EmptyState } from "components/common";
-// assets
-import emptyIssue from "public/empty-state/issue.svg";
-
-export const GlobalViewEmptyState: React.FC = () => (
-  <div className="h-full w-full grid place-items-center">
-    <EmptyState
-      title="View issues will appear here"
-      description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-      image={emptyIssue}
-      primaryButton={{
-        text: "New issue",
-        icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
-        onClick: () => {
-          const e = new KeyboardEvent("keydown", {
-            key: "c",
-          });
-          document.dispatchEvent(e);
-        },
-      }}
-    />
-  </div>
-);

web/components/issues/issue-layouts/empty-states/index.ts

@@ -1,5 +0,0 @@
-export * from "./cycle";
-export * from "./global-view";
-export * from "./module";
-export * from "./project-view";
-export * from "./project";

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

@@ -1,25 +0,0 @@
-import { PlusIcon } from "lucide-react";
-// components
-import { EmptyState } from "components/common";
-// assets
-import emptyIssue from "public/empty-state/issue.svg";
-
-export const ModuleEmptyState: React.FC = () => (
-  <div className="h-full w-full grid place-items-center">
-    <EmptyState
-      title="Module issues will appear here"
-      description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-      image={emptyIssue}
-      primaryButton={{
-        text: "New issue",
-        icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
-        onClick: () => {
-          const e = new KeyboardEvent("keydown", {
-            key: "c",
-          });
-          document.dispatchEvent(e);
-        },
-      }}
-    />
-  </div>
-);

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

@@ -1,25 +0,0 @@
-import { PlusIcon } from "lucide-react";
-// components
-import { EmptyState } from "components/common";
-// assets
-import emptyIssue from "public/empty-state/issue.svg";
-
-export const ProjectViewEmptyState: React.FC = () => (
-  <div className="h-full w-full grid place-items-center">
-    <EmptyState
-      title="View issues will appear here"
-      description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-      image={emptyIssue}
-      primaryButton={{
-        text: "New issue",
-        icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
-        onClick: () => {
-          const e = new KeyboardEvent("keydown", {
-            key: "c",
-          });
-          document.dispatchEvent(e);
-        },
-      }}
-    />
-  </div>
-);

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

@@ -1,25 +0,0 @@
-import { PlusIcon } from "lucide-react";
-// components
-import { EmptyState } from "components/common";
-// assets
-import emptyIssue from "public/empty-state/issue.svg";
-
-export const ProjectEmptyState: React.FC = () => (
-  <div className="h-full w-full grid place-items-center">
-    <EmptyState
-      title="Project issues will appear here"
-      description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
-      image={emptyIssue}
-      primaryButton={{
-        text: "New issue",
-        icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
-        onClick: () => {
-          const e = new KeyboardEvent("keydown", {
-            key: "c",
-          });
-          document.dispatchEvent(e);
-        },
-      }}
-    />
-  </div>
-);

web/components/issues/issue-layouts/filters/applied-filters/members.tsx

@@ -1,7 +1,9 @@
 import { observer } from "mobx-react-lite";
-import { X } from "lucide-react";
+
 // ui
-import { Avatar } from "@plane/ui";
+import { Avatar } from "components/ui";
+// icons
+import { X } from "lucide-react";
 // types
 import { IUserLite } from "types";
 
@@ -23,7 +25,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
 
         return (
           <div key={memberId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
-            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
+            <Avatar user={memberDetails} height="16px" width="16px" />
             <span className="normal-case">{memberDetails.display_name}</span>
             <button
               type="button"

web/components/issues/issue-layouts/filters/header/filters/assignee.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
+
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Avatar, Loader } from "@plane/ui";
+import { Avatar } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IUserLite } from "types";
 
@@ -43,7 +45,7 @@ export const FilterAssignees: React.FC<Props> = (props) => {
                     key={`assignees-${member.id}`}
                     isChecked={appliedFilters?.includes(member.id) ? true : false}
                     onClick={() => handleUpdate(member.id)}
-                    icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="sm" />}
+                    icon={<Avatar user={member} height="18px" width="18px" />}
                     title={member.display_name}
                   />
                 ))}

web/components/issues/issue-layouts/filters/header/filters/created-by.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
+
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Avatar, Loader } from "@plane/ui";
+import { Avatar } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IUserLite } from "types";
 
@@ -43,7 +45,7 @@ export const FilterCreatedBy: React.FC<Props> = (props) => {
                     key={`created-by-${member.id}`}
                     isChecked={appliedFilters?.includes(member.id) ? true : false}
                     onClick={() => handleUpdate(member.id)}
-                    icon={<Avatar name={member.display_name} src={member.avatar} size="sm" />}
+                    icon={<Avatar user={member} height="18px" width="18px" />}
                     title={member.display_name}
                   />
                 ))}

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

@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
-import { Placement } from "@popperjs/core";
+
 // ui
 import { Button } from "@plane/ui";
 // icons
@@ -10,17 +10,16 @@ import { ChevronUp } from "lucide-react";
 type Props = {
   children: React.ReactNode;
   title?: string;
-  placement?: Placement;
 };
 
 export const FiltersDropdown: React.FC<Props> = (props) => {
-  const { children, title = "Dropdown", placement } = props;
+  const { children, title = "Dropdown" } = props;
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: placement ?? "auto",
+    placement: "auto",
   });
 
   return (

web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx

@@ -113,6 +113,12 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
     const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
       ...(prePopulatedData ?? {}),
       ...formData,
+      labels_list:
+        formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
       start_date: renderDateFormat(new Date()),
       target_date: renderDateFormat(new Date(new Date().getTime() + 24 * 60 * 60 * 1000)),
     });

web/components/issues/issue-layouts/index.ts

@@ -1,6 +1,5 @@
 // filters
 export * from "./filters";
-export * from "./empty-states";
 export * from "./quick-action-dropdowns";
 
 // layouts
@@ -10,6 +9,4 @@ export * from "./gantt";
 export * from "./kanban";
 export * from "./spreadsheet";
 
-export * from "./properties";
-
 export * from "./roots";

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

@@ -2,7 +2,7 @@ import { Draggable } from "@hello-pangea/dnd";
 // components
 import { KanBanProperties } from "./properties";
 // types
-import { IIssueDisplayProperties, IIssue } from "types";
+import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite } from "types";
 
 interface IssueBlockProps {
   sub_group_id: string;
@@ -17,11 +17,28 @@ interface IssueBlockProps {
     action: "update" | "delete"
   ) => void;
   quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
-  displayProperties: IIssueDisplayProperties;
+  displayProperties: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 
 export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
-  const { sub_group_id, columnId, index, issue, isDragDisabled, handleIssues, quickActions, displayProperties } = props;
+  const {
+    sub_group_id,
+    columnId,
+    index,
+    issue,
+    isDragDisabled,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    states,
+    labels,
+    members,
+    estimates,
+  } = props;
 
   const updateIssue = (sub_group_by: string | null, group_by: string | null, issueToUpdate: IIssue) => {
     if (issueToUpdate) handleIssues(sub_group_by, group_by, issueToUpdate, "update");
@@ -48,9 +65,9 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
               )}
             </div>
             <div
-              className={`text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 ${
-                isDragDisabled ? "" : "hover:cursor-grab"
-              } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
+              className={`text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
+                snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`
+              }`}
             >
               {displayProperties && displayProperties?.key && (
                 <div className="text-xs line-clamp-1 text-custom-text-300">
@@ -64,7 +81,11 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
                   columnId={columnId}
                   issue={issue}
                   handleIssues={updateIssue}
-                  displayProperties={displayProperties}
+                  display_properties={displayProperties}
+                  states={states}
+                  labels={labels}
+                  members={members}
+                  estimates={estimates}
                 />
               </div>
             </div>

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

@@ -1,6 +1,6 @@
 // components
 import { KanbanIssueBlock } from "components/issues";
-import { IIssueDisplayProperties, IIssue } from "types";
+import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite } from "types";
 
 interface IssueBlocksListProps {
   sub_group_id: string;
@@ -14,11 +14,27 @@ interface IssueBlocksListProps {
     action: "update" | "delete"
   ) => void;
   quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
-  displayProperties: IIssueDisplayProperties;
+  display_properties: any;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  estimates: IEstimatePoint[] | null;
 }
 
 export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) => {
-  const { sub_group_id, columnId, issues, isDragDisabled, handleIssues, quickActions, displayProperties } = props;
+  const {
+    sub_group_id,
+    columnId,
+    issues,
+    isDragDisabled,
+    handleIssues,
+    quickActions,
+    display_properties,
+    states,
+    labels,
+    members,
+    estimates,
+  } = props;
 
   return (
     <>
@@ -31,10 +47,14 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
               issue={issue}
               handleIssues={handleIssues}
               quickActions={quickActions}
-              displayProperties={displayProperties}
+              displayProperties={display_properties}
               columnId={columnId}
               sub_group_id={sub_group_id}
               isDragDisabled={isDragDisabled}
+              states={states}
+              labels={labels}
+              members={members}
+              estimates={estimates}
             />
           ))}
         </>

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

@@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
 import { KanbanIssueBlocksList, BoardInlineCreateIssueForm } from "components/issues";
 // types
-import { IIssueDisplayProperties, IIssue } from "types";
+import { IEstimatePoint, IIssue, IIssueLabels, IProject, IState, IUserLite } from "types";
 // constants
 import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
 
@@ -26,10 +26,15 @@ export interface IGroupByKanBan {
     action: "update" | "delete"
   ) => void;
   quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
-  displayProperties: IIssueDisplayProperties;
+  display_properties: any;
   kanBanToggle: any;
   handleKanBanToggle: any;
   enableQuickIssueCreate?: boolean;
+  states: IState[] | null;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  priorities: any;
+  estimates: IEstimatePoint[] | null;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
@@ -43,9 +48,14 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     isDragDisabled,
     handleIssues,
     quickActions,
-    displayProperties,
+    display_properties,
     kanBanToggle,
     handleKanBanToggle,
+    states,
+    labels,
+    members,
+    priorities,
+    estimates,
     enableQuickIssueCreate,
   } = props;
 
@@ -94,7 +104,11 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                         isDragDisabled={isDragDisabled}
                         handleIssues={handleIssues}
                         quickActions={quickActions}
-                        displayProperties={displayProperties}
+                        display_properties={display_properties}
+                        states={states}
+                        labels={labels}
+                        members={members}
+                        estimates={estimates}
                       />
                     ) : (
                       isDragDisabled && (
@@ -137,9 +151,16 @@ export interface IKanBan {
     action: "update" | "delete"
   ) => void;
   quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
-  displayProperties: IIssueDisplayProperties;
+  display_properties: any;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  states: IState[] | null;
+  stateGroups: any;
+  priorities: any;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
+  estimates: IEstimatePoint[] | null;
   enableQuickIssueCreate?: boolean;
 }
 
@@ -151,9 +172,16 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     sub_group_id = "null",
     handleIssues,
     quickActions,
-    displayProperties,
+    display_properties,
     kanBanToggle,
     handleKanBanToggle,
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
+    estimates,
     enableQuickIssueCreate,
   } = props;
 
@@ -172,10 +200,15 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
           handleIssues={handleIssues}
           quickActions={quickActions}
-          displayProperties={displayProperties}
+          display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
@@ -190,10 +223,15 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
           handleIssues={handleIssues}
           quickActions={quickActions}
-          displayProperties={displayProperties}
+          display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
@@ -208,10 +246,15 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
           handleIssues={handleIssues}
           quickActions={quickActions}
-          displayProperties={displayProperties}
+          display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
@@ -226,10 +269,15 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
           handleIssues={handleIssues}
           quickActions={quickActions}
-          displayProperties={displayProperties}
+          display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
@@ -244,10 +292,15 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
           handleIssues={handleIssues}
           quickActions={quickActions}
-          displayProperties={displayProperties}
+          display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
@@ -262,10 +315,15 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
           handleIssues={handleIssues}
           quickActions={quickActions}
-          displayProperties={displayProperties}
+          display_properties={display_properties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          states={states}
+          labels={labels}
+          members={members}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
     </div>

web/components/issues/issue-layouts/kanban/headers/assignee.tsx

@@ -3,8 +3,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
-// ui
-import { Avatar } from "@plane/ui";
+import { Avatar } from "components/ui";
 
 export interface IAssigneesHeader {
   column_id: string;
@@ -17,7 +16,7 @@ export interface IAssigneesHeader {
   handleKanBanToggle: any;
 }
 
-export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="base" />;
+export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
 
 export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
   const {

web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx

@@ -117,6 +117,18 @@ export const BoardInlineCreateIssueForm: React.FC<Props> = observer((props) => {
     const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
       ...(prePopulatedData ?? {}),
       ...formData,
+      labels_list:
+        formData.labels_list && formData.labels_list.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list && formData.assignees_list.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
     });
 
     try {