Merge pull request #1951 from makeplane/stage-release

Promote: Stage release to Production

.github/workflows/Build_Test_Pull_Request.yml

@@ -1,55 +0,0 @@
-name: Build Pull Request Contents
-
-on: 
-  pull_request:
-    types: ["opened", "synchronize"]
-
-jobs:
-  build-pull-request-contents:
-    name: Build Pull Request Contents
-    runs-on: ubuntu-20.04
-    permissions:
-      pull-requests: read
-
-    steps:
-      - name: Checkout Repository to Actions
-        uses: actions/checkout@v3.3.0
-
-      - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 18.x
-          cache: 'yarn'
-      
-      - name: Get changed files
-        id: changed-files
-        uses: tj-actions/changed-files@v38
-        with:
-          files_yaml: |
-            apiserver:
-              - apiserver/**
-            web:
-              - apps/app/**
-            deploy:
-              - apps/space/**
-
-      - name: Setup .npmrc for repository
-        run: |
-            echo -e "@tiptap-pro:registry=https://registry.tiptap.dev/\n//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_TOKEN }}" > .npmrc
-
-      - name: Build Plane's Main App
-        if: steps.changed-files.outputs.web_any_changed == 'true'
-        run: |
-          mv ./.npmrc ./apps/app
-          cd apps/app
-          yarn
-          yarn build
-
-      - name: Build Plane's Deploy App
-        if: steps.changed-files.outputs.deploy_any_changed == 'true'
-        run: |
-          cd apps/space
-          yarn 
-          yarn build
-
-

.github/workflows/Update_Docker_Images.yml

@@ -1,111 +0,0 @@
-name: Update Docker Images for Plane on Release
-
-on:
-  release:
-    types: [released]
-
-jobs:
-  build_push_backend:
-    name: Build and Push Api Server Docker Image
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3.3.0
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.5.0
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2.1.0
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Setup .npmrc for repository
-        run: |
-            echo -e "@tiptap-pro:registry=https://registry.tiptap.dev/\n//registry.tiptap.dev/:_authToken=${{ secrets.TIPTAP_TOKEN }}" > .npmrc
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: metaFrontend
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend
-          tags: |
-            type=ref,event=tag
-      
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: metaBackend
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend
-          tags: |
-            type=ref,event=tag
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: metaDeploy
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-deploy
-          tags: |
-            type=ref,event=tag
-
-      - name: Extract metadata (tags, labels) for Docker (Docker Hub) from Github Release
-        id: metaProxy
-        uses: docker/metadata-action@v4.3.0
-        with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy
-          tags: |
-            type=ref,event=tag
-
-      - name: Build and Push Frontend to Docker Container Registry
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./apps/app/Dockerfile.web
-          platforms: linux/amd64
-          tags: ${{ steps.metaFrontend.outputs.tags }}
-          push: true
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and Push Backend to Docker Hub
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: ./apiserver
-          file: ./apiserver/Dockerfile.api
-          platforms: linux/amd64
-          push: true
-          tags: ${{ steps.metaBackend.outputs.tags }}
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and Push Plane-Deploy to Docker Hub
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./apps/space/Dockerfile.space
-          platforms: linux/amd64
-          push: true
-          tags: ${{ steps.metaDeploy.outputs.tags }}
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and Push Plane-Proxy to Docker Hub
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: ./nginx
-          file: ./nginx/Dockerfile
-          platforms: linux/amd64
-          push: true
-          tags: ${{ steps.metaProxy.outputs.tags }}
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

.github/workflows/push-image-backend.yml

@@ -0,0 +1,77 @@
+name: Build and Push Backend Docker Image
+
+on:
+  push:
+    branches:
+      - 'develop'
+      - 'master'
+    tags:
+      - '*'
+
+jobs:
+  build_push_backend:
+    name: Build and Push Api Server Docker Image
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.3.0
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.1.0
+        with:
+          platforms: linux/arm64,linux/amd64
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v2.1.0
+        with:
+          registry: "ghcr.io"
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          registry: "registry.hub.docker.com"
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub)
+        id: ghmeta
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: makeplane/plane-backend
+
+      - name: Extract metadata (tags, labels) for Docker (Github)
+        id: dkrmeta
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ghcr.io/${{ github.repository }}-backend
+
+      - name: Build and Push to GitHub Container Registry
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: ./apiserver
+          file: ./apiserver/Dockerfile.api
+          platforms: linux/arm64,linux/amd64
+          push: true
+          cache-from: type=gha
+          cache-to: type=gha
+          tags: ${{ steps.ghmeta.outputs.tags }}
+          labels: ${{ steps.ghmeta.outputs.labels }}
+
+      - name: Build and Push to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: ./apiserver
+          file: ./apiserver/Dockerfile.api
+          platforms: linux/arm64,linux/amd64
+          push: true
+          cache-from: type=gha
+          cache-to: type=gha
+          tags: ${{ steps.dkrmeta.outputs.tags }}
+          labels: ${{ steps.dkrmeta.outputs.labels }}
+

.github/workflows/push-image-frontend.yml

@@ -0,0 +1,77 @@
+name: Build and Push Frontend Docker Image
+
+on:
+  push:
+    branches:
+      - 'develop'
+      - 'master'
+    tags:
+      - '*'
+
+jobs:
+  build_push_frontend:
+    name: Build Frontend Docker Image
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.3.0
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.1.0
+        with:
+          platforms: linux/arm64,linux/amd64
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Github Container Registry
+        uses: docker/login-action@v2.1.0
+        with:
+          registry: "ghcr.io"
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          registry: "registry.hub.docker.com"
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_PASSWORD }}
+      
+      - name: Extract metadata (tags, labels) for Docker (Docker Hub)
+        id: ghmeta
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: makeplane/plane-frontend
+
+      - name: Extract metadata (tags, labels) for Docker (Github)
+        id: meta
+        uses: docker/metadata-action@v4.3.0
+        with:
+          images: ghcr.io/${{ github.repository }}-frontend
+
+      - name: Build and Push to GitHub Container Registry
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./apps/app/Dockerfile.web
+          platforms: linux/arm64,linux/amd64
+          push: true
+          cache-from: type=gha
+          cache-to: type=gha
+          tags: ${{ steps.ghmeta.outputs.tags }}
+          labels: ${{ steps.ghmeta.outputs.labels }}
+      
+      - name: Build and Push to Docker Container Registry
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./apps/app/Dockerfile.web
+          platforms: linux/arm64,linux/amd64
+          push: true
+          cache-from: type=gha
+          cache-to: type=gha
+          tags: ${{ steps.dkrmeta.outputs.tags }}
+          labels: ${{ steps.dkrmeta.outputs.labels }}
+

apiserver/plane/api/serializers/project.py

@@ -112,7 +112,7 @@ class ProjectDetailSerializer(BaseSerializer):
 
 
 class ProjectMemberSerializer(BaseSerializer):
-    workspace = WorkspaceLiteSerializer(read_only=True)
+    workspace = WorkSpaceSerializer(read_only=True)
     project = ProjectLiteSerializer(read_only=True)
     member = UserLiteSerializer(read_only=True)
 

apiserver/plane/api/urls.py

@@ -89,6 +89,7 @@ from plane.api.views import (
     IssueCommentPublicViewSet,
     IssueReactionViewSet,
     CommentReactionViewSet,
+    ExportIssuesEndpoint,
     ## End Issues
     # States
     StateViewSet,
@@ -173,12 +174,7 @@ from plane.api.views import (
     CommentReactionPublicViewSet,
     InboxIssuePublicViewSet,
     IssueVotePublicViewSet,
-    WorkspaceProjectDeployBoardEndpoint,
     ## End Public Boards
-    ## Exporter
-    ExportIssuesEndpoint,
-    ## End Exporter
-
 )
 
 
@@ -1618,10 +1614,5 @@ urlpatterns = [
         ),
         name="issue-vote-project-board",
     ),
-    path(
-        "public/workspaces/<str:slug>/project-boards/",
-        WorkspaceProjectDeployBoardEndpoint.as_view(),
-        name="workspace-project-boards",
-    ),
     ## End Public Boards
 ]

apiserver/plane/api/views/__init__.py

@@ -16,7 +16,6 @@ from .project import (
     ProjectDeployBoardViewSet,
     ProjectDeployBoardPublicSettingsEndpoint,
     ProjectMemberEndpoint,
-    WorkspaceProjectDeployBoardEndpoint,
 )
 from .user import (
     UserEndpoint,

apiserver/plane/api/views/issue.py

@@ -1799,9 +1799,8 @@ class IssueVotePublicViewSet(BaseViewSet):
                 actor_id=request.user.id,
                 project_id=project_id,
                 issue_id=issue_id,
+                vote=request.data.get("vote", 1),
             )
-            issue_vote.vote = request.data.get("vote", 1)
-            issue_vote.save()
             serializer = IssueVoteSerializer(issue_vote)
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         except Exception as e:
@@ -1828,3 +1827,28 @@ class IssueVotePublicViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+
+class ExportIssuesEndpoint(BaseAPIView):
+    permission_classes = [
+        WorkSpaceAdminPermission,
+    ]
+
+    def post(self, request, slug):
+        try:
+
+            issue_export_task.delay(
+                email=request.user.email, data=request.data, slug=slug ,exporter_name=request.user.first_name
+            )
+
+            return Response(
+                {
+                    "message": f"Once the export is ready it will be emailed to you at {str(request.user.email)}"
+                },
+                status=status.HTTP_200_OK,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )

apiserver/plane/api/views/project.py

@@ -287,10 +287,7 @@ class ProjectViewSet(BaseViewSet):
                 )
 
                 data = serializer.data
-                # Additional fields of the member
                 data["sort_order"] = project_member.sort_order
-                data["member_role"] = project_member.role
-                data["is_member"] = True
                 return Response(data, status=status.HTTP_201_CREATED)
             return Response(
                 serializer.errors,
@@ -1289,38 +1286,3 @@ class ProjectDeployBoardIssuesPublicEndpoint(BaseAPIView):
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-
-
-class WorkspaceProjectDeployBoardEndpoint(BaseAPIView):
-
-    permission_classes = [AllowAny,]
-
-    def get(self, request, slug):
-        try:
-            projects = (
-                Project.objects.filter(workspace__slug=slug)
-                .annotate(
-                    is_public=Exists(
-                        ProjectDeployBoard.objects.filter(
-                            workspace__slug=slug, project_id=OuterRef("pk")
-                        )
-                    )
-                )
-                .filter(is_public=True)
-            ).values(
-                "id",
-                "identifier",
-                "name",
-                "description",
-                "emoji",
-                "icon_prop",
-                "cover_image",
-            )
-
-            return Response(projects, status=status.HTTP_200_OK)
-        except Exception as e:
-            capture_exception(e)
-            return Response(
-                {"error": "Something went wrong please try again later"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )

apiserver/plane/db/migrations/0042_alter_issuevote_unique_together_alter_issuevote_vote_and_more.py

@@ -1,26 +0,0 @@
-# Generated by Django 4.2.3 on 2023-08-29 07:58
-
-from django.db import migrations, models
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('db', '0041_cycle_sort_order_issuecomment_access_and_more'),
-    ]
-
-    operations = [
-        migrations.AlterUniqueTogether(
-            name='issuevote',
-            unique_together=set(),
-        ),
-        migrations.AlterField(
-            model_name='issuevote',
-            name='vote',
-            field=models.IntegerField(choices=[(-1, 'DOWNVOTE'), (1, 'UPVOTE')], default=1),
-        ),
-        migrations.AlterUniqueTogether(
-            name='issuevote',
-            unique_together={('issue', 'actor', 'vote')},
-        ),
-    ]

apiserver/plane/db/models/issue.py

@@ -476,12 +476,10 @@ class IssueVote(ProjectBaseModel):
         choices=(
             (-1, "DOWNVOTE"),
             (1, "UPVOTE"),
-        ),
-        default=1,
+        )
     )
-
     class Meta:
-        unique_together = ["issue", "actor", "vote"]
+        unique_together = ["issue", "actor"]
         verbose_name = "Issue Vote"
         verbose_name_plural = "Issue Votes"
         db_table = "issue_votes"

apiserver/runtime.txt

@@ -1 +1 @@
-python-3.11.5
+python-3.11.4

apps/app/components/core/activity.tsx

@@ -53,11 +53,7 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
 
 const activityDetails: {
   [key: string]: {
-    message: (
-      activity: IIssueActivity,
-      showIssue: boolean,
-      workspaceSlug: string
-    ) => React.ReactNode;
+    message: (activity: IIssueActivity, showIssue: boolean) => React.ReactNode;
     icon: React.ReactNode;
   };
 } = {
@@ -177,50 +173,26 @@ const activityDetails: {
     icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
   },
   cycles: {
-    message: (activity, showIssue, workspaceSlug) => {
+    message: (activity) => {
       if (activity.verb === "created")
         return (
           <>
             added this issue to the cycle{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.new_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
           </>
         );
       else if (activity.verb === "updated")
         return (
           <>
             set the cycle to{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.new_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed the issue from the cycle{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.old_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
           </>
         );
     },
@@ -379,50 +351,26 @@ const activityDetails: {
     icon: <Icon iconName="link" className="!text-sm" aria-hidden="true" />,
   },
   modules: {
-    message: (activity, showIssue, workspaceSlug) => {
+    message: (activity) => {
       if (activity.verb === "created")
         return (
           <>
             added this issue to the module{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.new_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
           </>
         );
       else if (activity.verb === "updated")
         return (
           <>
             set the module to{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.new_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
             removed the issue from the module{" "}
-            <a
-              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
-            >
-              {activity.old_value}
-              <Icon iconName="launch" className="!text-xs" />
-            </a>
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
           </>
         );
     },
@@ -590,17 +538,8 @@ export const ActivityMessage = ({
 }: {
   activity: IIssueActivity;
   showIssue?: boolean;
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <>
-      {activityDetails[activity.field as keyof typeof activityDetails]?.message(
-        activity,
-        showIssue,
-        workspaceSlug?.toString() ?? ""
-      )}
-    </>
-  );
-};
+}) => (
+  <>
+    {activityDetails[activity.field as keyof typeof activityDetails]?.message(activity, showIssue)}
+  </>
+);

apps/app/components/core/filters/due-date-filter-modal.tsx

@@ -11,18 +11,15 @@ import { Dialog, Transition } from "@headlessui/react";
 // hooks
 import useIssuesView from "hooks/use-issues-view";
 // components
-import { DateFilterSelect } from "./date-filter-select";
+import { DueDateFilterSelect } from "./due-date-filter-select";
 // ui
 import { PrimaryButton, SecondaryButton } from "components/ui";
 // icons
 import { XMarkIcon } from "@heroicons/react/20/solid";
 // helpers
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { IIssueFilterOptions } from "types";
 
 type Props = {
-  title: string;
-  field: keyof IIssueFilterOptions;
   isOpen: boolean;
   handleClose: () => void;
 };
@@ -39,7 +36,7 @@ const defaultValues: TFormValues = {
   date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
 };
 
-export const DateFilterModal: React.FC<Props> = ({ title, field, isOpen, handleClose }) => {
+export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) => {
   const { filters, setFilters } = useIssuesView();
 
   const router = useRouter();
@@ -54,11 +51,11 @@ export const DateFilterModal: React.FC<Props> = ({ title, field, isOpen, handleC
 
     if (filterType === "range") {
       setFilters(
-        { [field]: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`] },
+        { target_date: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`] },
         !Boolean(viewId)
       );
     } else {
-      const filteredArray = (filters?.[field] as string[])?.filter((item) => {
+      const filteredArray = filters?.target_date?.filter((item) => {
         if (item?.includes(filterType)) return false;
 
         return true;
@@ -67,13 +64,13 @@ export const DateFilterModal: React.FC<Props> = ({ title, field, isOpen, handleC
       const filterOne = filteredArray && filteredArray?.length > 0 ? filteredArray[0] : null;
       if (filterOne)
         setFilters(
-          { [field]: [filterOne, `${renderDateFormat(date1)};${filterType}`] },
+          { target_date: [filterOne, `${renderDateFormat(date1)};${filterType}`] },
           !Boolean(viewId)
         );
       else
         setFilters(
           {
-            [field]: [`${renderDateFormat(date1)};${filterType}`],
+            target_date: [`${renderDateFormat(date1)};${filterType}`],
           },
           !Boolean(viewId)
         );
@@ -119,7 +116,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, field, isOpen, handleC
                       control={control}
                       name="filterType"
                       render={({ field: { value, onChange } }) => (
-                        <DateFilterSelect title={title} value={value} onChange={onChange} />
+                        <DueDateFilterSelect value={value} onChange={onChange} />
                       )}
                     />
                     <XMarkIcon

apps/app/components/core/filters/due-date-filter-select.tsx

@@ -7,7 +7,6 @@ import { CalendarBeforeIcon, CalendarAfterIcon, CalendarMonthIcon } from "compon
 // fetch-keys
 
 type Props = {
-  title: string;
   value: string;
   onChange: (value: string) => void;
 };
@@ -20,31 +19,29 @@ type DueDate = {
 
 const dueDateRange: DueDate[] = [
   {
-    name: "before",
+    name: "Due date before",
     value: "before",
     icon: <CalendarBeforeIcon className="h-4 w-4 " />,
   },
   {
-    name: "after",
+    name: "Due date after",
     value: "after",
     icon: <CalendarAfterIcon className="h-4 w-4 " />,
   },
   {
-    name: "range",
+    name: "Due date range",
     value: "range",
     icon: <CalendarMonthIcon className="h-4 w-4 " />,
   },
 ];
 
-export const DateFilterSelect: React.FC<Props> = ({ title, value, onChange }) => (
+export const DueDateFilterSelect: React.FC<Props> = ({ value, onChange }) => (
   <CustomSelect
     value={value}
     label={
       <div className="flex items-center gap-2 text-xs">
         {dueDateRange.find((item) => item.value === value)?.icon}
-        <span>
-          {title} {dueDateRange.find((item) => item.value === value)?.name}
-        </span>
+        <span>{dueDateRange.find((item) => item.value === value)?.name}</span>
       </div>
     }
     onChange={onChange}
@@ -53,7 +50,7 @@ export const DateFilterSelect: React.FC<Props> = ({ title, value, onChange }) =>
       <CustomSelect.Option key={index} value={option.value}>
         <>
           <span>{option.icon}</span>
-          {title} {option.name}
+          {option.name}
         </>
       </CustomSelect.Option>
     ))}

apps/app/components/core/filters/filters-list.tsx

@@ -240,34 +240,6 @@ export const FiltersList: React.FC<Props> = ({
                           </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),
-                                })
-                              }
-                            >
-                              <XMarkIcon 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;

apps/app/components/core/filters/index.ts

@@ -1,4 +1,4 @@
-export * from "./date-filter-modal";
-export * from "./date-filter-select";
+export * from "./due-date-filter-modal";
+export * from "./due-date-filter-select";
 export * from "./filters-list";
 export * from "./issues-view-filter";

apps/app/components/core/filters/issues-view-filter.tsx

@@ -113,41 +113,46 @@ export const IssuesFilterView: React.FC = () => {
           ))}
         </div>
       )}
-      <SelectFilters
-        filters={filters}
-        onSelect={(option) => {
-          const key = option.key as keyof typeof filters;
+      {issueView !== "gantt_chart" && (
+        <SelectFilters
+          filters={filters}
+          onSelect={(option) => {
+            const key = option.key as keyof typeof filters;
 
-          if (key === "start_date" || key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(filters[key] ?? [], option.value);
-
-            setFilters({
-              [key]: valueExists ? null : option.value,
-            });
-          } else {
-            const valueExists = filters[key]?.includes(option.value);
-
-            if (valueExists)
-              setFilters(
-                {
-                  [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                    (val) => val !== option.value
-                  ),
-                },
-                !Boolean(viewId)
+            if (key === "target_date") {
+              const valueExists = checkIfArraysHaveSameElements(
+                filters.target_date ?? [],
+                option.value
               );
-            else
-              setFilters(
-                {
-                  [option.key]: [...((filters[key] ?? []) as any[]), option.value],
-                },
-                !Boolean(viewId)
-              );
-          }
-        }}
-        direction="left"
-        height="rg"
-      />
+
+              setFilters({
+                target_date: valueExists ? null : option.value,
+              });
+            } else {
+              const valueExists = filters[key]?.includes(option.value);
+
+              if (valueExists)
+                setFilters(
+                  {
+                    [option.key]: ((filters[key] ?? []) as any[])?.filter(
+                      (val) => val !== option.value
+                    ),
+                  },
+                  !Boolean(viewId)
+                );
+              else
+                setFilters(
+                  {
+                    [option.key]: [...((filters[key] ?? []) as any[]), option.value],
+                  },
+                  !Boolean(viewId)
+                );
+            }
+          }}
+          direction="left"
+          height="rg"
+        />
+      )}
       <Popover className="relative">
         {({ open }) => (
           <>

apps/app/components/core/modals/gpt-assistant-modal.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
+
 import { useRouter } from "next/router";
+
 // react-hook-form
 import { useForm } from "react-hook-form";
 // services
@@ -10,10 +12,9 @@ import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
 import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-import { TipTapEditor } from "components/tiptap";
-// types
-import { IIssue, IPageBlock } from "types";
 
+import { IIssue, IPageBlock } from "types";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
@@ -31,6 +32,12 @@ type FormData = {
   task: string;
 };
 
+const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
+  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
+);
+
+TiptapEditor.displayName = "TiptapEditor";
+
 export const GptAssistantModal: React.FC<Props> = ({
   isOpen,
   handleClose,
@@ -133,14 +140,13 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
-        isOpen ? "block" : "hidden"
-      }`}
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${isOpen ? "block" : "hidden"
+        }`}
     >
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
         <div className="text-sm">
           Content:
-          <TipTapEditor
+          <TiptapEditor
             workspaceSlug={workspaceSlug as string}
             value={htmlContent ?? `<p>${content}</p>`}
             customClassName="-m-3"
@@ -154,7 +160,7 @@ export const GptAssistantModal: React.FC<Props> = ({
       {response !== "" && (
         <div className="page-block-section text-sm">
           Response:
-          <TipTapEditor
+          <Tiptap
             workspaceSlug={workspaceSlug as string}
             value={`<p>${response}</p>`}
             customClassName="-mx-3 -my-3"
@@ -174,11 +180,10 @@ export const GptAssistantModal: React.FC<Props> = ({
         type="text"
         name="task"
         register={register}
-        placeholder={`${
-          content && content !== ""
+        placeholder={`${content && content !== ""
             ? "Tell AI what action to perform on this content..."
             : "Ask AI anything..."
-        }`}
+          }`}
         autoComplete="off"
       />
       <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
@@ -214,8 +219,8 @@ export const GptAssistantModal: React.FC<Props> = ({
             {isSubmitting
               ? "Generating response..."
               : response === ""
-              ? "Generate response"
-              : "Generate again"}
+                ? "Generate response"
+                : "Generate again"}
           </PrimaryButton>
         </div>
       </div>

apps/app/components/core/views/all-views.tsx

@@ -114,10 +114,7 @@ export const AllViews: React.FC<Props> = ({
         )}
       </StrictModeDroppable>
       {groupedIssues ? (
-        !isEmpty ||
-        issueView === "kanban" ||
-        issueView === "calendar" ||
-        issueView === "gantt_chart" ? (
+        !isEmpty || issueView === "kanban" || issueView === "calendar" ? (
           <>
             {issueView === "list" ? (
               <AllLists

apps/app/components/core/views/board-view/board-header.tsx

@@ -12,7 +12,7 @@ import useProjects from "hooks/use-projects";
 // component
 import { Avatar, Icon } from "components/ui";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicons/react/24/outline";
 import { getPriorityIcon, getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -56,10 +56,10 @@ export const BoardHeader: React.FC<Props> = ({
   );
 
   const { data: members } = useSWR(
-    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
+    workspaceSlug && projectId && selectedGroup === "created_by"
       ? PROJECT_MEMBERS(projectId.toString())
       : null,
-    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
+    workspaceSlug && projectId && selectedGroup === "created_by"
       ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
@@ -79,11 +79,9 @@ export const BoardHeader: React.FC<Props> = ({
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
         break;
-      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        title = member ? member.display_name : "None";
-
+        title = member?.display_name ?? "";
         break;
     }
 
@@ -124,10 +122,9 @@ export const BoardHeader: React.FC<Props> = ({
           />
         );
         break;
-      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = member ? <Avatar user={member} height="24px" width="24px" fontSize="12px" /> : <></>;
+        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
 
         break;
     }

apps/app/components/core/views/issues-view.tsx

@@ -478,7 +478,6 @@ export const IssuesView: React.FC<Props> = ({
                   labels: null,
                   priority: null,
                   state: null,
-                  start_date: null,
                   target_date: null,
                   type: null,
                 })
@@ -514,8 +513,7 @@ export const IssuesView: React.FC<Props> = ({
         dragDisabled={
           selectedGroup === "created_by" ||
           selectedGroup === "labels" ||
-          selectedGroup === "state_detail.group" ||
-          selectedGroup === "assignees"
+          selectedGroup === "state_detail.group"
         }
         emptyState={{
           title: cycleId
@@ -548,7 +546,7 @@ export const IssuesView: React.FC<Props> = ({
         }}
         handleOnDragEnd={handleOnDragEnd}
         handleIssueAction={handleIssueAction}
-        openIssuesListModal={openIssuesListModal ?? null}
+        openIssuesListModal={openIssuesListModal ? openIssuesListModal : null}
         removeIssue={cycleId ? removeIssueFromCycle : moduleId ? removeIssueFromModule : null}
         trashBox={trashBox}
         setTrashBox={setTrashBox}

apps/app/components/core/views/list-view/single-list.tsx

@@ -94,10 +94,9 @@ export const SingleList: React.FC<Props> = ({
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
         break;
-      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        title = member ? member.display_name : "None";
+        title = member?.display_name ?? "";
         break;
     }
 
@@ -138,10 +137,9 @@ export const SingleList: React.FC<Props> = ({
           />
         );
         break;
-      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = member ? <Avatar user={member} height="24px" width="24px" fontSize="12px" /> : <></>;
+        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
 
         break;
     }

apps/app/components/core/views/spreadsheet-view/single-issue.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useState } from "react";
 
+import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { mutate } from "swr";
 
 // components
 import {
-  IssuePeekOverview,
   ViewAssigneeSelect,
   ViewDueDateSelect,
   ViewEstimateSelect,
@@ -75,10 +75,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   nestingLevel,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-
-  // issue peek overview
-  const [issuePeekOverview, setIssuePeekOverview] = useState(false);
-
   const router = useRouter();
 
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
@@ -99,7 +95,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         ? VIEW_ISSUES(viewId.toString(), params)
         : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
 
-      if (issue.parent)
+      if (issue.parent) {
         mutate<ISubIssueResponse>(
           SUB_ISSUES(issue.parent.toString()),
           (prevData) => {
@@ -120,7 +116,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           },
           false
         );
-      else
+      } else {
         mutate<IIssue[]>(
           fetchKey,
           (prevData) =>
@@ -135,6 +131,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             }),
           false
         );
+      }
 
       issuesService
         .patchIssue(
@@ -182,203 +179,190 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
-    <>
-      <IssuePeekOverview
-        handleDeleteIssue={() => handleDeleteIssue(issue)}
-        handleUpdateIssue={async (formData) => partialUpdateIssue(formData, issue)}
-        issue={issue}
-        isOpen={issuePeekOverview}
-        onClose={() => setIssuePeekOverview(false)}
-        workspaceSlug={workspaceSlug?.toString() ?? ""}
-        readOnly={isNotAllowed}
-      />
-      <div
-        className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
-        style={{ gridTemplateColumns }}
-      >
-        <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full">
-          <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
-            <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
-              {properties.key && (
-                <span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
-                  {issue.project_detail?.identifier}-{issue.sequence_id}
-                </span>
-              )}
-              {!isNotAllowed && !disableUserActions && (
-                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                  <Popover2
-                    isOpen={isOpen}
-                    canEscapeKeyClose
-                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                    content={
-                      <div
-                        className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
+    <div
+      className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
+      style={{ gridTemplateColumns }}
+    >
+      <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full">
+        <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
+          <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
+            {properties.key && (
+              <span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
+                {issue.project_detail?.identifier}-{issue.sequence_id}
+              </span>
+            )}
+            {!isNotAllowed && !disableUserActions && (
+              <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
+                <Popover2
+                  isOpen={isOpen}
+                  canEscapeKeyClose
+                  onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
+                  content={
+                    <div
+                      className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
+                    >
+                      <button
+                        type="button"
+                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                        onClick={() => {
+                          handleEditIssue(issue);
+                          setIsOpen(false);
+                        }}
                       >
-                        <button
-                          type="button"
-                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                          onClick={() => {
-                            handleEditIssue(issue);
-                            setIsOpen(false);
-                          }}
-                        >
-                          <div className="flex items-center justify-start gap-2">
-                            <PencilIcon className="h-4 w-4" />
-                            <span>Edit issue</span>
-                          </div>
-                        </button>
+                        <div className="flex items-center justify-start gap-2">
+                          <PencilIcon className="h-4 w-4" />
+                          <span>Edit issue</span>
+                        </div>
+                      </button>
 
-                        <button
-                          type="button"
-                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                          onClick={() => {
-                            handleDeleteIssue(issue);
-                            setIsOpen(false);
-                          }}
-                        >
-                          <div className="flex items-center justify-start gap-2">
-                            <TrashIcon className="h-4 w-4" />
-                            <span>Delete issue</span>
-                          </div>
-                        </button>
+                      <button
+                        type="button"
+                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                        onClick={() => {
+                          handleDeleteIssue(issue);
+                          setIsOpen(false);
+                        }}
+                      >
+                        <div className="flex items-center justify-start gap-2">
+                          <TrashIcon className="h-4 w-4" />
+                          <span>Delete issue</span>
+                        </div>
+                      </button>
 
-                        <button
-                          type="button"
-                          className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                          onClick={() => {
-                            handleCopyText();
-                            setIsOpen(false);
-                          }}
-                        >
-                          <div className="flex items-center justify-start gap-2">
-                            <LinkIcon className="h-4 w-4" />
-                            <span>Copy issue link</span>
-                          </div>
-                        </button>
-                      </div>
-                    }
-                    placement="bottom-start"
-                  >
-                    <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
-                  </Popover2>
-                </div>
-              )}
-            </div>
-
-            {issue.sub_issues_count > 0 && (
-              <div className="h-6 w-6 flex justify-center items-center">
-                <button
-                  className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
-                  onClick={() => handleToggleExpand(issue.id)}
+                      <button
+                        type="button"
+                        className="hover:text-custom-text-200 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
+                        onClick={() => {
+                          handleCopyText();
+                          setIsOpen(false);
+                        }}
+                      >
+                        <div className="flex items-center justify-start gap-2">
+                          <LinkIcon className="h-4 w-4" />
+                          <span>Copy issue link</span>
+                        </div>
+                      </button>
+                    </div>
+                  }
+                  placement="bottom-start"
                 >
-                  <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
-                </button>
+                  <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
+                </Popover2>
               </div>
             )}
           </div>
 
-          <button
-            type="button"
-            className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]"
-            onClick={() => setIssuePeekOverview(true)}
-          >
-            {issue.name}
-          </button>
+          {issue.sub_issues_count > 0 && (
+            <div className="h-6 w-6 flex justify-center items-center">
+              <button
+                className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
+                onClick={() => handleToggleExpand(issue.id)}
+              >
+                <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
+              </button>
+            </div>
+          )}
         </div>
-        {properties.state && (
-          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            <ViewStateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="left"
-              className="max-w-full"
-              tooltipPosition={tooltipPosition}
-              customButton
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          </div>
-        )}
-        {properties.priority && (
-          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            <ViewPrioritySelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="left"
-              tooltipPosition={tooltipPosition}
-              noBorder
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          </div>
-        )}
-        {properties.assignee && (
-          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            <ViewAssigneeSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="left"
-              tooltipPosition={tooltipPosition}
-              customButton
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          </div>
-        )}
-        {properties.labels && (
-          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            <ViewIssueLabel issue={issue} maxRender={1} />
-          </div>
-        )}
 
-        {properties.start_date && (
-          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            <ViewStartDateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              tooltipPosition={tooltipPosition}
-              noBorder
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          </div>
-        )}
-
-        {properties.due_date && (
-          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            <ViewDueDateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              tooltipPosition={tooltipPosition}
-              noBorder
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          </div>
-        )}
-        {properties.estimate && (
-          <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            <ViewEstimateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="left"
-              tooltipPosition={tooltipPosition}
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          </div>
-        )}
-        {properties.created_on && (
-          <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            {renderLongDetailDateFormat(issue.created_at)}
-          </div>
-        )}
-        {properties.updated_on && (
-          <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            {renderLongDetailDateFormat(issue.updated_at)}
-          </div>
-        )}
+        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
+          <a className="truncate text-custom-text-100 cursor-pointer w-full text-[0.825rem]">
+            {issue.name}
+          </a>
+        </Link>
       </div>
-    </>
+      {properties.state && (
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+          <ViewStateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            position="left"
+            className="max-w-full"
+            tooltipPosition={tooltipPosition}
+            customButton
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        </div>
+      )}
+      {properties.priority && (
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+          <ViewPrioritySelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            position="left"
+            tooltipPosition={tooltipPosition}
+            noBorder
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        </div>
+      )}
+      {properties.assignee && (
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+          <ViewAssigneeSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            position="left"
+            tooltipPosition={tooltipPosition}
+            customButton
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        </div>
+      )}
+      {properties.labels && (
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+          <ViewIssueLabel issue={issue} maxRender={1} />
+        </div>
+      )}
+
+      {properties.start_date && (
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+          <ViewStartDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            tooltipPosition={tooltipPosition}
+            noBorder
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        </div>
+      )}
+
+      {properties.due_date && (
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+          <ViewDueDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            tooltipPosition={tooltipPosition}
+            noBorder
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        </div>
+      )}
+      {properties.estimate && (
+        <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+          <ViewEstimateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            position="left"
+            tooltipPosition={tooltipPosition}
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        </div>
+      )}
+      {properties.created_on && (
+        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+          {renderLongDetailDateFormat(issue.created_at)}
+        </div>
+      )}
+      {properties.updated_on && (
+        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+          {renderLongDetailDateFormat(issue.updated_at)}
+        </div>
+      )}
+    </div>
   );
 };

apps/app/components/core/views/spreadsheet-view/spreadsheet-view.tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 
 // components
 import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
-import { CustomMenu, Spinner } from "components/ui";
+import { CustomMenu, Icon, Spinner } from "components/ui";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
 import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";

apps/app/components/cycles/cycles-list-gantt-chart.tsx

@@ -9,8 +9,7 @@ import cyclesService from "services/cycles.service";
 // hooks
 import useUser from "hooks/use-user";
 // components
-import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
-import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles";
+import { CycleGanttBlock, GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
 // types
 import { ICycle } from "types";
 
@@ -25,6 +24,17 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
 
   const { user } = useUser();
 
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{ backgroundColor: "rgb(var(--color-primary-100))" }}
+      />
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
+    </div>
+  );
+
   const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
     if (!workspaceSlug || !user) return;
 
@@ -78,11 +88,10 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
         loaderTitle="Cycles"
         blocks={cycles ? blockFormat(cycles) : null}
         blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)}
-        SidebarBlockRender={CycleGanttSidebarBlock}
-        BlockRender={CycleGanttBlock}
-        enableBlockLeftResize={false}
-        enableBlockRightResize={false}
-        enableBlockMove={false}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <CycleGanttBlock cycle={data as ICycle} />}
+        enableLeftDrag={false}
+        enableRightDrag={false}
       />
     </div>
   );

apps/app/components/cycles/cycles-view.tsx

@@ -190,7 +190,7 @@ export const CyclesView: React.FC<Props> = ({ cycles, mutateCycles, viewType })
               ))}
             </div>
           ) : viewType === "board" ? (
-            <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
+            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
               {cycles.map((cycle) => (
                 <SingleCycleCard
                   key={cycle.id}

apps/app/components/cycles/gantt-chart.tsx

@@ -6,8 +6,11 @@ import useUser from "hooks/use-user";
 import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 // components
-import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IssueGanttBlock,
+  renderIssueBlocksStructure,
+} from "components/gantt-chart";
 // types
 import { IIssue } from "types";
 
@@ -25,20 +28,29 @@ export const CycleIssuesGanttChartView = () => {
     cycleId as string
   );
 
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{ backgroundColor: data?.state_detail?.color || "rgb(var(--color-primary-100))" }}
+      />
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
+    </div>
+  );
+
   return (
-    <div className="w-full h-full">
+    <div className="w-full h-full p-3">
       <GanttChartRoot
-        border={false}
-        title="Issues"
-        loaderTitle="Issues"
+        title="Cycles"
+        loaderTitle="Cycles"
         blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        SidebarBlockRender={IssueGanttSidebarBlock}
-        BlockRender={IssueGanttBlock}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
         enableReorder={orderBy === "sort_order"}
-        bottomSpacing
       />
     </div>
   );

apps/app/components/cycles/gantt-chart/blocks.tsx

@@ -1,83 +0,0 @@
-import { useRouter } from "next/router";
-
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import { ContrastIcon } from "components/icons";
-// helpers
-import { getDateRangeStatus, renderShortDate } from "helpers/date-time.helper";
-// types
-import { ICycle } from "types";
-
-export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date);
-
-  return (
-    <div
-      className="flex items-center relative h-full w-full rounded"
-      style={{
-        backgroundColor:
-          cycleStatus === "current"
-            ? "#09a953"
-            : cycleStatus === "upcoming"
-            ? "#f7ae59"
-            : cycleStatus === "completed"
-            ? "#3f76ff"
-            : cycleStatus === "draft"
-            ? "rgb(var(--color-text-200))"
-            : "",
-      }}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
-    >
-      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
-      <Tooltip
-        tooltipContent={
-          <div className="space-y-1">
-            <h5>{data?.name}</h5>
-            <div>
-              {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.end_date ?? "")}
-            </div>
-          </div>
-        }
-        position="top-left"
-      >
-        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-          {data?.name}
-        </div>
-      </Tooltip>
-    </div>
-  );
-};
-
-export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const cycleStatus = getDateRangeStatus(data?.start_date, data?.end_date);
-
-  return (
-    <div
-      className="relative w-full flex items-center gap-2 h-full"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
-    >
-      <ContrastIcon
-        className="h-5 w-5 flex-shrink-0"
-        color={`${
-          cycleStatus === "current"
-            ? "#09a953"
-            : cycleStatus === "upcoming"
-            ? "#f7ae59"
-            : cycleStatus === "completed"
-            ? "#3f76ff"
-            : cycleStatus === "draft"
-            ? "rgb(var(--color-text-200))"
-            : ""
-        }`}
-      />
-      <h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
-    </div>
-  );
-};

apps/app/components/cycles/gantt-chart/index.ts

@@ -1,3 +0,0 @@
-export * from "./blocks";
-export * from "./cycle-issues-layout";
-export * from "./cycles-list-layout";

apps/app/components/cycles/index.ts

@@ -1,10 +1,11 @@
 export * from "./cycles-list";
 export * from "./active-cycle-details";
 export * from "./active-cycle-stats";
-export * from "./gantt-chart";
+export * from "./cycles-list-gantt-chart";
 export * from "./cycles-view";
 export * from "./delete-cycle-modal";
 export * from "./form";
+export * from "./gantt-chart";
 export * from "./modal";
 export * from "./select";
 export * from "./sidebar";

apps/app/components/cycles/single-cycle-list.tsx

@@ -106,7 +106,6 @@ function RadialProgressBar({ progress }: progress) {
     </div>
   );
 }
-
 export const SingleCycleList: React.FC<TSingleStatProps> = ({
   cycle,
   handleEditCycle,

apps/app/components/exporter/single-export.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+// next imports
+import Link from "next/link";
 // ui
 import { PrimaryButton } from "components/ui"; // icons
 // helpers
@@ -63,11 +65,11 @@ export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
         <>
           {service.status == "completed" && (
             <div>
-              <a target="_blank" href={service?.url} rel="noopener noreferrer">
+              <Link href={service?.url}>
                 <PrimaryButton className="w-full text-center">
                   {isLoading ? "Downloading..." : "Download"}
                 </PrimaryButton>
-              </a>
+              </Link>
             </div>
           )}
         </>

apps/app/components/gantt-chart/blocks/block.tsx

@@ -0,0 +1,103 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// ui
+import { Tooltip } from "components/ui";
+// helpers
+import { renderShortDate } from "helpers/date-time.helper";
+// types
+import { ICycle, IIssue, IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
+
+export const IssueGanttBlock = ({ issue }: { issue: IIssue }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
+      <a className="relative flex items-center w-full h-full shadow-sm transition-all duration-300">
+        <div
+          className="flex-shrink-0 w-0.5 h-full"
+          style={{ backgroundColor: issue.state_detail?.color }}
+        />
+        <Tooltip
+          tooltipContent={
+            <div className="space-y-1">
+              <h5>{issue.name}</h5>
+              <div>
+                {renderShortDate(issue.start_date ?? "")} to{" "}
+                {renderShortDate(issue.target_date ?? "")}
+              </div>
+            </div>
+          }
+          position="top-left"
+        >
+          <div className="text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
+            {issue.name}
+          </div>
+        </Tooltip>
+      </a>
+    </Link>
+  );
+};
+
+export const CycleGanttBlock = ({ cycle }: { cycle: ICycle }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <Link href={`/${workspaceSlug}/projects/${cycle.project}/cycles/${cycle.id}`}>
+      <a className="relative flex items-center w-full h-full shadow-sm transition-all duration-300">
+        <div className="flex-shrink-0 w-0.5 h-full bg-custom-primary-100" />
+        <Tooltip
+          tooltipContent={
+            <div className="space-y-1">
+              <h5>{cycle.name}</h5>
+              <div>
+                {renderShortDate(cycle.start_date ?? "")} to {renderShortDate(cycle.end_date ?? "")}
+              </div>
+            </div>
+          }
+          position="top-left"
+        >
+          <div className="text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
+            {cycle.name}
+          </div>
+        </Tooltip>
+      </a>
+    </Link>
+  );
+};
+
+export const ModuleGanttBlock = ({ module }: { module: IModule }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
+      <a className="relative flex items-center w-full h-full shadow-sm transition-all duration-300">
+        <div
+          className="flex-shrink-0 w-0.5 h-full"
+          style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === module.status)?.color }}
+        />
+        <Tooltip
+          tooltipContent={
+            <div className="space-y-1">
+              <h5>{module.name}</h5>
+              <div>
+                {renderShortDate(module.start_date ?? "")} to{" "}
+                {renderShortDate(module.target_date ?? "")}
+              </div>
+            </div>
+          }
+          position="top-left"
+        >
+          <div className="text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
+            {module.name}
+          </div>
+        </Tooltip>
+      </a>
+    </Link>
+  );
+};

apps/app/components/gantt-chart/blocks/blocks-display.tsx

@@ -1,7 +1,8 @@
 import { FC } from "react";
 
-// hooks
-import { useChart } from "../hooks";
+// react-beautiful-dnd
+import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 // helpers
 import { ChartDraggable } from "../helpers/draggable";
 import { renderDateFormat } from "helpers/date-time.helper";
@@ -11,59 +12,90 @@ import { IBlockUpdateData, IGanttBlock } from "../types";
 export const GanttChartBlocks: FC<{
   itemsContainerWidth: number;
   blocks: IGanttBlock[] | null;
-  BlockRender: React.FC<any>;
+  sidebarBlockRender: FC;
+  blockRender: FC;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  enableBlockLeftResize: boolean;
-  enableBlockRightResize: boolean;
-  enableBlockMove: boolean;
+  enableLeftDrag: boolean;
+  enableRightDrag: boolean;
+  enableReorder: boolean;
 }> = ({
   itemsContainerWidth,
   blocks,
-  BlockRender,
+  sidebarBlockRender,
+  blockRender,
   blockUpdateHandler,
-  enableBlockLeftResize,
-  enableBlockRightResize,
-  enableBlockMove,
+  enableLeftDrag,
+  enableRightDrag,
+  enableReorder,
 }) => {
-  const { activeBlock, dispatch } = useChart();
-
-  // update the active block on hover
-  const updateActiveBlock = (block: IGanttBlock | null) => {
-    dispatch({
-      type: "PARTIAL_UPDATE",
-      payload: {
-        activeBlock: block,
-      },
-    });
-  };
-
   const handleChartBlockPosition = (
     block: IGanttBlock,
     totalBlockShifts: number,
-    dragDirection: "left" | "right" | "move"
+    dragDirection: "left" | "right"
   ) => {
-    const originalStartDate = new Date(block.start_date);
-    const updatedStartDate = new Date(originalStartDate);
+    let updatedDate = new Date();
 
-    const originalTargetDate = new Date(block.target_date);
-    const updatedTargetDate = new Date(originalTargetDate);
+    if (dragDirection === "left") {
+      const originalDate = new Date(block.start_date);
 
-    // update the start date on left resize
-    if (dragDirection === "left")
-      updatedStartDate.setDate(originalStartDate.getDate() - totalBlockShifts);
-    // update the target date on right resize
-    else if (dragDirection === "right")
-      updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
-    // update both the dates on x-axis move
-    else if (dragDirection === "move") {
-      updatedStartDate.setDate(originalStartDate.getDate() + totalBlockShifts);
-      updatedTargetDate.setDate(originalTargetDate.getDate() + totalBlockShifts);
+      const currentDay = originalDate.getDate();
+      updatedDate = new Date(originalDate);
+
+      updatedDate.setDate(currentDay - totalBlockShifts);
+    } else {
+      const originalDate = new Date(block.target_date);
+
+      const currentDay = originalDate.getDate();
+      updatedDate = new Date(originalDate);
+
+      updatedDate.setDate(currentDay + totalBlockShifts);
     }
 
-    // call the block update handler with the updated dates
     blockUpdateHandler(block.data, {
-      start_date: renderDateFormat(updatedStartDate),
-      target_date: renderDateFormat(updatedTargetDate),
+      [dragDirection === "left" ? "start_date" : "target_date"]: renderDateFormat(updatedDate),
+    });
+  };
+
+  const handleOrderChange = (result: DropResult) => {
+    if (!blocks) return;
+
+    const { source, destination, draggableId } = result;
+
+    if (!destination) return;
+
+    if (source.index === destination.index && document) {
+      // const draggedBlock = document.querySelector(`#${draggableId}`) as HTMLElement;
+      // const blockStyles = window.getComputedStyle(draggedBlock);
+
+      // console.log(blockStyles.marginLeft);
+
+      return;
+    }
+
+    let updatedSortOrder = blocks[source.index].sort_order;
+
+    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
+    else if (destination.index === blocks.length - 1)
+      updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    else {
+      const destinationSortingOrder = blocks[destination.index].sort_order;
+      const relativeDestinationSortingOrder =
+        source.index < destination.index
+          ? blocks[destination.index + 1].sort_order
+          : blocks[destination.index - 1].sort_order;
+
+      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+    }
+
+    const removedElement = blocks.splice(source.index, 1)[0];
+    blocks.splice(destination.index, 0, removedElement);
+
+    blockUpdateHandler(removedElement.data, {
+      sort_order: {
+        destinationIndex: destination.index,
+        newSortOrder: updatedSortOrder,
+        sourceIndex: source.index,
+      },
     });
   };
 
@@ -72,29 +104,75 @@ export const GanttChartBlocks: FC<{
       className="relative z-[5] mt-[72px] h-full overflow-hidden overflow-y-auto"
       style={{ width: `${itemsContainerWidth}px` }}
     >
-      {blocks &&
-        blocks.length > 0 &&
-        blocks.map(
-          (block) =>
-            block.start_date &&
-            block.target_date && (
-              <div
-                key={`block-${block.id}`}
-                className={`h-11 ${activeBlock?.id === block.id ? "bg-custom-background-80" : ""}`}
-                onMouseEnter={() => updateActiveBlock(block)}
-                onMouseLeave={() => updateActiveBlock(null)}
-              >
-                <ChartDraggable
-                  block={block}
-                  BlockRender={BlockRender}
-                  handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
-                  enableBlockLeftResize={enableBlockLeftResize}
-                  enableBlockRightResize={enableBlockRightResize}
-                  enableBlockMove={enableBlockMove}
-                />
-              </div>
-            )
-        )}
+      <DragDropContext onDragEnd={handleOrderChange}>
+        <StrictModeDroppable droppableId="gantt">
+          {(droppableProvided, droppableSnapshot) => (
+            <div
+              className="w-full space-y-2"
+              ref={droppableProvided.innerRef}
+              {...droppableProvided.droppableProps}
+            >
+              <>
+                {blocks &&
+                  blocks.length > 0 &&
+                  blocks.map(
+                    (block, index: number) =>
+                      block.start_date &&
+                      block.target_date && (
+                        <Draggable
+                          key={`block-${block.id}`}
+                          draggableId={`block-${block.id}`}
+                          index={index}
+                          isDragDisabled={!enableReorder}
+                        >
+                          {(provided) => (
+                            <div
+                              className={
+                                droppableSnapshot.isDraggingOver ? "bg-custom-border-100/10" : ""
+                              }
+                              ref={provided.innerRef}
+                              {...provided.draggableProps}
+                            >
+                              <ChartDraggable
+                                block={block}
+                                handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
+                                enableLeftDrag={enableLeftDrag}
+                                enableRightDrag={enableRightDrag}
+                                provided={provided}
+                              >
+                                <div
+                                  className="rounded shadow-sm bg-custom-background-80 overflow-hidden h-9 flex items-center transition-all"
+                                  style={{
+                                    width: `${block.position?.width}px`,
+                                  }}
+                                >
+                                  {blockRender({
+                                    ...block.data,
+                                  })}
+                                </div>
+                              </ChartDraggable>
+                            </div>
+                          )}
+                        </Draggable>
+                      )
+                  )}
+                {droppableProvided.placeholder}
+              </>
+            </div>
+          )}
+        </StrictModeDroppable>
+      </DragDropContext>
+
+      {/* sidebar */}
+      {/* <div className="fixed top-0 bottom-0 w-[300px] flex-shrink-0 divide-y divide-custom-border-200 border-r border-custom-border-200 overflow-y-auto">
+        {blocks &&
+          blocks.length > 0 &&
+          blocks.map((block: any, _idx: number) => (
+            <div className="relative h-[40px] bg-custom-background-100" key={`sidebar-blocks-${_idx}`}>
+              {sidebarBlockRender(block?.data)}
+            </div>
+          ))}
+      </div> */}
     </div>
   );
 };

