chore: modified dockerfiles for space and web (#1987)

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
   extends: ["custom"],
   settings: {
     next: {
-      rootDir: ["apps/*"],
+      rootDir: ["web/", "deploy/"],
     },
   },
 };

.github/workflows/Build_Test_Pull_Request.yml

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

.github/workflows/Update_Docker_Images.yml

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

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

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

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

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

apiserver/plane/api/serializers/project.py

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

apiserver/plane/api/urls.py

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

apiserver/plane/api/views/__init__.py

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

apiserver/plane/api/views/issue.py

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

apiserver/plane/api/views/project.py

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

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

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

apiserver/plane/db/models/issue.py

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

apiserver/runtime.txt

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

app.json

@@ -1,85 +0,0 @@
-{
-  "name": "Plane",
-  "description": "Plane helps you track your issues, epics, and product roadmaps.",
-  "repository": "http://github.com/makeplane/plane",
-  "logo": "https://avatars.githubusercontent.com/u/115727700?s=200&v=4",
-  "website": "https://plane.so/",
-  "success_url": "/",
-  "stack": "heroku-22",
-  "keywords": [
-    "plane",
-    "project management",
-    "django",
-    "next"
-  ],
-  "addons": [
-    "heroku-postgresql:mini",
-    "heroku-redis:mini"
-  ],
-  "buildpacks": [
-    {
-      "url": "https://github.com/heroku/heroku-buildpack-python.git"
-    },
-    {
-      "url": "https://github.com/heroku/heroku-buildpack-nodejs#v176"
-    }
-  ],
-  "env": {
-    "EMAIL_HOST": {
-      "description": "Email host to send emails from",
-      "value": ""
-    },
-    "EMAIL_HOST_USER": {
-      "description": "Email host to send emails from",
-      "value": ""
-    },
-    "EMAIL_HOST_PASSWORD": {
-      "description": "Email host to send emails from",
-      "value": ""
-    },
-    "EMAIL_FROM": {
-      "description": "Email Sender",
-      "value": ""
-    },
-    "EMAIL_PORT": {
-      "description": "The default Email PORT to use",
-      "value": "587"
-    },
-    "AWS_REGION": {
-      "description": "AWS Region to use for S3",
-      "value": "false"
-    },
-    "AWS_ACCESS_KEY_ID": {
-      "description": "AWS Access Key ID to use for S3",
-      "value": ""
-    },
-    "AWS_SECRET_ACCESS_KEY": {
-      "description": "AWS Secret Access Key to use for S3",
-      "value": ""
-    },
-    "AWS_S3_BUCKET_NAME": {
-      "description": "AWS Bucket Name to use for S3",
-      "value": ""
-    },
-    "SENTRY_DSN": {
-      "description": "",
-      "value": ""
-    },
-    "WEB_URL": {
-      "description": "Web URL for Plane this will be used for redirections in the emails",
-      "value": ""
-    },
-    "GITHUB_CLIENT_SECRET": {
-      "description": "Github Client Secret",
-      "value": ""
-    },
-    "NEXT_PUBLIC_API_BASE_URL": {
-      "description": "Next Public API Base URL",
-      "value": ""
-    },
-    "SECRET_KEY": {
-      "description": "Django Secret Key",
-      "value": ""
-    }
-  }
-}

apps/app/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["custom"],
-  rules: {
-    "@next/next/no-img-element": "off",
-  },
-};

apps/app/Dockerfile.dev

@@ -1,11 +0,0 @@
-FROM node:18-alpine
-RUN apk add --no-cache libc6-compat
-# Set working directory
-WORKDIR /app
-
-
-COPY . .
-RUN yarn global add turbo
-RUN yarn install
-EXPOSE 3000
-CMD ["yarn","dev"]

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

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

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

