fix: issue vote migration file

* bugfix: Export download next link changd to anchot

* bugfix: user workspace service name update

---------

Co-authored-by: srinivaspendem <you@example.comsrinivaspendem2612@gmail.com>

.github/workflows/Build_Test_Pull_Request.yml

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,111 @@
+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

@@ -1,77 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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 = WorkSpaceSerializer(read_only=True)
+    workspace = WorkspaceLiteSerializer(read_only=True)
     project = ProjectLiteSerializer(read_only=True)
     member = UserLiteSerializer(read_only=True)
 

apiserver/plane/api/urls.py

@@ -89,7 +89,6 @@ from plane.api.views import (
     IssueCommentPublicViewSet,
     IssueReactionViewSet,
     CommentReactionViewSet,
-    ExportIssuesEndpoint,
     ## End Issues
     # States
     StateViewSet,
@@ -174,7 +173,12 @@ from plane.api.views import (
     CommentReactionPublicViewSet,
     InboxIssuePublicViewSet,
     IssueVotePublicViewSet,
+    WorkspaceProjectDeployBoardEndpoint,
     ## End Public Boards
+    ## Exporter
+    ExportIssuesEndpoint,
+    ## End Exporter
+
 )
 
 
@@ -1614,5 +1618,10 @@ 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,6 +16,7 @@ from .project import (
     ProjectDeployBoardViewSet,
     ProjectDeployBoardPublicSettingsEndpoint,
     ProjectMemberEndpoint,
+    WorkspaceProjectDeployBoardEndpoint,
 )
 from .user import (
     UserEndpoint,

apiserver/plane/api/views/issue.py

@@ -1799,8 +1799,9 @@ 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:
@@ -1827,28 +1828,3 @@ 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,7 +287,10 @@ 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,
@@ -1286,3 +1289,38 @@ 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

@@ -0,0 +1,26 @@
+# 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,10 +476,12 @@ class IssueVote(ProjectBaseModel):
         choices=(
             (-1, "DOWNVOTE"),
             (1, "UPVOTE"),
-        )
+        ),
+        default=1,
     )
+
     class Meta:
-        unique_together = ["issue", "actor"]
+        unique_together = ["issue", "actor", "vote"]
         verbose_name = "Issue Vote"
         verbose_name_plural = "Issue Votes"
         db_table = "issue_votes"

apiserver/runtime.txt

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

apps/app/components/core/activity.tsx

@@ -53,7 +53,11 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => {
 
 const activityDetails: {
   [key: string]: {
-    message: (activity: IIssueActivity, showIssue: boolean) => React.ReactNode;
+    message: (
+      activity: IIssueActivity,
+      showIssue: boolean,
+      workspaceSlug: string
+    ) => React.ReactNode;
     icon: React.ReactNode;
   };
 } = {
@@ -173,26 +177,50 @@ const activityDetails: {
     icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
   },
   cycles: {
-    message: (activity) => {
+    message: (activity, showIssue, workspaceSlug) => {
       if (activity.verb === "created")
         return (
           <>
             added this issue to the cycle{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <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>
           </>
         );
       else if (activity.verb === "updated")
         return (
           <>
             set the cycle to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <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>
           </>
         );
       else
         return (
           <>
             removed the issue from the cycle{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            <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>
           </>
         );
     },
@@ -351,26 +379,50 @@ const activityDetails: {
     icon: <Icon iconName="link" className="!text-sm" aria-hidden="true" />,
   },
   modules: {
-    message: (activity) => {
+    message: (activity, showIssue, workspaceSlug) => {
       if (activity.verb === "created")
         return (
           <>
             added this issue to the module{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <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>
           </>
         );
       else if (activity.verb === "updated")
         return (
           <>
             set the module to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+            <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>
           </>
         );
       else
         return (
           <>
             removed the issue from the module{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            <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>
           </>
         );
     },
@@ -538,8 +590,17 @@ export const ActivityMessage = ({
 }: {
   activity: IIssueActivity;
   showIssue?: boolean;
-}) => (
-  <>
-    {activityDetails[activity.field as keyof typeof activityDetails]?.message(activity, showIssue)}
-  </>
-);
+}) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <>
+      {activityDetails[activity.field as keyof typeof activityDetails]?.message(
+        activity,
+        showIssue,
+        workspaceSlug?.toString() ?? ""
+      )}
+    </>
+  );
+};

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

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

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

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

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

@@ -240,6 +240,34 @@ 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 "./due-date-filter-modal";
-export * from "./due-date-filter-select";
+export * from "./date-filter-modal";
+export * from "./date-filter-select";
 export * from "./filters-list";
 export * from "./issues-view-filter";

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

@@ -113,46 +113,41 @@ export const IssuesFilterView: React.FC = () => {
           ))}
         </div>
       )}
-      {issueView !== "gantt_chart" && (
-        <SelectFilters
-          filters={filters}
-          onSelect={(option) => {
-            const key = option.key as keyof typeof filters;
+      <SelectFilters
+        filters={filters}
+        onSelect={(option) => {
+          const key = option.key as keyof typeof filters;
 
-            if (key === "target_date") {
-              const valueExists = checkIfArraysHaveSameElements(
-                filters.target_date ?? [],
-                option.value
+          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)
               );
-
-              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"
-        />
-      )}
+            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,7 +1,5 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
-
 import { useRouter } from "next/router";
-
 // react-hook-form
 import { useForm } from "react-hook-form";
 // services
@@ -12,9 +10,10 @@ 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 Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
+
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
@@ -32,12 +31,6 @@ 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,
@@ -140,13 +133,14 @@ 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"
@@ -160,7 +154,7 @@ export const GptAssistantModal: React.FC<Props> = ({
       {response !== "" && (
         <div className="page-block-section text-sm">
           Response:
-          <Tiptap
+          <TipTapEditor
             workspaceSlug={workspaceSlug as string}
             value={`<p>${response}</p>`}
             customClassName="-mx-3 -my-3"
@@ -180,10 +174,11 @@ 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"}`}>
@@ -219,8 +214,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,7 +114,10 @@ export const AllViews: React.FC<Props> = ({
         )}
       </StrictModeDroppable>
       {groupedIssues ? (
-        !isEmpty || issueView === "kanban" || issueView === "calendar" ? (
+        !isEmpty ||
+        issueView === "kanban" ||
+        issueView === "calendar" ||
+        issueView === "gantt_chart" ? (
           <>
             {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 { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { 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"
+    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
       ? PROJECT_MEMBERS(projectId.toString())
       : null,
-    workspaceSlug && projectId && selectedGroup === "created_by"
+    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
       ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
@@ -79,9 +79,11 @@ 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?.display_name ?? "";
+        title = member ? member.display_name : "None";
+
         break;
     }
 
@@ -122,9 +124,10 @@ export const BoardHeader: React.FC<Props> = ({
           />
         );
         break;
+      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
+        icon = member ? <Avatar user={member} height="24px" width="24px" fontSize="12px" /> : <></>;
 
         break;
     }

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

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

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

@@ -94,9 +94,10 @@ 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?.display_name ?? "";
+        title = member ? member.display_name : "None";
         break;
     }
 
@@ -137,9 +138,10 @@ export const SingleList: React.FC<Props> = ({
           />
         );
         break;
+      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
+        icon = member ? <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,6 +75,10 @@ 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;
@@ -95,7 +99,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) => {
@@ -116,7 +120,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           },
           false
         );
-      } else {
+      else
         mutate<IIssue[]>(
           fetchKey,
           (prevData) =>
@@ -131,7 +135,6 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             }),
           false
         );
-      }
 
       issuesService
         .patchIssue(
@@ -179,190 +182,203 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
-    <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);
-                        }}
+    <>
+      <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="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={() => {
+                            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>
 
-                      <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"
+                        <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)}
                 >
-                  <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
-                </Popover2>
+                  <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
+                </button>
               </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)}
-              >
-                <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
-              </button>
-            </div>
-          )}
-        </div>
-
-        <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-          <a className="truncate text-custom-text-100 cursor-pointer w-full text-[0.825rem]">
+          <button
+            type="button"
+            className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]"
+            onClick={() => setIssuePeekOverview(true)}
+          >
             {issue.name}
-          </a>
-        </Link>
+          </button>
+        </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>
-      {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, Icon, Spinner } from "components/ui";
+import { CustomMenu, 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-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 md:grid-cols-2 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
               {cycles.map((cycle) => (
                 <SingleCycleCard
                   key={cycle.id}

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

@@ -0,0 +1,83 @@
+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/cycle-issues-layout.tsx

@@ -6,11 +6,8 @@ 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,
-  IssueGanttBlock,
-  renderIssueBlocksStructure,
-} from "components/gantt-chart";
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
 // types
 import { IIssue } from "types";
 
@@ -28,29 +25,20 @@ 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 p-3">
+    <div className="w-full h-full">
       <GanttChartRoot
-        title="Cycles"
-        loaderTitle="Cycles"
+        border={false}
+        title="Issues"
+        loaderTitle="Issues"
         blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
+        SidebarBlockRender={IssueGanttSidebarBlock}
+        BlockRender={IssueGanttBlock}
         enableReorder={orderBy === "sort_order"}
+        bottomSpacing
       />
     </div>
   );

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

@@ -9,7 +9,8 @@ import cyclesService from "services/cycles.service";
 // hooks
 import useUser from "hooks/use-user";
 // components
-import { CycleGanttBlock, GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { CycleGanttBlock, CycleGanttSidebarBlock } from "components/cycles";
 // types
 import { ICycle } from "types";
 
@@ -24,17 +25,6 @@ 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;
 
@@ -88,10 +78,11 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
         loaderTitle="Cycles"
         blocks={cycles ? blockFormat(cycles) : null}
         blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)}
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <CycleGanttBlock cycle={data as ICycle} />}
-        enableLeftDrag={false}
-        enableRightDrag={false}
+        SidebarBlockRender={CycleGanttSidebarBlock}
+        BlockRender={CycleGanttBlock}
+        enableBlockLeftResize={false}
+        enableBlockRightResize={false}
+        enableBlockMove={false}
       />
     </div>
   );

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

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

apps/app/components/cycles/index.ts

@@ -1,11 +1,10 @@
 export * from "./cycles-list";
 export * from "./active-cycle-details";
 export * from "./active-cycle-stats";
-export * from "./cycles-list-gantt-chart";
+export * from "./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,6 +106,7 @@ function RadialProgressBar({ progress }: progress) {
     </div>
   );
 }