apps/app/components/gantt-chart/blocks/index.ts

@@ -1 +1,2 @@
+export * from "./block";
 export * from "./blocks-display";

apps/app/components/gantt-chart/chart/index.tsx

@@ -3,7 +3,6 @@ import { FC, useEffect, useState } from "react";
 import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 // components
 import { GanttChartBlocks } from "components/gantt-chart";
-import { GanttSidebar } from "../sidebar";
 // import { HourChartView } from "./hours";
 // import { DayChartView } from "./day";
 // import { WeekChartView } from "./week";
@@ -26,7 +25,7 @@ import {
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
 // types
-import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
+import { ChartDataType, IBlockUpdateData, IGanttBlock } from "../types";
 // data
 import { currentViewDataWithView } from "../data";
 // context
@@ -34,17 +33,15 @@ import { useChart } from "../hooks";
 
 type ChartViewRootProps = {
   border: boolean;
-  title: string;
+  title: null | string;
   loaderTitle: string;
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  SidebarBlockRender: React.FC<any>;
-  BlockRender: React.FC<any>;
-  enableBlockLeftResize: boolean;
-  enableBlockRightResize: boolean;
-  enableBlockMove: boolean;
+  sidebarBlockRender: FC<any>;
+  blockRender: FC<any>;
+  enableLeftDrag: boolean;
+  enableRightDrag: boolean;
   enableReorder: boolean;
-  bottomSpacing: boolean;
 };
 
 export const ChartViewRoot: FC<ChartViewRootProps> = ({
@@ -53,24 +50,22 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   blocks = null,
   loaderTitle,
   blockUpdateHandler,
-  SidebarBlockRender,
-  BlockRender,
-  enableBlockLeftResize,
-  enableBlockRightResize,
-  enableBlockMove,
+  sidebarBlockRender,
+  blockRender,
+  enableLeftDrag,
+  enableRightDrag,
   enableReorder,
-  bottomSpacing,
 }) => {
+  const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
+
   const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
   const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
+  const [blocksSidebarView, setBlocksSidebarView] = useState<boolean>(false);
 
   // blocks state management starts
   const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null);
 
-  const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } =
-    useChart();
-
-  const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
+  const renderBlockStructure = (view: any, blocks: IGanttBlock[]) =>
     blocks && blocks.length > 0
       ? blocks.map((block: any) => ({
           ...block,
@@ -79,16 +74,16 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       : [];
 
   useEffect(() => {
-    if (currentViewData && blocks)
+    if (currentViewData && blocks && blocks.length > 0)
       setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
   }, [currentViewData, blocks]);
 
   // blocks state management ends
 
-  const handleChartView = (key: TGanttViews) => updateCurrentViewRenderPayload(null, key);
+  const handleChartView = (key: string) => updateCurrentViewRenderPayload(null, key);
 
-  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => {
-    const selectedCurrentView: TGanttViews = view;
+  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: string) => {
+    const selectedCurrentView = view;
     const selectedCurrentViewData: ChartDataType | undefined =
       selectedCurrentView && selectedCurrentView === currentViewData?.key
         ? currentViewData
@@ -160,9 +155,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
   const updatingCurrentLeftScrollPosition = (width: number) => {
     const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
-
-    if (!scrollContainer) return;
-
     scrollContainer.scrollLeft = width + scrollContainer?.scrollLeft;
     setItemsContainerWidth(width + scrollContainer?.scrollLeft);
   };
@@ -203,8 +195,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     const clientVisibleWidth: number = scrollContainer?.clientWidth;
     const currentScrollPosition: number = scrollContainer?.scrollLeft;
 
-    updateScrollLeft(currentScrollPosition);
-
     const approxRangeLeft: number =
       scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth;
     const approxRangeRight: number = scrollWidth - (approxRangeLeft + clientVisibleWidth);
@@ -215,6 +205,16 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       updateCurrentViewRenderPayload("left", currentView);
   };
 
+  useEffect(() => {
+    const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
+
+    scrollContainer.addEventListener("scroll", onScroll);
+
+    return () => {
+      scrollContainer.removeEventListener("scroll", onScroll);
+    };
+  }, [renderView]);
+
   return (
     <div
       className={`${
@@ -225,14 +225,44 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
         border ? `border border-custom-border-200` : ``
       } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`}
     >
-      {/* chart header */}
-      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
+      {/* chart title */}
+      {/* <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-custom-border-200">
         {title && (
           <div className="text-lg font-medium flex gap-2 items-center">
             <div>{title}</div>
-            {/* <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
               Gantt View Beta
-            </div> */}
+            </div>
+          </div>
+        )}
+        {blocks === null ? (
+          <div className="text-sm font-medium ml-auto">Loading...</div>
+        ) : (
+          <div className="text-sm font-medium ml-auto">
+            {blocks.length} {loaderTitle}
+          </div>
+        )}
+      </div> */}
+
+      {/* chart header */}
+      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap p-2">
+        {/* <div
+          className="transition-all border border-custom-border-200 w-[30px] h-[30px] flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
+          onClick={() => setBlocksSidebarView(() => !blocksSidebarView)}
+        >
+          {blocksSidebarView ? (
+            <XMarkIcon className="h-5 w-5" />
+          ) : (
+            <Bars4Icon className="h-4 w-4" />
+          )}
+        </div> */}
+
+        {title && (
+          <div className="text-lg font-medium flex gap-2 items-center">
+            <div>{title}</div>
+            <div className="text-xs rounded-full px-2 py-1 font-bold border border-custom-primary/75 bg-custom-primary/5 text-custom-text-100">
+              Gantt View Beta
+            </div>
           </div>
         )}
 
@@ -252,7 +282,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
-                className={`cursor-pointer rounded-sm p-1 px-2 text-xs ${
+                className={`cursor-pointer rounded-sm border border-custom-border-200 p-1 px-2 text-xs ${
                   currentView === _chatView?.key
                     ? `bg-custom-background-80`
                     : `hover:bg-custom-background-90`
@@ -266,7 +296,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
         <div className="flex items-center gap-1">
           <div
-            className="cursor-pointer rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80"
+            className={`cursor-pointer rounded-sm border border-custom-border-200 p-1 px-2 text-xs hover:bg-custom-background-80`}
             onClick={handleToday}
           >
             Today
@@ -286,30 +316,26 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       </div>
 
       {/* content */}
-      <div
-        id="gantt-container"
-        className={`relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-200 ${
-          bottomSpacing ? "mb-8" : ""
-        }`}
-      >
+      <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-200">
         <div
-          id="gantt-sidebar"
-          className="h-full w-1/4 flex flex-col border-r border-custom-border-200 space-y-3"
-        >
-          <div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0" />
-          <GanttSidebar
-            title={title}
-            blockUpdateHandler={blockUpdateHandler}
-            blocks={chartBlocks}
-            SidebarBlockRender={SidebarBlockRender}
-            enableReorder={enableReorder}
-          />
-        </div>
-        <div
-          className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto horizontal-scroll-enable"
+          className="relative flex h-full w-full flex-1 flex-col overflow-hidden overflow-x-auto"
           id="scroll-container"
-          onScroll={onScroll}
         >
+          {/* blocks components */}
+          {currentView && currentViewData && (
+            <GanttChartBlocks
+              itemsContainerWidth={itemsContainerWidth}
+              blocks={chartBlocks}
+              sidebarBlockRender={sidebarBlockRender}
+              blockRender={blockRender}
+              blockUpdateHandler={blockUpdateHandler}
+              enableLeftDrag={enableLeftDrag}
+              enableRightDrag={enableRightDrag}
+              enableReorder={enableReorder}
+            />
+          )}
+
+          {/* chart */}
           {/* {currentView && currentView === "hours" && <HourChartView />} */}
           {/* {currentView && currentView === "day" && <DayChartView />} */}
           {/* {currentView && currentView === "week" && <WeekChartView />} */}
@@ -317,19 +343,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           {currentView && currentView === "month" && <MonthChartView />}
           {/* {currentView && currentView === "quarter" && <QuarterChartView />} */}
           {/* {currentView && currentView === "year" && <YearChartView />} */}
-
-          {/* blocks */}
-          {currentView && currentViewData && (
-            <GanttChartBlocks
-              itemsContainerWidth={itemsContainerWidth}
-              blocks={chartBlocks}
-              BlockRender={BlockRender}
-              blockUpdateHandler={blockUpdateHandler}
-              enableBlockLeftResize={enableBlockLeftResize}
-              enableBlockRightResize={enableBlockRightResize}
-              enableBlockMove={enableBlockMove}
-            />
-          )}
         </div>
       </div>
     </div>

apps/app/components/gantt-chart/chart/month.tsx

@@ -17,38 +17,9 @@ export const MonthChartView: FC<any> = () => {
           monthBlocks.length > 0 &&
           monthBlocks.map((block, _idxRoot) => (
             <div key={`month-${block?.month}-${block?.year}`} className="relative flex flex-col">
-              <div className="h-[60px] w-full">
-                <div className="relative h-[30px]">
-                  <div className="sticky left-0 inline-flex whitespace-nowrap px-3 py-2 text-xs font-medium capitalize">
-                    {block?.title}
-                  </div>
-                </div>
-
-                <div className="flex w-full h-[30px]">
-                  {block?.children &&
-                    block?.children.length > 0 &&
-                    block?.children.map((monthDay, _idx) => (
-                      <div
-                        key={`sub-title-${_idxRoot}-${_idx}`}
-                        className="flex-shrink-0 border-b py-1 text-center capitalize border-custom-border-200"
-                        style={{ width: `${currentViewData?.data.width}px` }}
-                      >
-                        <div className="text-xs space-x-1">
-                          <span className="text-custom-text-200">
-                            {monthDay.dayData.shortTitle[0]}
-                          </span>{" "}
-                          <span
-                            className={
-                              monthDay.today
-                                ? "bg-custom-primary-100 text-white px-1 rounded-full"
-                                : ""
-                            }
-                          >
-                            {monthDay.day}
-                          </span>
-                        </div>
-                      </div>
-                    ))}
+              <div className="relative border-b border-custom-border-200">
+                <div className="sticky left-0 inline-flex whitespace-nowrap px-2 py-1 text-sm font-medium capitalize">
+                  {block?.title}
                 </div>
               </div>
 
@@ -57,10 +28,19 @@ export const MonthChartView: FC<any> = () => {
                   block?.children.length > 0 &&
                   block?.children.map((monthDay, _idx) => (
                     <div
-                      key={`column-${_idxRoot}-${_idx}`}
+                      key={`sub-title-${_idxRoot}-${_idx}`}
                       className="relative flex h-full flex-col overflow-hidden whitespace-nowrap"
                       style={{ width: `${currentViewData?.data.width}px` }}
                     >
+                      <div
+                        className={`flex-shrink-0 border-b py-1 text-center text-sm capitalize font-medium ${
+                          monthDay?.today
+                            ? `text-red-500 border-red-500`
+                            : `border-custom-border-200`
+                        }`}
+                      >
+                        <div>{monthDay?.title}</div>
+                      </div>
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
                           ["sat", "sun"].includes(monthDay?.dayData?.shortTitle || "")
@@ -68,9 +48,9 @@ export const MonthChartView: FC<any> = () => {
                             : ``
                         }`}
                       >
-                        {/* {monthDay?.today && (
+                        {monthDay?.today && (
                           <div className="absolute top-0 bottom-0 w-[1px] bg-red-500" />
-                        )} */}
+                        )}
                       </div>
                     </div>
                   ))}

apps/app/components/gantt-chart/contexts/index.tsx

@@ -32,27 +32,16 @@ export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({
     currentViewData: currentViewDataWithView(initialView),
     renderView: [],
     allViews: allViewsWithData,
-    activeBlock: null,
   });
 
-  const [scrollLeft, setScrollLeft] = useState(0);
-
   const handleDispatch = (action: ChartContextActionPayload): ChartContextData => {
     const newState = chartReducer(state, action);
-
     dispatch(() => newState);
-
     return newState;
   };
 
-  const updateScrollLeft = (scrollLeft: number) => {
-    setScrollLeft(scrollLeft);
-  };
-
   return (
-    <ChartContext.Provider
-      value={{ ...state, scrollLeft, updateScrollLeft, dispatch: handleDispatch }}
-    >
+    <ChartContext.Provider value={{ ...state, dispatch: handleDispatch }}>
       {children}
     </ChartContext.Provider>
   );

apps/app/components/gantt-chart/data/index.ts

@@ -108,8 +108,8 @@ export const allViewsWithData: ChartDataType[] = [
       startDate: new Date(),
       currentDate: new Date(),
       endDate: new Date(),
-      approxFilterRange: 6,
-      width: 55, // it will preview monthly all dates with weekends highlighted with no limitations ex: title (1, 2, 3)
+      approxFilterRange: 8,
+      width: 80, // it will preview monthly all dates with weekends highlighted with no limitations ex: title (1, 2, 3)
     },
   },
   // {

apps/app/components/gantt-chart/helpers/draggable.tsx

@@ -1,57 +1,45 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 
-// icons
-import { Icon } from "components/ui";
-// hooks
+// react-beautiful-dnd
+import { DraggableProvided } from "react-beautiful-dnd";
 import { useChart } from "../hooks";
 // types
 import { IGanttBlock } from "../types";
 
 type Props = {
+  children: any;
   block: IGanttBlock;
-  BlockRender: React.FC<any>;
-  handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void;
-  enableBlockLeftResize: boolean;
-  enableBlockRightResize: boolean;
-  enableBlockMove: boolean;
+  handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right") => void;
+  enableLeftDrag: boolean;
+  enableRightDrag: boolean;
+  provided: DraggableProvided;
 };
 
 export const ChartDraggable: React.FC<Props> = ({
+  children,
   block,
-  BlockRender,
   handleBlock,
-  enableBlockLeftResize,
-  enableBlockRightResize,
-  enableBlockMove,
+  enableLeftDrag = true,
+  enableRightDrag = true,
+  provided,
 }) => {
   const [isLeftResizing, setIsLeftResizing] = useState(false);
   const [isRightResizing, setIsRightResizing] = useState(false);
-  const [isMoving, setIsMoving] = useState(false);
-  const [posFromLeft, setPosFromLeft] = useState<number | null>(null);
 
+  const parentDivRef = useRef<HTMLDivElement>(null);
   const resizableRef = useRef<HTMLDivElement>(null);
 
-  const { currentViewData, scrollLeft } = useChart();
+  const { currentViewData } = useChart();
 
-  // check if cursor reaches either end while resizing/dragging
   const checkScrollEnd = (e: MouseEvent): number => {
-    const SCROLL_THRESHOLD = 70;
-
     let delWidth = 0;
 
-    const ganttContainer = document.querySelector("#gantt-container") as HTMLElement;
-    const ganttSidebar = document.querySelector("#gantt-sidebar") as HTMLElement;
-
     const scrollContainer = document.querySelector("#scroll-container") as HTMLElement;
-
-    if (!ganttContainer || !ganttSidebar || !scrollContainer) return 0;
+    const appSidebar = document.querySelector("#app-sidebar") as HTMLElement;
 
     const posFromLeft = e.clientX;
     // manually scroll to left if reached the left end while dragging
-    if (
-      posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <=
-      SCROLL_THRESHOLD
-    ) {
+    if (posFromLeft - appSidebar.clientWidth <= 70) {
       if (e.movementX > 0) return 0;
 
       delWidth = -5;
@@ -60,8 +48,8 @@ export const ChartDraggable: React.FC<Props> = ({
     } else delWidth = e.movementX;
 
     // manually scroll to right if reached the right end while dragging
-    const posFromRight = ganttContainer.getBoundingClientRect().right - e.clientX;
-    if (posFromRight <= SCROLL_THRESHOLD) {
+    const posFromRight = window.innerWidth - e.clientX;
+    if (posFromRight <= 70) {
       if (e.movementX < 0) return 0;
 
       delWidth = 5;
@@ -72,11 +60,12 @@ export const ChartDraggable: React.FC<Props> = ({
     return delWidth;
   };
 
-  // handle block resize from the left end
-  const handleBlockLeftResize = () => {
-    if (!currentViewData || !resizableRef.current || !block.position) return;
+  const handleLeftDrag = () => {
+    if (!currentViewData || !resizableRef.current || !parentDivRef.current || !block.position)
+      return;
 
     const resizableDiv = resizableRef.current;
+    const parentDiv = parentDivRef.current;
 
     const columnWidth = currentViewData.data.width;
 
@@ -84,9 +73,11 @@ export const ChartDraggable: React.FC<Props> = ({
       resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
     let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
-    let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
+    let initialMarginLeft = parseInt(parentDiv.style.marginLeft);
 
     const handleMouseMove = (e: MouseEvent) => {
+      if (!window) return;
+
       let delWidth = 0;
 
       delWidth = checkScrollEnd(e);
@@ -101,7 +92,7 @@ export const ChartDraggable: React.FC<Props> = ({
       if (newWidth < columnWidth) return;
 
       resizableDiv.style.width = `${newWidth}px`;
-      resizableDiv.style.marginLeft = `${newMarginLeft}px`;
+      parentDiv.style.marginLeft = `${newMarginLeft}px`;
 
       if (block.position) {
         block.position.width = newWidth;
@@ -109,7 +100,6 @@ export const ChartDraggable: React.FC<Props> = ({
       }
     };
 
-    // remove event listeners and call block handler with the updated start date
     const handleMouseUp = () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
@@ -125,9 +115,9 @@ export const ChartDraggable: React.FC<Props> = ({
     document.addEventListener("mouseup", handleMouseUp);
   };
 
-  // handle block resize from the right end
-  const handleBlockRightResize = () => {
-    if (!currentViewData || !resizableRef.current || !block.position) return;
+  const handleRightDrag = () => {
+    if (!currentViewData || !resizableRef.current || !parentDivRef.current || !block.position)
+      return;
 
     const resizableDiv = resizableRef.current;
 
@@ -139,6 +129,8 @@ export const ChartDraggable: React.FC<Props> = ({
     let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
     const handleMouseMove = (e: MouseEvent) => {
+      if (!window) return;
+
       let delWidth = 0;
 
       delWidth = checkScrollEnd(e);
@@ -153,7 +145,6 @@ export const ChartDraggable: React.FC<Props> = ({
       if (block.position) block.position.width = Math.max(newWidth, 80);
     };
 
-    // remove event listeners and call block handler with the updated target date
     const handleMouseUp = () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
@@ -169,148 +160,46 @@ export const ChartDraggable: React.FC<Props> = ({
     document.addEventListener("mouseup", handleMouseUp);
   };
 
-  // handle block x-axis move
-  const handleBlockMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return;
-
-    e.preventDefault();
-    e.stopPropagation();
-
-    setIsMoving(true);
-
-    const resizableDiv = resizableRef.current;
-
-    const columnWidth = currentViewData.data.width;
-
-    const blockInitialMarginLeft = parseInt(resizableDiv.style.marginLeft);
-
-    let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
-
-    const handleMouseMove = (e: MouseEvent) => {
-      let delWidth = 0;
-
-      delWidth = checkScrollEnd(e);
-
-      // calculate new marginLeft and update the initial marginLeft using -=
-      const newMarginLeft = Math.round((initialMarginLeft += delWidth) / columnWidth) * columnWidth;
-
-      resizableDiv.style.marginLeft = `${newMarginLeft}px`;
-
-      if (block.position) block.position.marginLeft = newMarginLeft;
-    };
-
-    // remove event listeners and call block handler with the updated dates
-    const handleMouseUp = () => {
-      setIsMoving(false);
-
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-
-      const totalBlockShifts = Math.ceil(
-        (parseInt(resizableDiv.style.marginLeft) - blockInitialMarginLeft) / columnWidth
-      );
-
-      handleBlock(totalBlockShifts, "move");
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  };
-
-  // scroll to a hidden block
-  const handleScrollToBlock = () => {
-    const scrollContainer = document.querySelector("#scroll-container") as HTMLElement;
-
-    if (!scrollContainer || !block.position) return;
-
-    // update container's scroll position to the block's position
-    scrollContainer.scrollLeft = block.position.marginLeft - 4;
-  };
-
-  // update block position from viewport's left end on scroll
-  useEffect(() => {
-    const block = resizableRef.current;
-
-    if (!block) return;
-
-    setPosFromLeft(block.getBoundingClientRect().left);
-  }, [scrollLeft]);
-
-  // check if block is hidden on either side
-  const isBlockHiddenOnLeft =
-    block.position?.marginLeft &&
-    block.position?.width &&
-    scrollLeft > block.position.marginLeft + block.position.width;
-  const isBlockHiddenOnRight = posFromLeft && window && posFromLeft > window.innerWidth;
-
   return (
-    <>
-      {/* move to left side hidden block button */}
-      {isBlockHiddenOnLeft && (
-        <div
-          className="fixed ml-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
-          onClick={handleScrollToBlock}
-        >
-          <Icon iconName="arrow_back" />
-        </div>
+    <div
+      id={`block-${block.id}`}
+      ref={parentDivRef}
+      className="relative group inline-flex cursor-pointer items-center font-medium transition-all"
+      style={{
+        marginLeft: `${block.position?.marginLeft}px`,
+      }}
+    >
+      {enableLeftDrag && (
+        <>
+          <div
+            onMouseDown={handleLeftDrag}
+            onMouseEnter={() => setIsLeftResizing(true)}
+            onMouseLeave={() => setIsLeftResizing(false)}
+            className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[1] w-6 h-10 bg-brand-backdrop rounded-md cursor-col-resize"
+          />
+          <div
+            className={`absolute top-1/2 -translate-y-1/2 w-1 h-4/5 rounded-sm bg-custom-background-80 transition-all duration-300 ${
+              isLeftResizing ? "-left-2.5" : "left-1"
+            }`}
+          />
+        </>
       )}
-      {/* move to right side hidden block button */}
-      {isBlockHiddenOnRight && (
-        <div
-          className="fixed right-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
-          onClick={handleScrollToBlock}
-        >
-          <Icon iconName="arrow_forward" />
-        </div>
+      {React.cloneElement(children, { ref: resizableRef, ...provided.dragHandleProps })}
+      {enableRightDrag && (
+        <>
+          <div
+            onMouseDown={handleRightDrag}
+            onMouseEnter={() => setIsRightResizing(true)}
+            onMouseLeave={() => setIsRightResizing(false)}
+            className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[1] w-6 h-6 bg-brand-backdrop rounded-md cursor-col-resize"
+          />
+          <div
+            className={`absolute top-1/2 -translate-y-1/2 w-1 h-4/5 rounded-sm bg-custom-background-80 transition-all duration-300 ${
+              isRightResizing ? "-right-2.5" : "right-1"
+            }`}
+          />
+        </>
       )}
-      <div
-        id={`block-${block.id}`}
-        ref={resizableRef}
-        className="relative group cursor-pointer font-medium rounded shadow-sm h-full inline-flex items-center transition-all"
-        style={{
-          marginLeft: `${block.position?.marginLeft}px`,
-          width: `${block.position?.width}px`,
-        }}
-      >
-        {/* left resize drag handle */}
-        {enableBlockLeftResize && (
-          <>
-            <div
-              onMouseDown={handleBlockLeftResize}
-              onMouseEnter={() => setIsLeftResizing(true)}
-              onMouseLeave={() => setIsLeftResizing(false)}
-              className="absolute top-1/2 -left-2.5 -translate-y-1/2 z-[3] w-6 h-full rounded-md cursor-col-resize"
-            />
-            <div
-              className={`absolute top-1/2 -translate-y-1/2 w-1 h-7 rounded-sm bg-custom-background-100 transition-all duration-300 ${
-                isLeftResizing ? "-left-2.5" : "left-1"
-              }`}
-            />
-          </>
-        )}
-        <div
-          className="relative z-[2] rounded h-8 w-full flex items-center"
-          onMouseDown={handleBlockMove}
-        >
-          <BlockRender data={block.data} />
-        </div>
-        {/* right resize drag handle */}
-        {enableBlockRightResize && (
-          <>
-            <div
-              onMouseDown={handleBlockRightResize}
-              onMouseEnter={() => setIsRightResizing(true)}
-              onMouseLeave={() => setIsRightResizing(false)}
-              className="absolute top-1/2 -right-2.5 -translate-y-1/2 z-[2] w-6 h-full rounded-md cursor-col-resize"
-            />
-            <div
-              className={`absolute top-1/2 -translate-y-1/2 w-1 h-7 rounded-sm bg-custom-background-100 transition-all duration-300 ${
-                isRightResizing ? "-right-2.5" : "right-1"
-              }`}
-            />
-          </>
-        )}
-      </div>
-    </>
+    </div>
   );
 };

apps/app/components/gantt-chart/hooks/index.tsx

@@ -7,7 +7,9 @@ import { ChartContext } from "../contexts";
 export const useChart = (): ChartContextReducer => {
   const context = useContext(ChartContext);
 
-  if (!context) throw new Error("useChart must be used within a GanttChart");
+  if (!context) {
+    throw new Error("useChart must be used within a GanttChart");
+  }
 
   return context;
 };

apps/app/components/gantt-chart/root.tsx

@@ -8,32 +8,28 @@ import { IBlockUpdateData, IGanttBlock } from "./types";
 
 type GanttChartRootProps = {
   border?: boolean;
-  title: string;
+  title: null | string;
   loaderTitle: string;
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  SidebarBlockRender: FC<any>;
-  BlockRender: FC<any>;
-  enableBlockLeftResize?: boolean;
-  enableBlockRightResize?: boolean;
-  enableBlockMove?: boolean;
+  sidebarBlockRender: FC<any>;
+  blockRender: FC<any>;
+  enableLeftDrag?: boolean;
+  enableRightDrag?: boolean;
   enableReorder?: boolean;
-  bottomSpacing?: boolean;
 };
 
 export const GanttChartRoot: FC<GanttChartRootProps> = ({
   border = true,
-  title,
+  title = null,
   blocks,
   loaderTitle = "blocks",
   blockUpdateHandler,
-  SidebarBlockRender,
-  BlockRender,
-  enableBlockLeftResize = true,
-  enableBlockRightResize = true,
-  enableBlockMove = true,
+  sidebarBlockRender,
+  blockRender,
+  enableLeftDrag = true,
+  enableRightDrag = true,
   enableReorder = true,
-  bottomSpacing = false,
 }) => (
   <ChartContextProvider>
     <ChartViewRoot
@@ -42,13 +38,11 @@ export const GanttChartRoot: FC<GanttChartRootProps> = ({
       blocks={blocks}
       loaderTitle={loaderTitle}
       blockUpdateHandler={blockUpdateHandler}
-      SidebarBlockRender={SidebarBlockRender}
-      BlockRender={BlockRender}
-      enableBlockLeftResize={enableBlockLeftResize}
-      enableBlockRightResize={enableBlockRightResize}
-      enableBlockMove={enableBlockMove}
+      sidebarBlockRender={sidebarBlockRender}
+      blockRender={blockRender}
+      enableLeftDrag={enableLeftDrag}
+      enableRightDrag={enableRightDrag}
       enableReorder={enableReorder}
-      bottomSpacing={bottomSpacing}
     />
   </ChartContextProvider>
 );

apps/app/components/gantt-chart/sidebar.tsx

@@ -1,156 +0,0 @@
-// react-beautiful-dnd
-import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-// hooks
-import { useChart } from "./hooks";
-// ui
-import { Loader } from "components/ui";
-// icons
-import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
-// types
-import { IBlockUpdateData, IGanttBlock } from "./types";
-
-type Props = {
-  title: string;
-  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  blocks: IGanttBlock[] | null;
-  SidebarBlockRender: React.FC<any>;
-  enableReorder: boolean;
-};
-
-export const GanttSidebar: React.FC<Props> = ({
-  title,
-  blockUpdateHandler,
-  blocks,
-  SidebarBlockRender,
-  enableReorder,
-}) => {
-  const { activeBlock, dispatch } = useChart();
-
-  // update the active block on hover
-  const updateActiveBlock = (block: IGanttBlock | null) => {
-    dispatch({
-      type: "PARTIAL_UPDATE",
-      payload: {
-        activeBlock: block,
-      },
-    });
-  };
-
-  const handleOrderChange = (result: DropResult) => {
-    if (!blocks) return;
-
-    const { source, destination } = result;
-
-    // return if dropped outside the list
-    if (!destination) return;
-
-    // return if dropped on the same index
-    if (source.index === destination.index) return;
-
-    let updatedSortOrder = blocks[source.index].sort_order;
-
-    // update the sort order to the lowest if dropped at the top
-    if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
-    // update the sort order to the highest if dropped at the bottom
-    else if (destination.index === blocks.length - 1)
-      updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
-    // update the sort order to the average of the two adjacent blocks if dropped in between
-    else {
-      const destinationSortingOrder = blocks[destination.index].sort_order;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? blocks[destination.index + 1].sort_order
-          : blocks[destination.index - 1].sort_order;
-
-      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-    }
-
-    // extract the element from the source index and insert it at the destination index without updating the entire array
-    const removedElement = blocks.splice(source.index, 1)[0];
-    blocks.splice(destination.index, 0, removedElement);
-
-    // call the block update handler with the updated sort order, new and old index
-    blockUpdateHandler(removedElement.data, {
-      sort_order: {
-        destinationIndex: destination.index,
-        newSortOrder: updatedSortOrder,
-        sourceIndex: source.index,
-      },
-    });
-  };
-
-  return (
-    <DragDropContext onDragEnd={handleOrderChange}>
-      <StrictModeDroppable droppableId="gantt-sidebar">
-        {(droppableProvided) => (
-          <div
-            className="h-full overflow-y-auto pl-2.5"
-            ref={droppableProvided.innerRef}
-            {...droppableProvided.droppableProps}
-          >
-            <>
-              {blocks ? (
-                blocks.length > 0 ? (
-                  blocks.map((block, index) => (
-                    <Draggable
-                      key={`sidebar-block-${block.id}`}
-                      draggableId={`sidebar-block-${block.id}`}
-                      index={index}
-                      isDragDisabled={!enableReorder}
-                    >
-                      {(provided, snapshot) => (
-                        <div
-                          className={`h-11 ${
-                            snapshot.isDragging ? "bg-custom-background-80 rounded" : ""
-                          }`}
-                          onMouseEnter={() => updateActiveBlock(block)}
-                          onMouseLeave={() => updateActiveBlock(null)}
-                          ref={provided.innerRef}
-                          {...provided.draggableProps}
-                        >
-                          <div
-                            id={`sidebar-block-${block.id}`}
-                            className={`group h-full w-full flex items-center gap-2 rounded-l px-2 pr-4 ${
-                              activeBlock?.id === block.id ? "bg-custom-background-80" : ""
-                            }`}
-                          >
-                            {enableReorder && (
-                              <button
-                                type="button"
-                                className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
-                                {...provided.dragHandleProps}
-                              >
-                                <EllipsisVerticalIcon className="h-4" />
-                                <EllipsisVerticalIcon className="h-4 -ml-5" />
-                              </button>
-                            )}
-                            <div className="flex-grow truncate w-full h-full">
-                              <SidebarBlockRender data={block.data} />
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </Draggable>
-                  ))
-                ) : (
-                  <div className="text-custom-text-200 text-sm text-center mt-8">
-                    No <span className="lowercase">{title}</span> found
-                  </div>
-                )
-              ) : (
-                <Loader className="pr-2 space-y-3">
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                  <Loader.Item height="34px" />
-                </Loader>
-              )}
-              {droppableProvided.placeholder}
-            </>
-          </div>
-        )}
-      </StrictModeDroppable>
-    </DragDropContext>
-  );
-};

apps/app/components/gantt-chart/types/index.ts

@@ -27,33 +27,19 @@ export interface IBlockUpdateData {
   target_date?: string;
 }
 
-export type TGanttViews = "hours" | "day" | "week" | "bi_week" | "month" | "quarter" | "year";
-
 export interface ChartContextData {
   allViews: allViewsType[];
-  currentView: TGanttViews;
+  currentView: "hours" | "day" | "week" | "bi_week" | "month" | "quarter" | "year";
   currentViewData: ChartDataType | undefined;
   renderView: any;
-  activeBlock: IGanttBlock | null;
 }
 
-export type ChartContextActionPayload =
-  | {
-      type: "CURRENT_VIEW";
-      payload: TGanttViews;
-    }
-  | {
-      type: "CURRENT_VIEW_DATA" | "RENDER_VIEW";
-      payload: ChartDataType | undefined;
-    }
-  | {
-      type: "PARTIAL_UPDATE";
-      payload: Partial<ChartContextData>;
-    };
+export type ChartContextActionPayload = {
+  type: "CURRENT_VIEW" | "CURRENT_VIEW_DATA" | "PARTIAL_UPDATE" | "RENDER_VIEW";
+  payload: any;
+};
 
 export interface ChartContextReducer extends ChartContextData {
-  scrollLeft: number;
-  updateScrollLeft: (scrollLeft: number) => void;
   dispatch: (action: ChartContextActionPayload) => void;
 }
 

apps/app/components/icons/state-group-icon.tsx

@@ -21,7 +21,6 @@ export const getStateGroupIcon = (
           width={width}
           height={height}
           color={color ?? STATE_GROUP_COLORS["backlog"]}
-          className="flex-shrink-0"
         />
       );
     case "unstarted":
@@ -30,7 +29,6 @@ export const getStateGroupIcon = (
           width={width}
           height={height}
           color={color ?? STATE_GROUP_COLORS["unstarted"]}
-          className="flex-shrink-0"
         />
       );
     case "started":
@@ -39,7 +37,6 @@ export const getStateGroupIcon = (
           width={width}
           height={height}
           color={color ?? STATE_GROUP_COLORS["started"]}
-          className="flex-shrink-0"
         />
       );
     case "completed":
@@ -48,7 +45,6 @@ export const getStateGroupIcon = (
           width={width}
           height={height}
           color={color ?? STATE_GROUP_COLORS["completed"]}
-          className="flex-shrink-0"
         />
       );
     case "cancelled":
@@ -57,7 +53,6 @@ export const getStateGroupIcon = (
           width={width}
           height={height}
           color={color ?? STATE_GROUP_COLORS["cancelled"]}
-          className="flex-shrink-0"
         />
       );
     default:

apps/app/components/inbox/inbox-issue-activity.tsx

@@ -1,106 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// components
-import { AddComment, IssueActivitySection } from "components/issues";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useUser from "hooks/use-user";
-import useToast from "hooks/use-toast";
-// types
-import { IIssue, IIssueComment } from "types";
-// fetch-keys
-import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
-type Props = { issueDetails: IIssue };
-
-export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxIssueId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { user } = useUser();
-
-  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
-    workspaceSlug && projectId && inboxIssueId
-      ? PROJECT_ISSUES_ACTIVITY(inboxIssueId.toString())
-      : null,
-    workspaceSlug && projectId && inboxIssueId
-      ? () =>
-          issuesService.getIssueActivities(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            inboxIssueId.toString()
-          )
-      : null
-  );
-
-  const handleCommentUpdate = async (comment: IIssueComment) => {
-    if (!workspaceSlug || !projectId || !inboxIssueId) return;
-
-    await issuesService
-      .patchIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        inboxIssueId as string,
-        comment.id,
-        comment,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !projectId || !inboxIssueId) return;
-
-    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
-
-    await issuesService
-      .deleteIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        inboxIssueId as string,
-        commentId,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleAddComment = async (formData: IIssueComment) => {
-    if (!workspaceSlug || !issueDetails) return;
-
-    await issuesService
-      .createIssueComment(
-        workspaceSlug.toString(),
-        issueDetails.project,
-        issueDetails.id,
-        formData,
-        user
-      )
-      .then(() => {
-        mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Comment could not be posted. Please try again.",
-        })
-      );
-  };
-
-  return (
-    <div className="space-y-5">
-      <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
-      <IssueActivitySection
-        activity={issueActivity}
-        handleCommentUpdate={handleCommentUpdate}
-        handleCommentDelete={handleCommentDelete}
-      />
-      <AddComment onSubmit={handleAddComment} />
-    </div>
-  );
-};

apps/app/components/inbox/inbox-main-content.tsx

@@ -14,8 +14,13 @@ import inboxServices from "services/inbox.service";
 import useInboxView from "hooks/use-inbox-view";
 import useUserAuth from "hooks/use-user-auth";
 // components
-import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
-import { InboxIssueActivity } from "components/inbox";
+import {
+  AddComment,
+  IssueActivitySection,
+  IssueDescriptionForm,
+  IssueDetailsSidebar,
+  IssueReaction,
+} from "components/issues";
 // ui
 import { Loader } from "components/ui";
 // icons
@@ -37,6 +42,7 @@ import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "cons
 
 const defaultValues = {
   name: "",
+  description: "",
   description_html: "",
   estimate_point: null,
   assignees_list: [],
@@ -290,6 +296,7 @@ export const InboxMainContent: React.FC = () => {
                 workspaceSlug={workspaceSlug as string}
                 issue={{
                   name: issueDetails.name,
+                  description: issueDetails.description,
                   description_html: issueDetails.description_html,
                 }}
                 handleFormSubmit={submitChanges}
@@ -305,7 +312,11 @@ export const InboxMainContent: React.FC = () => {
               issueId={issueDetails.id}
             />
 
-            <InboxIssueActivity issueDetails={issueDetails} />
+            <div className="space-y-5">
+              <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
+              <IssueActivitySection issueId={issueDetails.id} user={user} />
+              <AddComment issueId={issueDetails.id} user={user} />
+            </div>
           </div>
 
           <div className="basis-1/3 space-y-5 border-custom-border-200 p-5">

apps/app/components/inbox/index.ts

@@ -4,7 +4,6 @@ export * from "./delete-issue-modal";
 export * from "./filters-dropdown";
 export * from "./filters-list";
 export * from "./inbox-action-headers";
-export * from "./inbox-issue-activity";
 export * from "./inbox-issue-card";
 export * from "./inbox-main-content";
 export * from "./issues-list-sidebar";

apps/app/components/issues/activity.tsx

@@ -3,6 +3,10 @@ import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
+import useSWR from "swr";
+
+// services
+import issuesService from "services/issues.service";
 // components
 import { ActivityIcon, ActivityMessage } from "components/core";
 import { CommentCard } from "components/issues/comment";
@@ -11,23 +15,62 @@ import { Icon, Loader } from "components/ui";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
-import { IIssueActivity, IIssueComment } from "types";
+import { ICurrentUserResponse, IIssueComment } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
 type Props = {
-  activity: IIssueActivity[] | undefined;
-  handleCommentUpdate: (comment: IIssueComment) => Promise<void>;
-  handleCommentDelete: (commentId: string) => Promise<void>;
+  issueId: string;
+  user: ICurrentUserResponse | undefined;
 };
 
-export const IssueActivitySection: React.FC<Props> = ({
-  activity,
-  handleCommentUpdate,
-  handleCommentDelete,
-}) => {
+export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
-  if (!activity)
+  const { data: issueActivities, mutate: mutateIssueActivities } = useSWR(
+    workspaceSlug && projectId ? PROJECT_ISSUES_ACTIVITY(issueId) : null,
+    workspaceSlug && projectId
+      ? () =>
+          issuesService.getIssueActivities(workspaceSlug as string, projectId as string, issueId)
+      : null
+  );
+
+  const handleCommentUpdate = async (comment: IIssueComment) => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    await issuesService
+      .patchIssueComment(
+        workspaceSlug as string,
+        projectId as string,
+        issueId as string,
+        comment.id,
+        comment,
+        user
+      )
+      .then((res) => mutateIssueActivities());
+  };
+
+  const handleCommentDelete = async (commentId: string) => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    mutateIssueActivities(
+      (prevData: any) => prevData?.filter((p: any) => p.id !== commentId),
+      false
+    );
+
+    await issuesService
+      .deleteIssueComment(
+        workspaceSlug as string,
+        projectId as string,
+        issueId as string,
+        commentId,
+        user
+      )
+      .then(() => mutateIssueActivities());
+  };
+
+  if (!issueActivities) {
     return (
       <Loader className="space-y-4">
         <div className="space-y-2">
@@ -44,11 +87,12 @@ export const IssueActivitySection: React.FC<Props> = ({
         </div>
       </Loader>
     );
+  }
 
   return (
     <div className="flow-root">
       <ul role="list" className="-mb-4">
-        {activity.map((activityItem, index) => {
+        {issueActivities.map((activityItem, index) => {
           // determines what type of action is performed
           const message = activityItem.field ? (
             <ActivityMessage activity={activityItem} />
@@ -60,7 +104,7 @@ export const IssueActivitySection: React.FC<Props> = ({
             return (
               <li key={activityItem.id}>
                 <div className="relative pb-1">
-                  {activity.length > 1 && index !== activity.length - 1 ? (
+                  {issueActivities.length > 1 && index !== issueActivities.length - 1 ? (
                     <span
                       className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-custom-background-80"
                       aria-hidden="true"

apps/app/components/issues/comment/add-comment.tsx

@@ -1,12 +1,28 @@
 import React from "react";
+
 import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
 // react-hook-form
 import { useForm, Controller } from "react-hook-form";
-// components
+// services
+import issuesServices from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
 import { SecondaryButton } from "components/ui";
-import { TipTapEditor } from "components/tiptap";
 // types
-import type { IIssueComment } from "types";
+import type { ICurrentUserResponse, IIssueComment } from "types";
+// fetch-keys
+import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
+
+const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
+  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
+);
+
+TiptapEditor.displayName = "TiptapEditor";
 
 const defaultValues: Partial<IIssueComment> = {
   comment_json: "",
@@ -14,49 +30,75 @@ const defaultValues: Partial<IIssueComment> = {
 };
 
 type Props = {
+  issueId: string;
+  user: ICurrentUserResponse | undefined;
   disabled?: boolean;
-  onSubmit: (data: IIssueComment) => Promise<void>;
 };
 
-export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
+export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false }) => {
   const {
-    control,
-    formState: { isSubmitting },
     handleSubmit,
-    reset,
+    control,
     setValue,
     watch,
+    formState: { isSubmitting },
+    reset,
   } = useForm<IIssueComment>({ defaultValues });
 
   const editorRef = React.useRef<any>(null);
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
-  const handleAddComment = async (formData: IIssueComment) => {
-    if (!formData.comment_html || !formData.comment_json || isSubmitting) return;
+  const { setToastAlert } = useToast();
 
-    await onSubmit(formData).then(() => {
-      reset(defaultValues);
-      editorRef.current?.clearEditor();
-    });
+  const onSubmit = async (formData: IIssueComment) => {
+    if (
+      !workspaceSlug ||
+      !projectId ||
+      !issueId ||
+      isSubmitting ||
+      !formData.comment_html ||
+      !formData.comment_json
+    )
+      return;
+    await issuesServices
+      .createIssueComment(
+        workspaceSlug as string,
+        projectId as string,
+        issueId as string,
+        formData,
+        user
+      )
+      .then(() => {
+        mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
+        reset(defaultValues);
+        editorRef.current?.clearEditor();
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        })
+      );
   };
 
   return (
     <div>
-      <form onSubmit={handleSubmit(handleAddComment)}>
+      <form onSubmit={handleSubmit(onSubmit)}>
         <div className="issue-comments-section">
           <Controller
             name="comment_html"
             control={control}
             render={({ field: { value, onChange } }) => (
-              <TipTapEditor
+              <TiptapEditor
                 workspaceSlug={workspaceSlug as string}
                 ref={editorRef}
                 value={
                   !value ||
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
+                    value === "" ||
+                    (typeof value === "object" && Object.keys(value).length === 0)
                     ? watch("comment_html")
                     : value
                 }

apps/app/components/issues/comment/comment-card.tsx

@@ -9,11 +9,17 @@ import useUser from "hooks/use-user";
 // ui
 import { CustomMenu } from "components/ui";
 import { CommentReaction } from "components/issues";
-import { TipTapEditor } from "components/tiptap";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import type { IIssueComment } from "types";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
+
+const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
+  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
+);
+
+TiptapEditor.displayName = "TiptapEditor";
 
 type Props = {
   workspaceSlug: string;
@@ -22,12 +28,7 @@ type Props = {
   handleCommentDeletion: (comment: string) => void;
 };
 
-export const CommentCard: React.FC<Props> = ({
-  comment,
-  workspaceSlug,
-  onSubmit,
-  handleCommentDeletion,
-}) => {
+export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit, handleCommentDeletion }) => {
   const { user } = useUser();
 
   const editorRef = React.useRef<any>(null);
@@ -108,7 +109,7 @@ export const CommentCard: React.FC<Props> = ({
             onSubmit={handleSubmit(onEnter)}
           >
             <div>
-              <TipTapEditor
+              <TiptapEditor
                 workspaceSlug={workspaceSlug as string}
                 ref={editorRef}
                 value={watch("comment_html")}
@@ -138,7 +139,7 @@ export const CommentCard: React.FC<Props> = ({
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            <TipTapEditor
+            <TiptapEditor
               workspaceSlug={workspaceSlug as string}
               ref={showEditorRef}
               value={comment.comment_html}

apps/app/components/issues/description-form.tsx

@@ -4,21 +4,24 @@ import { FC, useCallback, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // hooks
 import useReloadConfirmations from "hooks/use-reload-confirmation";
-import { useDebouncedCallback } from "use-debounce";
 // components
 import { TextArea } from "components/ui";
-import { TipTapEditor } from "components/tiptap";
+
 // types
 import { IIssue } from "types";
+import Tiptap from "components/tiptap";
+import { useDebouncedCallback } from "use-debounce";
 
 export interface IssueDescriptionFormValues {
   name: string;
+  description: any;
   description_html: string;
 }
 
 export interface IssueDetailsProps {
   issue: {
     name: string;
+    description: string;
     description_html: string;
   };
   workspaceSlug: string;
@@ -40,6 +43,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   const {
     handleSubmit,
     watch,
+    setValue,
     reset,
     register,
     control,
@@ -47,6 +51,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   } = useForm<IIssue>({
     defaultValues: {
       name: "",
+      description: "",
       description_html: "",
     },
   });
@@ -57,6 +62,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
 
       await handleFormSubmit({
         name: formData.name ?? "",
+        description: formData.description ?? "",
         description_html: formData.description_html ?? "<p></p>",
       });
     },
@@ -74,6 +80,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     }
   }, [isSubmitting, setShowAlert]);
 
+
   // reset form values
   useEffect(() => {
     if (!issue) return;
@@ -92,32 +99,27 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   return (
     <div className="relative">
       <div className="relative">
-        {isAllowed ? (
-          <TextArea
-            id="name"
-            name="name"
-            placeholder="Enter issue name"
-            register={register}
-            onFocus={() => setCharacterLimit(true)}
-            onChange={(e) => {
-              setCharacterLimit(false);
-              setIsSubmitting("submitting");
-              debouncedTitleSave();
-            }}
-            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"
-            role="textbox"
-            disabled={!isAllowed}
-          />
-        ) : (
-          <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
-        )}
-        {characterLimit && isAllowed && (
+        <TextArea
+          id="name"
+          name="name"
+          placeholder="Enter issue name"
+          register={register}
+          onFocus={() => setCharacterLimit(true)}
+          onChange={(e) => {
+            setCharacterLimit(false);
+            setIsSubmitting("submitting");
+            debouncedTitleSave();
+          }}
+          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"
+          role="textbox"
+          disabled={!isAllowed}
+        />
+        {characterLimit && (
           <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
             <span
-              className={`${
-                watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
-              }`}
+              className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
+                }`}
             >
               {watch("name").length}
             </span>
@@ -131,42 +133,39 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
           name="description_html"
           control={control}
           render={({ field: { value, onChange } }) => {
-            if (!value) return <></>;
+            if (!value && !watch("description_html")) return <></>;
 
             return (
-              <TipTapEditor
+              <Tiptap
                 value={
                   !value ||
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
-                    ? "<p></p>"
+                    value === "" ||
+                    (typeof value === "object" && Object.keys(value).length === 0)
+                    ? watch("description_html")
                     : value
                 }
                 workspaceSlug={workspaceSlug}
                 debouncedUpdatesEnabled={true}
                 setShouldShowAlert={setShowAlert}
                 setIsSubmitting={setIsSubmitting}
-                customClassName={
-                  isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
-                }
-                noBorder={!isAllowed}
+                customClassName="min-h-[150px] shadow-sm"
+                editorContentCustomClassNames="pb-9"
                 onChange={(description: Object, description_html: string) => {
                   setShowAlert(true);
                   setIsSubmitting("submitting");
                   onChange(description_html);
-                  handleSubmit(handleDescriptionFormSubmit)().finally(() =>
-                    setIsSubmitting("submitted")
-                  );
+                  setValue("description", description);
+                  handleSubmit(handleDescriptionFormSubmit)().finally(() => {
+                    setIsSubmitting("submitted");
+                  });
                 }}
-                editable={isAllowed}
               />
             );
           }}
         />
         <div
-          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
-            isSubmitting === "saved" ? "fadeOut" : "fadeIn"
-          }`}
+          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${isSubmitting === "saved" ? "fadeOut" : "fadeIn"
+            }`}
         >
           {isSubmitting === "submitting" ? "Saving..." : "Saved"}
         </div>

apps/app/components/issues/form.tsx

@@ -31,11 +31,18 @@ import {
   SecondaryButton,
   ToggleSwitch,
 } from "components/ui";
-import { TipTapEditor } from "components/tiptap";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
+// rich-text-editor
+
+const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
+  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
+);
+
+TiptapEditor.displayName = "TiptapEditor";
 
 const defaultValues: Partial<IIssue> = {
   project: "",
@@ -362,7 +369,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                       if (!value && !watch("description_html")) return <></>;
 
                       return (
-                        <TipTapEditor
+                        <TiptapEditor
                           workspaceSlug={workspaceSlug as string}
                           ref={editorRef}
                           debouncedUpdatesEnabled={false}

apps/app/components/issues/gantt-chart.tsx

@@ -6,8 +6,11 @@ import useUser from "hooks/use-user";
 import useGanttChartIssues from "hooks/gantt-chart/issue-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 // components
-import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IssueGanttBlock,
+  renderIssueBlocksStructure,
+} from "components/gantt-chart";
 // types
 import { IIssue } from "types";
 
@@ -24,6 +27,17 @@ export const IssueGanttChartView = () => {
     projectId as string
   );
 
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{ backgroundColor: data?.state_detail?.color || "#rgb(var(--color-primary-100))" }}
+      />
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
+    </div>
+  );
+
   return (
     <div className="w-full h-full">
       <GanttChartRoot
@@ -34,10 +48,9 @@ export const IssueGanttChartView = () => {
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        BlockRender={IssueGanttBlock}
-        SidebarBlockRender={IssueGanttSidebarBlock}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
         enableReorder={orderBy === "sort_order"}
-        bottomSpacing
       />
     </div>
   );

apps/app/components/issues/gantt-chart/blocks.tsx

@@ -1,67 +0,0 @@
-import { useRouter } from "next/router";
-
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import { getStateGroupIcon } from "components/icons";
-// helpers
-import { findTotalDaysInRange, renderShortDate } from "helpers/date-time.helper";
-// types
-import { IIssue } from "types";
-
-export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <div
-      className="flex items-center relative h-full w-full rounded"
-      style={{ backgroundColor: data?.state_detail?.color }}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
-    >
-      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
-      <Tooltip
-        tooltipContent={
-          <div className="space-y-1">
-            <h5>{data?.name}</h5>
-            <div>
-              {renderShortDate(data?.start_date ?? "")} to{" "}
-              {renderShortDate(data?.target_date ?? "")}
-            </div>
-          </div>
-        }
-        position="top-left"
-      >
-        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-          {data?.name}
-        </div>
-      </Tooltip>
-    </div>
-  );
-};
-
-// rendering issues on gantt sidebar
-export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const duration = findTotalDaysInRange(data?.start_date ?? "", data?.target_date ?? "", true);
-
-  return (
-    <div
-      className="relative w-full flex items-center gap-2 h-full"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/issues/${data?.id}`)}
-    >
-      {getStateGroupIcon(data?.state_detail?.group, "14", "14", data?.state_detail?.color)}
-      <div className="text-xs text-custom-text-300 flex-shrink-0">
-        {data?.project_detail?.identifier} {data?.sequence_id}
-      </div>
-      <div className="flex items-center justify-between gap-2 w-full flex-grow truncate">
-        <h6 className="text-sm font-medium flex-grow truncate">{data?.name}</h6>
-        <span className="flex-shrink-0 text-sm text-custom-text-200">
-          {duration} day{duration > 1 ? "s" : ""}
-        </span>
-      </div>
-    </div>
-  );
-};

apps/app/components/issues/gantt-chart/index.ts

@@ -1,2 +0,0 @@
-export * from "./blocks";
-export * from "./layout";

apps/app/components/issues/index.ts

@@ -15,4 +15,3 @@ export * from "./sidebar";
 export * from "./sub-issues-list";
 export * from "./label";
 export * from "./issue-reaction";
-export * from "./peek-overview";

apps/app/components/issues/main-content.tsx

@@ -1,13 +1,12 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
 
 // services
 import issuesService from "services/issues.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
-import useToast from "hooks/use-toast";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
 // components
@@ -26,9 +25,9 @@ import { CustomMenu } from "components/ui";
 import { LayerDiagonalIcon } from "components/icons";
 import { MinusCircleIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue, IIssueComment } from "types";
+import { IIssue } from "types";
 // fetch-keys
-import { PROJECT_ISSUES_ACTIVITY, SUB_ISSUES } from "constants/fetch-keys";
+import { SUB_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   issueDetails: IIssue;
@@ -44,8 +43,6 @@ export const IssueMainContent: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug, projectId, issueId, archivedIssueId } = router.query;
 
-  const { setToastAlert } = useToast();
-
   const { user } = useUserAuth();
   const { memberRole } = useProjectMyMembership();
 
@@ -53,81 +50,15 @@ export const IssueMainContent: React.FC<Props> = ({
     workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
     workspaceSlug && projectId && issueDetails?.parent
       ? () =>
-          issuesService.subIssues(
-            workspaceSlug as string,
-            projectId as string,
-            issueDetails.parent ?? ""
-          )
+        issuesService.subIssues(
+          workspaceSlug as string,
+          projectId as string,
+          issueDetails.parent ?? ""
+        )
       : null
   );
   const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id);
 
-  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
-    workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId.toString()) : null,
-    workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.getIssueActivities(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            issueId.toString()
-          )
-      : null
-  );
-
-  const handleCommentUpdate = async (comment: IIssueComment) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    await issuesService
-      .patchIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        comment.id,
-        comment,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
-
-    await issuesService
-      .deleteIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        commentId,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleAddComment = async (formData: IIssueComment) => {
-    if (!workspaceSlug || !issueDetails) return;
-
-    await issuesService
-      .createIssueComment(
-        workspaceSlug.toString(),
-        issueDetails.project,
-        issueDetails.id,
-        formData,
-        user
-      )
-      .then(() => {
-        mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Comment could not be posted. Please try again.",
-        })
-      );
-  };
-
   return (
     <>
       <div className="rounded-lg">
@@ -166,9 +97,8 @@ export const IssueMainContent: React.FC<Props> = ({
                       <CustomMenu.MenuItem
                         key={issue.id}
                         renderAs="a"
-                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
-                          issue.id
-                        }`}
+                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id
+                          }`}
                         className="flex items-center gap-2 py-2"
                       >
                         <LayerDiagonalIcon className="h-4 w-4" />
@@ -216,11 +146,14 @@ export const IssueMainContent: React.FC<Props> = ({
       <div className="space-y-5 pt-3">
         <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
         <IssueActivitySection
-          activity={issueActivity}
-          handleCommentUpdate={handleCommentUpdate}
-          handleCommentDelete={handleCommentDelete}
+          issueId={(archivedIssueId as string) ?? (issueId as string)}
+          user={user}
+        />
+        <AddComment
+          issueId={(archivedIssueId as string) ?? (issueId as string)}
+          user={user}
+          disabled={uneditable}
         />
-        <AddComment onSubmit={handleAddComment} disabled={uneditable} />
       </div>
     </>
   );

apps/app/components/issues/my-issues/my-issues-select-filters.tsx

@@ -7,7 +7,7 @@ import useSWR from "swr";
 // services
 import issuesService from "services/issues.service";
 // components
-import { DateFilterModal } from "components/core";
+import { DueDateFilterModal } from "components/core";
 // ui
 import { MultiLevelDropdown } from "components/ui";
 // icons
@@ -20,7 +20,7 @@ import { IIssueFilterOptions, IQuery } from "types";
 import { WORKSPACE_LABELS } from "constants/fetch-keys";
 // constants
 import { GROUP_CHOICES, PRIORITIES } from "constants/project";
-import { DATE_FILTER_OPTIONS } from "constants/filters";
+import { DUE_DATES } from "constants/due-dates";
 
 type Props = {
   filters: Partial<IIssueFilterOptions> | IQuery;
@@ -35,14 +35,7 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
   direction = "right",
   height = "md",
 }) => {
-  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
-  const [dateFilterType, setDateFilterType] = useState<{
-    title: string;
-    type: "start_date" | "target_date";
-  }>({
-    title: "",
-    type: "start_date",
-  });
+  const [isDueDateFilterModalOpen, setIsDueDateFilterModalOpen] = useState(false);
   const [fetchLabels, setFetchLabels] = useState(false);
 
   const router = useRouter();
@@ -57,12 +50,10 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
 
   return (
     <>
-      {isDateFilterModalOpen && (
-        <DateFilterModal
-          title={dateFilterType.title}
-          field={dateFilterType.type}
-          isOpen={isDateFilterModalOpen}
-          handleClose={() => setIsDateFilterModalOpen(false)}
+      {isDueDateFilterModalOpen && (
+        <DueDateFilterModal
+          isOpen={isDueDateFilterModalOpen}
+          handleClose={() => setIsDueDateFilterModalOpen(false)}
         />
       )}
       <MultiLevelDropdown
@@ -140,49 +131,13 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
               selected: filters?.labels?.includes(label.id),
             })),
           },
-          {
-            id: "start_date",
-            label: "Start date",
-            value: DATE_FILTER_OPTIONS,
-            hasChildren: true,
-            children: [
-              ...(DATE_FILTER_OPTIONS?.map((option) => ({
-                id: option.name,
-                label: option.name,
-                value: {
-                  key: "start_date",
-                  value: option.value,
-                },
-                selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
-              })) ?? []),
-              {
-                id: "custom",
-                label: "Custom",
-                value: "custom",
-                element: (
-                  <button
-                    onClick={() => {
-                      setIsDateFilterModalOpen(true);
-                      setDateFilterType({
-                        title: "Start date",
-                        type: "start_date",
-                      });
-                    }}
-                    className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                  >
-                    Custom
-                  </button>
-                ),
-              },
-            ],
-          },
           {
             id: "target_date",
             label: "Due date",
-            value: DATE_FILTER_OPTIONS,
+            value: DUE_DATES,
             hasChildren: true,
             children: [
-              ...(DATE_FILTER_OPTIONS?.map((option) => ({
+              ...(DUE_DATES?.map((option) => ({
                 id: option.name,
                 label: option.name,
                 value: {
@@ -197,13 +152,7 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
                 value: "custom",
                 element: (
                   <button
-                    onClick={() => {
-                      setIsDateFilterModalOpen(true);
-                      setDateFilterType({
-                        title: "Due date",
-                        type: "target_date",
-                      });
-                    }}
+                    onClick={() => setIsDueDateFilterModalOpen(true)}
                     className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                   >
                     Custom

apps/app/components/issues/my-issues/my-issues-view-options.tsx

@@ -89,11 +89,14 @@ export const MyIssuesViewOptions: React.FC = () => {
         onSelect={(option) => {
           const key = option.key as keyof typeof filters;
 
-          if (key === "start_date" || key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
+          if (key === "target_date") {
+            const valueExists = checkIfArraysHaveSameElements(
+              filters?.target_date ?? [],
+              option.value
+            );
 
             setFilters({
-              [key]: valueExists ? null : option.value,
+              target_date: valueExists ? null : option.value,
             });
           } else {
             const valueExists = filters[key]?.includes(option.value);
@@ -156,11 +159,7 @@ export const MyIssuesViewOptions: React.FC = () => {
                             >
                               {GROUP_BY_OPTIONS.map((option) => {
                                 if (issueView === "kanban" && option.key === null) return null;
-                                if (
-                                  option.key === "state" ||
-                                  option.key === "created_by" ||
-                                  option.key === "assignees"
-                                )
+                                if (option.key === "state" || option.key === "created_by")
                                   return null;
 
                                 return (

apps/app/components/issues/my-issues/my-issues-view.tsx

@@ -249,7 +249,6 @@ export const MyIssuesView: React.FC<Props> = ({
                   labels: null,
                   priority: null,
                   state_group: null,
-                  start_date: null,
                   target_date: null,
                   type: null,
                 })

apps/app/components/issues/peek-overview/full-screen-peek-view.tsx

@@ -1,79 +0,0 @@
-import {
-  PeekOverviewHeader,
-  PeekOverviewIssueActivity,
-  PeekOverviewIssueDetails,
-  PeekOverviewIssueProperties,
-  TPeekOverviewModes,
-} from "components/issues";
-import { IIssue } from "types";
-
-type Props = {
-  handleClose: () => void;
-  handleDeleteIssue: () => void;
-  handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
-  issue: IIssue;
-  mode: TPeekOverviewModes;
-  readOnly: boolean;
-  setMode: (mode: TPeekOverviewModes) => void;
-  workspaceSlug: string;
-};
-
-export const FullScreenPeekView: React.FC<Props> = ({
-  handleClose,
-  handleDeleteIssue,
-  handleUpdateIssue,
-  issue,
-  mode,
-  readOnly,
-  setMode,
-  workspaceSlug,
-}) => (
-  <div className="h-full w-full grid grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
-    <div className="h-full w-full flex flex-col col-span-7 overflow-hidden">
-      <div className="w-full p-5">
-        <PeekOverviewHeader
-          handleClose={handleClose}
-          handleDeleteIssue={handleDeleteIssue}
-          issue={issue}
-          mode={mode}
-          setMode={setMode}
-          workspaceSlug={workspaceSlug}
-        />
-      </div>
-      <div className="h-full w-full px-6 overflow-y-auto">
-        {/* issue title and description */}
-        <div className="w-full">
-          <PeekOverviewIssueDetails
-            handleUpdateIssue={handleUpdateIssue}
-            issue={issue}
-            readOnly={readOnly}
-            workspaceSlug={workspaceSlug}
-          />
-        </div>
-        {/* divider */}
-        <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
-        {/* issue activity/comments */}
-        <div className="w-full">
-          <PeekOverviewIssueActivity
-            workspaceSlug={workspaceSlug}
-            issue={issue}
-            readOnly={readOnly}
-          />
-        </div>
-      </div>
-    </div>
-    <div className="col-span-3 h-full w-full overflow-y-auto">
-      {/* issue properties */}
-      <div className="w-full px-6 py-5">
-        <PeekOverviewIssueProperties
-          handleDeleteIssue={handleDeleteIssue}
-          issue={issue}
-          mode="full"
-          onChange={handleUpdateIssue}
-          readOnly={readOnly}
-          workspaceSlug={workspaceSlug}
-        />
-      </div>
-    </div>
-  </div>
-);

apps/app/components/issues/peek-overview/header.tsx

@@ -1,133 +0,0 @@
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomSelect, Icon } from "components/ui";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-// types
-import { IIssue } from "types";
-import { TPeekOverviewModes } from "./layout";
-import { ArrowRightAlt, CloseFullscreen, East, OpenInFull } from "@mui/icons-material";
-
-type Props = {
-  handleClose: () => void;
-  handleDeleteIssue: () => void;
-  issue: IIssue;
-  mode: TPeekOverviewModes;
-  setMode: (mode: TPeekOverviewModes) => void;
-  workspaceSlug: string;
-};
-
-const peekModes: {
-  key: TPeekOverviewModes;
-  icon: string;
-  label: string;
-}[] = [
-  { key: "side", icon: "side_navigation", label: "Side Peek" },
-  {
-    key: "modal",
-    icon: "dialogs",
-    label: "Modal Peek",
-  },
-  {
-    key: "full",
-    icon: "nearby",
-    label: "Full Screen Peek",
-  },
-];
-
-export const PeekOverviewHeader: React.FC<Props> = ({
-  issue,
-  handleClose,
-  handleDeleteIssue,
-  mode,
-  setMode,
-  workspaceSlug,
-}) => {
-  const { setToastAlert } = useToast();
-
-  const handleCopyLink = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link copied!",
-        message: "Issue link copied to clipboard",
-      });
-    });
-  };
-
-  return (
-    <div className="flex justify-between items-center">
-      <div className="flex items-center gap-4">
-        {mode === "side" && (
-          <button type="button" onClick={handleClose}>
-            <East
-              sx={{
-                fontSize: "14px",
-              }}
-            />
-          </button>
-        )}
-        {mode === "modal" || mode === "full" ? (
-          <button type="button" onClick={() => setMode("side")}>
-            <CloseFullscreen
-              sx={{
-                fontSize: "14px",
-              }}
-            />
-          </button>
-        ) : (
-          <button type="button" onClick={() => setMode("modal")}>
-            <OpenInFull
-              sx={{
-                fontSize: "14px",
-              }}
-            />
-          </button>
-        )}
-        <CustomSelect
-          value={mode}
-          onChange={(val: TPeekOverviewModes) => setMode(val)}
-          customButton={
-            <button
-              type="button"
-              className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}
-            >
-              <Icon iconName={peekModes.find((m) => m.key === mode)?.icon ?? ""} />
-            </button>
-          }
-          position="left"
-        >
-          {peekModes.map((mode) => (
-            <CustomSelect.Option key={mode.key} value={mode.key}>
-              <div className="flex items-center gap-1.5">
-                <Icon
-                  iconName={mode.icon}
-                  className={`!text-base flex-shrink-0 -my-1 ${
-                    mode.key === "full" ? "rotate-45" : ""
-                  }`}
-                />
-                {mode.label}
-              </div>
-            </CustomSelect.Option>
-          ))}
-        </CustomSelect>
-      </div>
-      {(mode === "side" || mode === "modal") && (
-        <div className="flex items-center gap-2">
-          <button type="button" onClick={handleCopyLink} className="-rotate-45">
-            <Icon iconName="link" />
-          </button>
-          <button type="button" onClick={handleDeleteIssue}>
-            <Icon iconName="delete" />
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};

apps/app/components/issues/peek-overview/index.ts

@@ -1,7 +0,0 @@
-export * from "./full-screen-peek-view";
-export * from "./header";
-export * from "./issue-activity";
-export * from "./issue-details";
-export * from "./issue-properties";
-export * from "./layout";
-export * from "./side-peek-view";

apps/app/components/issues/peek-overview/issue-activity.tsx

@@ -1,90 +0,0 @@
-import useSWR, { mutate } from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useUser from "hooks/use-user";
-import useToast from "hooks/use-toast";
-// components
-import { AddComment, IssueActivitySection } from "components/issues";
-// types
-import { IIssue, IIssueComment } from "types";
-// fetch-keys
-import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
-type Props = {
-  workspaceSlug: string;
-  issue: IIssue;
-  readOnly: boolean;
-};
-
-export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issue, readOnly }) => {
-  const { setToastAlert } = useToast();
-
-  const { user } = useUser();
-
-  const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
-    workspaceSlug && issue ? PROJECT_ISSUES_ACTIVITY(issue.id) : null,
-    workspaceSlug && issue
-      ? () => issuesService.getIssueActivities(workspaceSlug.toString(), issue?.project, issue?.id)
-      : null
-  );
-
-  const handleCommentUpdate = async (comment: IIssueComment) => {
-    if (!workspaceSlug || !issue) return;
-
-    await issuesService
-      .patchIssueComment(
-        workspaceSlug as string,
-        issue.project,
-        issue.id,
-        comment.id,
-        comment,
-        user
-      )
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleCommentDelete = async (commentId: string) => {
-    if (!workspaceSlug || !issue) return;
-
-    mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
-
-    await issuesService
-      .deleteIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, user)
-      .then(() => mutateIssueActivity());
-  };
-
-  const handleAddComment = async (formData: IIssueComment) => {
-    if (!workspaceSlug || !issue) return;
-
-    await issuesService
-      .createIssueComment(workspaceSlug.toString(), issue.project, issue.id, formData, user)
-      .then(() => {
-        mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Comment could not be posted. Please try again.",
-        })
-      );
-  };
-
-  return (
-    <div>
-      <h4 className="font-medium">Activity</h4>
-      <div className="mt-4">
-        <IssueActivitySection
-          activity={issueActivity}
-          handleCommentUpdate={handleCommentUpdate}
-          handleCommentDelete={handleCommentDelete}
-        />
-        <div className="mt-4">
-          <AddComment onSubmit={handleAddComment} />
-        </div>
-      </div>
-    </div>
-  );
-};

apps/app/components/issues/peek-overview/issue-details.tsx

@@ -1,34 +0,0 @@
-// components
-import { IssueDescriptionForm, IssueReaction } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  handleUpdateIssue: (formData: Partial<IIssue>) => Promise<void>;
-  issue: IIssue;
-  readOnly: boolean;
-  workspaceSlug: string;
-};
-
-export const PeekOverviewIssueDetails: React.FC<Props> = ({
-  handleUpdateIssue,
-  issue,
-  readOnly,
-  workspaceSlug,
-}) => (
-  <div className="space-y-2">
-    <h6 className="font-medium text-custom-text-200">
-      {issue.project_detail.identifier}-{issue.sequence_id}
-    </h6>
-    <IssueDescriptionForm
-      handleFormSubmit={handleUpdateIssue}
-      isAllowed={!readOnly}
-      issue={{
-        name: issue.name,
-        description_html: issue.description_html,
-      }}
-      workspaceSlug={workspaceSlug}
-    />
-    <IssueReaction workspaceSlug={workspaceSlug} issueId={issue.id} projectId={issue.project} />
-  </div>
-);

apps/app/components/issues/peek-overview/issue-properties.tsx

@@ -1,203 +0,0 @@
-// headless ui
-import { Disclosure } from "@headlessui/react";
-import { getStateGroupIcon } from "components/icons";
-// components
-import {
-  SidebarAssigneeSelect,
-  SidebarEstimateSelect,
-  SidebarPrioritySelect,
-  SidebarStateSelect,
-  TPeekOverviewModes,
-} from "components/issues";
-// icons
-import { CustomDatePicker, Icon } from "components/ui";
-import { copyTextToClipboard } from "helpers/string.helper";
-import useToast from "hooks/use-toast";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  handleDeleteIssue: () => void;
-  issue: IIssue;
-  mode: TPeekOverviewModes;
-  onChange: (issueProperty: Partial<IIssue>) => void;
-  readOnly: boolean;
-  workspaceSlug: string;
-};
-
-export const PeekOverviewIssueProperties: React.FC<Props> = ({
-  handleDeleteIssue,
-  issue,
-  mode,
-  onChange,
-  readOnly,
-  workspaceSlug,
-}) => {
-  const { setToastAlert } = useToast();
-
-  const startDate = issue.start_date;
-  const targetDate = issue.target_date;
-
-  const minDate = startDate ? new Date(startDate) : null;
-  minDate?.setDate(minDate.getDate());
-
-  const maxDate = targetDate ? new Date(targetDate) : null;
-  maxDate?.setDate(maxDate.getDate());
-
-  const handleCopyLink = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link copied!",
-        message: "Issue link copied to clipboard",
-      });
-    });
-  };
-
-  return (
-    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
-      {mode === "full" && (
-        <div className="flex justify-between gap-2 pb-3">
-          <h6 className="flex items-center gap-2 font-medium">
-            {getStateGroupIcon(issue.state_detail.group, "16", "16", issue.state_detail.color)}
-            {issue.project_detail.identifier}-{issue.sequence_id}
-          </h6>
-          <div className="flex items-center gap-2">
-            <button type="button" onClick={handleCopyLink} className="-rotate-45">
-              <Icon iconName="link" />
-            </button>
-            <button type="button" onClick={handleDeleteIssue}>
-              <Icon iconName="delete" />
-            </button>
-          </div>
-        </div>
-      )}
-      <div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
-        <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">State</span>
-          </div>
-          <div className="w-3/4">
-            <SidebarStateSelect
-              value={issue.state}
-              onChange={(val: string) => onChange({ state: val })}
-              disabled={readOnly}
-            />
-          </div>
-        </div>
-        <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="group" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">Assignees</span>
-          </div>
-          <div className="w-3/4">
-            <SidebarAssigneeSelect
-              value={issue.assignees_list}
-              onChange={(val: string[]) => onChange({ assignees_list: val })}
-              disabled={readOnly}
-            />
-          </div>
-        </div>
-        <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">Priority</span>
-          </div>
-          <div className="w-3/4">
-            <SidebarPrioritySelect
-              value={issue.priority}
-              onChange={(val: string) => onChange({ priority: val })}
-              disabled={readOnly}
-            />
-          </div>
-        </div>
-        <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">Start date</span>
-          </div>
-          <div>
-            {issue.start_date ? (
-              <CustomDatePicker
-                placeholder="Start date"
-                value={issue.start_date}
-                onChange={(val) =>
-                  onChange({
-                    start_date: val,
-                  })
-                }
-                className="bg-custom-background-100"
-                wrapperClassName="w-full"
-                maxDate={maxDate ?? undefined}
-                disabled={readOnly}
-              />
-            ) : (
-              <span className="text-custom-text-200">Empty</span>
-            )}
-          </div>
-        </div>
-        <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">Due date</span>
-          </div>
-          <div>
-            {issue.target_date ? (
-              <CustomDatePicker
-                placeholder="Due date"
-                value={issue.target_date}
-                onChange={(val) =>
-                  onChange({
-                    target_date: val,
-                  })
-                }
-                className="bg-custom-background-100"
-                wrapperClassName="w-full"
-                minDate={minDate ?? undefined}
-                disabled={readOnly}
-              />
-            ) : (
-              <span className="text-custom-text-200">Empty</span>
-            )}
-          </div>
-        </div>
-        {/* <div className="flex items-center gap-2 text-sm">
-          <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="change_history" className="!text-base flex-shrink-0" />
-            <span className="flex-grow truncate">Estimate</span>
-          </div>
-          <div className="w-3/4">
-            <SidebarEstimateSelect
-              value={issue.estimate_point}
-              onChange={(val: number | null) => onChange({ estimate_point: val })}
-              disabled={readOnly}
-            />
-          </div>
-        </div> */}
-        {/* <Disclosure as="div">
-          {({ open }) => (
-            <>
-              <Disclosure.Button
-                as="button"
-                type="button"
-                className="flex items-center gap-1 text-sm text-custom-text-200"
-              >
-                Show {open ? "Less" : "More"}
-                <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-base" />
-              </Disclosure.Button>
-              <Disclosure.Panel as="div" className="mt-4 space-y-4">
-                Disclosure Panel
-              </Disclosure.Panel>
-            </>
-          )}
-        </Disclosure> */}
-      </div>
-    </div>
-  );
-};

apps/app/components/issues/peek-overview/layout.tsx

@@ -1,107 +0,0 @@
-import React, { useState } from "react";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-import { FullScreenPeekView, SidePeekView } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  handleDeleteIssue: () => void;
-  handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
-  issue: IIssue | null;
-  isOpen: boolean;
-  onClose: () => void;
-  workspaceSlug: string;
-  readOnly: boolean;
-};
-
-export type TPeekOverviewModes = "side" | "modal" | "full";
-
-export const IssuePeekOverview: React.FC<Props> = ({
-  handleDeleteIssue,
-  handleUpdateIssue,
-  issue,
-  isOpen,
-  onClose,
-  workspaceSlug,
-  readOnly,
-}) => {
-  const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
-
-  const handleClose = () => {
-    onClose();
-    setPeekOverviewMode("side");
-  };
-
-  if (!issue || !isOpen) return null;
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        {/* add backdrop conditionally */}
-        {(peekOverviewMode === "modal" || peekOverviewMode === "full") && (
-          <Transition.Child
-            as={React.Fragment}
-            enter="ease-out duration-300"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="ease-in duration-200"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-          </Transition.Child>
-        )}
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="relative h-full w-full">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel
-                className={`absolute z-20 bg-custom-background-100 ${
-                  peekOverviewMode === "side"
-                    ? "top-0 right-0 h-full w-1/2 shadow-custom-shadow-md"
-                    : peekOverviewMode === "modal"
-                    ? "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[70%] w-3/5 rounded-lg shadow-custom-shadow-xl"
-                    : "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[95%] w-[95%] rounded-lg shadow-custom-shadow-xl"
-                }`}
-              >
-                {(peekOverviewMode === "side" || peekOverviewMode === "modal") && (
-                  <SidePeekView
-                    handleClose={handleClose}
-                    handleDeleteIssue={handleDeleteIssue}
-                    handleUpdateIssue={handleUpdateIssue}
-                    issue={issue}
-                    mode={peekOverviewMode}
-                    readOnly={readOnly}
-                    setMode={(mode) => setPeekOverviewMode(mode)}
-                    workspaceSlug={workspaceSlug}
-                  />
-                )}
-                {peekOverviewMode === "full" && (
-                  <FullScreenPeekView
-                    handleClose={handleClose}
-                    handleDeleteIssue={handleDeleteIssue}
-                    handleUpdateIssue={handleUpdateIssue}
-                    issue={issue}
-                    mode={peekOverviewMode}
-                    readOnly={readOnly}
-                    setMode={(mode) => setPeekOverviewMode(mode)}
-                    workspaceSlug={workspaceSlug}
-                  />
-                )}
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};

apps/app/components/issues/peek-overview/side-peek-view.tsx

@@ -1,75 +0,0 @@
-import {
-  PeekOverviewHeader,
-  PeekOverviewIssueActivity,
-  PeekOverviewIssueDetails,
-  PeekOverviewIssueProperties,
-  TPeekOverviewModes,
-} from "components/issues";
-import { IIssue } from "types";
-
-type Props = {
-  handleClose: () => void;
-  handleDeleteIssue: () => void;
-  handleUpdateIssue: (issue: Partial<IIssue>) => Promise<void>;
-  issue: IIssue;
-  mode: TPeekOverviewModes;
-  readOnly: boolean;
-  setMode: (mode: TPeekOverviewModes) => void;
-  workspaceSlug: string;
-};
-
-export const SidePeekView: React.FC<Props> = ({
-  handleClose,
-  handleDeleteIssue,
-  handleUpdateIssue,
-  issue,
-  mode,
-  readOnly,
-  setMode,
-  workspaceSlug,
-}) => (
-  <div className="h-full w-full flex flex-col overflow-hidden">
-    <div className="w-full p-5">
-      <PeekOverviewHeader
-        handleClose={handleClose}
-        handleDeleteIssue={handleDeleteIssue}
-        issue={issue}
-        mode={mode}
-        setMode={setMode}
-        workspaceSlug={workspaceSlug}
-      />
-    </div>
-    <div className="h-full w-full px-6 overflow-y-auto">
-      {/* issue title and description */}
-      <div className="w-full">
-        <PeekOverviewIssueDetails
-          handleUpdateIssue={handleUpdateIssue}
-          issue={issue}
-          readOnly={readOnly}
-          workspaceSlug={workspaceSlug}
-        />
-      </div>
-      {/* issue properties */}
-      <div className="w-full mt-10">
-        <PeekOverviewIssueProperties
-          handleDeleteIssue={handleDeleteIssue}
-          issue={issue}
-          mode={mode}
-          onChange={handleUpdateIssue}
-          readOnly={readOnly}
-          workspaceSlug={workspaceSlug}
-        />
-      </div>
-      {/* divider */}
-      <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
-      {/* issue activity/comments */}
-      <div className="w-full pb-5">
-        <PeekOverviewIssueActivity
-          workspaceSlug={workspaceSlug}
-          issue={issue}
-          readOnly={readOnly}
-        />
-      </div>
-    </div>
-  </div>
-);

apps/app/components/issues/sidebar-select/assignee.tsx

@@ -9,16 +9,26 @@ import projectService from "services/project.service";
 // ui
 import { CustomSearchSelect } from "components/ui";
 import { AssigneesList, Avatar } from "components/ui/avatar";
+// icons
+import { UserGroupIcon } from "@heroicons/react/24/outline";
+// types
+import { UserAuth } from "types";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
 type Props = {
   value: string[];
   onChange: (val: string[]) => void;
+  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
+export const SidebarAssigneeSelect: React.FC<Props> = ({
+  value,
+  onChange,
+  userAuth,
+  disabled = false,
+}) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -40,27 +50,36 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabl
     ),
   }));
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
+
   return (
-    <CustomSearchSelect
-      value={value}
-      customButton={
-        <>
-          {value && value.length > 0 && Array.isArray(value) ? (
-            <div className="-my-0.5 flex items-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={false} />
-              <span className="text-custom-text-100 text-sm">{value.length} Assignees</span>
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+        <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Assignees</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <CustomSearchSelect
+          value={value}
+          label={
+            <div className="flex items-center gap-2 text-custom-text-200">
+              {value && value.length > 0 && Array.isArray(value) ? (
+                <div className="-my-0.5 flex items-center justify-center gap-2">
+                  <AssigneesList userIds={value} length={3} showLength={false} />
+                  <span className="text-custom-text-100">{value.length} Assignees</span>
+                </div>
+              ) : (
+                "No assignees"
+              )}
             </div>
-          ) : (
-            <button type="button" className="bg-custom-background-80 px-2.5 py-0.5 text-sm rounded">
-              No assignees
-            </button>
-          )}
-        </>
-      }
-      options={options}
-      onChange={onChange}
-      multiple
-      disabled={disabled}
-    />
+          }
+          options={options}
+          onChange={onChange}
+          position="right"
+          multiple
+          disabled={isNotAllowed}
+        />
+      </div>
+    </div>
   );
 };

apps/app/components/issues/sidebar-select/estimate.tsx

@@ -6,56 +6,75 @@ import useEstimateOption from "hooks/use-estimate-option";
 import { CustomSelect } from "components/ui";
 // icons
 import { PlayIcon } from "@heroicons/react/24/outline";
+// types
+import { UserAuth } from "types";
 
 type Props = {
   value: number | null;
   onChange: (val: number | null) => void;
+  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
+export const SidebarEstimateSelect: React.FC<Props> = ({
+  value,
+  onChange,
+  userAuth,
+  disabled = false,
+}) => {
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
+
   const { isEstimateActive, estimatePoints } = useEstimateOption();
 
   if (!isEstimateActive) return null;
 
   return (
-    <CustomSelect
-      value={value}
-      customButton={
-        <button
-          type="button"
-          className="flex items-center gap-1.5 !text-sm bg-custom-background-80 rounded px-2.5 py-0.5"
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+        <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
+        <p>Estimate</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <CustomSelect
+          value={value}
+          label={
+            <div className="flex items-center gap-2 text-xs">
+              <PlayIcon
+                className={`h-4 w-4 -rotate-90 ${
+                  value !== null ? "text-custom-text-100" : "text-custom-text-200"
+                }`}
+              />
+              {estimatePoints?.find((e) => e.key === value)?.value ?? (
+                <span className="text-custom-text-200">No estimates</span>
+              )}
+            </div>
+          }
+          onChange={onChange}
+          position="right"
+          width="w-full"
+          disabled={isNotAllowed || disabled}
         >
-          <PlayIcon
-            className={`h-4 w-4 -rotate-90 ${
-              value !== null ? "text-custom-text-100" : "text-custom-text-200"
-            }`}
-          />
-          {estimatePoints?.find((e) => e.key === value)?.value ?? "No estimate"}
-        </button>
-      }
-      onChange={onChange}
-      disabled={disabled}
-    >
-      <CustomSelect.Option value={null}>
-        <>
-          <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
-          </span>
-          None
-        </>
-      </CustomSelect.Option>
-      {estimatePoints &&
-        estimatePoints.map((point) => (
-          <CustomSelect.Option key={point.key} value={point.key}>
+          <CustomSelect.Option value={null}>
             <>
               <span>
                 <PlayIcon className="h-4 w-4 -rotate-90" />
               </span>
-              {point.value}
+              None
             </>
           </CustomSelect.Option>
-        ))}
-    </CustomSelect>
+          {estimatePoints &&
+            estimatePoints.map((point) => (
+              <CustomSelect.Option key={point.key} value={point.key}>
+                <>
+                  <span>
+                    <PlayIcon className="h-4 w-4 -rotate-90" />
+                  </span>
+                  {point.value}
+                </>
+              </CustomSelect.Option>
+            ))}
+        </CustomSelect>
+      </div>
+    </div>
   );
 };

apps/app/components/issues/sidebar-select/priority.tsx

@@ -3,51 +3,62 @@ import React from "react";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
+import { ChartBarIcon } from "@heroicons/react/24/outline";
 import { getPriorityIcon } from "components/icons/priority-icon";
+// types
+import { UserAuth } from "types";
 // constants
 import { PRIORITIES } from "constants/project";
 
 type Props = {
   value: string | null;
   onChange: (val: string) => void;
+  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabled = false }) => (
-  <CustomSelect
-    customButton={
-      <button
-        type="button"
-        className={`flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
-          value === "urgent"
-            ? "border-red-500/20 bg-red-500/20 text-red-500"
-            : value === "high"
-            ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
-            : value === "medium"
-            ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
-            : value === "low"
-            ? "border-green-500/20 bg-green-500/20 text-green-500"
-            : "bg-custom-background-80 border-custom-border-200"
-        }`}
-      >
-        <span className="grid place-items-center -my-1">
-          {getPriorityIcon(value ?? "None", "!text-sm")}
-        </span>
-        <span>{value ?? "None"}</span>
-      </button>
-    }
-    value={value}
-    onChange={onChange}
-    optionsClassName="w-min"
-    disabled={disabled}
-  >
-    {PRIORITIES.map((option) => (
-      <CustomSelect.Option key={option} value={option} className="capitalize">
-        <>
-          {getPriorityIcon(option, "text-sm")}
-          {option ?? "None"}
-        </>
-      </CustomSelect.Option>
-    ))}
-  </CustomSelect>
-);
+export const SidebarPrioritySelect: React.FC<Props> = ({
+  value,
+  onChange,
+  userAuth,
+  disabled = false,
+}) => {
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
+
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+        <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
+        <p>Priority</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <CustomSelect
+          label={
+            <div className="flex items-center gap-2 text-left capitalize">
+              <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                {getPriorityIcon(value ?? "None", "text-sm")}
+              </span>
+              <span className={`${value ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                {value ?? "None"}
+              </span>
+            </div>
+          }
+          value={value}
+          onChange={onChange}
+          width="w-full"
+          position="right"
+          disabled={isNotAllowed}
+        >
+          {PRIORITIES.map((option) => (
+            <CustomSelect.Option key={option} value={option} className="capitalize">
+              <>
+                {getPriorityIcon(option, "text-sm")}
+                {option ?? "None"}
+              </>
+            </CustomSelect.Option>
+          ))}
+        </CustomSelect>
+      </div>
+    </div>
+  );
+};