@@ -1,384 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// components
-import {
-  IssuePeekOverview,
-  ViewAssigneeSelect,
-  ViewDueDateSelect,
-  ViewEstimateSelect,
-  ViewIssueLabel,
-  ViewPrioritySelect,
-  ViewStartDateSelect,
-  ViewStateSelect,
-} from "components/issues";
-import { Popover2 } from "@blueprintjs/popover2";
-// icons
-import { Icon } from "components/ui";
-import {
-  EllipsisHorizontalIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-// hooks
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
-import useToast from "hooks/use-toast";
-// services
-import issuesService from "services/issues.service";
-// constant
-import {
-  CYCLE_DETAILS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_DETAILS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  SUB_ISSUES,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-// types
-import { ICurrentUserResponse, IIssue, ISubIssueResponse, Properties, UserAuth } from "types";
-// helper
-import { copyTextToClipboard } from "helpers/string.helper";
-import { renderLongDetailDateFormat } from "helpers/date-time.helper";
-
-type Props = {
-  issue: IIssue;
-  index: number;
-  expanded: boolean;
-  handleToggleExpand: (issueId: string) => void;
-  properties: Properties;
-  handleEditIssue: (issue: IIssue) => void;
-  handleDeleteIssue: (issue: IIssue) => void;
-  gridTemplateColumns: string;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  nestingLevel: number;
-};
-
-export const SingleSpreadsheetIssue: React.FC<Props> = ({
-  issue,
-  index,
-  expanded,
-  handleToggleExpand,
-  properties,
-  handleEditIssue,
-  handleDeleteIssue,
-  gridTemplateColumns,
-  disableUserActions,
-  user,
-  userAuth,
-  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;
-
-  const { params } = useSpreadsheetIssuesView();
-
-  const { setToastAlert } = useToast();
-
-  const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>, issue: IIssue) => {
-      if (!workspaceSlug || !projectId) return;
-
-      const fetchKey = cycleId
-        ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
-        : moduleId
-        ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-        : viewId
-        ? VIEW_ISSUES(viewId.toString(), params)
-        : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
-
-      if (issue.parent)
-        mutate<ISubIssueResponse>(
-          SUB_ISSUES(issue.parent.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              sub_issues: (prevData.sub_issues ?? []).map((i) => {
-                if (i.id === issue.id) {
-                  return {
-                    ...i,
-                    ...formData,
-                  };
-                }
-                return i;
-              }),
-            };
-          },
-          false
-        );
-      else
-        mutate<IIssue[]>(
-          fetchKey,
-          (prevData) =>
-            (prevData ?? []).map((p) => {
-              if (p.id === issue.id) {
-                return {
-                  ...p,
-                  ...formData,
-                };
-              }
-              return p;
-            }),
-          false
-        );
-
-      issuesService
-        .patchIssue(
-          workspaceSlug as string,
-          projectId as string,
-          issue.id as string,
-          formData,
-          user
-        )
-        .then(() => {
-          if (issue.parent) {
-            mutate(SUB_ISSUES(issue.parent as string));
-          } else {
-            mutate(fetchKey);
-
-            if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
-            if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    [workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
-  );
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
-  const paddingLeft = `${nestingLevel * 68}px`;
-
-  const tooltipPosition = index === 0 ? "bottom" : "top";
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
-
-  return (
-    <>
-      <IssuePeekOverview
-        handleDeleteIssue={() => handleDeleteIssue(issue)}
-        handleUpdateIssue={async (formData) => partialUpdateIssue(formData, issue)}
-        issue={issue}
-        isOpen={issuePeekOverview}
-        onClose={() => setIssuePeekOverview(false)}
-        workspaceSlug={workspaceSlug?.toString() ?? ""}
-        readOnly={isNotAllowed}
-      />
-      <div
-        className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
-        style={{ gridTemplateColumns }}
-      >
-        <div className="flex gap-1.5 items-center px-4 sticky z-[1] left-0 text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full">
-          <div className="flex gap-1.5 items-center" style={issue.parent ? { paddingLeft } : {}}>
-            <div className="relative flex items-center cursor-pointer text-xs text-center hover:text-custom-text-100 w-14">
-              {properties.key && (
-                <span className="flex items-center justify-center opacity-100 group-hover:opacity-0">
-                  {issue.project_detail?.identifier}-{issue.sequence_id}
-                </span>
-              )}
-              {!isNotAllowed && !disableUserActions && (
-                <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
-                  <Popover2
-                    isOpen={isOpen}
-                    canEscapeKeyClose
-                    onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
-                    content={
-                      <div
-                        className={`flex flex-col gap-1.5 overflow-y-scroll whitespace-nowrap rounded-md border p-1 text-xs shadow-lg focus:outline-none max-h-44 min-w-full border-custom-border-200 bg-custom-background-90`}
-                      >
-                        <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={() => {
-                            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)}
-                >
-                  <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
-                </button>
-              </div>
-            )}
-          </div>
-
-          <button
-            type="button"
-            className="truncate text-custom-text-100 text-left cursor-pointer w-full text-[0.825rem]"
-            onClick={() => setIssuePeekOverview(true)}
-          >
-            {issue.name}
-          </button>
-        </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/cycles/gantt-chart/blocks.tsx

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

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

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

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

@@ -1,100 +0,0 @@
-import { FC } from "react";
-
-// hooks
-import { useChart } from "../hooks";
-// helpers
-import { ChartDraggable } from "../helpers/draggable";
-import { renderDateFormat } from "helpers/date-time.helper";
-// types
-import { IBlockUpdateData, IGanttBlock } from "../types";
-
-export const GanttChartBlocks: FC<{
-  itemsContainerWidth: number;
-  blocks: IGanttBlock[] | null;
-  BlockRender: React.FC<any>;
-  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  enableBlockLeftResize: boolean;
-  enableBlockRightResize: boolean;
-  enableBlockMove: boolean;
-}> = ({
-  itemsContainerWidth,
-  blocks,
-  BlockRender,
-  blockUpdateHandler,
-  enableBlockLeftResize,
-  enableBlockRightResize,
-  enableBlockMove,
-}) => {
-  const { activeBlock, dispatch } = useChart();
-
-  // update the active block on hover
-  const updateActiveBlock = (block: IGanttBlock | null) => {
-    dispatch({
-      type: "PARTIAL_UPDATE",
-      payload: {
-        activeBlock: block,
-      },
-    });
-  };
-
-  const handleChartBlockPosition = (
-    block: IGanttBlock,
-    totalBlockShifts: number,
-    dragDirection: "left" | "right" | "move"
-  ) => {
-    const originalStartDate = new Date(block.start_date);
-    const updatedStartDate = new Date(originalStartDate);
-
-    const originalTargetDate = new Date(block.target_date);
-    const updatedTargetDate = new Date(originalTargetDate);
-
-    // 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);
-    }
-
-    // call the block update handler with the updated dates
-    blockUpdateHandler(block.data, {
-      start_date: renderDateFormat(updatedStartDate),
-      target_date: renderDateFormat(updatedTargetDate),
-    });
-  };
-
-  return (
-    <div
-      className="relative z-[5] mt-[72px] h-full overflow-hidden overflow-y-auto"
-      style={{ width: `${itemsContainerWidth}px` }}
-    >
-      {blocks &&
-        blocks.length > 0 &&
-        blocks.map(
-          (block) =>
-            block.start_date &&
-            block.target_date && (
-              <div
-                key={`block-${block.id}`}
-                className={`h-11 ${activeBlock?.id === block.id ? "bg-custom-background-80" : ""}`}
-                onMouseEnter={() => updateActiveBlock(block)}
-                onMouseLeave={() => updateActiveBlock(null)}
-              >
-                <ChartDraggable
-                  block={block}
-                  BlockRender={BlockRender}
-                  handleBlock={(...args) => handleChartBlockPosition(block, ...args)}
-                  enableBlockLeftResize={enableBlockLeftResize}
-                  enableBlockRightResize={enableBlockRightResize}
-                  enableBlockMove={enableBlockMove}
-                />
-              </div>
-            )
-        )}
-    </div>
-  );
-};

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

@@ -1,316 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-// icons
-import { Icon } from "components/ui";
-// hooks
-import { useChart } from "../hooks";
-// types
-import { IGanttBlock } from "../types";
-
-type Props = {
-  block: IGanttBlock;
-  BlockRender: React.FC<any>;
-  handleBlock: (totalBlockShifts: number, dragDirection: "left" | "right" | "move") => void;
-  enableBlockLeftResize: boolean;
-  enableBlockRightResize: boolean;
-  enableBlockMove: boolean;
-};
-
-export const ChartDraggable: React.FC<Props> = ({
-  block,
-  BlockRender,
-  handleBlock,
-  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 resizableRef = useRef<HTMLDivElement>(null);
-
-  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;
-
-    if (!ganttContainer || !ganttSidebar || !scrollContainer) return 0;
-
-    const posFromLeft = e.clientX;
-    // manually scroll to left if reached the left end while dragging
-    if (
-      posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <=
-      SCROLL_THRESHOLD
-    ) {
-      if (e.movementX > 0) return 0;
-
-      delWidth = -5;
-
-      scrollContainer.scrollBy(delWidth, 0);
-    } else delWidth = e.movementX;
-
-    // manually scroll to right if reached the right end while dragging
-    const posFromRight = ganttContainer.getBoundingClientRect().right - e.clientX;
-    if (posFromRight <= SCROLL_THRESHOLD) {
-      if (e.movementX < 0) return 0;
-
-      delWidth = 5;
-
-      scrollContainer.scrollBy(delWidth, 0);
-    } else delWidth = e.movementX;
-
-    return delWidth;
-  };
-
-  // handle block resize from the left end
-  const handleBlockLeftResize = () => {
-    if (!currentViewData || !resizableRef.current || !block.position) return;
-
-    const resizableDiv = resizableRef.current;
-
-    const columnWidth = currentViewData.data.width;
-
-    const blockInitialWidth =
-      resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
-
-    let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
-    let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
-
-    const handleMouseMove = (e: MouseEvent) => {
-      let delWidth = 0;
-
-      delWidth = checkScrollEnd(e);
-
-      // calculate new width and update the initialMarginLeft using -=
-      const newWidth = Math.round((initialWidth -= delWidth) / columnWidth) * columnWidth;
-      // calculate new marginLeft and update the initial marginLeft to the newly calculated one
-      const newMarginLeft = initialMarginLeft - (newWidth - (block.position?.width ?? 0));
-      initialMarginLeft = newMarginLeft;
-
-      // block needs to be at least 1 column wide
-      if (newWidth < columnWidth) return;
-
-      resizableDiv.style.width = `${newWidth}px`;
-      resizableDiv.style.marginLeft = `${newMarginLeft}px`;
-
-      if (block.position) {
-        block.position.width = newWidth;
-        block.position.marginLeft = newMarginLeft;
-      }
-    };
-
-    // remove event listeners and call block handler with the updated start date
-    const handleMouseUp = () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-
-      const totalBlockShifts = Math.ceil(
-        (resizableDiv.clientWidth - blockInitialWidth) / columnWidth
-      );
-
-      handleBlock(totalBlockShifts, "left");
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  };
-
-  // handle block resize from the right end
-  const handleBlockRightResize = () => {
-    if (!currentViewData || !resizableRef.current || !block.position) return;
-
-    const resizableDiv = resizableRef.current;
-
-    const columnWidth = currentViewData.data.width;
-
-    const blockInitialWidth =
-      resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
-
-    let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
-
-    const handleMouseMove = (e: MouseEvent) => {
-      let delWidth = 0;
-
-      delWidth = checkScrollEnd(e);
-
-      // calculate new width and update the initialMarginLeft using +=
-      const newWidth = Math.round((initialWidth += delWidth) / columnWidth) * columnWidth;
-
-      // block needs to be at least 1 column wide
-      if (newWidth < columnWidth) return;
-
-      resizableDiv.style.width = `${Math.max(newWidth, 80)}px`;
-      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);
-
-      const totalBlockShifts = Math.ceil(
-        (resizableDiv.clientWidth - blockInitialWidth) / columnWidth
-      );
-
-      handleBlock(totalBlockShifts, "right");
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  };
-
-  // handle block x-axis move
-  const handleBlockMove = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    if (!enableBlockMove || !currentViewData || !resizableRef.current || !block.position) return;
-
-    e.preventDefault();
-    e.stopPropagation();
-
-    setIsMoving(true);
-
-    const resizableDiv = resizableRef.current;
-
-    const columnWidth = currentViewData.data.width;
-
-    const blockInitialMarginLeft = parseInt(resizableDiv.style.marginLeft);
-
-    let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
-
-    const handleMouseMove = (e: MouseEvent) => {
-      let delWidth = 0;
-
-      delWidth = checkScrollEnd(e);
-
-      // calculate new marginLeft and update the initial marginLeft using -=
-      const newMarginLeft = Math.round((initialMarginLeft += delWidth) / columnWidth) * columnWidth;
-
-      resizableDiv.style.marginLeft = `${newMarginLeft}px`;
-
-      if (block.position) block.position.marginLeft = newMarginLeft;
-    };
-
-    // remove event listeners and call block handler with the updated dates
-    const handleMouseUp = () => {
-      setIsMoving(false);
-
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-
-      const totalBlockShifts = Math.ceil(
-        (parseInt(resizableDiv.style.marginLeft) - blockInitialMarginLeft) / columnWidth
-      );
-
-      handleBlock(totalBlockShifts, "move");
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-  };
-
-  // scroll to a hidden block
-  const handleScrollToBlock = () => {
-    const scrollContainer = document.querySelector("#scroll-container") as HTMLElement;
-
-    if (!scrollContainer || !block.position) return;
-
-    // update container's scroll position to the block's position
-    scrollContainer.scrollLeft = block.position.marginLeft - 4;
-  };
-
-  // update block position from viewport's left end on scroll
-  useEffect(() => {
-    const block = resizableRef.current;
-
-    if (!block) return;
-
-    setPosFromLeft(block.getBoundingClientRect().left);
-  }, [scrollLeft]);
-
-  // check if block is hidden on either side
-  const isBlockHiddenOnLeft =
-    block.position?.marginLeft &&
-    block.position?.width &&
-    scrollLeft > block.position.marginLeft + block.position.width;
-  const isBlockHiddenOnRight = posFromLeft && window && posFromLeft > window.innerWidth;
-
-  return (
-    <>
-      {/* move to left side hidden block button */}
-      {isBlockHiddenOnLeft && (
-        <div
-          className="fixed ml-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
-          onClick={handleScrollToBlock}
-        >
-          <Icon iconName="arrow_back" />
-        </div>
-      )}
-      {/* 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
-        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/sidebar.tsx

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

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

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

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

@@ -1,80 +0,0 @@
-import React from "react";
-import { useRouter } from "next/router";
-// react-hook-form
-import { useForm, Controller } from "react-hook-form";
-// components
-import { SecondaryButton } from "components/ui";
-import { TipTapEditor } from "components/tiptap";
-// types
-import type { IIssueComment } from "types";
-
-const defaultValues: Partial<IIssueComment> = {
-  comment_json: "",
-  comment_html: "",
-};
-
-type Props = {
-  disabled?: boolean;
-  onSubmit: (data: IIssueComment) => Promise<void>;
-};
-
-export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
-  const {
-    control,
-    formState: { isSubmitting },
-    handleSubmit,
-    reset,
-    setValue,
-    watch,
-  } = useForm<IIssueComment>({ defaultValues });
-
-  const editorRef = React.useRef<any>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const handleAddComment = async (formData: IIssueComment) => {
-    if (!formData.comment_html || !formData.comment_json || isSubmitting) return;
-
-    await onSubmit(formData).then(() => {
-      reset(defaultValues);
-      editorRef.current?.clearEditor();
-    });
-  };
-
-  return (
-    <div>
-      <form onSubmit={handleSubmit(handleAddComment)}>
-        <div className="issue-comments-section">
-          <Controller
-            name="comment_html"
-            control={control}
-            render={({ field: { value, onChange } }) => (
-              <TipTapEditor
-                workspaceSlug={workspaceSlug as string}
-                ref={editorRef}
-                value={
-                  !value ||
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
-                    ? watch("comment_html")
-                    : value
-                }
-                customClassName="p-3 min-h-[50px] shadow-sm"
-                debouncedUpdatesEnabled={false}
-                onChange={(comment_json: Object, comment_html: string) => {
-                  onChange(comment_html);
-                  setValue("comment_json", comment_json);
-                }}
-              />
-            )}
-          />
-
-          <SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
-            {isSubmitting ? "Adding..." : "Comment"}
-          </SecondaryButton>
-        </div>
-      </form>
-    </div>
-  );
-};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,66 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import projectService from "services/project.service";
-// ui
-import { CustomSearchSelect } from "components/ui";
-import { AssigneesList, Avatar } from "components/ui/avatar";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-
-type Props = {
-  value: string[];
-  onChange: (val: string[]) => void;
-  disabled?: boolean;
-};
-
-export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const options = members?.map((member) => ({
-    value: member.member.id,
-    query: member.member.display_name,
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar user={member.member} />
-        {member.member.display_name}
-      </div>
-    ),
-  }));
-
-  return (
-    <CustomSearchSelect
-      value={value}
-      customButton={
-        <>
-          {value && value.length > 0 && Array.isArray(value) ? (
-            <div className="-my-0.5 flex items-center gap-2">
-              <AssigneesList userIds={value} length={3} showLength={false} />
-              <span className="text-custom-text-100 text-sm">{value.length} Assignees</span>
-            </div>
-          ) : (
-            <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

@@ -1,61 +0,0 @@
-import React from "react";
-
-// hooks
-import useEstimateOption from "hooks/use-estimate-option";
-// ui
-import { CustomSelect } from "components/ui";
-// icons
-import { PlayIcon } from "@heroicons/react/24/outline";
-
-type Props = {
-  value: number | null;
-  onChange: (val: number | null) => void;
-  disabled?: boolean;
-};
-
-export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
-  const { isEstimateActive, estimatePoints } = useEstimateOption();
-
-  if (!isEstimateActive) return null;
-
-  return (
-    <CustomSelect
-      value={value}
-      customButton={
-        <button
-          type="button"
-          className="flex items-center gap-1.5 !text-sm bg-custom-background-80 rounded px-2.5 py-0.5"
-        >
-          <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>
-              {point.value}
-            </>
-          </CustomSelect.Option>
-        ))}
-    </CustomSelect>
-  );
-};

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

@@ -1,53 +0,0 @@
-import React from "react";
-
-// ui
-import { CustomSelect } from "components/ui";
-// icons
-import { getPriorityIcon } from "components/icons/priority-icon";
-// constants
-import { PRIORITIES } from "constants/project";
-
-type Props = {
-  value: string | null;
-  onChange: (val: string) => void;
-  disabled?: boolean;
-};
-
-export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabled = false }) => (
-  <CustomSelect
-    customButton={
-      <button
-        type="button"
-        className={`flex items-center gap-1.5 text-left text-sm capitalize rounded px-2.5 py-0.5 ${
-          value === "urgent"
-            ? "border-red-500/20 bg-red-500/20 text-red-500"
-            : value === "high"
-            ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
-            : value === "medium"
-            ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
-            : value === "low"
-            ? "border-green-500/20 bg-green-500/20 text-green-500"
-            : "bg-custom-background-80 border-custom-border-200"
-        }`}
-      >
-        <span className="grid place-items-center -my-1">
-          {getPriorityIcon(value ?? "None", "!text-sm")}
-        </span>
-        <span>{value ?? "None"}</span>
-      </button>
-    }
-    value={value}
-    onChange={onChange}
-    optionsClassName="w-min"
-    disabled={disabled}
-  >
-    {PRIORITIES.map((option) => (
-      <CustomSelect.Option key={option} value={option} className="capitalize">
-        <>
-          {getPriorityIcon(option, "text-sm")}
-          {option ?? "None"}
-        </>
-      </CustomSelect.Option>
-    ))}
-  </CustomSelect>
-);

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

@@ -1,87 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import stateService from "services/state.service";
-// ui
-import { Spinner, CustomSelect } from "components/ui";
-// icons
-import { getStateGroupIcon } from "components/icons";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// constants
-import { STATES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  value: string;
-  onChange: (val: string) => void;
-  disabled?: boolean;
-};
-
-export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, inboxIssueId } = router.query;
-
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const states = getStatesList(stateGroups);
-
-  const selectedState = states?.find((s) => s.id === value);
-
-  return (
-    <CustomSelect
-      customButton={
-        <button type="button" className="bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
-          {selectedState ? (
-            <div className="flex items-center gap-1.5 text-left text-custom-text-100">
-              {getStateGroupIcon(
-                selectedState?.group ?? "backlog",
-                "14",
-                "14",
-                selectedState?.color ?? ""
-              )}
-              {addSpaceIfCamelCase(selectedState?.name ?? "")}
-            </div>
-          ) : inboxIssueId ? (
-            <div className="flex items-center gap-1.5 text-left text-custom-text-100">
-              {getStateGroupIcon("backlog", "14", "14", "#ff7700")}
-              Triage
-            </div>
-          ) : (
-            "None"
-          )}
-        </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/modules/gantt-chart/blocks.tsx

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

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

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

apps/app/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "tsconfig/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "jsx": "preserve"
-  }
-}

deploy/heroku/Dockerfile

@@ -1,4 +0,0 @@
-# Deploy the Plane image
-FROM makeplane/plane
-
-LABEL maintainer="engineering@plane.so"

heroku.yml

@@ -1,3 +0,0 @@
-build:
-  docker:
-    web: deploy/heroku/Dockerfile

package.json

@@ -1,22 +1,16 @@
 {
+  "name": "plane",
   "repository": "https://github.com/makeplane/plane.git",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [
-    "apps/*",
+    "web/",
+    "space/",
     "packages/*"
   ],
-  "scripts": {
-    "build": "turbo run build",
-    "dev": "turbo run dev",
-    "start": "turbo run start",
-    "lint": "turbo run lint",
-    "clean": "turbo run clean"
-  },
   "devDependencies": {
     "eslint-config-custom": "*",
-    "prettier": "latest",
-    "turbo": "latest"
+    "prettier": "latest"
   },
   "packageManager": "yarn@1.22.19"
 }

space/Dockerfile.space

@@ -0,0 +1,56 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /space
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* ./
+RUN yarn
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /space
+
+COPY . .
+
+COPY --from=deps /space/node_modules ./node_modules
+COPY --from=deps /space/yarn.lock .
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /space
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /space/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /space/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /space/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "space/server.js"]