Merge branch 'develop' of https://github.com/makeplane/plane into chore/update_theming

CONTRIBUTING.md

@@ -23,7 +23,6 @@ You can open a new issue with this [issue form](https://github.com/makeplane/pla
 - Python version 3.8+
 - Postgres version v14
 - Redis version v6.2.7
-- pnpm version 7.22.0
 
 ### Setup the project
 

README.md

@@ -61,14 +61,6 @@ chmod +x setup.sh
 
 > If running in a cloud env replace localhost with public facing IP address of the VM
 
-- Export Environment Variables
-
-```bash
-set -a
-source .env
-set +a
-```
-
 - Run Docker compose up
 
 ```bash

apiserver/plane/api/serializers/project.py

@@ -77,6 +77,13 @@ class ProjectSerializer(BaseSerializer):
         raise serializers.ValidationError(detail="Project Identifier is already taken")
 
 
+class ProjectLiteSerializer(BaseSerializer):
+    class Meta:
+        model = Project
+        fields = ["id", "identifier", "name"]
+        read_only_fields = fields
+
+
 class ProjectDetailSerializer(BaseSerializer):
     workspace = WorkSpaceSerializer(read_only=True)
     default_assignee = UserLiteSerializer(read_only=True)
@@ -94,7 +101,7 @@ class ProjectDetailSerializer(BaseSerializer):
 
 class ProjectMemberSerializer(BaseSerializer):
     workspace = WorkSpaceSerializer(read_only=True)
-    project = ProjectSerializer(read_only=True)
+    project = ProjectLiteSerializer(read_only=True)
     member = UserLiteSerializer(read_only=True)
 
     class Meta:
@@ -127,10 +134,3 @@ class ProjectFavoriteSerializer(BaseSerializer):
             "workspace",
             "user",
         ]
-
-
-class ProjectLiteSerializer(BaseSerializer):
-    class Meta:
-        model = Project
-        fields = ["id", "identifier", "name"]
-        read_only_fields = fields

apiserver/plane/api/urls.py

@@ -295,7 +295,6 @@ urlpatterns = [
             {
                 "delete": "destroy",
                 "get": "retrieve",
-                "get": "retrieve",
             }
         ),
         name="workspace",

apiserver/plane/api/views/issue.py

@@ -256,7 +256,7 @@ class IssueViewSet(BaseViewSet):
             return Response(issues, status=status.HTTP_200_OK)
 
         except Exception as e:
-            capture_exception(e)
+            print(e)
             return Response(
                 {"error": "Something went wrong please try again later"},
                 status=status.HTTP_400_BAD_REQUEST,

apiserver/plane/api/views/project.py

@@ -259,7 +259,7 @@ class ProjectViewSet(BaseViewSet):
                         group="backlog",
                         description="Default state for managing all Inbox Issues",
                         project_id=pk,
-                        color="#ff7700"
+                        color="#ff7700",
                     )
 
                 return Response(serializer.data, status=status.HTTP_200_OK)
@@ -550,45 +550,47 @@ class AddMemberToProjectEndpoint(BaseAPIView):
 
     def post(self, request, slug, project_id):
         try:
-            member_id = request.data.get("member_id", False)
-            role = request.data.get("role", False)
+            members = request.data.get("members", [])
 
-            if not member_id or not role:
+            # get the project
+            project = Project.objects.get(pk=project_id, workspace__slug=slug)
+
+            if not len(members):
                 return Response(
-                    {"error": "Member ID and role is required"},
+                    {"error": "Atleast one member is required"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-            # Check if the user is a member in the workspace
-            if not WorkspaceMember.objects.filter(
-                workspace__slug=slug, member_id=member_id
-            ).exists():
-                # TODO: Update this error message - nk
-                return Response(
-                    {
-                        "error": "User is not a member of the workspace. Invite the user to the workspace to add him to project"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
+            project_members = ProjectMember.objects.bulk_create(
+                [
+                    ProjectMember(
+                        member_id=member.get("member_id"),
+                        role=member.get("role", 10),
+                        project_id=project_id,
+                        workspace_id=project.workspace_id,
+                    )
+                    for member in members
+                ],
+                batch_size=10,
+                ignore_conflicts=True,
             )
 
-            # Check if the user is already member of project
-            if ProjectMember.objects.filter(
-                project=project_id, member_id=member_id
-            ).exists():
-                return Response(
-                    {"error": "User is already a member of the project"},
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-            # Add the user to project
-            project_member = ProjectMember.objects.create(
-                project_id=project_id, member_id=member_id, role=role
-            )
-
-            serializer = ProjectMemberSerializer(project_member)
+            serializer = ProjectMemberSerializer(project_members, many=True)
 
             return Response(serializer.data, status=status.HTTP_201_CREATED)
-
+        except KeyError:
+            return Response(
+                {"error": "Incorrect data sent"}, status=status.HTTP_400_BAD_REQUEST
+            )
+        except Project.DoesNotExist:
+            return Response(
+                {"error": "Project does not exist"}, status=status.HTTP_400_BAD_REQUEST
+            )
+        except IntegrityError:
+            return Response(
+                {"error": "User not member of the workspace"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
         except Exception as e:
             capture_exception(e)
             return Response(

apiserver/plane/api/views/workspace.py

@@ -3,6 +3,7 @@ import jwt
 from datetime import date, datetime
 from dateutil.relativedelta import relativedelta
 from uuid import uuid4
+
 # Django imports
 from django.db import IntegrityError
 from django.db.models import Prefetch
@@ -21,6 +22,7 @@ from django.db.models import (
 )
 from django.db.models.functions import ExtractWeek, Cast, ExtractDay
 from django.db.models.fields import DateField
+from django.contrib.auth.hashers import make_password
 
 # Third party modules
 from rest_framework import status
@@ -93,14 +95,33 @@ class WorkSpaceViewSet(BaseViewSet):
             .annotate(count=Func(F("id"), function="Count"))
             .values("count")
         )
-        return self.filter_queryset(
-            super().get_queryset().select_related("owner")
-        ).order_by("name").filter(workspace_member__member=self.request.user).annotate(total_members=member_count).annotate(total_issues=issue_count)
+        return (
+            self.filter_queryset(super().get_queryset().select_related("owner"))
+            .order_by("name")
+            .filter(workspace_member__member=self.request.user)
+            .annotate(total_members=member_count)
+            .annotate(total_issues=issue_count)
+        )
 
     def create(self, request):
         try:
             serializer = WorkSpaceSerializer(data=request.data)
 
+            slug = request.data.get("slug", False)
+            name = request.data.get("name", False)
+
+            if not name or not slug:
+                return Response(
+                    {"error": "Both name and slug are required"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            if len(name) > 80 or len(slug) > 48:
+                return Response(
+                    {"error": "The maximum length for name is 80 and for slug is 48"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
             if serializer.is_valid():
                 serializer.save(owner=request.user)
                 # Create Workspace member
@@ -160,14 +181,20 @@ class UserWorkSpacesEndpoint(BaseAPIView):
             )
 
             workspace = (
+                (
                     Workspace.objects.prefetch_related(
-                    Prefetch("workspace_member", queryset=WorkspaceMember.objects.all())
+                        Prefetch(
+                            "workspace_member", queryset=WorkspaceMember.objects.all()
+                        )
                     )
                     .filter(
                         workspace_member__member=request.user,
                     )
                     .select_related("owner")
-            ).annotate(total_members=member_count).annotate(total_issues=issue_count)
+                )
+                .annotate(total_members=member_count)
+                .annotate(total_issues=issue_count)
+            )
 
             serializer = WorkSpaceSerializer(self.filter_queryset(workspace), many=True)
             return Response(serializer.data, status=status.HTTP_200_OK)
@@ -216,9 +243,20 @@ class InviteWorkspaceEndpoint(BaseAPIView):
                 )
 
             # check for role level
-            requesting_user = WorkspaceMember.objects.get(workspace__slug=slug, member=request.user)
-            if len([email for email in emails if int(email.get("role", 10)) > requesting_user.role]):
-                return Response({"error": "You cannot invite a user with higher role"}, status=status.HTTP_400_BAD_REQUEST)
+            requesting_user = WorkspaceMember.objects.get(
+                workspace__slug=slug, member=request.user
+            )
+            if len(
+                [
+                    email
+                    for email in emails
+                    if int(email.get("role", 10)) > requesting_user.role
+                ]
+            ):
+                return Response(
+                    {"error": "You cannot invite a user with higher role"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
 
             workspace = Workspace.objects.get(slug=slug)
 
@@ -276,14 +314,18 @@ class InviteWorkspaceEndpoint(BaseAPIView):
 
             # create the user if signup is disabled
             if settings.DOCKERIZED and not settings.ENABLE_SIGNUP:
-                _ = User.objects.bulk_create([
+                _ = User.objects.bulk_create(
+                    [
                         User(
-                        email=email.get("email"),
-                        password=str(uuid4().hex),
-                        is_password_autoset=True
+                            username=str(uuid4().hex),
+                            email=invitation.email,
+                            password=make_password(uuid4().hex),
+                            is_password_autoset=True,
+                        )
+                        for invitation in workspace_invitations
+                    ],
+                    batch_size=100,
                 )
-                     for email in emails
-                ], batch_size=100)
 
             for invitation in workspace_invitations:
                 workspace_invitation.delay(
@@ -400,6 +442,30 @@ class WorkspaceInvitationsViewset(BaseViewSet):
             .select_related("workspace", "workspace__owner", "created_by")
         )
 
+    def destroy(self, request, slug, pk):
+        try:
+            workspace_member_invite = WorkspaceMemberInvite.objects.get(
+                pk=pk, workspace__slug=slug
+            )
+            # delete the user if signup is disabled
+            if settings.DOCKERIZED and not settings.ENABLE_SIGNUP:
+                user = User.objects.filter(email=workspace_member_invite.email).first()
+                if user is not None:
+                    user.delete()
+            workspace_member_invite.delete()
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        except WorkspaceMemberInvite.DoesNotExist:
+            return Response(
+                {"error": "Workspace member invite does not exists"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        except Exception as e:
+            capture_exception(e)
+            return Response(
+                {"error": "Something went wrong please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
 
 class UserWorkspaceInvitationsEndpoint(BaseViewSet):
     serializer_class = WorkSpaceMemberInviteSerializer
@@ -865,7 +931,9 @@ class UserWorkspaceDashboardEndpoint(BaseAPIView):
             )
 
             state_distribution = (
-                Issue.issue_objects.filter(workspace__slug=slug, assignees__in=[request.user])
+                Issue.issue_objects.filter(
+                    workspace__slug=slug, assignees__in=[request.user]
+                )
                 .annotate(state_group=F("state__group"))
                 .values("state_group")
                 .annotate(state_count=Count("state_group"))

apiserver/plane/db/migrations/0035_auto_20230704_2225.py

@@ -0,0 +1,42 @@
+# Generated by Django 3.2.19 on 2023-07-04 16:55
+
+from django.db import migrations, models
+
+
+def update_company_organization_size(apps, schema_editor):
+    Model = apps.get_model("db", "Workspace")
+    updated_size = []
+    for obj in Model.objects.all():
+        obj.organization_size = str(obj.company_size)
+        updated_size.append(obj)
+
+    Model.objects.bulk_update(updated_size, ["organization_size"], batch_size=100)
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("db", "0034_auto_20230628_1046"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="workspace",
+            name="organization_size",
+            field=models.CharField(default="2-10", max_length=20),
+        ),
+        migrations.RunPython(update_company_organization_size),
+        migrations.AlterField(
+            model_name="workspace",
+            name="name",
+            field=models.CharField(max_length=80, verbose_name="Workspace Name"),
+        ),
+        migrations.AlterField(
+            model_name="workspace",
+            name="slug",
+            field=models.SlugField(max_length=48, unique=True),
+        ),
+        migrations.RemoveField(
+            model_name="workspace",
+            name="company_size",
+        ),
+    ]

apiserver/plane/db/migrations/0036_alter_workspace_organization_size.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.19 on 2023-07-05 07:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0035_auto_20230704_2225'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='workspace',
+            name='organization_size',
+            field=models.CharField(max_length=20),
+        ),
+    ]

apiserver/plane/db/models/workspace.py

@@ -15,15 +15,15 @@ ROLE_CHOICES = (
 
 
 class Workspace(BaseModel):
-    name = models.CharField(max_length=255, verbose_name="Workspace Name")
+    name = models.CharField(max_length=80, verbose_name="Workspace Name")
     logo = models.URLField(verbose_name="Logo", blank=True, null=True)
     owner = models.ForeignKey(
         settings.AUTH_USER_MODEL,
         on_delete=models.CASCADE,
         related_name="owner_workspace",
     )
-    slug = models.SlugField(max_length=100, db_index=True, unique=True)
-    company_size = models.PositiveIntegerField(default=10)
+    slug = models.SlugField(max_length=48, db_index=True, unique=True)
+    organization_size = models.CharField(max_length=20)
 
     def __str__(self):
         """Return name of the Workspace"""

apiserver/plane/settings/local.py

@@ -63,6 +63,7 @@ if os.environ.get("SENTRY_DSN", False):
         send_default_pii=True,
         environment="local",
         traces_sample_rate=0.7,
+        profiles_sample_rate=1.0,
     )
 
 REDIS_HOST = "localhost"

apiserver/plane/settings/production.py

@@ -13,9 +13,7 @@ from sentry_sdk.integrations.redis import RedisIntegration
 from .common import *  # noqa
 
 # Database
-DEBUG = int(os.environ.get(
-    "DEBUG", 0
-))  == 1
+DEBUG = int(os.environ.get("DEBUG", 0)) == 1
 
 DATABASES = {
     "default": {
@@ -84,11 +82,12 @@ if bool(os.environ.get("SENTRY_DSN", False)):
         traces_sample_rate=1,
         send_default_pii=True,
         environment="production",
+        profiles_sample_rate=1.0,
     )
 
 if DOCKERIZED and USE_MINIO:
     INSTALLED_APPS += ("storages",)
-    DEFAULT_FILE_STORAGE = "storages.backends.s3boto3.S3Boto3Storage"
+    STORAGES = {"default": {"BACKEND": "storages.backends.s3boto3.S3Boto3Storage"}}
     # The AWS access key to use.
     AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID", "access-key")
     # The AWS secret access key to use.
@@ -96,7 +95,9 @@ if DOCKERIZED and USE_MINIO:
     # The name of the bucket to store files in.
     AWS_STORAGE_BUCKET_NAME = os.environ.get("AWS_S3_BUCKET_NAME", "uploads")
     # The full URL to the S3 endpoint. Leave blank to use the default region URL.
-    AWS_S3_ENDPOINT_URL = os.environ.get("AWS_S3_ENDPOINT_URL",  "http://plane-minio:9000")
+    AWS_S3_ENDPOINT_URL = os.environ.get(
+        "AWS_S3_ENDPOINT_URL", "http://plane-minio:9000"
+    )
     # Default permissions
     AWS_DEFAULT_ACL = "public-read"
     AWS_QUERYSTRING_AUTH = False

apiserver/plane/settings/staging.py

@@ -66,6 +66,7 @@ sentry_sdk.init(
     traces_sample_rate=1,
     send_default_pii=True,
     environment="staging",
+    profiles_sample_rate=1.0,
 )
 
 # The AWS region to connect to.

apiserver/plane/urls.py

@@ -3,11 +3,10 @@
 """
 
 # from django.contrib import admin
-from django.urls import path
+from django.urls import path, include, re_path
 from django.views.generic import TemplateView
 
 from django.conf import settings
-from django.conf.urls import include, url, static
 
 # from django.conf.urls.static import static
 
@@ -18,11 +17,10 @@ urlpatterns = [
     path("", include("plane.web.urls")),
 ]
 
-urlpatterns = urlpatterns + static.static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
 
 if settings.DEBUG:
     import debug_toolbar
 
     urlpatterns = [
-        url(r"^__debug__/", include(debug_toolbar.urls)),
+        re_path(r"^__debug__/", include(debug_toolbar.urls)),
     ] + urlpatterns

apiserver/plane/utils/issue_filters.py

@@ -166,16 +166,16 @@ def filter_target_date(params, filter, method):
             for query in target_dates:
                 target_date_query = query.split(";")
                 if len(target_date_query) == 2 and "after" in target_date_query:
-                    filter["target_date__gte"] = target_date_query[0]
+                    filter["target_date__gt"] = target_date_query[0]
                 else:
-                    filter["target_date__lte"] = target_date_query[0]
+                    filter["target_date__lt"] = target_date_query[0]
     else:
         if params.get("target_date", None) and len(params.get("target_date")):
             for query in params.get("target_date"):
                 if query.get("timeline", "after") == "after":
-                    filter["target_date__gte"] = query.get("datetime")
+                    filter["target_date__gt"] = query.get("datetime")
                 else:
-                    filter["target_date__lte"] = query.get("datetime")
+                    filter["target_date__lt"] = query.get("datetime")
 
     return filter
 

apiserver/requirements/base.txt

@@ -1,31 +1,31 @@
 # base requirements
 
-Django==3.2.19
+Django==4.2.3
 django-braces==1.15.0
-django-taggit==3.1.0
-psycopg2==2.9.5
-django-oauth-toolkit==2.2.0
-mistune==2.0.4
+django-taggit==4.0.0
+psycopg2==2.9.6
+django-oauth-toolkit==2.3.0
+mistune==3.0.1
 djangorestframework==3.14.0
-redis==4.5.4
+redis==4.6.0
 django-nested-admin==4.0.2
-django-cors-headers==3.13.0
-whitenoise==6.3.0
-django-allauth==0.52.0
-faker==13.4.0
-django-filter==22.1
+django-cors-headers==4.1.0
+whitenoise==6.5.0
+django-allauth==0.54.0
+faker==18.11.2
+django-filter==23.2
 jsonmodels==2.6.0
 djangorestframework-simplejwt==5.2.2
-sentry-sdk==1.14.0
-django-s3-storage==0.13.11
+sentry-sdk==1.27.0
+django-s3-storage==0.14.0
 django-crum==0.7.9
 django-guardian==2.4.0
 dj_rest_auth==2.2.5
-google-auth==2.16.0
-google-api-python-client==2.75.0
-django-redis==5.2.0
-uvicorn==0.20.0
+google-auth==2.21.0
+google-api-python-client==2.92.0
+django-redis==5.3.0
+uvicorn==0.22.0
 channels==4.0.0
-openai==0.27.2
-slack-sdk==3.20.2
-celery==5.2.7
+openai==0.27.8
+slack-sdk==3.21.3
+celery==5.3.1

apiserver/requirements/local.txt

@@ -1,3 +1,3 @@
 -r base.txt
 
-django-debug-toolbar==3.8.1
+django-debug-toolbar==4.1.0

apiserver/requirements/production.txt

@@ -1,12 +1,11 @@
 -r base.txt
 
-dj-database-url==1.2.0
+dj-database-url==2.0.0
 gunicorn==20.1.0
-whitenoise==6.3.0
+whitenoise==6.5.0
 django-storages==1.13.2
-boto3==1.26.136
-django-anymail==9.0
-twilio==7.16.2
-django-debug-toolbar==3.8.1
+boto3==1.27.0
+django-anymail==10.0
+django-debug-toolbar==4.1.0
 gevent==22.10.2
 psycogreen==1.0.2

apps/app/Dockerfile.web

@@ -20,7 +20,7 @@ ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000
 COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
 COPY --from=builder /app/out/yarn.lock ./yarn.lock
-RUN yarn install
+RUN yarn install --network-timeout 500000
 
 # Build the project
 COPY --from=builder /app/out/full/ .

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

@@ -57,18 +57,6 @@ export const BoardHeader: React.FC<Props> = ({
       : null
   );
 
-  let bgColor = "#000000";
-  if (selectedGroup === "state") bgColor = currentState?.color ?? "#000000";
-
-  if (selectedGroup === "priority")
-    groupTitle === "high"
-      ? (bgColor = "#dc2626")
-      : groupTitle === "medium"
-      ? (bgColor = "#f97316")
-      : groupTitle === "low"
-      ? (bgColor = "#22c55e")
-      : (bgColor = "#ff0000");
-
   const getGroupTitle = () => {
     let title = addSpaceIfCamelCase(groupTitle);
 
@@ -96,7 +84,8 @@ export const BoardHeader: React.FC<Props> = ({
 
     switch (selectedGroup) {
       case "state":
-        icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
+        icon =
+          currentState && getStateGroupIcon(currentState.group, "16", "16", currentState.color);
         break;
       case "priority":
         icon = getPriorityIcon(groupTitle, "text-lg");

apps/app/components/core/board-view/single-issue.tsx

@@ -173,6 +173,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
         .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData, user)
         .then(() => {
           mutate(fetchKey);
+
+          if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
+          if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
         });
     },
     [
@@ -368,7 +371,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
                 isNotAllowed={isNotAllowed}
-                tooltipPosition="left"
                 user={user}
                 selfPositioned
               />
@@ -378,7 +380,6 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
                 isNotAllowed={isNotAllowed}
-                tooltipPosition="left"
                 user={user}
                 selfPositioned
               />

apps/app/components/core/calendar-view/calendar.tsx

@@ -170,7 +170,7 @@ export const CalendarView: React.FC<Props> = ({
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
 
   return calendarIssues ? (
-    <div className="h-full">
+    <div className="h-full overflow-y-auto">
       <DragDropContext onDragEnd={onDragEnd}>
         <div className="h-full rounded-lg p-8 text-brand-secondary">
           <CalendarHeader

apps/app/components/core/feeds.tsx

@@ -19,7 +19,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
 // helpers
-import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
 import RemirrorRichTextEditor from "components/rich-text-editor";
@@ -187,7 +187,7 @@ export const Feeds: React.FC<any> = ({ activities }) => (
             activity.new_value && activity.new_value !== ""
               ? activity.new_value
               : activity.old_value;
-          value = renderShortNumericDateFormat(date as string);
+          value = renderShortDateWithYearFormat(date as string);
         } else if (activity.field === "description") {
           value = "description";
         } else if (activity.field === "attachment") {

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

@@ -0,0 +1,186 @@
+import { Fragment } from "react";
+
+import { useRouter } from "next/router";
+
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+// react-datepicker
+import DatePicker from "react-datepicker";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
+// components
+import { DueDateFilterSelect } from "./due-date-filter-select";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import { XMarkIcon } from "@heroicons/react/20/solid";
+// helpers
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+type TFormValues = {
+  filterType: "before" | "after" | "range";
+  date1: Date;
+  date2: Date;
+};
+
+const defaultValues: TFormValues = {
+  filterType: "range",
+  date1: new Date(),
+  date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
+};
+
+export const DueDateFilterModal: React.FC<Props> = ({ isOpen, handleClose }) => {
+  const { filters, setFilters } = useIssuesView();
+
+  const router = useRouter();
+  const { viewId } = router.query;
+
+  const { handleSubmit, watch, control } = useForm<TFormValues>({
+    defaultValues,
+  });
+
+  const handleFormSubmit = (formData: TFormValues) => {
+    const { filterType, date1, date2 } = formData;
+
+    if (filterType === "range") {
+      setFilters(
+        { target_date: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`] },
+        !Boolean(viewId)
+      );
+    } else {
+      const filteredArray = filters?.target_date?.filter((item) => {
+        if (item?.includes(filterType)) return false;
+
+        return true;
+      });
+
+      const filterOne = filteredArray && filteredArray?.length > 0 ? filteredArray[0] : null;
+      if (filterOne)
+        setFilters(
+          { target_date: [filterOne, `${renderDateFormat(date1)};${filterType}`] },
+          !Boolean(viewId)
+        );
+      else
+        setFilters(
+          {
+            target_date: [`${renderDateFormat(date1)};${filterType}`],
+          },
+          !Boolean(viewId)
+        );
+    }
+    handleClose();
+  };
+
+  const isInvalid =
+    watch("filterType") === "range" ? new Date(watch("date1")) > new Date(watch("date2")) : false;
+
+  const nextDay = new Date(watch("date1"));
+  nextDay.setDate(nextDay.getDate() + 1);
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={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-brand-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+        <div className="fixed inset-0 z-20 flex w-full justify-center overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
+            <Transition.Child
+              as={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="relative flex transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+                <form className="space-y-4" onSubmit={handleSubmit(handleFormSubmit)}>
+                  <div className="flex w-full justify-between">
+                    <Controller
+                      control={control}
+                      name="filterType"
+                      render={({ field: { value, onChange } }) => (
+                        <DueDateFilterSelect value={value} onChange={onChange} />
+                      )}
+                    />
+                    <XMarkIcon
+                      className="border-base h-4 w-4 cursor-pointer"
+                      onClick={handleClose}
+                    />
+                  </div>
+                  <div className="flex w-full justify-between gap-4">
+                    <Controller
+                      control={control}
+                      name="date1"
+                      render={({ field: { value, onChange } }) => (
+                        <DatePicker
+                          selected={value}
+                          onChange={(val) => onChange(val)}
+                          dateFormat="dd-MM-yyyy"
+                          calendarClassName="h-full"
+                          inline
+                        />
+                      )}
+                    />
+                    {watch("filterType") === "range" && (
+                      <Controller
+                        control={control}
+                        name="date2"
+                        render={({ field: { value, onChange } }) => (
+                          <DatePicker
+                            selected={value}
+                            onChange={onChange}
+                            dateFormat="dd-MM-yyyy"
+                            calendarClassName="h-full"
+                            minDate={nextDay}
+                            inline
+                          />
+                        )}
+                      />
+                    )}
+                  </div>
+                  {watch("filterType") === "range" && (
+                    <h6 className="text-xs flex items-center gap-1">
+                      <span className="text-brand-secondary">After:</span>
+                      <span>{renderShortDateWithYearFormat(watch("date1"))}</span>
+                      <span className="text-brand-secondary ml-1">Before:</span>
+                      {!isInvalid && <span>{renderShortDateWithYearFormat(watch("date2"))}</span>}
+                    </h6>
+                  )}
+                  <div className="flex justify-end gap-4">
+                    <SecondaryButton className="flex items-center gap-2" onClick={handleClose}>
+                      Cancel
+                    </SecondaryButton>
+                    <PrimaryButton
+                      type="submit"
+                      className="flex items-center gap-2"
+                      disabled={isInvalid}
+                    >
+                      Apply
+                    </PrimaryButton>
+                  </div>
+                </form>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

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

@@ -0,0 +1,58 @@
+import React from "react";
+
+// ui
+import { CustomSelect } from "components/ui";
+// icons
+import { CalendarBeforeIcon, CalendarAfterIcon, CalendarMonthIcon } from "components/icons";
+// fetch-keys
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+type DueDate = {
+  name: string;
+  value: string;
+  icon: any;
+};
+
+const dueDateRange: DueDate[] = [
+  {
+    name: "Due date before",
+    value: "before",
+    icon: <CalendarBeforeIcon className="h-4 w-4 " />,
+  },
+  {
+    name: "Due date after",
+    value: "after",
+    icon: <CalendarAfterIcon className="h-4 w-4 " />,
+  },
+  {
+    name: "Due date range",
+    value: "range",
+    icon: <CalendarMonthIcon className="h-4 w-4 " />,
+  },
+];
+
+export const DueDateFilterSelect: React.FC<Props> = ({ value, onChange }) => (
+  <CustomSelect
+    value={value}
+    label={
+      <div className="flex items-center gap-2 text-xs">
+        {dueDateRange.find((item) => item.value === value)?.icon}
+        <span>{dueDateRange.find((item) => item.value === value)?.name}</span>
+      </div>
+    }
+    onChange={onChange}
+  >
+    {dueDateRange.map((option, index) => (
+      <CustomSelect.Option key={index} value={option.value}>
+        <>
+          <span>{option.icon}</span>
+          {option.name}
+        </>
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
+);

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

@@ -17,6 +17,7 @@ import stateService from "services/state.service";
 // types
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
 import { IIssueFilterOptions } from "types";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
 export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
   const router = useRouter();
@@ -60,7 +61,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
               className="flex items-center gap-x-2 rounded-full border border-brand-base bg-brand-surface-2 px-2 py-1"
             >
               <span className="capitalize text-brand-secondary">
-                {replaceUnderscoreIfSnakeCase(key)}:
+                {key === "target_date" ? "Due Date" : replaceUnderscoreIfSnakeCase(key)}:
               </span>
               {filters[key as keyof IIssueFilterOptions] === null ||
               (filters[key as keyof IIssueFilterOptions]?.length ?? 0) <= 0 ? (
@@ -299,6 +300,51 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
                         <XMarkIcon className="h-3 w-3" />
                       </button>
                     </div>
+                  ) : key === "target_date" ? (
+                    <div className="flex flex-wrap items-center gap-1">
+                      {filters.target_date?.map((date: string) => {
+                        if (filters.target_date.length <= 0) return null;
+
+                        const splitDate = date.split(";");
+
+                        return (
+                          <div
+                            key={date}
+                            className="inline-flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-base px-1 py-0.5"
+                          >
+                            <div className="h-1.5 w-1.5 rounded-full" />
+                            <span className="capitalize">
+                              {splitDate[1]} {renderShortDateWithYearFormat(splitDate[0])}
+                            </span>
+                            <span
+                              className="cursor-pointer"
+                              onClick={() =>
+                                setFilters(
+                                  {
+                                    target_date: filters.target_date?.filter(
+                                      (d: any) => d !== date
+                                    ),
+                                  },
+                                  !Boolean(viewId)
+                                )
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </span>
+                          </div>
+                        );
+                      })}
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setFilters({
+                            target_date: null,
+                          })
+                        }
+                      >
+                        <XMarkIcon className="h-3 w-3" />
+                      </button>
+                    </div>
                   ) : (
                     (filters[key as keyof IIssueFilterOptions] as any)?.join(", ")
                   )}
@@ -332,6 +378,7 @@ export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
               assignees: null,
               labels: null,
               created_by: null,
+              target_date: null,
             })
           }
           className="flex items-center gap-x-1 rounded-full border border-brand-base bg-brand-surface-2 px-3 py-1.5 text-xs"

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

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

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

@@ -2,11 +2,12 @@ import React from "react";
 
 import { useRouter } from "next/router";
 
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
 import useIssuesView from "hooks/use-issues-view";
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
+import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { SelectFilters } from "components/views";
 // ui
@@ -17,15 +18,14 @@ import {
   ListBulletIcon,
   Squares2X2Icon,
   CalendarDaysIcon,
-  ChartBarIcon,
 } from "@heroicons/react/24/outline";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
 import { Properties } from "types";
 // constants
 import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
-import useEstimateOption from "hooks/use-estimate-option";
 
 export const IssuesFilterView: React.FC = () => {
   const router = useRouter();
@@ -109,22 +109,30 @@ export const IssuesFilterView: React.FC = () => {
         onSelect={(option) => {
           const key = option.key as keyof typeof filters;
 
+          if (key === "target_date") {
+            const valueExists = checkIfArraysHaveSameElements(
+              filters.target_date ?? [],
+              option.value
+            );
+
+            setFilters({
+              target_date: valueExists ? null : option.value,
+            });
+          } else {
             const valueExists = filters[key]?.includes(option.value);
 
-          if (valueExists) {
+            if (valueExists)
               setFilters(
                 {
-                ...(filters ?? {}),
                   [option.key]: ((filters[key] ?? []) as any[])?.filter(
                     (val) => val !== option.value
                   ),
                 },
                 !Boolean(viewId)
               );
-          } else {
+            else
               setFilters(
                 {
-                ...(filters ?? {}),
                   [option.key]: [...((filters[key] ?? []) as any[]), option.value],
                 },
                 !Boolean(viewId)
@@ -262,9 +270,9 @@ export const IssuesFilterView: React.FC = () => {
                         if (key === "estimate" && !isEstimateActive) return null;
 
                         if (
-                          (issueView === "spreadsheet" && key === "sub_issue_count") ||
-                          key === "attachment_count" ||
-                          key === "link"
+                          (issueView === "spreadsheet" && key === "attachment_count") ||
+                          (issueView === "spreadsheet" && key === "link") ||
+                          (issueView === "spreadsheet" && key === "sub_issue_count")
                         )
                           return null;
 

apps/app/components/core/index.ts

@@ -1,17 +1,12 @@
 export * from "./board-view";
 export * from "./calendar-view";
+export * from "./filters";
 export * from "./gantt-chart-view";
 export * from "./list-view";
+export * from "./modals";
 export * from "./spreadsheet-view";
 export * from "./sidebar";
-export * from "./bulk-delete-issues-modal";
-export * from "./existing-issues-list-modal";
-export * from "./filters-list";
-export * from "./gpt-assistant-modal";
-export * from "./image-upload-modal";
-export * from "./issues-view-filter";
 export * from "./issues-view";
-export * from "./link-modal";
 export * from "./image-picker-popover";
 export * from "./feeds";
 export * from "./theme-switch";

apps/app/components/core/list-view/all-lists.tsx

@@ -38,7 +38,7 @@ export const AllLists: React.FC<Props> = ({
   return (
     <>
       {groupedByIssues && (
-        <div>
+        <div className="h-full overflow-y-auto">
           {Object.keys(groupedByIssues).map((singleGroup) => {
             const currentState =
               selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;

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

@@ -147,6 +147,9 @@ export const SingleListIssue: React.FC<Props> = ({
         .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData, user)
         .then(() => {
           mutate(fetchKey);
+
+          if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
+          if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
         });
     },
     [

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

@@ -33,7 +33,6 @@ import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
 type Props = {
   type?: "issue" | "cycle" | "module";
   currentState?: IState | null;
-  bgColor?: string;
   groupTitle: string;
   groupedByIssues: {
     [key: string]: IIssue[];
@@ -53,7 +52,6 @@ type Props = {
 export const SingleList: React.FC<Props> = ({
   type,
   currentState,
-  bgColor,
   groupTitle,
   groupedByIssues,
   selectedGroup,
@@ -113,7 +111,8 @@ export const SingleList: React.FC<Props> = ({
 
     switch (selectedGroup) {
       case "state":
-        icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
+        icon =
+          currentState && getStateGroupIcon(currentState.group, "16", "16", currentState.color);
         break;
       case "priority":
         icon = getPriorityIcon(groupTitle, "text-lg");

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

@@ -0,0 +1,5 @@
+export * from "./bulk-delete-issues-modal";
+export * from "./existing-issues-list-modal";
+export * from "./gpt-assistant-modal";
+export * from "./image-upload-modal";
+export * from "./link-modal";

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

@@ -30,7 +30,9 @@ import useToast from "hooks/use-toast";
 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,
@@ -43,6 +45,7 @@ import { copyTextToClipboard } from "helpers/string.helper";
 
 type Props = {
   issue: IIssue;
+  index: number;
   expanded: boolean;
   handleToggleExpand: (issueId: string) => void;
   properties: Properties;
@@ -57,6 +60,7 @@ type Props = {
 
 export const SingleSpreadsheetIssue: React.FC<Props> = ({
   issue,
+  index,
   expanded,
   handleToggleExpand,
   properties,
@@ -140,6 +144,9 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             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) => {
@@ -165,6 +172,8 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
   const paddingLeft = `${nestingLevel * 68}px`;
 
+  const tooltipPosition = index === 0 ? "bottom" : "top";
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -241,16 +250,16 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             )}
           </div>
 
-          <div className="h-6 w-6 flex justify-center items-center">
           {issue.sub_issues_count > 0 && (
+            <div className="h-6 w-6 flex justify-center items-center">
               <button
                 className="h-5 w-5 hover:bg-brand-surface-1 hover:text-brand-base rounded-sm cursor-pointer"
                 onClick={() => handleToggleExpand(issue.id)}
               >
                 <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
               </button>
-            )}
             </div>
+          )}
         </div>
 
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
@@ -265,6 +274,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            tooltipPosition={tooltipPosition}
             customButton
             user={user}
             isNotAllowed={isNotAllowed}
@@ -277,6 +287,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            tooltipPosition={tooltipPosition}
             noBorder
             user={user}
             isNotAllowed={isNotAllowed}
@@ -289,6 +300,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            tooltipPosition={tooltipPosition}
             customButton
             user={user}
             isNotAllowed={isNotAllowed}
@@ -301,6 +313,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            tooltipPosition={tooltipPosition}
             customButton
             user={user}
             isNotAllowed={isNotAllowed}
@@ -313,6 +326,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           <ViewDueDateSelect
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
+            tooltipPosition={tooltipPosition}
             noBorder
             user={user}
             isNotAllowed={isNotAllowed}
@@ -325,6 +339,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            tooltipPosition={tooltipPosition}
             user={user}
             isNotAllowed={isNotAllowed}
           />

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

@@ -10,6 +10,7 @@ import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types";
 type Props = {
   key: string;
   issue: IIssue;
+  index: number;
   expandedIssues: string[];
   setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
   properties: Properties;
@@ -24,6 +25,7 @@ type Props = {
 
 export const SpreadsheetIssues: React.FC<Props> = ({
   key,
+  index,
   issue,
   expandedIssues,
   setExpandedIssues,
@@ -57,6 +59,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
     <div>
       <SingleSpreadsheetIssue
         issue={issue}
+        index={index}
         expanded={isExpanded}
         handleToggleExpand={handleToggleExpand}
         gridTemplateColumns={gridTemplateColumns}
@@ -77,6 +80,7 @@ export const SpreadsheetIssues: React.FC<Props> = ({
           <SpreadsheetIssues
             key={subIssue.id}
             issue={subIssue}
+            index={index}
             expandedIssues={expandedIssues}
             setExpandedIssues={setExpandedIssues}
             gridTemplateColumns={gridTemplateColumns}

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

@@ -70,6 +70,7 @@ export const SpreadsheetView: React.FC<Props> = ({
           {spreadsheetIssues.map((issue: IIssue, index) => (
             <SpreadsheetIssues
               key={`${issue.id}_${index}`}
+              index={index}
               issue={issue}
               expandedIssues={expandedIssues}
               setExpandedIssues={setExpandedIssues}

apps/app/components/cycles/sidebar.tsx

@@ -35,7 +35,7 @@ import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helpe
 import {
   isDateGreaterThanToday,
   renderDateFormat,
-  renderShortDate,
+  renderShortDateWithYearFormat,
 } from "helpers/date-time.helper";
 // types
 import { ICurrentUserResponse, ICycle } from "types";
@@ -315,7 +315,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
                           <span>
-                            {renderShortDate(
+                            {renderShortDateWithYearFormat(
                               new Date(
                                 `${watch("start_date") ? watch("start_date") : cycle?.start_date}`
                               ),
@@ -366,7 +366,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           <CalendarDaysIcon className="h-3 w-3" />
 
                           <span>
-                            {renderShortDate(
+                            {renderShortDateWithYearFormat(
                               new Date(
                                 `${watch("end_date") ? watch("end_date") : cycle?.end_date}`
                               ),
@@ -408,7 +408,11 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
               <div className="flex w-full flex-col gap-6 px-6 py-6">
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2">
-                    <h4 className="text-xl font-semibold text-brand-base">{cycle.name}</h4>
+                    <div className="max-w-[300px]">
+                      <h4 className="text-xl font-semibold text-brand-base break-words w-full">
+                        {cycle.name}
+                      </h4>
+                    </div>
                     <CustomMenu width="lg" ellipsis>
                       {!isCompleted && (
                         <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
@@ -427,7 +431,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary">
+                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary break-words w-full">
                     {cycle.description}
                   </span>
                 </div>

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

@@ -172,17 +172,19 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         : ""
                     }`}
                   />
-                  <div>
+                  <div className="max-w-2xl">
                     <Tooltip
                       tooltipContent={cycle.name}
                       className="break-words"
                       position="top-left"
                     >
-                      <h3 className="break-words text-base font-semibold">
+                      <h3 className="break-words w-full text-base font-semibold">
                         {truncateText(cycle.name, 70)}
                       </h3>
                     </Tooltip>
-                    <p className="mt-2 text-brand-secondary">{cycle.description}</p>
+                    <p className="mt-2 text-brand-secondary break-words w-full">
+                      {cycle.description}
+                    </p>
                   </div>
                 </span>
                 <span className="flex items-center gap-4 capitalize">

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

@@ -18,7 +18,7 @@ export const GanttChartBlocks: FC<{
 
   return (
     <div
-      className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto"
+      className="relative z-[5] mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto"
       style={{ width: `${itemsContainerWidth}px` }}
     >
       <div className="w-full">

apps/app/components/icons/calendar-after-icon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CalendarAfterIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 18 19"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_3309_70901)">
+      <path
+        d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
+        fill="#858E96"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3309_70901">
+        <rect width="18" height="18" fill="white" transform="translate(0 0.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+);

apps/app/components/icons/calendar-before-icon.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CalendarBeforeIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_3309_70907)">
+      <path
+        d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
+        fill="#858E96"
+      />
+      <g clipPath="url(#clip1_3309_70907)">
+        <path
+          d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
+          fill="#858E96"
+          stroke="#858E96"
+          strokeWidth="0.5"
+        />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_3309_70907">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+      <clipPath id="clip1_3309_70907">
+        <rect width="8" height="8" fill="white" transform="translate(0 10.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+);

apps/app/components/icons/calendar-month-icon.tsx

@@ -13,7 +13,7 @@ export const CalendarMonthIcon: React.FC<Props> = ({ width = "24", height = "24"
   >
     <path
       d="M12 14C11.7167 14 11.4792 13.9042 11.2875 13.7125C11.0958 13.5208 11 13.2833 11 13C11 12.7167 11.0958 12.4792 11.2875 12.2875C11.4792 12.0958 11.7167 12 12 12C12.2833 12 12.5208 12.0958 12.7125 12.2875C12.9042 12.4792 13 12.7167 13 13C13 13.2833 12.9042 13.5208 12.7125 13.7125C12.5208 13.9042 12.2833 14 12 14ZM8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12C8.28333 12 8.52083 12.0958 8.7125 12.2875C8.90417 12.4792 9 12.7167 9 13C9 13.2833 8.90417 13.5208 8.7125 13.7125C8.52083 13.9042 8.28333 14 8 14ZM16 14C15.7167 14 15.4792 13.9042 15.2875 13.7125C15.0958 13.5208 15 13.2833 15 13C15 12.7167 15.0958 12.4792 15.2875 12.2875C15.4792 12.0958 15.7167 12 16 12C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14ZM12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18ZM8 18C7.71667 18 7.47917 17.9042 7.2875 17.7125C7.09583 17.5208 7 17.2833 7 17C7 16.7167 7.09583 16.4792 7.2875 16.2875C7.47917 16.0958 7.71667 16 8 16C8.28333 16 8.52083 16.0958 8.7125 16.2875C8.90417 16.4792 9 16.7167 9 17C9 17.2833 8.90417 17.5208 8.7125 17.7125C8.52083 17.9042 8.28333 18 8 18ZM16 18C15.7167 18 15.4792 17.9042 15.2875 17.7125C15.0958 17.5208 15 17.2833 15 17C15 16.7167 15.0958 16.4792 15.2875 16.2875C15.4792 16.0958 15.7167 16 16 16C16.2833 16 16.5208 16.0958 16.7125 16.2875C16.9042 16.4792 17 16.7167 17 17C17 17.2833 16.9042 17.5208 16.7125 17.7125C16.5208 17.9042 16.2833 18 16 18ZM4.5 22C4.1 22 3.75 21.85 3.45 21.55C3.15 21.25 3 20.9 3 20.5V5C3 4.6 3.15 4.25 3.45 3.95C3.75 3.65 4.1 3.5 4.5 3.5H6.125V2.8C6.125 2.56667 6.2 2.375 6.35 2.225C6.5 2.075 6.69167 2 6.925 2C7.15833 2 7.35417 2.075 7.5125 2.225C7.67083 2.375 7.75 2.56667 7.75 2.8V3.5H16.25V2.8C16.25 2.56667 16.325 2.375 16.475 2.225C16.625 2.075 16.8167 2 17.05 2C17.2833 2 17.4792 2.075 17.6375 2.225C17.7958 2.375 17.875 2.56667 17.875 2.8V3.5H19.5C19.9 3.5 20.25 3.65 20.55 3.95C20.85 4.25 21 4.6 21 5V20.5C21 20.9 20.85 21.25 20.55 21.55C20.25 21.85 19.9 22 19.5 22H4.5ZM4.5 20.5H19.5V9.75H4.5V20.5ZM4.5 8.25H19.5V5H4.5V8.25ZM4.5 8.25V5V8.25Z"
-        fill="#212529"
+      fill="#858E96"
     />
   </svg>
-  );
+);

apps/app/components/icons/index.ts

@@ -4,6 +4,8 @@ export * from "./backlog-state-icon";
 export * from "./blocked-icon";
 export * from "./blocker-icon";
 export * from "./bolt-icon";
+export * from "./calendar-before-icon";
+export * from "./calendar-after-icon";
 export * from "./calendar-month-icon";
 export * from "./cancel-icon";
 export * from "./cancelled-state-icon";

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

@@ -14,7 +14,7 @@ import {
   XCircleIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import type { IInboxIssue } from "types";
 // constants
@@ -72,12 +72,12 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               </div>
             </Tooltip>
             <Tooltip
-              tooltipHeading="Created at"
-              tooltipContent={`${renderShortNumericDateFormat(issue.created_at ?? "")}`}
+              tooltipHeading="Created on"
+              tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
             >
               <div className="flex items-center gap-1 rounded border border-brand-base shadow-sm text-xs px-2 py-[0.19rem] text-brand-secondary">
                 <CalendarDaysIcon className="h-3.5 w-3.5" />
-                <span>{renderShortNumericDateFormat(issue.created_at ?? "")}</span>
+                <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
               </div>
             </Tooltip>
           </div>

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

@@ -33,7 +33,7 @@ import {
   XCircleIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import type { IInboxIssue, IIssue } from "types";
 // fetch-keys
@@ -252,13 +252,17 @@ export const InboxMainContent: React.FC = () => {
                   {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
                     <p>
                       This issue was snoozed till{" "}
-                      {renderShortNumericDateFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}
+                      {renderShortDateWithYearFormat(
+                        issueDetails.issue_inbox[0].snoozed_till ?? ""
+                      )}
                       .
                     </p>
                   ) : (
                     <p>
                       This issue has been snoozed till{" "}
-                      {renderShortNumericDateFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}
+                      {renderShortDateWithYearFormat(
+                        issueDetails.issue_inbox[0].snoozed_till ?? ""
+                      )}
                       .
                     </p>
                   )}

apps/app/components/issues/activity.tsx

@@ -26,7 +26,7 @@ import {
 } from "@heroicons/react/24/outline";
 import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
 // helpers
-import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
 import { ICurrentUserResponse, IIssueComment, IIssueLabels } from "types";
@@ -299,7 +299,7 @@ export const IssueActivitySection: React.FC<Props> = ({ issueId, user }) => {
               activityItem.new_value && activityItem.new_value !== ""
                 ? activityItem.new_value
                 : activityItem.old_value;
-            value = renderShortNumericDateFormat(date as string);
+            value = renderShortDateWithYearFormat(date as string);
           } else if (activityItem.field === "description") {
             value = "description";
           } else if (activityItem.field === "attachment") {

apps/app/components/issues/select/date.tsx

@@ -5,7 +5,7 @@ import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // react-datepicker
 import DatePicker from "react-datepicker";
 // import "react-datepicker/dist/react-datepicker.css";
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
 type Props = {
   value: string | null;
@@ -20,7 +20,7 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
           <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
             {value ? (
               <>
-                <span className="text-brand-base">{value}</span>
+                <span className="text-brand-base">{renderShortDateWithYearFormat(value)}</span>
                 <button onClick={() => onChange(null)}>
                   <XMarkIcon className="h-3 w-3" />
                 </button>

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

@@ -20,8 +20,8 @@ type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
+  tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
-  tooltipPosition?: "left" | "right";
   customButton?: boolean;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
@@ -32,7 +32,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
   partialUpdateIssue,
   position = "left",
   selfPositioned = false,
-  tooltipPosition = "right",
+  tooltipPosition = "top",
   user,
   isNotAllowed,
   customButton = false,
@@ -69,7 +69,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
 
   const assigneeLabel = (
     <Tooltip
-      position={`top-${tooltipPosition}`}
+      position={tooltipPosition}
       tooltipHeading="Assignees"
       tooltipContent={
         issue.assignee_details.length > 0

apps/app/components/issues/view-select/due-date.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 // ui
 import { CustomDatePicker, Tooltip } from "components/ui";
 // helpers
-import { findHowManyDaysLeft } from "helpers/date-time.helper";
+import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // services
 import trackEventServices from "services/track-event.service";
 // types
@@ -12,6 +12,7 @@ import { ICurrentUserResponse, IIssue } from "types";
 type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  tooltipPosition?: "top" | "bottom";
   noBorder?: boolean;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
@@ -20,6 +21,7 @@ type Props = {
 export const ViewDueDateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
+  tooltipPosition = "top",
   noBorder = false,
   user,
   isNotAllowed,
@@ -28,7 +30,13 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   const { workspaceSlug } = router.query;
 
   return (
-    <Tooltip tooltipHeading="Due Date" tooltipContent={issue.target_date ?? "N/A"}>
+    <Tooltip
+      tooltipHeading="Due Date"
+      tooltipContent={
+        issue.target_date ? renderShortDateWithYearFormat(issue.target_date) ?? "N/A" : "N/A"
+      }
+      position={tooltipPosition}
+    >
       <div
         className={`group relative max-w-[6.5rem] ${
           issue.target_date === null

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

@@ -17,6 +17,7 @@ type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
+  tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
   customButton?: boolean;
   user: ICurrentUserResponse | undefined;
@@ -27,6 +28,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
   position = "left",
+  tooltipPosition = "top",
   selfPositioned = false,
   customButton = false,
   user,
@@ -40,7 +42,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
   const estimateValue = estimatePoints?.find((e) => e.key === issue.estimate_point)?.value;
 
   const estimateLabels = (
-    <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue}>
+    <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
       <div className="flex items-center gap-1 text-brand-secondary">
         <PlayIcon className="h-3.5 w-3.5 -rotate-90" />
         {estimateValue ?? "None"}

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

@@ -22,7 +22,7 @@ type Props = {
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
   selfPositioned?: boolean;
-  tooltipPosition?: "left" | "right";
+  tooltipPosition?: "top" | "bottom";
   customButton?: boolean;
   user: ICurrentUserResponse | undefined;
   isNotAllowed: boolean;
@@ -33,7 +33,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
   partialUpdateIssue,
   position = "left",
   selfPositioned = false,
-  tooltipPosition = "right",
+  tooltipPosition = "top",
   user,
   isNotAllowed,
   customButton = false,
@@ -68,7 +68,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
 
   const labelsLabel = (
     <Tooltip
-      position={`top-${tooltipPosition}`}
+      position={tooltipPosition}
       tooltipHeading="Labels"
       tooltipContent={
         issue.label_details.length > 0
@@ -118,6 +118,8 @@ export const ViewLabelSelect: React.FC<Props> = ({
     </button>
   );
 
+  const noResultIcon = <TagIcon className="h-3.5 w-3.5 text-brand-secondary" />;
+
   return (
     <>
       {projectId && (
@@ -141,6 +143,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
         disabled={isNotAllowed}
         selfPositioned={selfPositioned}
         footerOption={footerOption}
+        noResultIcon={noResultIcon}
         dropdownWidth="w-full min-w-[12rem]"
       />
     </>

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

@@ -19,6 +19,7 @@ type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
+  tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
   noBorder?: boolean;
   user: ICurrentUserResponse | undefined;
@@ -29,6 +30,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
   position = "left",
+  tooltipPosition = "top",
   selfPositioned = false,
   noBorder = false,
   user,
@@ -75,7 +77,11 @@ export const ViewPrioritySelect: React.FC<Props> = ({
               : "border-brand-base"
           } items-center`}
         >
-          <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
+          <Tooltip
+            tooltipHeading="Priority"
+            tooltipContent={issue.priority ?? "None"}
+            position={tooltipPosition}
+          >
             <span className="flex gap-1 items-center text-brand-secondary text-xs">
               {getPriorityIcon(
                 issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",

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

@@ -21,6 +21,7 @@ type Props = {
   issue: IIssue;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
+  tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
   customButton?: boolean;
   user: ICurrentUserResponse | undefined;
@@ -31,6 +32,7 @@ export const ViewStateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
   position = "left",
+  tooltipPosition = "top",
   selfPositioned = false,
   customButton = false,
   user,
@@ -64,6 +66,7 @@ export const ViewStateSelect: React.FC<Props> = ({
     <Tooltip
       tooltipHeading="State"
       tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
+      position={tooltipPosition}
     >
       <div className="flex items-center cursor-pointer gap-2 text-brand-secondary">
         {selectedOption &&

apps/app/components/modules/sidebar.tsx

@@ -34,7 +34,7 @@ import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui";
 import { ExclamationIcon } from "components/icons";
 import { LinkIcon } from "@heroicons/react/20/solid";
 // helpers
-import { renderDateFormat, renderShortDate } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
 // types
 import { ICurrentUserResponse, IIssue, IModule, ModuleLink } from "types";
@@ -228,7 +228,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
                           <span>
-                            {renderShortDate(new Date(`${module.start_date}`), "Start date")}
+                            {renderShortDateWithYearFormat(
+                              new Date(`${module.start_date}`),
+                              "Start date"
+                            )}
                           </span>
                         </Popover.Button>
 
@@ -279,7 +282,10 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                           <CalendarDaysIcon className="h-3 w-3 " />
 
                           <span>
-                            {renderShortDate(new Date(`${module?.target_date}`), "End date")}
+                            {renderShortDateWithYearFormat(
+                              new Date(`${module?.target_date}`),
+                              "End date"
+                            )}
                           </span>
                         </Popover.Button>
 
@@ -322,7 +328,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
               <div className="flex w-full flex-col gap-6 px-6 py-6">
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2  ">
-                    <h4 className="text-xl font-semibold text-brand-base">{module.name}</h4>
+                    <div className="max-w-[300px]">
+                      <h4 className="text-xl font-semibold break-words w-full text-brand-base">
+                        {module.name}
+                      </h4>
+                    </div>
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
                         <span className="flex items-center justify-start gap-2">
@@ -339,7 +349,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     </CustomMenu>
                   </div>
 
-                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary">
+                  <span className="whitespace-normal text-sm leading-5 text-brand-secondary break-words w-full">
                     {module.description}
                   </span>
                 </div>

apps/app/components/pages/pages-list/recent-pages-list.tsx

@@ -41,7 +41,7 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
             if (pages[key].length === 0) return null;
 
             return (
-              <div key={key}>
+              <div key={key} className="h-full overflow-hidden">
                 <h2 className="text-xl font-semibold capitalize mb-2">
                   {replaceUnderscoreIfSnakeCase(key)}
                 </h2>

apps/app/components/project/single-project-card.tsx

@@ -22,7 +22,7 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import type { IFavoriteProject, IProject } from "types";
@@ -202,13 +202,13 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
             </Link>
             <div className="flex h-full items-end justify-between">
               <Tooltip
-                tooltipContent={`Created at ${renderShortNumericDateFormat(project.created_at)}`}
+                tooltipContent={`Created at ${renderShortDateWithYearFormat(project.created_at)}`}
                 position="bottom"
                 theme="dark"
               >
                 <div className="flex cursor-default items-center gap-1.5 text-xs">
                   <CalendarDaysIcon className="h-4 w-4" />
-                  {renderShortNumericDateFormat(project.created_at)}
+                  {renderShortDateWithYearFormat(project.created_at)}
                 </div>
               </Tooltip>
               {hasJoined ? (

apps/app/components/ui/custom-search-select.tsx

@@ -29,6 +29,7 @@ type CustomSearchSelectProps = {
   selfPositioned?: boolean;
   multiple?: boolean;
   footerOption?: JSX.Element;
+  noResultIcon?: JSX.Element;
   dropdownWidth?: string;
 };
 export const CustomSearchSelect = ({
@@ -47,6 +48,7 @@ export const CustomSearchSelect = ({
   disabled = false,
   selfPositioned = false,
   multiple = false,
+  noResultIcon,
   footerOption,
   dropdownWidth,
 }: CustomSearchSelectProps) => {
@@ -171,7 +173,10 @@ export const CustomSearchSelect = ({
                       </Combobox.Option>
                     ))
                   ) : (
-                    <p className="text-center text-brand-secondary">No matching results</p>
+                    <span className="flex items-center gap-2 p-1">
+                      {noResultIcon && noResultIcon}
+                      <p className="text-left text-brand-secondary ">No matching results</p>
+                    </span>
                   )
                 ) : (
                   <p className="text-center text-brand-secondary">Loading...</p>

apps/app/components/ui/date.tsx

@@ -5,7 +5,7 @@ import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // react-datepicker
 import DatePicker from "react-datepicker";
 // import "react-datepicker/dist/react-datepicker.css";
-import { renderDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
 type Props = {
   value: string | null;
@@ -21,7 +21,7 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
           <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
             {value ? (
               <>
-                <span className="text-brand-base">{value}</span>
+                <span className="text-brand-base">{renderShortDateWithYearFormat(value)}</span>
                 <button onClick={() => onChange(null)}>
                   <XMarkIcon className="h-3 w-3" />
                 </button>

apps/app/components/ui/datepicker.tsx

@@ -38,9 +38,9 @@ export const CustomDatePicker: React.FC<Props> = ({
     }}
     className={`${
       renderAs === "input"
-        ? "block px-3 py-2 text-sm focus:outline-none"
+        ? "block px-2 py-2 text-sm focus:outline-none"
         : renderAs === "button"
-        ? `px-3 py-1 text-xs shadow-sm ${
+        ? `px-2 py-1 text-xs shadow-sm ${
             disabled ? "" : "hover:bg-brand-surface-2"
           } duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent`
         : ""
@@ -49,7 +49,7 @@ export const CustomDatePicker: React.FC<Props> = ({
     } ${
       noBorder ? "" : "border border-brand-base"
     } w-full rounded-md bg-transparent caret-transparent ${className}`}
-    dateFormat="dd-MM-yyyy"
+    dateFormat="MMM dd, yyyy"
     isClearable={isClearable}
     disabled={disabled}
   />

apps/app/components/ui/multi-level-dropdown.tsx

@@ -18,6 +18,7 @@ type MultiLevelDropdownProps = {
       label: string | JSX.Element;
       value: any;
       selected?: boolean;
+      element?: JSX.Element;
     }[];
   }[];
   onSelect: (value: any) => void;
@@ -35,6 +36,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
   const [openChildFor, setOpenChildFor] = useState<string | null>(null);
 
   return (
+    <>
       <Menu as="div" className="relative z-10 inline-block text-left">
         {({ open }) => (
           <>
@@ -101,7 +103,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     </Menu.Item>
                     {option.children && option.id === openChildFor && (
                       <div
-                      className={`absolute top-0 w-auto min-w-[144px] max-w-[192px] origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-1 shadow-lg focus:outline-none ${
+                        className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-1 shadow-lg focus:outline-none ${
                           direction === "left"
                             ? "right-full -translate-x-1"
                             : "left-full translate-x-1"
@@ -118,25 +120,27 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                         }`}
                       >
                         <div className="space-y-1 p-1">
-                        {option.children.map((child) => (
+                          {option.children.map((child) => {
+                            if (child.element) return child.element;
+                            else
+                              return (
                                 <button
                                   key={child.id}
                                   type="button"
-                            onClick={() => {
-                              onSelect(child.value);
-                            }}
+                                  onClick={() => onSelect(child.value)}
                                   className={`${
                                     child.selected ? "bg-brand-surface-2" : ""
-                            } flex w-full items-center justify-between whitespace-nowrap break-words rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
+                                  } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
                                 >
-                            {child.label}
+                                  {child.label}{" "}
                                   <CheckIcon
                                     className={`h-3.5 w-3.5 opacity-0 ${
                                       child.selected ? "opacity-100" : ""
                                     }`}
                                   />
                                 </button>
-                        ))}
+                              );
+                          })}
                         </div>
                       </div>
                     )}
@@ -147,5 +151,6 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
           </>
         )}
       </Menu>
+    </>
   );
 };

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

@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
@@ -6,18 +8,22 @@ import useSWR from "swr";
 import stateService from "services/state.service";
 import projectService from "services/project.service";
 import issuesService from "services/issues.service";
+// components
+import { DueDateFilterModal } from "components/core";
 // ui
 import { Avatar, MultiLevelDropdown } from "components/ui";
 // icons
 import { getPriorityIcon, getStateGroupIcon } from "components/icons";
 // helpers
 import { getStatesList } from "helpers/state.helper";
+import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
 import { IIssueFilterOptions, IQuery } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATES_LIST } from "constants/fetch-keys";
 // constants
 import { PRIORITIES } from "constants/project";
+import { DUE_DATES } from "constants/due-dates";
 
 type Props = {
   filters: Partial<IIssueFilterOptions> | IQuery;
@@ -32,6 +38,8 @@ export const SelectFilters: React.FC<Props> = ({
   direction = "right",
   height = "md",
 }) => {
+  const [isDueDateFilterModalOpen, setIsDueDateFilterModalOpen] = useState(false);
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -58,6 +66,13 @@ export const SelectFilters: React.FC<Props> = ({
   );
 
   return (
+    <>
+      {isDueDateFilterModalOpen && (
+        <DueDateFilterModal
+          isOpen={isDueDateFilterModalOpen}
+          handleClose={() => setIsDueDateFilterModalOpen(false)}
+        />
+      )}
       <MultiLevelDropdown
         label="Filters"
         onSelect={onSelect}
@@ -72,7 +87,7 @@ export const SelectFilters: React.FC<Props> = ({
               ...PRIORITIES.map((priority) => ({
                 id: priority === null ? "null" : priority,
                 label: (
-                <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 capitalize">
                     {getPriorityIcon(priority)} {priority ?? "None"}
                   </div>
                 ),
@@ -129,7 +144,7 @@ export const SelectFilters: React.FC<Props> = ({
           },
           {
             id: "created_by",
-          label: "Created By",
+            label: "Created by",
             value: members,
             children: [
               ...(members?.map((member) => ({
@@ -162,7 +177,8 @@ export const SelectFilters: React.FC<Props> = ({
                     <div
                       className="h-2 w-2 rounded-full"
                       style={{
-                      backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
+                        backgroundColor:
+                          label.color && label.color !== "" ? label.color : "#000000",
                       }}
                     />
                     {label.name}
@@ -176,7 +192,37 @@ export const SelectFilters: React.FC<Props> = ({
               })) ?? []),
             ],
           },
+          {
+            id: "target_date",
+            label: "Due date",
+            value: DUE_DATES,
+            children: [
+              ...(DUE_DATES?.map((option) => ({
+                id: option.name,
+                label: option.name,
+                value: {
+                  key: "target_date",
+                  value: option.value,
+                },
+                selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], option.value),
+              })) ?? []),
+              {
+                id: "custom",
+                label: "Custom",
+                value: "custom",
+                element: (
+                  <button
+                    onClick={() => setIsDueDateFilterModalOpen(true)}
+                    className="w-full rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2"
+                  >
+                    Custom
+                  </button>
+                ),
+              },
+            ],
+          },
         ]}
       />
+    </>
   );
 };

apps/app/components/views/single-view-item.tsx

@@ -18,7 +18,7 @@ import { VIEWS_LIST } from "constants/fetch-keys";
 import useToast from "hooks/use-toast";
 // helpers
 import { truncateText } from "helpers/string.helper";
-import { renderShortDate, renderShortTime } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat, renderShortTime } from "helpers/date-time.helper";
 
 type Props = {
   view: IView;
@@ -107,7 +107,7 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
                   <Tooltip
                     tooltipContent={`Last updated at ${renderShortTime(
                       view.updated_at
-                    )} ${renderShortDate(view.updated_at)}`}
+                    )} ${renderShortDateWithYearFormat(view.updated_at)}`}
                   >
                     <p className="text-sm text-brand-secondary">
                       {renderShortTime(view.updated_at)}

apps/app/components/workspace/activity-graph.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 // ui
 import { Tooltip } from "components/ui";
 // helpers
-import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper";
+import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
 import { IUserActivity } from "types";
 // constants
@@ -109,7 +109,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
                   key={`${date}-${index}`}
                   tooltipContent={`${
                     isActive ? isActive.activity_count : 0
-                  } activities on ${renderShortNumericDateFormat(date)}`}
+                  } activities on ${renderShortDateWithYearFormat(date)}`}
                   theme="dark"
                 >
                   <div

apps/app/components/workspace/issues-pie-chart.tsx

@@ -25,8 +25,12 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
           })) ?? []
         }
         height="320px"
-        innerRadius={0.5}
-        arcLinkLabel={(cell) => `${capitalizeFirstLetter(cell.label.toString())} (${cell.value})`}
+        innerRadius={0.6}
+        cornerRadius={5}
+        padAngle={2}
+        enableArcLabels
+        arcLabelsTextColor="#000000"
+        enableArcLinkLabels={false}
         legends={[
           {
             anchor: "right",
@@ -53,8 +57,14 @@ export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
         ]}
         activeInnerRadiusOffset={5}
         colors={(datum) => datum.data.color}
+        tooltip={(datum) => (
+          <div className="flex items-center gap-2 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
+            <span className="text-brand-secondary capitalize">{datum.datum.label} issues:</span>{" "}
+            {datum.datum.value}
+          </div>
+        )}
         theme={{
-          background: "rgb(var(--color-bg-base))",
+          background: "transparent",
         }}
       />
     </div>

apps/app/constants/due-dates.ts

@@ -0,0 +1,37 @@
+// helper
+import { renderDateFormat } from "helpers/date-time.helper";
+
+export const DUE_DATES = [
+  {
+    name: "Last week",
+    value: [
+      `${renderDateFormat(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000))};after`,
+      `${renderDateFormat(new Date())};before`,
+    ],
+  },
+  {
+    name: "2 weeks from now",
+    value: [
+      `${renderDateFormat(new Date())};after`,
+      `${renderDateFormat(new Date(new Date().getTime() + 14 * 24 * 60 * 60 * 1000))};before`,
+    ],
+  },
+  {
+    name: "1 month from now",
+    value: [
+      `${renderDateFormat(new Date())};after`,
+      `${renderDateFormat(
+        new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())
+      )};before`,
+    ],
+  },
+  {
+    name: "2 months from now",
+    value: [
+      `${renderDateFormat(new Date())};after`,
+      `${renderDateFormat(
+        new Date(new Date().getFullYear(), new Date().getMonth() + 2, new Date().getDate())
+      )};before`,
+    ],
+  },
+];

apps/app/constants/project.ts

@@ -1,3 +1,4 @@
+
 export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
 
 export const GROUP_CHOICES = {

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

@@ -89,6 +89,7 @@ export const initialState: StateType = {
     issue__assignees__id: null,
     issue__labels__id: null,
     created_by: null,
+    target_date: null,
   },
 };
 

apps/app/helpers/array.helper.ts

@@ -42,3 +42,11 @@ export const findStringWithMostCharacters = (strings: string[]) =>
   strings.reduce((longestString, currentString) =>
     currentString.length > longestString.length ? currentString : longestString
   );
+
+export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] | null): boolean => {
+  if (!arr1 || !arr2) return false;
+  if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;
+  if (arr1.length === 0 && arr2.length === 0) return true;
+
+  return arr1.length === arr2.length && arr1.every((e) => arr2.includes(e));
+};

apps/app/helpers/date-time.helper.ts

@@ -114,7 +114,7 @@ export const getDateRangeStatus = (
   }
 };
 
-export const renderShortDateWithYearFormat = (date: string | Date) => {
+export const renderShortDateWithYearFormat = (date: string | Date, placeholder?: string) => {
   if (!date || date === "") return null;
 
   date = new Date(date);
@@ -136,7 +136,8 @@ export const renderShortDateWithYearFormat = (date: string | Date) => {
   const day = date.getDate();
   const month = months[date.getMonth()];
   const year = date.getFullYear();
-  return isNaN(date.getTime()) ? "N/A" : ` ${month} ${day}, ${year}`;
+
+  return isNaN(date.getTime()) ? placeholder ?? "N/A" : ` ${month} ${day}, ${year}`;
 };
 
 export const renderShortDate = (date: string | Date, placeholder?: string) => {

apps/app/hooks/use-issues-view.tsx

@@ -60,6 +60,7 @@ const useIssuesView = () => {
       ? filters?.issue__labels__id.join(",")
       : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
+    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
   };
 
   const { data: projectIssues } = useSWR(

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -159,7 +159,7 @@ const SingleCycle: React.FC = () => {
       >
         <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
         <div
-          className={`h-full ${cycleSidebar ? "mr-[24rem]" : ""} ${
+          className={`h-full flex flex-col ${cycleSidebar ? "mr-[24rem]" : ""} ${
             analyticsModal ? "mr-[50%]" : ""
           } duration-300`}
         >

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx

@@ -120,10 +120,10 @@ const IssueDetailsPage: NextPage = () => {
     >
       {issueDetails && projectId ? (
         <div className="flex h-full">
-          <div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
+          <div className="w-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
             <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} />
           </div>
-          <div className="basis-1/3 space-y-5 border-l border-brand-base p-5">
+          <div className="w-1/3 space-y-5 border-l border-brand-base p-5">
             <IssueDetailsSidebar
               control={control}
               issueDetail={issueDetails}

apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx

@@ -99,7 +99,9 @@ const ProjectIssues: NextPage = () => {
         }
       >
         <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
+        <div className="h-full w-full flex flex-col">
           <IssuesView />
+        </div>
       </ProjectAuthorizationWrapper>
     </IssueViewContextProvider>
   );

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -164,7 +164,7 @@ const SingleModule: React.FC = () => {
         <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
 
         <div
-          className={`h-full ${moduleSidebar ? "mr-[24rem]" : ""} ${
+          className={`h-full flex flex-col ${moduleSidebar ? "mr-[24rem]" : ""} ${
             analyticsModal ? "mr-[50%]" : ""
           } duration-300`}
         >

apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx

@@ -124,7 +124,29 @@ const ProjectPages: NextPage = () => {
         }
       >
         <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
+          <div className="flex gap-4 justify-between">
             <h3 className="text-2xl font-semibold text-brand-base">Pages</h3>
+            <div className="flex gap-x-1">
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                  viewType === "list" ? "bg-brand-surface-2" : ""
+                }`}
+                onClick={() => setViewType("list")}
+              >
+                <ListBulletIcon className="h-4 w-4" />
+              </button>
+              <button
+                type="button"
+                className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+                  viewType === "detailed" ? "bg-brand-surface-2" : ""
+                }`}
+                onClick={() => setViewType("detailed")}
+              >
+                <Squares2X2Icon className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
           <Tab.Group
             as={Fragment}
             defaultIndex={currentTabValue(pageTab)}
@@ -147,7 +169,7 @@ const ProjectPages: NextPage = () => {
             }}
           >
             <Tab.List as="div" className="mb-6 flex items-center justify-between">
-              <div className="flex gap-4">
+              <div className="flex gap-4 items-center flex-wrap">
                 {tabsList.map((tab, index) => (
                   <Tab
                     key={`${tab}-${index}`}
@@ -163,26 +185,6 @@ const ProjectPages: NextPage = () => {
                   </Tab>
                 ))}
               </div>
-              <div className="flex gap-x-1">
-                <button
-                  type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                    viewType === "list" ? "bg-brand-surface-2" : ""
-                  }`}
-                  onClick={() => setViewType("list")}
-                >
-                  <ListBulletIcon className="h-4 w-4" />
-                </button>
-                <button
-                  type="button"
-                  className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
-                    viewType === "detailed" ? "bg-brand-surface-2" : ""
-                  }`}
-                  onClick={() => setViewType("detailed")}
-                >
-                  <Squares2X2Icon className="h-4 w-4" />
-                </button>
-              </div>
             </Tab.List>
             <Tab.Panels as={Fragment}>
               <Tab.Panel as="div" className="h-full overflow-y-auto space-y-5">

apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx

@@ -101,7 +101,9 @@ const SingleView: React.FC = () => {
           </div>
         }
       >
+        <div className="h-full w-full flex flex-col">
           <IssuesView />
+        </div>
       </ProjectAuthorizationWrapper>
     </IssueViewContextProvider>
   );

apps/app/styles/globals.css

@@ -197,25 +197,6 @@ body {
   outline: none;
 }
 
-/* react datepicker styling */
-.react-datepicker-wrapper input::placeholder {
-  color: rgba(var(--color-text-secondary));
-  opacity: 1;
-}
-
-.react-datepicker-wrapper input:-ms-input-placeholder {
-  color: rgba(var(--color-text-secondary));
-}
-
-.react-datepicker-wrapper .react-datepicker__close-icon::after {
-  background: transparent;
-  color: rgba(var(--color-text-secondary));
-}
-
-.react-datepicker-popper {
-  z-index: 30 !important;
-}
-
 .conical-gradient {
   background: conic-gradient(
     from 180deg at 50% 50%,

apps/app/styles/react-datepicker.css

@@ -81,7 +81,7 @@
 }
 
 .react-datepicker__day-name {
-  color: rgba(var(--color-text-base)) !important;
+  color: rgba(var(--color-text-secondary)) !important;
 }
 
 .react-datepicker__week {

apps/app/types/issues.d.ts

@@ -239,6 +239,7 @@ export interface IIssueLite {
 export interface IIssueFilterOptions {
   type: "active" | "backlog" | null;
   assignees: string[] | null;
+  target_date: string[] | null;
   state: string[] | null;
   labels: string[] | null;
   issue__assignees__id: string[] | null;

apps/app/types/projects.d.ts

@@ -80,8 +80,8 @@ type ProjectViewTheme = {
 export interface IProjectMember {
   id: string;
   member: IUserLite;
-  project: IProject;
-  workspace: IWorkspace;
+  project: IProjectLite;
+  workspace: IWorkspaceLite;
   comment: string;
   role: 5 | 10 | 15 | 20;
 

docker-compose.yml

@@ -1,5 +1,36 @@
 version: "3.8"
 
+x-api-and-worker-env: &api-and-worker-env
+        DEBUG: ${DEBUG}
+        SENTRY_DSN: ${SENTRY_DSN}
+        DJANGO_SETTINGS_MODULE: plane.settings.production
+        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
+        REDIS_URL: redis://plane-redis:6379/
+        EMAIL_HOST: ${EMAIL_HOST}
+        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
+        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
+        EMAIL_PORT: ${EMAIL_PORT}
+        EMAIL_FROM: ${EMAIL_FROM}
+        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
+        EMAIL_USE_SSL: ${EMAIL_USE_SSL}
+        AWS_REGION: ${AWS_REGION}
+        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
+        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
+        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
+        AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
+        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
+        WEB_URL: ${WEB_URL}
+        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
+        DISABLE_COLLECTSTATIC: 1
+        DOCKERIZED: 1
+        OPENAI_API_KEY: ${OPENAI_API_KEY}
+        GPT_ENGINE: ${GPT_ENGINE}
+        SECRET_KEY: ${SECRET_KEY}
+        DEFAULT_EMAIL: ${DEFAULT_EMAIL}
+        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
+        USE_MINIO: ${USE_MINIO}
+        ENABLE_SIGNUP: ${ENABLE_SIGNUP}
+
 services:
         plane-web:
                 container_name: planefrontend
@@ -37,35 +68,7 @@ services:
                 env_file:
                         - .env
                 environment:
-                        DEBUG: ${DEBUG}
-                        SENTRY_DSN: ${SENTRY_DSN}
-                        DJANGO_SETTINGS_MODULE: plane.settings.production
-                        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
-                        REDIS_URL: redis://plane-redis:6379/
-                        EMAIL_HOST: ${EMAIL_HOST}
-                        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
-                        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
-                        EMAIL_PORT: ${EMAIL_PORT}
-                        EMAIL_FROM: ${EMAIL_FROM}
-                        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
-                        EMAIL_USE_SSL: ${EMAIL_USE_SSL}
-                        AWS_REGION: ${AWS_REGION}
-                        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
-                        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
-                        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-                        AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
-                        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
-                        WEB_URL: ${WEB_URL}
-                        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
-                        DISABLE_COLLECTSTATIC: 1
-                        DOCKERIZED: 1
-                        OPENAI_API_KEY: ${OPENAI_API_KEY}
-                        GPT_ENGINE: ${GPT_ENGINE}
-                        SECRET_KEY: ${SECRET_KEY}
-                        DEFAULT_EMAIL: ${DEFAULT_EMAIL}
-                        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD}
-                        USE_MINIO: ${USE_MINIO}
-                        ENABLE_SIGNUP: ${ENABLE_SIGNUP}
+                        <<: *api-and-worker-env
                 depends_on:
                         - plane-db
                         - plane-redis
@@ -80,35 +83,7 @@ services:
                 env_file:
                         - .env
                 environment:
-                        DEBUG: ${DEBUG}
-                        SENTRY_DSN: ${SENTRY_DSN}
-                        DJANGO_SETTINGS_MODULE: plane.settings.production
-                        DATABASE_URL: postgres://${PGUSER}:${PGPASSWORD}@${PGHOST}:5432/${PGDATABASE}
-                        REDIS_URL: redis://plane-redis:6379/
-                        EMAIL_HOST: ${EMAIL_HOST}
-                        EMAIL_HOST_USER: ${EMAIL_HOST_USER}
-                        EMAIL_HOST_PASSWORD: ${EMAIL_HOST_PASSWORD}
-                        EMAIL_PORT: ${EMAIL_PORT}
-                        EMAIL_FROM: ${EMAIL_FROM}
-                        EMAIL_USE_TLS: ${EMAIL_USE_TLS}
-                        EMAIL_USE_SSL: ${EMAIL_USE_SSL}
-                        AWS_REGION: ${AWS_REGION}
-                        AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
-                        AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
-                        AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME}
-                        AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL}
-                        FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT}
-                        WEB_URL: ${WEB_URL}
-                        GITHUB_CLIENT_SECRET: ${GITHUB_CLIENT_SECRET}
-                        DISABLE_COLLECTSTATIC: 1
-                        DOCKERIZED: 1
-                        OPENAI_API_KEY: ${OPENAI_API_KEY}
-                        GPT_ENGINE: ${GPT_ENGINE}
-                        SECRET_KEY: ${SECRET_KEY}
-                        DEFAULT_EMAIL: ${DEFAULT_EMAIL:-captain@plane.so}
-                        DEFAULT_PASSWORD: ${DEFAULT_PASSWORD:-password123}
-                        USE_MINIO: ${USE_MINIO}
-                        ENABLE_SIGNUP: ${ENABLE_SIGNUP}
+                        <<: *api-and-worker-env
                 depends_on:
                         - plane-api
                         - plane-db