apps/app/components/issues/sidebar-select/state.tsx

@@ -9,20 +9,29 @@ import stateService from "services/state.service";
 // ui
 import { Spinner, CustomSelect } from "components/ui";
 // icons
+import { Squares2X2Icon } from "@heroicons/react/24/outline";
 import { getStateGroupIcon } from "components/icons";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
+// types
+import { UserAuth } from "types";
 // constants
 import { STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   value: string;
   onChange: (val: string) => void;
+  userAuth: UserAuth;
   disabled?: boolean;
 };
 
-export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
+export const SidebarStateSelect: React.FC<Props> = ({
+  value,
+  onChange,
+  userAuth,
+  disabled = false,
+}) => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxIssueId } = router.query;
 
@@ -36,52 +45,60 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled
 
   const selectedState = states?.find((s) => s.id === value);
 
+  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
+
   return (
-    <CustomSelect
-      customButton={
-        <button type="button" className="bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
-          {selectedState ? (
-            <div className="flex items-center gap-1.5 text-left text-custom-text-100">
-              {getStateGroupIcon(
-                selectedState?.group ?? "backlog",
-                "14",
-                "14",
-                selectedState?.color ?? ""
-              )}
-              {addSpaceIfCamelCase(selectedState?.name ?? "")}
-            </div>
-          ) : inboxIssueId ? (
-            <div className="flex items-center gap-1.5 text-left text-custom-text-100">
-              {getStateGroupIcon("backlog", "14", "14", "#ff7700")}
-              Triage
-            </div>
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+        <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+        <p>State</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <CustomSelect
+          label={
+            selectedState ? (
+              <div className="flex items-center gap-2 text-left text-custom-text-100">
+                {getStateGroupIcon(
+                  selectedState?.group ?? "backlog",
+                  "16",
+                  "16",
+                  selectedState?.color ?? ""
+                )}
+                {addSpaceIfCamelCase(selectedState?.name ?? "")}
+              </div>
+            ) : inboxIssueId ? (
+              <div className="flex items-center gap-2 text-left text-custom-text-100">
+                {getStateGroupIcon("backlog", "16", "16", "#ff7700")}
+                Triage
+              </div>
+            ) : (
+              "None"
+            )
+          }
+          value={value}
+          onChange={onChange}
+          width="w-full"
+          position="right"
+          disabled={isNotAllowed}
+        >
+          {states ? (
+            states.length > 0 ? (
+              states.map((state) => (
+                <CustomSelect.Option key={state.id} value={state.id}>
+                  <>
+                    {getStateGroupIcon(state.group, "16", "16", state.color)}
+                    {state.name}
+                  </>
+                </CustomSelect.Option>
+              ))
+            ) : (
+              <div className="text-center">No states found</div>
+            )
           ) : (
-            "None"
+            <Spinner />
           )}
-        </button>
-      }
-      value={value}
-      onChange={onChange}
-      optionsClassName="w-min"
-      position="left"
-      disabled={disabled}
-    >
-      {states ? (
-        states.length > 0 ? (
-          states.map((state) => (
-            <CustomSelect.Option key={state.id} value={state.id}>
-              <>
-                {getStateGroupIcon(state.group, "16", "16", state.color)}
-                {state.name}
-              </>
-            </CustomSelect.Option>
-          ))
-        ) : (
-          <div className="text-center">No states found</div>
-        )
-      ) : (
-        <Spinner />
-      )}
-    </CustomSelect>
+        </CustomSelect>
+      </div>
+    </div>
   );
 };

apps/app/components/issues/sidebar.tsx

@@ -33,16 +33,7 @@ import {
 // ui
 import { CustomDatePicker, Icon } from "components/ui";
 // icons
-import {
-  LinkIcon,
-  CalendarDaysIcon,
-  TrashIcon,
-  PlusIcon,
-  Squares2X2Icon,
-  ChartBarIcon,
-  UserGroupIcon,
-  PlayIcon,
-} from "@heroicons/react/24/outline";
+import { LinkIcon, CalendarDaysIcon, TrashIcon, PlusIcon } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -341,90 +332,60 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             {showFirstSection && (
               <div className="py-1">
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
-                      <p>State</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="state"
-                        render={({ field: { value } }) => (
-                          <SidebarStateSelect
-                            value={value}
-                            onChange={(val: string) => submitChanges({ state: val })}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                          />
-                        )}
+                  <Controller
+                    control={control}
+                    name="state"
+                    render={({ field: { value } }) => (
+                      <SidebarStateSelect
+                        value={value}
+                        onChange={(val: string) => submitChanges({ state: val })}
+                        userAuth={memberRole}
+                        disabled={uneditable}
                       />
-                    </div>
-                  </div>
+                    )}
+                  />
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>Assignees</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="assignees_list"
-                        render={({ field: { value } }) => (
-                          <SidebarAssigneeSelect
-                            value={value}
-                            onChange={(val: string[]) => submitChanges({ assignees_list: val })}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                          />
-                        )}
+                  <Controller
+                    control={control}
+                    name="assignees_list"
+                    render={({ field: { value } }) => (
+                      <SidebarAssigneeSelect
+                        value={value}
+                        onChange={(val: string[]) => submitChanges({ assignees_list: val })}
+                        userAuth={memberRole}
+                        disabled={uneditable}
                       />
-                    </div>
-                  </div>
+                    )}
+                  />
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
-                      <p>Priority</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="priority"
-                        render={({ field: { value } }) => (
-                          <SidebarPrioritySelect
-                            value={value}
-                            onChange={(val: string) => submitChanges({ priority: val })}
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                          />
-                        )}
+                  <Controller
+                    control={control}
+                    name="priority"
+                    render={({ field: { value } }) => (
+                      <SidebarPrioritySelect
+                        value={value}
+                        onChange={(val: string) => submitChanges({ priority: val })}
+                        userAuth={memberRole}
+                        disabled={uneditable}
                       />
-                    </div>
-                  </div>
+                    )}
+                  />
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
-                  <div className="flex flex-wrap items-center py-2">
-                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
-                      <p>Estimate</p>
-                    </div>
-                    <div className="sm:basis-1/2">
-                      <Controller
-                        control={control}
-                        name="estimate_point"
-                        render={({ field: { value } }) => (
-                          <SidebarEstimateSelect
-                            value={value}
-                            onChange={(val: number | null) =>
-                              submitChanges({ estimate_point: val })
-                            }
-                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                          />
-                        )}
+                  <Controller
+                    control={control}
+                    name="estimate_point"
+                    render={({ field: { value } }) => (
+                      <SidebarEstimateSelect
+                        value={value}
+                        onChange={(val: number | null) => submitChanges({ estimate_point: val })}
+                        userAuth={memberRole}
+                        disabled={uneditable}
                       />
-                    </div>
-                  </div>
+                    )}
+                  />
                 )}
               </div>
             )}