+
 export const SingleCycleList: React.FC<TSingleStatProps> = ({
   cycle,
   handleEditCycle,

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

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

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

@@ -1,103 +0,0 @@
-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,8 +1,7 @@
 import { FC } from "react";
 
-// react-beautiful-dnd
-import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+// hooks
+import { useChart } from "../hooks";
 // helpers
 import { ChartDraggable } from "../helpers/draggable";
 import { renderDateFormat } from "helpers/date-time.helper";
@@ -12,90 +11,59 @@ import { IBlockUpdateData, IGanttBlock } from "../types";
 export const GanttChartBlocks: FC<{
   itemsContainerWidth: number;
   blocks: IGanttBlock[] | null;
-  sidebarBlockRender: FC;
-  blockRender: FC;
+  BlockRender: React.FC<any>;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  enableLeftDrag: boolean;
-  enableRightDrag: boolean;
-  enableReorder: boolean;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
 }> = ({
   itemsContainerWidth,
   blocks,
-  sidebarBlockRender,
-  blockRender,
+  BlockRender,
   blockUpdateHandler,
-  enableLeftDrag,
-  enableRightDrag,
-  enableReorder,
+  enableBlockLeftResize,
+  enableBlockRightResize,
+  enableBlockMove,
 }) => {
-  const handleChartBlockPosition = (
-    block: IGanttBlock,
-    totalBlockShifts: number,
-    dragDirection: "left" | "right"
-  ) => {
-    let updatedDate = new Date();
+  const { activeBlock, dispatch } = useChart();
 
-    if (dragDirection === "left") {
-      const originalDate = new Date(block.start_date);
-
-      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);
-    }
-
-    blockUpdateHandler(block.data, {
-      [dragDirection === "left" ? "start_date" : "target_date"]: renderDateFormat(updatedDate),
+  // 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 handleChartBlockPosition = (
+    block: IGanttBlock,
+    totalBlockShifts: number,
+    dragDirection: "left" | "right" | "move"
+  ) => {
+    const originalStartDate = new Date(block.start_date);
+    const updatedStartDate = new Date(originalStartDate);
 
-    const { source, destination, draggableId } = result;
+    const originalTargetDate = new Date(block.target_date);
+    const updatedTargetDate = new Date(originalTargetDate);
 
-    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;
+    // 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);
     }
 
-    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,
-      },
+    // call the block update handler with the updated dates
+    blockUpdateHandler(block.data, {
+      start_date: renderDateFormat(updatedStartDate),
+      target_date: renderDateFormat(updatedTargetDate),
     });
   };
 
@@ -104,75 +72,29 @@ export const GanttChartBlocks: FC<{
       className="relative z-[5] mt-[72px] h-full overflow-hidden overflow-y-auto"
       style={{ width: `${itemsContainerWidth}px` }}
     >
-      <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> */}
+      {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>
+            )
+        )}
     </div>
   );
 };

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

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

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