apps/app/components/modules/gantt-chart.tsx

@@ -8,8 +8,11 @@ import useUser from "hooks/use-user";
 import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 // components
-import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IssueGanttBlock,
+  renderIssueBlocksStructure,
+} from "components/gantt-chart";
 // types
 import { IIssue } from "types";
 
@@ -29,20 +32,29 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
     moduleId as string
   );
 
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{ backgroundColor: data?.state_detail?.color || "rgb(var(--color-primary-100))" }}
+      />
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
+    </div>
+  );
+
   return (
-    <div className="w-full h-full">
+    <div className="w-full h-full p-3">
       <GanttChartRoot
-        border={false}
-        title="Issues"
-        loaderTitle="Issues"
+        title="Modules"
+        loaderTitle="Modules"
         blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        SidebarBlockRender={IssueGanttSidebarBlock}
-        BlockRender={IssueGanttBlock}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
         enableReorder={orderBy === "sort_order"}
-        bottomSpacing
       />
     </div>
   );

apps/app/components/modules/gantt-chart/blocks.tsx

@@ -1,55 +0,0 @@
-import { useRouter } from "next/router";
-
-// ui
-import { Tooltip } from "components/ui";
-// helpers
-import { renderShortDate } from "helpers/date-time.helper";
-// types
-import { IModule } from "types";
-// constants
-import { MODULE_STATUS } from "constants/module";
-
-export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <div
-      className="relative flex items-center w-full h-full rounded"
-      style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data?.status)?.color }}
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data?.id}`)}
-    >
-      <div className="absolute top-0 left-0 h-full w-full bg-custom-background-100/50" />
-      <Tooltip
-        tooltipContent={
-          <div className="space-y-1">
-            <h5>{data?.name}</h5>
-            <div>
-              {renderShortDate(data?.start_date ?? "")} to{" "}
-              {renderShortDate(data?.target_date ?? "")}
-            </div>
-          </div>
-        }
-        position="top-left"
-      >
-        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-          {data?.name}
-        </div>
-      </Tooltip>
-    </div>
-  );
-};
-
-export const ModuleGanttSidebarBlock = ({ data }: { data: IModule }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  return (
-    <div
-      className="relative w-full flex items-center gap-2 h-full"
-      onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/modules/${data.id}`)}
-    >
-      <h6 className="text-sm font-medium flex-grow truncate">{data.name}</h6>
-    </div>
-  );
-};

apps/app/components/modules/gantt-chart/index.ts

@@ -1,3 +0,0 @@
-export * from "./blocks";
-export * from "./module-issues-layout";
-export * from "./modules-list-layout";

apps/app/components/modules/index.ts

@@ -4,5 +4,6 @@ export * from "./delete-module-modal";
 export * from "./form";
 export * from "./gantt-chart";
 export * from "./modal";
+export * from "./modules-list-gantt-chart";
 export * from "./sidebar";
 export * from "./single-module-card";

apps/app/components/modules/modules-list-gantt-chart.tsx

@@ -1,7 +1,6 @@
 import { FC } from "react";
 
 import { useRouter } from "next/router";
-import Link from "next/link";
 
 import { KeyedMutator } from "swr";
 
@@ -10,10 +9,11 @@ import modulesService from "services/modules.service";
 // hooks
 import useUser from "hooks/use-user";
 // components
-import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
-import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
+import { GanttChartRoot, IBlockUpdateData, ModuleGanttBlock } from "components/gantt-chart";
 // types
 import { IModule } from "types";
+// constants
+import { MODULE_STATUS } from "constants/module";
 
 type Props = {
   modules: IModule[];
@@ -26,6 +26,19 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
 
   const { user } = useUser();
 
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{
+          backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color,
+        }}
+      />
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
+    </div>
+  );
+
   const handleModuleUpdate = (module: IModule, payload: IBlockUpdateData) => {
     if (!workspaceSlug || !user) return;
 
@@ -85,8 +98,8 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
         loaderTitle="Modules"
         blocks={modules ? blockFormat(modules) : null}
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
-        SidebarBlockRender={ModuleGanttSidebarBlock}
-        BlockRender={ModuleGanttBlock}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <ModuleGanttBlock module={data as IModule} />}
       />
     </div>
   );