@@ -3,6 +3,7 @@ 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";
@@ -25,7 +26,7 @@ import {
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
 // types
-import { ChartDataType, IBlockUpdateData, IGanttBlock } from "../types";
+import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
 import { currentViewDataWithView } from "../data";
 // context
@@ -33,15 +34,17 @@ import { useChart } from "../hooks";
 
 type ChartViewRootProps = {
   border: boolean;
-  title: null | string;
+  title: string;
   loaderTitle: string;
   blocks: IGanttBlock[] | null;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  sidebarBlockRender: FC<any>;
-  blockRender: FC<any>;
-  enableLeftDrag: boolean;
-  enableRightDrag: boolean;
+  SidebarBlockRender: React.FC<any>;
+  BlockRender: React.FC<any>;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
   enableReorder: boolean;
+  bottomSpacing: boolean;
 };
 
 export const ChartViewRoot: FC<ChartViewRootProps> = ({
@@ -50,22 +53,24 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   blocks = null,
   loaderTitle,
   blockUpdateHandler,
-  sidebarBlockRender,
-  blockRender,
-  enableLeftDrag,
-  enableRightDrag,
+  SidebarBlockRender,
+  BlockRender,
+  enableBlockLeftResize,
+  enableBlockRightResize,
+  enableBlockMove,
   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 renderBlockStructure = (view: any, blocks: IGanttBlock[]) =>
+  const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } =
+    useChart();
+
+  const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
     blocks && blocks.length > 0
       ? blocks.map((block: any) => ({
           ...block,
@@ -74,16 +79,16 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       : [];
 
   useEffect(() => {
-    if (currentViewData && blocks && blocks.length > 0)
+    if (currentViewData && blocks)
       setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
   }, [currentViewData, blocks]);
 
   // blocks state management ends
 
-  const handleChartView = (key: string) => updateCurrentViewRenderPayload(null, key);
+  const handleChartView = (key: TGanttViews) => updateCurrentViewRenderPayload(null, key);
 
-  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: string) => {
-    const selectedCurrentView = view;
+  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => {
+    const selectedCurrentView: TGanttViews = view;
     const selectedCurrentViewData: ChartDataType | undefined =
       selectedCurrentView && selectedCurrentView === currentViewData?.key
         ? currentViewData
@@ -155,6 +160,9 @@ 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);
   };
@@ -195,6 +203,8 @@ 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);
@@ -205,16 +215,6 @@ 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,44 +225,14 @@ 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 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">
-              Gantt View Beta
-            </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> */}
-
+      <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
         {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>
         )}
 
@@ -282,7 +252,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
-                className={`cursor-pointer rounded-sm border border-custom-border-200 p-1 px-2 text-xs ${
+                className={`cursor-pointer rounded-sm p-1 px-2 text-xs ${
                   currentView === _chatView?.key
                     ? `bg-custom-background-80`
                     : `hover:bg-custom-background-90`
@@ -296,7 +266,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
         <div className="flex items-center gap-1">
           <div
-            className={`cursor-pointer rounded-sm border border-custom-border-200 p-1 px-2 text-xs hover:bg-custom-background-80`}
+            className="cursor-pointer rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80"
             onClick={handleToday}
           >
             Today
@@ -316,26 +286,30 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       </div>
 
       {/* content */}
-      <div className="relative flex h-full w-full flex-1 overflow-hidden border-t border-custom-border-200">
+      <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 flex-col overflow-hidden overflow-x-auto"
-          id="scroll-container"
+          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"
+          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 />} */}
@@ -343,6 +317,19 @@ 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,9 +17,38 @@ 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="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 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>
               </div>
 
@@ -28,19 +57,10 @@ export const MonthChartView: FC<any> = () => {
                   block?.children.length > 0 &&
                   block?.children.map((monthDay, _idx) => (
                     <div
-                      key={`sub-title-${_idxRoot}-${_idx}`}
+                      key={`column-${_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 || "")
@@ -48,9 +68,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,16 +32,27 @@ 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, dispatch: handleDispatch }}>
+    <ChartContext.Provider
+      value={{ ...state, scrollLeft, updateScrollLeft, 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: 8,
-      width: 80, // it will preview monthly all dates with weekends highlighted with no limitations ex: title (1, 2, 3)
+      approxFilterRange: 6,
+      width: 55, // 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,45 +1,57 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
-// react-beautiful-dnd
-import { DraggableProvided } from "react-beautiful-dnd";
+// icons
+import { Icon } from "components/ui";
+// hooks
 import { useChart } from "../hooks";
 // types
 import { IGanttBlock } from "../types";
 
 type Props = {
-  children: any;
   block: IGanttBlock;
-  handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right") => void;
-  enableLeftDrag: boolean;
-  enableRightDrag: boolean;
-  provided: DraggableProvided;
+  BlockRender: React.FC<any>;
+  handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
 };
 
 export const ChartDraggable: React.FC<Props> = ({
-  children,
   block,
+  BlockRender,
   handleBlock,
-  enableLeftDrag = true,
-  enableRightDrag = true,
-  provided,
+  enableBlockLeftResize,
+  enableBlockRightResize,
+  enableBlockMove,
 }) => {
   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 } = useChart();
+  const { currentViewData, scrollLeft } = 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;
-    const appSidebar = document.querySelector("#app-sidebar") as HTMLElement;
+
+    if (!ganttContainer || !ganttSidebar || !scrollContainer) return 0;
 
     const posFromLeft = e.clientX;
     // manually scroll to left if reached the left end while dragging
-    if (posFromLeft - appSidebar.clientWidth <= 70) {
+    if (
+      posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <=
+      SCROLL_THRESHOLD
+    ) {
       if (e.movementX > 0) return 0;
 
       delWidth = -5;
@@ -48,8 +60,8 @@ export const ChartDraggable: React.FC<Props> = ({
     } else delWidth = e.movementX;
 
     // manually scroll to right if reached the right end while dragging
-    const posFromRight = window.innerWidth - e.clientX;
-    if (posFromRight <= 70) {
+    const posFromRight = ganttContainer.getBoundingClientRect().right - e.clientX;
+    if (posFromRight <= SCROLL_THRESHOLD) {
       if (e.movementX < 0) return 0;
 
       delWidth = 5;
@@ -60,12 +72,11 @@ export const ChartDraggable: React.FC<Props> = ({
     return delWidth;
   };
 
-  const handleLeftDrag = () => {
-    if (!currentViewData || !resizableRef.current || !parentDivRef.current || !block.position)
-      return;
+  // handle block resize from the left end
+  const handleBlockLeftResize = () => {
+    if (!currentViewData || !resizableRef.current || !block.position) return;
 
     const resizableDiv = resizableRef.current;
-    const parentDiv = parentDivRef.current;
 
     const columnWidth = currentViewData.data.width;
 
@@ -73,11 +84,9 @@ 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(parentDiv.style.marginLeft);
+    let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
 
     const handleMouseMove = (e: MouseEvent) => {
-      if (!window) return;
-
       let delWidth = 0;
 
       delWidth = checkScrollEnd(e);
@@ -92,7 +101,7 @@ export const ChartDraggable: React.FC<Props> = ({
       if (newWidth < columnWidth) return;
 
       resizableDiv.style.width = `${newWidth}px`;
-      parentDiv.style.marginLeft = `${newMarginLeft}px`;
+      resizableDiv.style.marginLeft = `${newMarginLeft}px`;
 
       if (block.position) {
         block.position.width = newWidth;
@@ -100,6 +109,7 @@ 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);
@@ -115,9 +125,9 @@ export const ChartDraggable: React.FC<Props> = ({
     document.addEventListener("mouseup", handleMouseUp);
   };
 
-  const handleRightDrag = () => {
-    if (!currentViewData || !resizableRef.current || !parentDivRef.current || !block.position)
-      return;
+  // handle block resize from the right end
+  const handleBlockRightResize = () => {
+    if (!currentViewData || !resizableRef.current || !block.position) return;
 
     const resizableDiv = resizableRef.current;
 
@@ -129,8 +139,6 @@ 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);
@@ -145,6 +153,7 @@ 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);
@@ -160,46 +169,148 @@ 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 (
-    <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 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>
       )}
-      {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"
-            }`}
-          />
-        </>
+      {/* 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>
       )}
-    </div>
+      <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>
+    </>
   );
 };

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

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

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

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

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

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

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

apps/app/components/inbox/index.ts

@@ -4,6 +4,7 @@ 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,10 +3,6 @@ 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";
@@ -15,62 +11,23 @@ import { Icon, Loader } from "components/ui";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
-import { ICurrentUserResponse, IIssueComment } from "types";
-// fetch-keys
-import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import { IIssueActivity, IIssueComment } from "types";
 
 type Props = {
-  issueId: string;
-  user: ICurrentUserResponse | undefined;
+  activity: IIssueActivity[] | undefined;
+  handleCommentUpdate: (comment: IIssueComment) => Promise<void>;
+  handleCommentDelete: (commentId: string) => Promise<void>;
 };
 
-export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
+export const IssueActivitySection: React.FC<Props> = ({
+  activity,
+  handleCommentUpdate,
+  handleCommentDelete,
+}) => {
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
-  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) {
+  if (!activity)
     return (
       <Loader className="space-y-4">
         <div className="space-y-2">
@@ -87,12 +44,11 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
         </div>
       </Loader>
     );
-  }
 
   return (
     <div className="flow-root">
       <ul role="list" className="-mb-4">
-        {issueActivities.map((activityItem, index) => {
+        {activity.map((activityItem, index) => {
           // determines what type of action is performed
           const message = activityItem.field ? (
             <ActivityMessage activity={activityItem} />
@@ -104,7 +60,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
             return (
               <li key={activityItem.id}>
                 <div className="relative pb-1">
-                  {issueActivities.length > 1 && index !== issueActivities.length - 1 ? (
+                  {activity.length > 1 && index !== activity.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,28 +1,12 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
 // react-hook-form
 import { useForm, Controller } from "react-hook-form";
-// services
-import issuesServices from "services/issues.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
+// components
 import { SecondaryButton } from "components/ui";
+import { TipTapEditor } from "components/tiptap";
 // 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";
+import type { IIssueComment } from "types";
 
 const defaultValues: Partial<IIssueComment> = {
   comment_json: "",
@@ -30,75 +14,49 @@ const defaultValues: Partial<IIssueComment> = {
 };
 
 type Props = {
-  issueId: string;
-  user: ICurrentUserResponse | undefined;
   disabled?: boolean;
+  onSubmit: (data: IIssueComment) => Promise<void>;
 };
 
-export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false }) => {
+export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
   const {
-    handleSubmit,
     control,
+    formState: { isSubmitting },
+    handleSubmit,
+    reset,
     setValue,
     watch,
-    formState: { isSubmitting },
-    reset,
   } = useForm<IIssueComment>({ defaultValues });
 
   const editorRef = React.useRef<any>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
 
-  const { setToastAlert } = useToast();
+  const handleAddComment = async (formData: IIssueComment) => {
+    if (!formData.comment_html || !formData.comment_json || isSubmitting) return;
 
-  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.",
-        })
-      );
+    await onSubmit(formData).then(() => {
+      reset(defaultValues);
+      editorRef.current?.clearEditor();
+    });
   };
 
   return (
     <div>
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(handleAddComment)}>
         <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,17 +9,11 @@ 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;
@@ -28,7 +22,12 @@ 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);
@@ -109,7 +108,7 @@ export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit,
             onSubmit={handleSubmit(onEnter)}
           >
             <div>
-              <TiptapEditor
+              <TipTapEditor
                 workspaceSlug={workspaceSlug as string}
                 ref={editorRef}
                 value={watch("comment_html")}
@@ -139,7 +138,7 @@ export const CommentCard: React.FC<Props> = ({ comment, workspaceSlug, onSubmit,
             </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,24 +4,21 @@ 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;
@@ -43,7 +40,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   const {
     handleSubmit,
     watch,
-    setValue,
     reset,
     register,
     control,
@@ -51,7 +47,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   } = useForm<IIssue>({
     defaultValues: {
       name: "",
-      description: "",
       description_html: "",
     },
   });
@@ -62,7 +57,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
 
       await handleFormSubmit({
         name: formData.name ?? "",
-        description: formData.description ?? "",
         description_html: formData.description_html ?? "<p></p>",
       });
     },
@@ -80,7 +74,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     }
   }, [isSubmitting, setShowAlert]);
 
-
   // reset form values
   useEffect(() => {
     if (!issue) return;
@@ -99,27 +92,32 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   return (
     <div className="relative">
       <div className="relative">
-        <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 && (
+        {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 && (
           <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>
@@ -133,39 +131,42 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
           name="description_html"
           control={control}
           render={({ field: { value, onChange } }) => {
-            if (!value && !watch("description_html")) return <></>;
+            if (!value) return <></>;
 
             return (
-              <Tiptap
+              <TipTapEditor
                 value={
                   !value ||
-                    value === "" ||
-                    (typeof value === "object" && Object.keys(value).length === 0)
-                    ? watch("description_html")
+                  value === "" ||
+                  (typeof value === "object" && Object.keys(value).length === 0)
+                    ? "<p></p>"
                     : value
                 }
                 workspaceSlug={workspaceSlug}
                 debouncedUpdatesEnabled={true}
                 setShouldShowAlert={setShowAlert}
                 setIsSubmitting={setIsSubmitting}
-                customClassName="min-h-[150px] shadow-sm"
-                editorContentCustomClassNames="pb-9"
+                customClassName={
+                  isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
+                }
+                noBorder={!isAllowed}
                 onChange={(description: Object, description_html: string) => {
                   setShowAlert(true);
                   setIsSubmitting("submitting");
                   onChange(description_html);
-                  setValue("description", description);
-                  handleSubmit(handleDescriptionFormSubmit)().finally(() => {
-                    setIsSubmitting("submitted");
-                  });
+                  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,18 +31,11 @@ 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: "",
@@ -369,7 +362,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/blocks.tsx

@@ -0,0 +1,67 @@
+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

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

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

@@ -6,11 +6,8 @@ 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,
-  IssueGanttBlock,
-  renderIssueBlocksStructure,
-} from "components/gantt-chart";
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
 // types
 import { IIssue } from "types";
 
@@ -27,17 +24,6 @@ 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
@@ -48,9 +34,10 @@ export const IssueGanttChartView = () => {
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
+        BlockRender={IssueGanttBlock}
+        SidebarBlockRender={IssueGanttSidebarBlock}
         enableReorder={orderBy === "sort_order"}
+        bottomSpacing
       />
     </div>
   );

apps/app/components/issues/index.ts

@@ -15,3 +15,4 @@ 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,12 +1,13 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import useSWR from "swr";
+import useSWR, { mutate } 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
@@ -25,9 +26,9 @@ import { CustomMenu } from "components/ui";
 import { LayerDiagonalIcon } from "components/icons";
 import { MinusCircleIcon } from "@heroicons/react/24/outline";
 // types
-import { IIssue } from "types";
+import { IIssue, IIssueComment } from "types";
 // fetch-keys
-import { SUB_ISSUES } from "constants/fetch-keys";
+import { PROJECT_ISSUES_ACTIVITY, SUB_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   issueDetails: IIssue;
@@ -43,6 +44,8 @@ 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();
 
@@ -50,15 +53,81 @@ 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">
@@ -97,8 +166,9 @@ 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" />
@@ -146,14 +216,11 @@ 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
-          issueId={(archivedIssueId as string) ?? (issueId as string)}
-          user={user}
-        />
-        <AddComment
-          issueId={(archivedIssueId as string) ?? (issueId as string)}
-          user={user}
-          disabled={uneditable}
+          activity={issueActivity}
+          handleCommentUpdate={handleCommentUpdate}
+          handleCommentDelete={handleCommentDelete}
         />
+        <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 { DueDateFilterModal } from "components/core";
+import { DateFilterModal } 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 { DUE_DATES } from "constants/due-dates";
+import { DATE_FILTER_OPTIONS } from "constants/filters";
 
 type Props = {
   filters: Partial<IIssueFilterOptions> | IQuery;
@@ -35,7 +35,14 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
   direction = "right",
   height = "md",
 }) => {
-  const [isDueDateFilterModalOpen, setIsDueDateFilterModalOpen] = useState(false);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+  const [dateFilterType, setDateFilterType] = useState<{
+    title: string;
+    type: "start_date" | "target_date";
+  }>({
+    title: "",
+    type: "start_date",
+  });
   const [fetchLabels, setFetchLabels] = useState(false);
 
   const router = useRouter();
@@ -50,10 +57,12 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
 
   return (
     <>
-      {isDueDateFilterModalOpen && (
-        <DueDateFilterModal
-          isOpen={isDueDateFilterModalOpen}
-          handleClose={() => setIsDueDateFilterModalOpen(false)}
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          title={dateFilterType.title}
+          field={dateFilterType.type}
+          isOpen={isDateFilterModalOpen}
+          handleClose={() => setIsDateFilterModalOpen(false)}
         />
       )}
       <MultiLevelDropdown
@@ -132,12 +141,48 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
             })),
           },
           {
-            id: "target_date",
-            label: "Due date",
-            value: DUE_DATES,
+            id: "start_date",
+            label: "Start date",
+            value: DATE_FILTER_OPTIONS,
             hasChildren: true,
             children: [
-              ...(DUE_DATES?.map((option) => ({
+              ...(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,
+            hasChildren: true,
+            children: [
+              ...(DATE_FILTER_OPTIONS?.map((option) => ({
                 id: option.name,
                 label: option.name,
                 value: {
@@ -152,7 +197,13 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
                 value: "custom",
                 element: (
                   <button
-                    onClick={() => setIsDueDateFilterModalOpen(true)}
+                    onClick={() => {
+                      setIsDateFilterModalOpen(true);
+                      setDateFilterType({
+                        title: "Due date",
+                        type: "target_date",
+                      });
+                    }}
                     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,14 +89,11 @@ export const MyIssuesViewOptions: React.FC = () => {
         onSelect={(option) => {
           const key = option.key as keyof typeof filters;
 
-          if (key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(
-              filters?.target_date ?? [],
-              option.value
-            );
+          if (key === "start_date" || key === "target_date") {
+            const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
 
             setFilters({
-              target_date: valueExists ? null : option.value,
+              [key]: valueExists ? null : option.value,
             });
           } else {
             const valueExists = filters[key]?.includes(option.value);
@@ -159,7 +156,11 @@ 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")
+                                if (
+                                  option.key === "state" ||
+                                  option.key === "created_by" ||
+                                  option.key === "assignees"
+                                )
                                   return null;
 
                                 return (

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

@@ -249,6 +249,7 @@ 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

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,133 @@
+// 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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,34 @@
+// 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

@@ -0,0 +1,203 @@
+// 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

@@ -0,0 +1,107 @@
+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

@@ -0,0 +1,75 @@
+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,26 +9,16 @@ 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,
-  userAuth,
-  disabled = false,
-}) => {
+export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -50,36 +40,27 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({
     ),
   }));
 
-  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">
-        <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"
-              )}
+    <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>
-          }
-          options={options}
-          onChange={onChange}
-          position="right"
-          multiple
-          disabled={isNotAllowed}
-        />
-      </div>
-    </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}
+    />
   );
 };

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

@@ -6,75 +6,56 @@ 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,
-  userAuth,
-  disabled = false,
-}) => {
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disabled;
-
+export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const { isEstimateActive, estimatePoints } = useEstimateOption();
 
   if (!isEstimateActive) return null;
 
   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">
-        <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}
+    <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"
         >
-          <CustomSelect.Option value={null}>
+          <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}>
             <>
               <span>
                 <PlayIcon className="h-4 w-4 -rotate-90" />
               </span>
-              None
+              {point.value}
             </>
           </CustomSelect.Option>
-          {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>
+        ))}
+    </CustomSelect>
   );
 };

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

@@ -17,13 +17,7 @@ import useUser from "hooks/use-user";
 // ui
 import { Input, Spinner } from "components/ui";
 // icons
-import {
-  ChevronDownIcon,
-  PlusIcon,
-  RectangleGroupIcon,
-  TagIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
+import { PlusIcon, RectangleGroupIcon, TagIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import { IIssue, IIssueLabels } from "types";
 // fetch-keys
@@ -281,18 +275,15 @@ export const SidebarLabelSelect: React.FC<Props> = ({
             <Popover className="relative">
               {({ open }) => (
                 <>
-                  <Popover.Button
-                    className={`flex items-center gap-1 rounded-md bg-custom-background-80 p-1 outline-none focus:ring-2 focus:ring-custom-primary`}
-                  >
+                  <Popover.Button className="grid place-items-center outline-none">
                     {watch("color") && watch("color") !== "" && (
                       <span
-                        className="h-5 w-5 rounded"
+                        className="h-6 w-6 rounded"
                         style={{
                           backgroundColor: watch("color") ?? "black",
                         }}
                       />
                     )}
-                    <ChevronDownIcon className="h-3 w-3" />
                   </Popover.Button>
 
                   <Transition
@@ -304,7 +295,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                     leaveFrom="opacity-100 translate-y-0"
                     leaveTo="opacity-0 translate-y-1"
                   >
-                    <Popover.Panel className="absolute right-0 bottom-8 z-10 mt-1 max-w-xs transform px-2 sm:px-0">
+                    <Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0">
                       <Controller
                         name="color"
                         control={labelControl}

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

@@ -3,62 +3,51 @@ 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,
-  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>
-  );
-};
+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>
+);

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

@@ -9,29 +9,20 @@ 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,
-  userAuth,
-  disabled = false,
-}) => {
+export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxIssueId } = router.query;
 
@@ -45,60 +36,52 @@ export const SidebarStateSelect: React.FC<Props> = ({
 
   const selectedState = states?.find((s) => s.id === value);
 
-  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">
-        <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>
-            )
+    <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>
           ) : (
-            <Spinner />
+            "None"
           )}
-        </CustomSelect>
-      </div>
-    </div>
+        </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>
   );
 };

apps/app/components/issues/sidebar.tsx

@@ -33,7 +33,16 @@ import {
 // ui
 import { CustomDatePicker, Icon } from "components/ui";
 // icons
-import { LinkIcon, CalendarDaysIcon, TrashIcon, PlusIcon } from "@heroicons/react/24/outline";
+import {
+  LinkIcon,
+  CalendarDaysIcon,
+  TrashIcon,
+  PlusIcon,
+  Squares2X2Icon,
+  ChartBarIcon,
+  UserGroupIcon,
+  PlayIcon,
+} from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -285,7 +294,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
         user={user}
       />
       <div className="h-full w-full flex flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
-        <div className="flex items-center justify-between pb-3">
+        <div className="flex items-center justify-between px-5 pb-3">
           <h4 className="text-sm font-medium">
             {issueDetail?.project_detail?.identifier}-{issueDetail?.sequence_id}
           </h4>
@@ -327,65 +336,95 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
           </div>
         </div>
 
-        <div className="h-full w-full overflow-y-auto">
+        <div className="h-full w-full px-5 overflow-y-auto">
           <div className={`divide-y-2 divide-custom-border-200 ${uneditable ? "opacity-60" : ""}`}>
             {showFirstSection && (
               <div className="py-1">
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
-                  <Controller
-                    control={control}
-                    name="state"
-                    render={({ field: { value } }) => (
-                      <SidebarStateSelect
-                        value={value}
-                        onChange={(val: string) => submitChanges({ state: val })}
-                        userAuth={memberRole}
-                        disabled={uneditable}
+                  <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}
+                          />
+                        )}
                       />
-                    )}
-                  />
+                    </div>
+                  </div>
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
-                  <Controller
-                    control={control}
-                    name="assignees_list"
-                    render={({ field: { value } }) => (
-                      <SidebarAssigneeSelect
-                        value={value}
-                        onChange={(val: string[]) => submitChanges({ assignees_list: val })}
-                        userAuth={memberRole}
-                        disabled={uneditable}
+                  <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}
+                          />
+                        )}
                       />
-                    )}
-                  />
+                    </div>
+                  </div>
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
-                  <Controller
-                    control={control}
-                    name="priority"
-                    render={({ field: { value } }) => (
-                      <SidebarPrioritySelect
-                        value={value}
-                        onChange={(val: string) => submitChanges({ priority: val })}
-                        userAuth={memberRole}
-                        disabled={uneditable}
+                  <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}
+                          />
+                        )}
                       />
-                    )}
-                  />
+                    </div>
+                  </div>
                 )}
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
-                  <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 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}
+                          />
+                        )}
                       />
-                    )}
-                  />
+                    </div>
+                  </div>
                 )}
               </div>
             )}

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

@@ -0,0 +1,55 @@
+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

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

apps/app/components/modules/gantt-chart/module-issues-layout.tsx

@@ -8,11 +8,8 @@ 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,
-  IssueGanttBlock,
-  renderIssueBlocksStructure,
-} from "components/gantt-chart";
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
 // types
 import { IIssue } from "types";
 
@@ -32,29 +29,20 @@ 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 p-3">
+    <div className="w-full h-full">
       <GanttChartRoot
-        title="Modules"
-        loaderTitle="Modules"
+        border={false}
+        title="Issues"
+        loaderTitle="Issues"
         blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
+        SidebarBlockRender={IssueGanttSidebarBlock}
+        BlockRender={IssueGanttBlock}
         enableReorder={orderBy === "sort_order"}
+        bottomSpacing
       />
     </div>
   );

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

@@ -1,6 +1,7 @@
 import { FC } from "react";
 
 import { useRouter } from "next/router";
+import Link from "next/link";
 
 import { KeyedMutator } from "swr";
 
@@ -9,11 +10,10 @@ import modulesService from "services/modules.service";
 // hooks
 import useUser from "hooks/use-user";
 // components
-import { GanttChartRoot, IBlockUpdateData, ModuleGanttBlock } from "components/gantt-chart";
+import { GanttChartRoot, IBlockUpdateData } from "components/gantt-chart";
+import { ModuleGanttBlock, ModuleGanttSidebarBlock } from "components/modules";
 // types
 import { IModule } from "types";
-// constants
-import { MODULE_STATUS } from "constants/module";
 
 type Props = {
   modules: IModule[];
@@ -26,19 +26,6 @@ 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;
 
@@ -98,8 +85,8 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
         loaderTitle="Modules"
         blocks={modules ? blockFormat(modules) : null}
         blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <ModuleGanttBlock module={data as IModule} />}
+        SidebarBlockRender={ModuleGanttSidebarBlock}
+        BlockRender={ModuleGanttBlock}
       />
     </div>
   );

apps/app/components/modules/index.ts

@@ -4,6 +4,5 @@ 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/notifications/notification-header.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // components
-import { Icon, Tooltip } from "components/ui";
+import { CustomMenu, Icon, Tooltip } from "components/ui";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
 
@@ -21,6 +21,7 @@ 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) => {
@@ -37,6 +38,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
     setArchived,
     setReadNotification,
     setSelectedTab,
+    markAllNotificationsAsRead,
   } = props;
 
   const notificationTabs: Array<{
@@ -88,33 +90,51 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               <Icon iconName="filter_list" />
             </button>
           </Tooltip>
-          <Tooltip tooltipContent="Snoozed notifications">
-            <button
-              type="button"
+          <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"
               onClick={() => {
                 setArchived(false);
                 setReadNotification(false);
                 setSnoozed((prev) => !prev);
               }}
             >
-              <Icon iconName="schedule" />
-            </button>
-          </Tooltip>
-          <Tooltip tooltipContent="Archived notifications">
-            <button
-              type="button"
+              <div className="flex items-center gap-2">
+                <Icon iconName="schedule" />
+                Show snoozed
+              </div>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              renderAs="button"
               onClick={() => {
                 setSnoozed(false);
                 setReadNotification(false);
                 setArchived((prev) => !prev);
               }}
             >
-              <Icon iconName="archive" />
+              <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" />
             </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,6 +51,7 @@ export const NotificationPopover = () => {
     hasMore,
     isRefreshing,
     setFetchNotifications,
+    markAllNotificationsAsRead,
   } = useUserNotification();
 
   // theme context
@@ -112,7 +113,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-44 md:w-[36rem] w-[20rem] h-[75vh] 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-36 md:w-[36rem] w-[20rem] h-[50vh] border border-custom-border-300 shadow-lg rounded-xl">
                   <NotificationHeader
                     notificationCount={notificationCount}
                     notificationMutate={notificationMutate}
@@ -126,6 +127,7 @@ export const NotificationPopover = () => {
                     setArchived={setArchived}
                     setReadNotification={setReadNotification}
                     setSelectedTab={setSelectedTab}
+                    markAllNotificationsAsRead={markAllNotificationsAsRead}
                   />
 
                   {notifications ? (

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

@@ -1,12 +1,7 @@
 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";
@@ -16,13 +11,12 @@ import aiService from "services/ai.service";
 import useToast from "hooks/use-toast";
 // components
 import { GptAssistantModal } from "components/core";
-// ui
+import { TipTapEditor } from "components/tiptap";
 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;
@@ -39,12 +33,6 @@ 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,
@@ -231,9 +219,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>",
     });
@@ -291,7 +279,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>"}
@@ -311,7 +299,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                   );
 
                 return (
-                  <TiptapEditor
+                  <TipTapEditor
                     workspaceSlug={workspaceSlug as string}
                     ref={editorRef}
                     value={
@@ -334,8 +322,9 @@ 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}
               >
@@ -367,8 +356,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,6 +19,7 @@ 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
@@ -38,7 +39,6 @@ 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,13 +48,6 @@ 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,
@@ -328,8 +321,9 @@ 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}
             >
@@ -343,8 +337,9 @@ 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">
@@ -358,8 +353,9 @@ 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}
                 >
@@ -455,18 +451,19 @@ 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,14 +115,11 @@ export const ProfileIssuesViewOptions: React.FC = () => {
         onSelect={(option) => {
           const key = option.key as keyof typeof filters;
 
-          if (key === "target_date") {
-            const valueExists = checkIfArraysHaveSameElements(
-              filters?.target_date ?? [],
-              option.value
-            );
+          if (key === "start_date" || key === "target_date") {
+            const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value);
 
             setFilters({
-              target_date: valueExists ? null : option.value,
+              [key]: valueExists ? null : option.value,
             });
           } else {
             const valueExists = filters[key]?.includes(option.value);
@@ -186,7 +183,11 @@ 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")
+                                if (
+                                  option.key === "state" ||
+                                  option.key === "created_by" ||
+                                  option.key === "assignees"
+                                )
                                   return null;
 
                                 return (

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

@@ -263,6 +263,7 @@ 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,19 +162,21 @@ export const ProfileSidebar = () => {
                             </div>
                           </div>
                           <div className="flex-shrink-0 flex items-center gap-2">
-                            <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>
+                            {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>
+                            )}
                             <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 } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const { setToastAlert } = useToast();
 
@@ -81,6 +81,8 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
         );
 
         if (onSuccess) onSuccess();
+
+        if (projectId && projectId === data.id) router.push(`/${workspaceSlug}/projects`);
       })
       .catch(() =>
         setToastAlert({

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

@@ -19,6 +19,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
 
   const handleJoin = () => {
     setIsJoiningLoading(true);
+
     onJoin()
       .then(() => {
         setIsJoiningLoading(false);
@@ -59,7 +60,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
               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="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-300 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
                   <Dialog.Title
                     as="h3"

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, { mutate } from "swr";
+import useSWR 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 { PROJECT_MEMBERS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
+import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
 
@@ -37,6 +37,7 @@ type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   members: any[];
   user: ICurrentUserResponse | undefined;
+  onSuccess: () => void;
 };
 
 type member = {
@@ -57,7 +58,9 @@ const defaultValues: FormValues = {
   ],
 };
 
-const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, members, user }) => {
+const SendProjectInvitationModal: React.FC<Props> = (props) => {
+  const { isOpen, setIsOpen, members, user, onSuccess } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -98,13 +101,13 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
           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,6 +31,7 @@ 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);
@@ -48,7 +49,7 @@ export const ProjectSidebarList: FC = () => {
 
   const { projects: allProjects } = useProjects();
 
-  const joinedProjects = allProjects?.filter((p) => p.sort_order);
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
   const favoriteProjects = allProjects?.filter((p) => p.is_favorite);
 
   const orderedJoinedProjects: IProject[] | undefined = joinedProjects
@@ -151,7 +152,7 @@ export const ProjectSidebarList: FC = () => {
       <CreateProjectModal
         isOpen={isProjectModalOpen}
         setIsOpen={setIsProjectModalOpen}
-        setToFavorite
+        setToFavorite={isFavoriteProjectCreate}
         user={user}
       />
       <DeleteProjectModal
@@ -189,7 +190,10 @@ export const ProjectSidebarList: FC = () => {
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
-                              onClick={() => setIsProjectModalOpen(true)}
+                              onClick={() => {
+                                setIsFavoriteProjectCreate(true);
+                                setIsProjectModalOpen(true);
+                              }}
                             >
                               <Icon iconName="add" />
                             </button>
@@ -201,7 +205,7 @@ export const ProjectSidebarList: FC = () => {
                               key={project.id}
                               draggableId={project.id}
                               index={index}
-                              isDragDisabled={project.sort_order === null}
+                              isDragDisabled={!project.is_member}
                             >
                               {(provided, snapshot) => (
                                 <div ref={provided.innerRef} {...provided.draggableProps}>
@@ -252,7 +256,10 @@ export const ProjectSidebarList: FC = () => {
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
-                              onClick={() => setIsProjectModalOpen(true)}
+                              onClick={() => {
+                                setIsFavoriteProjectCreate(false);
+                                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 } from "react";
+import { useImperativeHandle, useRef, forwardRef } 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,9 +73,10 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
     }, 500);
   }, 1000);
 
-  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}`;
+  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}`;
 
   if (!editor) return null;
   editorRef.current = editor;
@@ -97,4 +98,10 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
   );
 };
 
-export default Tiptap;
+const TipTapEditor = forwardRef<ITipTapRichTextEditor, ITipTapRichTextEditor>((props, ref) => (
+  <Tiptap {...props} forwardedRef={ref} />
+));
+
+TipTapEditor.displayName = "TipTapEditor";
+
+export { TipTapEditor };

apps/app/components/views/form.tsx

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

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

@@ -7,11 +7,8 @@ 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,
-  IssueGanttBlock,
-  renderIssueBlocksStructure,
-} from "components/gantt-chart";
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock } from "components/issues";
 // types
 import { IIssue } from "types";
 
@@ -29,28 +26,18 @@ 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 p-3">
+    <div className="w-full h-full">
       <GanttChartRoot
-        title="Issue Views"
-        loaderTitle="Issue Views"
+        border={false}
+        title="Issues"
+        loaderTitle="Issues"
         blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
         blockUpdateHandler={(block, payload) =>
           updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
         }
-        sidebarBlockRender={(data: any) => <GanttSidebarBlockView data={data} />}
-        blockRender={(data: any) => <IssueGanttBlock issue={data as IIssue} />}
+        SidebarBlockRender={IssueGanttSidebarBlock}
+        BlockRender={IssueGanttBlock}
       />
     </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 { DueDateFilterModal } from "components/core";
+import { DateFilterModal } 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 { DUE_DATES } from "constants/due-dates";
+import { DATE_FILTER_OPTIONS } from "constants/filters";
 
 type Props = {
   filters: Partial<IIssueFilterOptions> | IQuery;
@@ -38,7 +38,14 @@ export const SelectFilters: React.FC<Props> = ({
   direction = "right",
   height = "md",
 }) => {
-  const [isDueDateFilterModalOpen, setIsDueDateFilterModalOpen] = useState(false);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+  const [dateFilterType, setDateFilterType] = useState<{
+    title: string;
+    type: "start_date" | "target_date";
+  }>({
+    title: "",
+    type: "start_date",
+  });
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -67,10 +74,12 @@ export const SelectFilters: React.FC<Props> = ({
 
   return (
     <>
-      {isDueDateFilterModalOpen && (
-        <DueDateFilterModal
-          isOpen={isDueDateFilterModalOpen}
-          handleClose={() => setIsDueDateFilterModalOpen(false)}
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          title={dateFilterType.title}
+          field={dateFilterType.type}
+          isOpen={isDateFilterModalOpen}
+          handleClose={() => setIsDateFilterModalOpen(false)}
         />
       )}
       <MultiLevelDropdown
@@ -183,12 +192,48 @@ export const SelectFilters: React.FC<Props> = ({
             })),
           },
           {
-            id: "target_date",
-            label: "Due date",
-            value: DUE_DATES,
+            id: "start_date",
+            label: "Start date",
+            value: DATE_FILTER_OPTIONS,
             hasChildren: true,
             children: [
-              ...DUE_DATES.map((option) => ({
+              ...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,
+            hasChildren: true,
+            children: [
+              ...DATE_FILTER_OPTIONS.map((option) => ({
                 id: option.name,
                 label: option.name,
                 value: {
@@ -203,7 +248,13 @@ export const SelectFilters: React.FC<Props> = ({
                 value: "custom",
                 element: (
                   <button
-                    onClick={() => setIsDueDateFilterModalOpen(true)}
+                    onClick={() => {
+                      setIsDateFilterModalOpen(true);
+                      setDateFilterType({
+                        title: "Due date",
+                        type: "target_date",
+                      });
+                    }}
                     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,6 +25,7 @@ type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   workspace_slug: string;
   user: ICurrentUserResponse | undefined;
+  onSuccess: () => void;
 };
 
 type EmailRole = {
@@ -45,12 +46,8 @@ const defaultValues: FormValues = {
   ],
 };
 
-const SendWorkspaceInvitationModal: React.FC<Props> = ({
-  isOpen,
-  setIsOpen,
-  workspace_slug,
-  user,
-}) => {
+const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
+  const { isOpen, setIsOpen, workspace_slug, user, onSuccess } = props;
   const {
     control,
     reset,
@@ -88,6 +85,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
           title: "Success!",
           message: "Invitations sent successfully.",
         });
+        onSuccess();
       })
       .catch((err) => {
         setToastAlert({

apps/app/constants/fetch-keys.ts

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

apps/app/constants/filters.ts

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

apps/app/constants/issue.ts

@@ -7,6 +7,7 @@ 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 },
 ];
@@ -18,6 +19,7 @@ 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" },
 ];