apps/app/components/notifications/notification-header.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { CustomMenu, Icon, Tooltip } from "components/ui";
+import { Icon, Tooltip } from "components/ui";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
 
@@ -21,7 +21,6 @@ type NotificationHeaderProps = {
   setArchived: React.Dispatch<React.SetStateAction<boolean>>;
   setReadNotification: React.Dispatch<React.SetStateAction<boolean>>;
   setSelectedTab: React.Dispatch<React.SetStateAction<NotificationType>>;
-  markAllNotificationsAsRead: () => Promise<void>;
 };
 
 export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) => {
@@ -38,7 +37,6 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
     setArchived,
     setReadNotification,
     setSelectedTab,
-    markAllNotificationsAsRead,
   } = props;
 
   const notificationTabs: Array<{
@@ -90,51 +88,33 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               <Icon iconName="filter_list" />
             </button>
           </Tooltip>
-          <CustomMenu
-            customButton={
-              <div className="grid place-items-center ">
-                <Icon iconName="more_vert" />
-              </div>
-            }
-          >
-            <CustomMenu.MenuItem renderAs="button" onClick={markAllNotificationsAsRead}>
-              <div className="flex items-center gap-2">
-                <Icon iconName="done_all" />
-                Mark all as read
-              </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              renderAs="button"
+          <Tooltip tooltipContent="Snoozed notifications">
+            <button
+              type="button"
               onClick={() => {
                 setArchived(false);
                 setReadNotification(false);
                 setSnoozed((prev) => !prev);
               }}
             >
-              <div className="flex items-center gap-2">
-                <Icon iconName="schedule" />
-                Show snoozed
-              </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              renderAs="button"
+              <Icon iconName="schedule" />
+            </button>
+          </Tooltip>
+          <Tooltip tooltipContent="Archived notifications">
+            <button
+              type="button"
               onClick={() => {
                 setSnoozed(false);
                 setReadNotification(false);
                 setArchived((prev) => !prev);
               }}
             >
-              <div className="flex items-center gap-2">
-                <Icon iconName="archive" />
-                Show archived
-              </div>
-            </CustomMenu.MenuItem>
-          </CustomMenu>
-          <Tooltip tooltipContent="Close">
-            <button type="button" onClick={() => closePopover()}>
-              <Icon iconName="close" />
+              <Icon iconName="archive" />
             </button>
           </Tooltip>
+          <button type="button" onClick={() => closePopover()}>
+            <Icon iconName="close" />
+          </button>
         </div>
       </div>
       <div className="border-b border-custom-border-300 w-full px-5 mt-5">

apps/app/components/notifications/notification-popover.tsx

@@ -51,7 +51,6 @@ export const NotificationPopover = () => {
     hasMore,
     isRefreshing,
     setFetchNotifications,
-    markAllNotificationsAsRead,
   } = useUserNotification();
 
   // theme context
@@ -113,7 +112,7 @@ export const NotificationPopover = () => {
                 leaveFrom="opacity-100 translate-y-0"
                 leaveTo="opacity-0 translate-y-1"
               >
-                <Popover.Panel className="absolute bg-custom-background-100 flex flex-col left-0 md:left-full ml-8 z-10 -top-36 md:w-[36rem] w-[20rem] h-[50vh] border border-custom-border-300 shadow-lg rounded-xl">
+                <Popover.Panel className="absolute bg-custom-background-100 flex flex-col left-0 md:left-full ml-8 z-10 -top-44 md:w-[36rem] w-[20rem] h-[75vh] border border-custom-border-300 shadow-lg rounded-xl">
                   <NotificationHeader
                     notificationCount={notificationCount}
                     notificationMutate={notificationMutate}
@@ -127,7 +126,6 @@ export const NotificationPopover = () => {
                     setArchived={setArchived}
                     setReadNotification={setReadNotification}
                     setSelectedTab={setSelectedTab}
-                    markAllNotificationsAsRead={markAllNotificationsAsRead}
                   />
 
                   {notifications ? (

apps/app/components/pages/create-update-block-inline.tsx

@@ -1,7 +1,12 @@
 import React, { useCallback, useEffect, useState } from "react";
+
 import { useRouter } from "next/router";
+
 import { mutate } from "swr";
+
 import { SparklesIcon } from "@heroicons/react/24/outline";
+
+// react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
 import pagesService from "services/pages.service";
@@ -11,12 +16,13 @@ import aiService from "services/ai.service";
 import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
-import { TipTapEditor } from "components/tiptap";
+// ui
 import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // types
 import { ICurrentUserResponse, IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 
 type Props = {
   handleClose: () => void;
@@ -33,6 +39,12 @@ const defaultValues = {
   description_html: null,
 };
 
+const TiptapEditor = React.forwardRef<ITiptapRichTextEditor, ITiptapRichTextEditor>(
+  (props, ref) => <Tiptap {...props} forwardedRef={ref} />
+);
+
+TiptapEditor.displayName = "TiptapEditor";
+
 export const CreateUpdateBlockInline: React.FC<Props> = ({
   handleClose,
   data,
@@ -219,9 +231,9 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
       description:
         !data.description || data.description === ""
           ? {
-              type: "doc",
-              content: [{ type: "paragraph" }],
-            }
+            type: "doc",
+            content: [{ type: "paragraph" }],
+          }
           : data.description,
       description_html: data.description_html ?? "<p></p>",
     });
@@ -279,7 +291,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
               render={({ field: { value, onChange } }) => {
                 if (!data)
                   return (
-                    <TipTapEditor
+                    <TiptapEditor
                       workspaceSlug={workspaceSlug as string}
                       ref={editorRef}
                       value={"<p></p>"}
@@ -299,7 +311,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   );
 
                 return (
-                  <TipTapEditor
+                  <TiptapEditor
                     workspaceSlug={workspaceSlug as string}
                     ref={editorRef}
                     value={
@@ -322,9 +334,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
             <div className="m-2 mt-6 flex">
               <button
                 type="button"
-                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80 ${
-                  iAmFeelingLucky ? "cursor-wait bg-custom-background-90" : ""
-                }`}
+                className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80 ${iAmFeelingLucky ? "cursor-wait bg-custom-background-90" : ""
+                  }`}
                 onClick={handleAutoGenerateDescription}
                 disabled={iAmFeelingLucky}
               >
@@ -356,8 +367,8 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                 ? "Updating..."
                 : "Update block"
               : isSubmitting
-              ? "Adding..."
-              : "Add block"}
+                ? "Adding..."
+                : "Add block"}
           </PrimaryButton>
         </div>
       </form>

apps/app/components/pages/single-page-block.tsx

@@ -19,7 +19,6 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
-import { TipTapEditor } from "components/tiptap";
 // ui
 import { CustomMenu, TextArea } from "components/ui";
 // icons
@@ -39,6 +38,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { ICurrentUserResponse, IIssue, IPageBlock, IProject } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 
 type Props = {
   block: IPageBlock;
@@ -48,6 +48,13 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
+const TiptapEditor = React.forwardRef<
+  ITiptapRichTextEditor,
+  ITiptapRichTextEditor
+>((props, ref) => <Tiptap {...props} forwardedRef={ref} />);
+
+TiptapEditor.displayName = "TiptapEditor";
+
 export const SinglePageBlock: React.FC<Props> = ({
   block,
   projectDetails,
@@ -321,9 +328,8 @@ export const SinglePageBlock: React.FC<Props> = ({
             </div>
           ) : (
             <div
-              className={`group relative w-full rounded bg-custom-background-80 text-custom-text-200 ${
-                snapshot.isDragging ? "bg-custom-background-100 p-4 shadow" : ""
-              }`}
+              className={`group relative w-full rounded bg-custom-background-80 text-custom-text-200 ${snapshot.isDragging ? "bg-custom-background-100 p-4 shadow" : ""
+                }`}
               ref={provided.innerRef}
               {...provided.draggableProps}
             >
@@ -337,9 +343,8 @@ export const SinglePageBlock: React.FC<Props> = ({
               </button>
               <div
                 ref={actionSectionRef}
-                className={`absolute top-4 right-2 hidden items-center gap-2 bg-custom-background-80 pl-4 group-hover:!flex ${
-                  isMenuActive ? "!flex" : ""
-                }`}
+                className={`absolute top-4 right-2 hidden items-center gap-2 bg-custom-background-80 pl-4 group-hover:!flex ${isMenuActive ? "!flex" : ""
+                  }`}
               >
                 {block.issue && block.sync && (
                   <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded py-1 px-1.5 text-xs">
@@ -353,9 +358,8 @@ export const SinglePageBlock: React.FC<Props> = ({
                 )}
                 <button
                   type="button"
-                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
-                    iAmFeelingLucky ? "cursor-wait" : ""
-                  }`}
+                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${iAmFeelingLucky ? "cursor-wait" : ""
+                    }`}
                   onClick={handleAutoGenerateDescription}
                   disabled={iAmFeelingLucky}
                 >
@@ -451,19 +455,18 @@ export const SinglePageBlock: React.FC<Props> = ({
 
                   {showBlockDetails
                     ? block.description_html.length > 7 && (
-                        <TipTapEditor
-                          workspaceSlug={workspaceSlug as string}
-                          value={block.description_html}
-                          customClassName="text-sm min-h-[150px]"
-                          noBorder
-                          borderOnFocus={false}
-                        />
-                      )
-                    : block.description_stripped.length > 0 && (
-                        <p className="mt-3 text-sm font-normal text-custom-text-200 h-5 truncate">
-                          {block.description_stripped}
-                        </p>
-                      )}
+                      <TiptapEditor
+                        workspaceSlug={workspaceSlug as string}
+                        value={block.description_html}
+                        customClassName="text-sm min-h-[150px]"
+                        noBorder
+                        borderOnFocus={false}
+                      />
+                    ) : block.description_stripped.length > 0 && (
+                      <p className="mt-3 text-sm font-normal text-custom-text-200 h-5 truncate">
+                        {block.description_stripped}
+                      </p>
+                    )}
                 </div>
               </div>
               <GptAssistantModal

apps/app/components/profile/profile-issues-view-options.tsx

@@ -115,11 +115,14 @@ export const ProfileIssuesViewOptions: React.FC = () => {
         onSelect={(option) => {
           const key = option.key as keyof typeof filters;
 
-          if (key === "start_date" || key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
+          if (key === "target_date") {
+            const valueExists = checkIfArraysHaveSameElements(
+              filters?.target_date ?? [],
+              option.value
+            );
 
             setFilters({
-              [key]: valueExists ? null : option.value,
+              target_date: valueExists ? null : option.value,
             });
           } else {
             const valueExists = filters[key]?.includes(option.value);
@@ -183,11 +186,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                             >
                               {GROUP_BY_OPTIONS.map((option) => {
                                 if (issueView === "kanban" && option.key === null) return null;
-                                if (
-                                  option.key === "state" ||
-                                  option.key === "created_by" ||
-                                  option.key === "assignees"
-                                )
+                                if (option.key === "state" || option.key === "created_by")
                                   return null;
 
                                 return (

apps/app/components/profile/profile-issues-view.tsx

@@ -263,7 +263,6 @@ export const ProfileIssuesView = () => {
                   labels: null,
                   priority: null,
                   state_group: null,
-                  start_date: null,
                   target_date: null,
                   type: null,
                 })

apps/app/components/profile/sidebar.tsx

@@ -162,21 +162,19 @@ export const ProfileSidebar = () => {
                             </div>
                           </div>
                           <div className="flex-shrink-0 flex items-center gap-2">
-                            {project.assigned_issues > 0 && (
-                              <Tooltip tooltipContent="Completion percentage" position="left">
-                                <div
-                                  className={`px-1 py-0.5 text-xs font-medium rounded ${
-                                    completedIssuePercentage <= 35
-                                      ? "bg-red-500/10 text-red-500"
-                                      : completedIssuePercentage <= 70
-                                      ? "bg-yellow-500/10 text-yellow-500"
-                                      : "bg-green-500/10 text-green-500"
-                                  }`}
-                                >
-                                  {completedIssuePercentage}%
-                                </div>
-                              </Tooltip>
-                            )}
+                            <Tooltip tooltipContent="Completion percentage" position="left">
+                              <div
+                                className={`px-1 py-0.5 text-xs font-medium rounded ${
+                                  completedIssuePercentage <= 35
+                                    ? "bg-red-500/10 text-red-500"
+                                    : completedIssuePercentage <= 70
+                                    ? "bg-yellow-500/10 text-yellow-500"
+                                    : "bg-green-500/10 text-green-500"
+                                }`}
+                              >
+                                {completedIssuePercentage}%
+                              </div>
+                            </Tooltip>
                             <Icon iconName="arrow_drop_down" className="!text-lg" />
                           </div>
                         </Disclosure.Button>

apps/app/components/project/delete-project-modal.tsx

@@ -42,7 +42,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
   user,
 }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -81,8 +81,6 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
         );
 
         if (onSuccess) onSuccess();
-
-        if (projectId && projectId === data.id) router.push(`/${workspaceSlug}/projects`);
       })
       .catch(() =>
         setToastAlert({

apps/app/components/project/send-project-invitation-modal.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 
 import { useForm, Controller, useFieldArray } from "react-hook-form";
 
@@ -28,7 +28,7 @@ import useToast from "hooks/use-toast";
 // types
 import { ICurrentUserResponse } from "types";
 // fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import { PROJECT_MEMBERS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
 
@@ -37,7 +37,6 @@ type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   members: any[];
   user: ICurrentUserResponse | undefined;
-  onSuccess: () => void;
 };
 
 type member = {
@@ -58,9 +57,7 @@ const defaultValues: FormValues = {
   ],
 };
 
-const SendProjectInvitationModal: React.FC<Props> = (props) => {
-  const { isOpen, setIsOpen, members, user, onSuccess } = props;
-
+const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, members, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -101,13 +98,13 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
           type: "success",
           message: "Member added successfully",
         });
-        onSuccess();
       })
       .catch((error) => {
         console.log(error);
       })
       .finally(() => {
         reset(defaultValues);
+        mutate(PROJECT_MEMBERS(projectId.toString()));
       });
   };
 

apps/app/components/project/sidebar-list.tsx

@@ -31,7 +31,6 @@ import { useMobxStore } from "lib/mobx/store-provider";
 export const ProjectSidebarList: FC = () => {
   const store: any = useMobxStore();
 
-  const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false);
   const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
   const [deleteProjectModal, setDeleteProjectModal] = useState(false);
   const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
@@ -152,7 +151,7 @@ export const ProjectSidebarList: FC = () => {
       <CreateProjectModal
         isOpen={isProjectModalOpen}
         setIsOpen={setIsProjectModalOpen}
-        setToFavorite={isFavoriteProjectCreate}
+        setToFavorite
         user={user}
       />
       <DeleteProjectModal
@@ -190,10 +189,7 @@ export const ProjectSidebarList: FC = () => {
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
-                              onClick={() => {
-                                setIsFavoriteProjectCreate(true);
-                                setIsProjectModalOpen(true);
-                              }}
+                              onClick={() => setIsProjectModalOpen(true)}
                             >
                               <Icon iconName="add" />
                             </button>
@@ -256,10 +252,7 @@ export const ProjectSidebarList: FC = () => {
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
-                              onClick={() => {
-                                setIsFavoriteProjectCreate(false);
-                                setIsProjectModalOpen(true);
-                              }}
+                              onClick={() => setIsProjectModalOpen(true)}
                             >
                               <Icon iconName="add" />
                             </button>

apps/app/components/tiptap/index.tsx

@@ -3,10 +3,10 @@ import { useDebouncedCallback } from "use-debounce";
 import { EditorBubbleMenu } from "./bubble-menu";
 import { TiptapExtensions } from "./extensions";
 import { TiptapEditorProps } from "./props";
-import { useImperativeHandle, useRef, forwardRef } from "react";
+import { useImperativeHandle, useRef } from "react";
 import { ImageResizer } from "./extensions/image-resize";
 
-export interface ITipTapRichTextEditor {
+export interface ITiptapRichTextEditor {
   value: string;
   noBorder?: boolean;
   borderOnFocus?: boolean;
@@ -21,7 +21,7 @@ export interface ITipTapRichTextEditor {
   debouncedUpdatesEnabled?: boolean;
 }
 
-const Tiptap = (props: ITipTapRichTextEditor) => {
+const Tiptap = (props: ITiptapRichTextEditor) => {
   const {
     onChange,
     debouncedUpdatesEnabled,
@@ -73,10 +73,9 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
     }, 500);
   }, 1000);
 
-  const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
-      ${noBorder ? "" : "border border-custom-border-200"} ${
-        borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
-      } ${customClassName}`;
+  const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md
+      ${noBorder ? "" : "border border-custom-border-200"} ${borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
+    } ${customClassName}`;
 
   if (!editor) return null;
   editorRef.current = editor;
@@ -98,10 +97,4 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
   );
 };
 
-const TipTapEditor = forwardRef<ITipTapRichTextEditor, ITipTapRichTextEditor>((props, ref) => (
-  <Tiptap {...props} forwardedRef={ref} />
-));
-
-TipTapEditor.displayName = "TipTapEditor";
-
-export { TipTapEditor };
+export default Tiptap;

apps/app/components/views/form.tsx

@@ -94,7 +94,6 @@ export const ViewForm: React.FC<Props> = ({
       labels: null,
       priority: null,
       state: null,
-      start_date: null,
       target_date: null,
       type: null,
     });
@@ -156,15 +155,14 @@ export const ViewForm: React.FC<Props> = ({
               onSelect={(option) => {
                 const key = option.key as keyof typeof filters;
 
-                if (key === "start_date" || key === "target_date") {
+                if (key === "target_date") {
                   const valueExists = checkIfArraysHaveSameElements(
-                    filters?.[key] ?? [],
+                    filters?.target_date ?? [],
                     option.value
                   );
 
                   setValue("query", {
-                    ...filters,
-                    [key]: valueExists ? null : option.value,
+                    target_date: valueExists ? null : option.value,
                   } as IQuery);
                 } else {
                   if (!filters?.[key]?.includes(option.value))

apps/app/components/views/gantt-chart.tsx

@@ -7,8 +7,11 @@ import useGanttChartViewIssues from "hooks/gantt-chart/view-issues-view";
 import useUser from "hooks/use-user";
 import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 // components
-import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
+import {
+  GanttChartRoot,
+  IssueGanttBlock,
+  renderIssueBlocksStructure,
+} from "components/gantt-chart";
 // types
 import { IIssue } from "types";
 
@@ -26,18 +29,28 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
     viewId as string
   );
 
+  // rendering issues on gantt sidebar
+  const GanttSidebarBlockView = ({ data }: any) => (
+    <div className="relative flex w-full h-full items-center p-1 overflow-hidden gap-1">
+      <div
+        className="rounded-sm flex-shrink-0 w-[10px] h-[10px] flex justify-center items-center"
+        style={{ backgroundColor: data?.state_detail?.color || "rgb(var(--color-primary-100))" }}
+      />
+      <div className="text-custom-text-100 text-sm">{data?.name}</div>
+    </div>
+  );
+
   return (
-    <div className="w-full h-full">
+    <div className="w-full h-full p-3">
       <GanttChartRoot
-        border={false}
-        title="Issues"
-        loaderTitle="Issues"
+        title="Issue Views"
+        loaderTitle="Issue Views"
         blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        SidebarBlockRender={IssueGanttSidebarBlock}
-        BlockRender={IssueGanttBlock}
+        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
+        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
       />
     </div>
   );

apps/app/components/views/select-filters.tsx

@@ -9,7 +9,7 @@ import stateService from "services/state.service";
 import projectService from "services/project.service";
 import issuesService from "services/issues.service";
 // components
-import { DateFilterModal } from "components/core";
+import { DueDateFilterModal } from "components/core";
 // ui
 import { Avatar, MultiLevelDropdown } from "components/ui";
 // icons
@@ -23,7 +23,7 @@ import { IIssueFilterOptions, IQuery } from "types";
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
 // constants
 import { PRIORITIES } from "constants/project";
-import { DATE_FILTER_OPTIONS } from "constants/filters";
+import { DUE_DATES } from "constants/due-dates";
 
 type Props = {
   filters: Partial<IIssueFilterOptions> | IQuery;
@@ -38,14 +38,7 @@ export const SelectFilters: React.FC<Props> = ({
   direction = "right",
   height = "md",
 }) => {
-  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
-  const [dateFilterType, setDateFilterType] = useState<{
-    title: string;
-    type: "start_date" | "target_date";
-  }>({
-    title: "",
-    type: "start_date",
-  });
+  const [isDueDateFilterModalOpen, setIsDueDateFilterModalOpen] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -74,12 +67,10 @@ export const SelectFilters: React.FC<Props> = ({
 
   return (
     <>
-      {isDateFilterModalOpen && (
-        <DateFilterModal
-          title={dateFilterType.title}
-          field={dateFilterType.type}
-          isOpen={isDateFilterModalOpen}
-          handleClose={() => setIsDateFilterModalOpen(false)}
+      {isDueDateFilterModalOpen && (
+        <DueDateFilterModal
+          isOpen={isDueDateFilterModalOpen}
+          handleClose={() => setIsDueDateFilterModalOpen(false)}
         />
       )}
       <MultiLevelDropdown
@@ -191,49 +182,13 @@ export const SelectFilters: React.FC<Props> = ({
               selected: filters?.labels?.includes(label.id),
             })),
           },
-          {
-            id: "start_date",
-            label: "Start date",
-            value: DATE_FILTER_OPTIONS,
-            hasChildren: true,
-            children: [
-              ...DATE_FILTER_OPTIONS.map((option) => ({
-                id: option.name,
-                label: option.name,
-                value: {
-                  key: "start_date",
-                  value: option.value,
-                },
-                selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
-              })),
-              {
-                id: "custom",
-                label: "Custom",
-                value: "custom",
-                element: (
-                  <button
-                    onClick={() => {
-                      setIsDateFilterModalOpen(true);
-                      setDateFilterType({
-                        title: "Start date",
-                        type: "start_date",
-                      });
-                    }}
-                    className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-                  >
-                    Custom
-                  </button>
-                ),
-              },
-            ],
-          },
           {
             id: "target_date",
             label: "Due date",
-            value: DATE_FILTER_OPTIONS,
+            value: DUE_DATES,
             hasChildren: true,
             children: [
-              ...DATE_FILTER_OPTIONS.map((option) => ({
+              ...DUE_DATES.map((option) => ({
                 id: option.name,
                 label: option.name,
                 value: {
@@ -248,13 +203,7 @@ export const SelectFilters: React.FC<Props> = ({
                 value: "custom",
                 element: (
                   <button
-                    onClick={() => {
-                      setIsDateFilterModalOpen(true);
-                      setDateFilterType({
-                        title: "Due date",
-                        type: "target_date",
-                      });
-                    }}
+                    onClick={() => setIsDueDateFilterModalOpen(true)}
                     className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
                   >
                     Custom

apps/app/components/workspace/send-workspace-invitation-modal.tsx

@@ -25,7 +25,6 @@ type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   workspace_slug: string;
   user: ICurrentUserResponse | undefined;
-  onSuccess: () => void;
 };
 
 type EmailRole = {
@@ -46,8 +45,12 @@ const defaultValues: FormValues = {
   ],
 };
 
-const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
-  const { isOpen, setIsOpen, workspace_slug, user, onSuccess } = props;
+const SendWorkspaceInvitationModal: React.FC<Props> = ({
+  isOpen,
+  setIsOpen,
+  workspace_slug,
+  user,
+}) => {
   const {
     control,
     reset,
@@ -85,7 +88,6 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
           title: "Success!",
           message: "Invitations sent successfully.",
         });
-        onSuccess();
       })
       .catch((err) => {
         setToastAlert({

apps/app/constants/due-dates.ts

@@ -1,7 +1,7 @@
 // helper
 import { renderDateFormat } from "helpers/date-time.helper";
 
-export const DATE_FILTER_OPTIONS = [
+export const DUE_DATES = [
   {
     name: "Last week",
     value: [

apps/app/constants/fetch-keys.ts

@@ -8,7 +8,6 @@ const paramsToKey = (params: any) => {
     assignees,
     created_by,
     labels,
-    start_date,
     target_date,
     sub_issue,
     start_target_date,
@@ -20,7 +19,6 @@ const paramsToKey = (params: any) => {
   let createdByKey = created_by ? created_by.split(",") : [];
   let labelsKey = labels ? labels.split(",") : [];
   const startTargetDate = start_target_date ? `${start_target_date}`.toUpperCase() : "FALSE";
-  const startDateKey = start_date ?? "";
   const targetDateKey = target_date ?? "";
   const type = params.type ? params.type.toUpperCase() : "NULL";
   const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
@@ -33,7 +31,7 @@ const paramsToKey = (params: any) => {
   createdByKey = createdByKey.sort().join("_");
   labelsKey = labelsKey.sort().join("_");
 
-  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}_${sub_issue}_${startTargetDate}`;
+  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${targetDateKey}_${sub_issue}_${startTargetDate}`;
 };
 
 const inboxParamsToKey = (params: any) => {
@@ -50,16 +48,7 @@ const inboxParamsToKey = (params: any) => {
 };
 
 const myIssuesParamsToKey = (params: any) => {
-  const {
-    assignees,
-    created_by,
-    labels,
-    priority,
-    state_group,
-    subscriber,
-    start_date,
-    target_date,
-  } = params;
+  const { assignees, created_by, labels, priority, state_group, subscriber, target_date } = params;
 
   let assigneesKey = assignees ? assignees.split(",") : [];
   let createdByKey = created_by ? created_by.split(",") : [];
@@ -67,7 +56,6 @@ const myIssuesParamsToKey = (params: any) => {
   let subscriberKey = subscriber ? subscriber.split(",") : [];
   let priorityKey = priority ? priority.split(",") : [];
   let labelsKey = labels ? labels.split(",") : [];
-  const startDateKey = start_date ?? "";
   const targetDateKey = target_date ?? "";
   const type = params.type ? params.type.toUpperCase() : "NULL";
   const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
@@ -81,7 +69,7 @@ const myIssuesParamsToKey = (params: any) => {
   priorityKey = priorityKey.sort().join("_");
   labelsKey = labelsKey.sort().join("_");
 
-  return `${assigneesKey}_${createdByKey}_${stateGroupKey}_${subscriberKey}_${priorityKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}`;
+  return `${assigneesKey}_${createdByKey}_${stateGroupKey}_${subscriberKey}_${priorityKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${targetDateKey}`;
 };
 
 export const CURRENT_USER = "CURRENT_USER";

apps/app/constants/issue.ts

@@ -7,7 +7,6 @@ export const GROUP_BY_OPTIONS: Array<{
   { name: "Priority", key: "priority" },
   { name: "Project", key: "project" },
   { name: "Labels", key: "labels" },
-  { name: "Assignees", key: "assignees" },
   { name: "Created by", key: "created_by" },
   { name: "None", key: null },
 ];
@@ -19,7 +18,6 @@ export const ORDER_BY_OPTIONS: Array<{
   { name: "Manual", key: "sort_order" },
   { name: "Last created", key: "-created_at" },
   { name: "Last updated", key: "-updated_at" },
-  { name: "Start date", key: "start_date" },
   { name: "Priority", key: "priority" },
 ];
 

apps/app/contexts/issue-view.context.tsx

@@ -94,7 +94,6 @@ export const initialState: StateType = {
     state_group: null,
     subscriber: null,
     created_by: null,
-    start_date: null,
     target_date: null,
   },
 };

apps/app/contexts/profile-issues-context.tsx

@@ -72,7 +72,6 @@ export const initialState: StateType = {
     state_group: null,
     subscriber: null,
     created_by: null,
-    start_date: null,
     target_date: null,
   },
   properties: {