chore: refactor some pages

* fix: adjusted sub work item properties for a better visibility

* fix: removed projects from sub work item filters

admin/app/ai/form.tsx

@@ -26,16 +26,16 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
     formState: { errors, isSubmitting },
   } = useForm<AIFormValues>({
     defaultValues: {
-      OPENAI_API_KEY: config["OPENAI_API_KEY"],
-      GPT_ENGINE: config["GPT_ENGINE"],
+      LLM_API_KEY: config["LLM_API_KEY"],
+      LLM_MODEL: config["LLM_MODEL"],
     },
   });
 
   const aiFormFields: TControllerInputFormField[] = [
     {
-      key: "GPT_ENGINE",
+      key: "LLM_MODEL",
       type: "text",
-      label: "GPT_ENGINE",
+      label: "LLM Model",
       description: (
         <>
           Choose an OpenAI engine.{" "}
@@ -49,12 +49,12 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
           </a>
         </>
       ),
-      placeholder: "gpt-3.5-turbo",
-      error: Boolean(errors.GPT_ENGINE),
+      placeholder: "gpt-4o-mini",
+      error: Boolean(errors.LLM_MODEL),
       required: false,
     },
     {
-      key: "OPENAI_API_KEY",
+      key: "LLM_API_KEY",
       type: "password",
       label: "API key",
       description: (
@@ -71,7 +71,7 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
         </>
       ),
       placeholder: "sk-asddassdfasdefqsdfasd23das3dasdcasd",
-      error: Boolean(errors.OPENAI_API_KEY),
+      error: Boolean(errors.LLM_API_KEY),
       required: false,
     },
   ];

apiserver/plane/app/urls/analytic.py

@@ -11,6 +11,9 @@ from plane.app.views import (
     AdvanceAnalyticsChartEndpoint,
     DefaultAnalyticsEndpoint,
     ProjectStatsEndpoint,
+    ProjectAdvanceAnalyticsEndpoint,
+    ProjectAdvanceAnalyticsStatsEndpoint,
+    ProjectAdvanceAnalyticsChartEndpoint,
 )
 
 
@@ -67,4 +70,19 @@ urlpatterns = [
         AdvanceAnalyticsChartEndpoint.as_view(),
         name="advance-analytics-chart",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/advance-analytics/",
+        ProjectAdvanceAnalyticsEndpoint.as_view(),
+        name="project-advance-analytics",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/advance-analytics-stats/",
+        ProjectAdvanceAnalyticsStatsEndpoint.as_view(),
+        name="project-advance-analytics-stats",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/advance-analytics-charts/",
+        ProjectAdvanceAnalyticsChartEndpoint.as_view(),
+        name="project-advance-analytics-chart",
+    ),
 ]

apiserver/plane/app/views/__init__.py

@@ -205,6 +205,12 @@ from .analytic.advance import (
     AdvanceAnalyticsChartEndpoint,
 )
 
+from .analytic.project_analytics import (
+    ProjectAdvanceAnalyticsEndpoint,
+    ProjectAdvanceAnalyticsStatsEndpoint,
+    ProjectAdvanceAnalyticsChartEndpoint,
+)
+
 from .notification.base import (
     NotificationViewSet,
     UnreadNotificationEndpoint,

apiserver/plane/app/views/analytic/advance.py

@@ -5,7 +5,6 @@ from django.db.models import QuerySet, Q, Count
 from django.http import HttpRequest
 from django.db.models.functions import TruncMonth
 from django.utils import timezone
-from datetime import timedelta
 from plane.app.views.base import BaseAPIView
 from plane.app.permissions import ROLE, allow_permission
 from plane.db.models import (
@@ -19,10 +18,8 @@ from plane.db.models import (
     Workspace,
     CycleIssue,
     ModuleIssue,
+    ProjectMember,
 )
-from django.db import models
-from django.db.models import F, Case, When, Value
-from django.db.models.functions import Concat
 from plane.utils.build_chart import build_analytics_chart
 from plane.utils.date_utils import (
     get_analytics_filters,
@@ -75,32 +72,27 @@ class AdvanceAnalyticsEndpoint(AdvanceAnalyticsBaseView):
         }
 
     def get_overview_data(self) -> Dict[str, Dict[str, int]]:
+        members_query = WorkspaceMember.objects.filter(
+            workspace__slug=self._workspace_slug, is_active=True
+        )
+
+        if self.request.GET.get("project_ids", None):
+            project_ids = self.request.GET.get("project_ids", None)
+            project_ids = [str(project_id) for project_id in project_ids.split(",")]
+            members_query = ProjectMember.objects.filter(
+                project_id__in=project_ids, is_active=True
+            )
+
         return {
-            "total_users": self.get_filtered_counts(
-                WorkspaceMember.objects.filter(
-                    workspace__slug=self._workspace_slug, is_active=True
-                )
-            ),
+            "total_users": self.get_filtered_counts(members_query),
             "total_admins": self.get_filtered_counts(
-                WorkspaceMember.objects.filter(
-                    workspace__slug=self._workspace_slug,
-                    role=ROLE.ADMIN.value,
-                    is_active=True,
-                )
+                members_query.filter(role=ROLE.ADMIN.value)
             ),
             "total_members": self.get_filtered_counts(
-                WorkspaceMember.objects.filter(
-                    workspace__slug=self._workspace_slug,
-                    role=ROLE.MEMBER.value,
-                    is_active=True,
-                )
+                members_query.filter(role=ROLE.MEMBER.value)
             ),
             "total_guests": self.get_filtered_counts(
-                WorkspaceMember.objects.filter(
-                    workspace__slug=self._workspace_slug,
-                    role=ROLE.GUEST.value,
-                    is_active=True,
-                )
+                members_query.filter(role=ROLE.GUEST.value)
             ),
             "total_projects": self.get_filtered_counts(
                 Project.objects.filter(**self.filters["project_filters"])
@@ -113,30 +105,13 @@ class AdvanceAnalyticsEndpoint(AdvanceAnalyticsBaseView):
             ),
             "total_intake": self.get_filtered_counts(
                 Issue.objects.filter(**self.filters["base_filters"]).filter(
-                    issue_intake__isnull=False
+                    issue_intake__status__in=["-2", "0"]
                 )
             ),
         }
 
-    def get_work_items_stats(
-        self, cycle_id=None, module_id=None
-    ) -> Dict[str, Dict[str, int]]:
-        """
-        Returns work item stats for the workspace, or filtered by cycle_id or module_id if provided.
-        """
-        base_queryset = None
-        if cycle_id is not None:
-            cycle_issues = CycleIssue.objects.filter(
-                **self.filters["base_filters"], cycle_id=cycle_id
-            ).values_list("issue_id", flat=True)
-            base_queryset = Issue.issue_objects.filter(id__in=cycle_issues)
-        elif module_id is not None:
-            module_issues = ModuleIssue.objects.filter(
-                **self.filters["base_filters"], module_id=module_id
-            ).values_list("issue_id", flat=True)
-            base_queryset = Issue.issue_objects.filter(id__in=module_issues)
-        else:
-            base_queryset = Issue.issue_objects.filter(**self.filters["base_filters"])
+    def get_work_items_stats(self) -> Dict[str, Dict[str, int]]:
+        base_queryset = Issue.issue_objects.filter(**self.filters["base_filters"])
 
         return {
             "total_work_items": self.get_filtered_counts(base_queryset),
@@ -165,11 +140,8 @@ class AdvanceAnalyticsEndpoint(AdvanceAnalyticsBaseView):
                 status=status.HTTP_200_OK,
             )
         elif tab == "work-items":
-            # Optionally accept cycle_id or module_id as query params
-            cycle_id = request.GET.get("cycle_id", None)
-            module_id = request.GET.get("module_id", None)
             return Response(
-                self.get_work_items_stats(cycle_id=cycle_id, module_id=module_id),
+                self.get_work_items_stats(),
                 status=status.HTTP_200_OK,
             )
         return Response({"message": "Invalid tab"}, status=status.HTTP_400_BAD_REQUEST)
@@ -188,7 +160,21 @@ class AdvanceAnalyticsStatsEndpoint(AdvanceAnalyticsBaseView):
             )
 
         return (
-            base_queryset.values("project_id", "project__name")
+            base_queryset.values("project_id", "project__name").annotate(
+                cancelled_work_items=Count("id", filter=Q(state__group="cancelled")),
+                completed_work_items=Count("id", filter=Q(state__group="completed")),
+                backlog_work_items=Count("id", filter=Q(state__group="backlog")),
+                un_started_work_items=Count("id", filter=Q(state__group="unstarted")),
+                started_work_items=Count("id", filter=Q(state__group="started")),
+            )
+            .order_by("project_id")
+        )
+
+    def get_work_items_stats(self) -> Dict[str, Dict[str, int]]:
+        base_queryset = Issue.issue_objects.filter(**self.filters["base_filters"])
+        return (
+            base_queryset
+            .values("project_id", "project__name")
             .annotate(
                 cancelled_work_items=Count("id", filter=Q(state__group="cancelled")),
                 completed_work_items=Count("id", filter=Q(state__group="completed")),
@@ -199,100 +185,14 @@ class AdvanceAnalyticsStatsEndpoint(AdvanceAnalyticsBaseView):
             .order_by("project_id")
         )
 
-    def get_work_items_stats(
-        self, cycle_id=None, module_id=None, peek_view=False
-    ) -> Dict[str, Dict[str, int]]:
-        base_queryset = None
-        if cycle_id is not None:
-            cycle_issues = CycleIssue.objects.filter(
-                **self.filters["base_filters"], cycle_id=cycle_id
-            ).values_list("issue_id", flat=True)
-            base_queryset = Issue.issue_objects.filter(id__in=cycle_issues)
-        elif module_id is not None:
-            module_issues = ModuleIssue.objects.filter(
-                **self.filters["base_filters"], module_id=module_id
-            ).values_list("issue_id", flat=True)
-            base_queryset = Issue.issue_objects.filter(id__in=module_issues)
-        elif peek_view:
-            base_queryset = Issue.issue_objects.filter(**self.filters["base_filters"])
-        else:
-            base_queryset = Issue.issue_objects.filter(**self.filters["base_filters"])
-            return (
-                base_queryset.values("project_id", "project__name")
-                .annotate(
-                    cancelled_work_items=Count(
-                        "id", filter=Q(state__group="cancelled")
-                    ),
-                    completed_work_items=Count(
-                        "id", filter=Q(state__group="completed")
-                    ),
-                    backlog_work_items=Count("id", filter=Q(state__group="backlog")),
-                    un_started_work_items=Count(
-                        "id", filter=Q(state__group="unstarted")
-                    ),
-                    started_work_items=Count("id", filter=Q(state__group="started")),
-                )
-                .order_by("project_id")
-            )
-
-        return (
-            base_queryset.annotate(display_name=F("assignees__display_name"))
-            .annotate(assignee_id=F("assignees__id"))
-            .annotate(avatar=F("assignees__avatar"))
-            .annotate(
-                avatar_url=Case(
-                    # If `avatar_asset` exists, use it to generate the asset URL
-                    When(
-                        assignees__avatar_asset__isnull=False,
-                        then=Concat(
-                            Value("/api/assets/v2/static/"),
-                            "assignees__avatar_asset",  # Assuming avatar_asset has an id or relevant field
-                            Value("/"),
-                        ),
-                    ),
-                    # If `avatar_asset` is None, fall back to using `avatar` field directly
-                    When(
-                        assignees__avatar_asset__isnull=True, then="assignees__avatar"
-                    ),
-                    default=Value(None),
-                    output_field=models.CharField(),
-                )
-            )
-            .values("display_name", "assignee_id", "avatar_url")
-            .annotate(
-                cancelled_work_items=Count(
-                    "id", filter=Q(state__group="cancelled"), distinct=True
-                ),
-                completed_work_items=Count(
-                    "id", filter=Q(state__group="completed"), distinct=True
-                ),
-                backlog_work_items=Count(
-                    "id", filter=Q(state__group="backlog"), distinct=True
-                ),
-                un_started_work_items=Count(
-                    "id", filter=Q(state__group="unstarted"), distinct=True
-                ),
-                started_work_items=Count(
-                    "id", filter=Q(state__group="started"), distinct=True
-                ),
-            )
-            .order_by("display_name")
-        )
-
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE")
     def get(self, request: HttpRequest, slug: str) -> Response:
         self.initialize_workspace(slug, type="chart")
         type = request.GET.get("type", "work-items")
 
         if type == "work-items":
-            # Optionally accept cycle_id or module_id as query params
-            cycle_id = request.GET.get("cycle_id", None)
-            module_id = request.GET.get("module_id", None)
-            peek_view = request.GET.get("peek_view", False)
             return Response(
-                self.get_work_items_stats(
-                    cycle_id=cycle_id, module_id=module_id, peek_view=peek_view
-                ),
+                self.get_work_items_stats(),
                 status=status.HTTP_200_OK,
             )
 
@@ -352,9 +252,7 @@ class AdvanceAnalyticsChartEndpoint(AdvanceAnalyticsBaseView):
             for key, value in data.items()
         ]
 
-    def work_item_completion_chart(
-        self, cycle_id=None, module_id=None, peek_view=False
-    ) -> Dict[str, Any]:
+    def work_item_completion_chart(self) -> Dict[str, Any]:
         # Get the base queryset
         queryset = (
             Issue.issue_objects.filter(**self.filters["base_filters"])
@@ -364,143 +262,62 @@ class AdvanceAnalyticsChartEndpoint(AdvanceAnalyticsBaseView):
             )
         )
 
-        if cycle_id is not None and peek_view:
-            cycle_issues = CycleIssue.objects.filter(
-                **self.filters["base_filters"], cycle_id=cycle_id
-            ).values_list("issue_id", flat=True)
-            cycle = Cycle.objects.filter(id=cycle_id).first()
-            if cycle and cycle.start_date:
-                start_date = cycle.start_date.date()
-                end_date = cycle.end_date.date()
-            else:
-                return {"data": [], "schema": {}}
-            queryset = cycle_issues
-        elif module_id is not None and peek_view:
-            module_issues = ModuleIssue.objects.filter(
-                **self.filters["base_filters"], module_id=module_id
-            ).values_list("issue_id", flat=True)
-            module = Module.objects.filter(id=module_id).first()
-            if module and module.start_date:
-                start_date = module.start_date
-                end_date = module.target_date
-            else:
-                return {"data": [], "schema": {}}
-            queryset = module_issues
-        elif peek_view:
-            project_ids_str = self.request.GET.get("project_ids")
-            if project_ids_str:
-                project_id_list = [
-                    pid.strip() for pid in project_ids_str.split(",") if pid.strip()
-                ]
-            else:
-                project_id_list = []
-                return {"data": [], "schema": {}}
-            project_id = project_id_list[0]
-            project = Project.objects.filter(id=project_id).first()
-            if project.created_at:
-                start_date = project.created_at.date().replace(day=1)
-            else:
-                return {"data": [], "schema": {}}
-        else:
-            workspace = Workspace.objects.get(slug=self._workspace_slug)
-            start_date = workspace.created_at.date().replace(day=1)
+        workspace = Workspace.objects.get(slug=self._workspace_slug)
+        start_date = workspace.created_at.date().replace(day=1)
 
-        if cycle_id or module_id:
-            # Get daily stats with optimized query
-            daily_stats = (
-                queryset.values("created_at__date")
-                .annotate(
-                    created_count=Count("id"),
-                    completed_count=Count(
-                        "id", filter=Q(issue__state__group="completed")
-                    ),
-                )
-                .order_by("created_at__date")
+        # Apply date range filter if available
+        if self.filters["chart_period_range"]:
+            start_date, end_date = self.filters["chart_period_range"]
+            queryset = queryset.filter(
+                created_at__date__gte=start_date, created_at__date__lte=end_date
             )
 
-            # Create a dictionary of existing stats with summed counts
-            stats_dict = {
-                stat["created_at__date"].strftime("%Y-%m-%d"): {
-                    "created_count": stat["created_count"],
-                    "completed_count": stat["completed_count"],
-                }
-                for stat in daily_stats
-            }
-
-            # Generate data for all days in the range
-            data = []
-            current_date = start_date
-            while current_date <= end_date:
-                date_str = current_date.strftime("%Y-%m-%d")
-                stats = stats_dict.get(
-                    date_str, {"created_count": 0, "completed_count": 0}
-                )
-                data.append(
-                    {
-                        "key": date_str,
-                        "name": date_str,
-                        "count": stats["created_count"] + stats["completed_count"],
-                        "completed_issues": stats["completed_count"],
-                        "created_issues": stats["created_count"],
-                    }
-                )
-                current_date += timedelta(days=1)
-        else:
-            # Apply date range filter if available
-            if self.filters["chart_period_range"]:
-                start_date, end_date = self.filters["chart_period_range"]
-                queryset = queryset.filter(
-                    created_at__date__gte=start_date, created_at__date__lte=end_date
-                )
-
-            # Annotate by month and count
-            monthly_stats = (
-                queryset.annotate(month=TruncMonth("created_at"))
-                .values("month")
-                .annotate(
-                    created_count=Count("id"),
-                    completed_count=Count("id", filter=Q(state__group="completed")),
-                )
-                .order_by("month")
+        # Annotate by month and count
+        monthly_stats = (
+            queryset.annotate(month=TruncMonth("created_at"))
+            .values("month")
+            .annotate(
+                created_count=Count("id"),
+                completed_count=Count("id", filter=Q(state__group="completed")),
             )
+            .order_by("month")
+        )
 
-            # Create dictionary of month -> counts
-            stats_dict = {
-                stat["month"].strftime("%Y-%m-%d"): {
-                    "created_count": stat["created_count"],
-                    "completed_count": stat["completed_count"],
-                }
-                for stat in monthly_stats
+        # Create dictionary of month -> counts
+        stats_dict = {
+            stat["month"].strftime("%Y-%m-%d"): {
+                "created_count": stat["created_count"],
+                "completed_count": stat["completed_count"],
             }
+            for stat in monthly_stats
+        }
 
-            # Generate monthly data (ensure months with 0 count are included)
-            data = []
-            # include the current date at the end
-            end_date = timezone.now().date()
-            last_month = end_date.replace(day=1)
-            current_month = start_date
+        # Generate monthly data (ensure months with 0 count are included)
+        data = []
+        # include the current date at the end
+        end_date = timezone.now().date()
+        last_month = end_date.replace(day=1)
+        current_month = start_date
 
-            while current_month <= last_month:
-                date_str = current_month.strftime("%Y-%m-%d")
-                stats = stats_dict.get(
-                    date_str, {"created_count": 0, "completed_count": 0}
+        while current_month <= last_month:
+            date_str = current_month.strftime("%Y-%m-%d")
+            stats = stats_dict.get(date_str, {"created_count": 0, "completed_count": 0})
+            data.append(
+                {
+                    "key": date_str,
+                    "name": date_str,
+                    "count": stats["created_count"],
+                    "completed_issues": stats["completed_count"],
+                    "created_issues": stats["created_count"],
+                }
+            )
+            # Move to next month
+            if current_month.month == 12:
+                current_month = current_month.replace(
+                    year=current_month.year + 1, month=1
                 )
-                data.append(
-                    {
-                        "key": date_str,
-                        "name": date_str,
-                        "count": stats["created_count"],
-                        "completed_issues": stats["completed_count"],
-                        "created_issues": stats["created_count"],
-                    }
-                )
-                # Move to next month
-                if current_month.month == 12:
-                    current_month = current_month.replace(
-                        year=current_month.year + 1, month=1
-                    )
-                else:
-                    current_month = current_month.replace(month=current_month.month + 1)
+            else:
+                current_month = current_month.replace(month=current_month.month + 1)
 
         schema = {
             "completed_issues": "completed_issues",
@@ -515,8 +332,6 @@ class AdvanceAnalyticsChartEndpoint(AdvanceAnalyticsBaseView):
         type = request.GET.get("type", "projects")
         group_by = request.GET.get("group_by", None)
         x_axis = request.GET.get("x_axis", "PRIORITY")
-        cycle_id = request.GET.get("cycle_id", None)
-        module_id = request.GET.get("module_id", None)
 
         if type == "projects":
             return Response(self.project_chart(), status=status.HTTP_200_OK)
@@ -530,19 +345,6 @@ class AdvanceAnalyticsChartEndpoint(AdvanceAnalyticsBaseView):
                 )
             )
 
-            # Apply cycle/module filters if present
-            if cycle_id is not None:
-                cycle_issues = CycleIssue.objects.filter(
-                    **self.filters["base_filters"], cycle_id=cycle_id
-                ).values_list("issue_id", flat=True)
-                queryset = queryset.filter(id__in=cycle_issues)
-
-            elif module_id is not None:
-                module_issues = ModuleIssue.objects.filter(
-                    **self.filters["base_filters"], module_id=module_id
-                ).values_list("issue_id", flat=True)
-                queryset = queryset.filter(id__in=module_issues)
-
             # Apply date range filter if available
             if self.filters["chart_period_range"]:
                 start_date, end_date = self.filters["chart_period_range"]
@@ -556,14 +358,8 @@ class AdvanceAnalyticsChartEndpoint(AdvanceAnalyticsBaseView):
             )
 
         elif type == "work-items":
-            # Optionally accept cycle_id or module_id as query params
-            cycle_id = request.GET.get("cycle_id", None)
-            module_id = request.GET.get("module_id", None)
-            peek_view = request.GET.get("peek_view", False)
             return Response(
-                self.work_item_completion_chart(
-                    cycle_id=cycle_id, module_id=module_id, peek_view=peek_view
-                ),
+                self.work_item_completion_chart(),
                 status=status.HTTP_200_OK,
             )
 

apiserver/plane/app/views/analytic/project_analytics.py

@@ -0,0 +1,421 @@
+from rest_framework.response import Response
+from rest_framework import status
+from typing import Dict, Any
+from django.db.models import QuerySet, Q, Count
+from django.http import HttpRequest
+from django.db.models.functions import TruncMonth
+from django.utils import timezone
+from datetime import timedelta
+from plane.app.views.base import BaseAPIView
+from plane.app.permissions import ROLE, allow_permission
+from plane.db.models import (
+    Project,
+    Issue,
+    Cycle,
+    Module,
+    CycleIssue,
+    ModuleIssue,
+)
+from django.db import models
+from django.db.models import F, Case, When, Value
+from django.db.models.functions import Concat
+from plane.utils.build_chart import build_analytics_chart
+from plane.utils.date_utils import (
+    get_analytics_filters,
+)
+
+
+class ProjectAdvanceAnalyticsBaseView(BaseAPIView):
+    def initialize_workspace(self, slug: str, type: str) -> None:
+        self._workspace_slug = slug
+        self.filters = get_analytics_filters(
+            slug=slug,
+            type=type,
+            user=self.request.user,
+            date_filter=self.request.GET.get("date_filter", None),
+            project_ids=self.request.GET.get("project_ids", None),
+        )
+
+
+class ProjectAdvanceAnalyticsEndpoint(ProjectAdvanceAnalyticsBaseView):
+    def get_filtered_counts(self, queryset: QuerySet) -> Dict[str, int]:
+        def get_filtered_count() -> int:
+            if self.filters["analytics_date_range"]:
+                return queryset.filter(
+                    created_at__gte=self.filters["analytics_date_range"]["current"][
+                        "gte"
+                    ],
+                    created_at__lte=self.filters["analytics_date_range"]["current"][
+                        "lte"
+                    ],
+                ).count()
+            return queryset.count()
+
+        return {
+            "count": get_filtered_count(),
+        }
+
+    def get_work_items_stats(
+        self, project_id, cycle_id=None, module_id=None
+    ) -> Dict[str, Dict[str, int]]:
+        """
+        Returns work item stats for the workspace, or filtered by cycle_id or module_id if provided.
+        """
+        base_queryset = None
+        if cycle_id is not None:
+            cycle_issues = CycleIssue.objects.filter(
+                **self.filters["base_filters"], cycle_id=cycle_id
+            ).values_list("issue_id", flat=True)
+            base_queryset = Issue.issue_objects.filter(id__in=cycle_issues)
+        elif module_id is not None:
+            module_issues = ModuleIssue.objects.filter(
+                **self.filters["base_filters"], module_id=module_id
+            ).values_list("issue_id", flat=True)
+            base_queryset = Issue.issue_objects.filter(id__in=module_issues)
+        else:
+            base_queryset = Issue.issue_objects.filter(
+                **self.filters["base_filters"], project_id=project_id
+            )
+
+        return {
+            "total_work_items": self.get_filtered_counts(base_queryset),
+            "started_work_items": self.get_filtered_counts(
+                base_queryset.filter(state__group="started")
+            ),
+            "backlog_work_items": self.get_filtered_counts(
+                base_queryset.filter(state__group="backlog")
+            ),
+            "un_started_work_items": self.get_filtered_counts(
+                base_queryset.filter(state__group="unstarted")
+            ),
+            "completed_work_items": self.get_filtered_counts(
+                base_queryset.filter(state__group="completed")
+            ),
+        }
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    def get(self, request: HttpRequest, slug: str, project_id: str) -> Response:
+        self.initialize_workspace(slug, type="analytics")
+
+        # Optionally accept cycle_id or module_id as query params
+        cycle_id = request.GET.get("cycle_id", None)
+        module_id = request.GET.get("module_id", None)
+        return Response(
+            self.get_work_items_stats(
+                cycle_id=cycle_id, module_id=module_id, project_id=project_id
+            ),
+            status=status.HTTP_200_OK,
+        )
+
+
+class ProjectAdvanceAnalyticsStatsEndpoint(ProjectAdvanceAnalyticsBaseView):
+    def get_project_issues_stats(self) -> QuerySet:
+        # Get the base queryset with workspace and project filters
+        base_queryset = Issue.issue_objects.filter(**self.filters["base_filters"])
+
+        # Apply date range filter if available
+        if self.filters["chart_period_range"]:
+            start_date, end_date = self.filters["chart_period_range"]
+            base_queryset = base_queryset.filter(
+                created_at__date__gte=start_date, created_at__date__lte=end_date
+            )
+
+        return (
+            base_queryset.values("project_id", "project__name")
+            .annotate(
+                cancelled_work_items=Count("id", filter=Q(state__group="cancelled")),
+                completed_work_items=Count("id", filter=Q(state__group="completed")),
+                backlog_work_items=Count("id", filter=Q(state__group="backlog")),
+                un_started_work_items=Count("id", filter=Q(state__group="unstarted")),
+                started_work_items=Count("id", filter=Q(state__group="started")),
+            )
+            .order_by("project_id")
+        )
+
+    def get_work_items_stats(
+        self, project_id, cycle_id=None, module_id=None
+    ) -> Dict[str, Dict[str, int]]:
+        base_queryset = None
+        if cycle_id is not None:
+            cycle_issues = CycleIssue.objects.filter(
+                **self.filters["base_filters"], cycle_id=cycle_id
+            ).values_list("issue_id", flat=True)
+            base_queryset = Issue.issue_objects.filter(id__in=cycle_issues)
+        elif module_id is not None:
+            module_issues = ModuleIssue.objects.filter(
+                **self.filters["base_filters"], module_id=module_id
+            ).values_list("issue_id", flat=True)
+            base_queryset = Issue.issue_objects.filter(id__in=module_issues)
+        else:
+            base_queryset = Issue.issue_objects.filter(
+                **self.filters["base_filters"], project_id=project_id
+            )
+        return (
+            base_queryset.annotate(display_name=F("assignees__display_name"))
+            .annotate(assignee_id=F("assignees__id"))
+            .annotate(avatar=F("assignees__avatar"))
+            .annotate(
+                avatar_url=Case(
+                    # If `avatar_asset` exists, use it to generate the asset URL
+                    When(
+                        assignees__avatar_asset__isnull=False,
+                        then=Concat(
+                            Value("/api/assets/v2/static/"),
+                            "assignees__avatar_asset",  # Assuming avatar_asset has an id or relevant field
+                            Value("/"),
+                        ),
+                    ),
+                    # If `avatar_asset` is None, fall back to using `avatar` field directly
+                    When(
+                        assignees__avatar_asset__isnull=True, then="assignees__avatar"
+                    ),
+                    default=Value(None),
+                    output_field=models.CharField(),
+                )
+            )
+            .values("display_name", "assignee_id", "avatar_url")
+            .annotate(
+                cancelled_work_items=Count(
+                    "id", filter=Q(state__group="cancelled"), distinct=True
+                ),
+                completed_work_items=Count(
+                    "id", filter=Q(state__group="completed"), distinct=True
+                ),
+                backlog_work_items=Count(
+                    "id", filter=Q(state__group="backlog"), distinct=True
+                ),
+                un_started_work_items=Count(
+                    "id", filter=Q(state__group="unstarted"), distinct=True
+                ),
+                started_work_items=Count(
+                    "id", filter=Q(state__group="started"), distinct=True
+                ),
+            )
+            .order_by("display_name")
+        )
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    def get(self, request: HttpRequest, slug: str, project_id: str) -> Response:
+        self.initialize_workspace(slug, type="chart")
+        type = request.GET.get("type", "work-items")
+
+        if type == "work-items":
+            # Optionally accept cycle_id or module_id as query params
+            cycle_id = request.GET.get("cycle_id", None)
+            module_id = request.GET.get("module_id", None)
+            return Response(
+                self.get_work_items_stats(
+                    project_id=project_id, cycle_id=cycle_id, module_id=module_id
+                ),
+                status=status.HTTP_200_OK,
+            )
+
+        return Response({"message": "Invalid type"}, status=status.HTTP_400_BAD_REQUEST)
+
+
+class ProjectAdvanceAnalyticsChartEndpoint(ProjectAdvanceAnalyticsBaseView):
+    def work_item_completion_chart(
+        self, project_id, cycle_id=None, module_id=None
+    ) -> Dict[str, Any]:
+        # Get the base queryset
+        queryset = (
+            Issue.issue_objects.filter(**self.filters["base_filters"])
+            .filter(project_id=project_id)
+            .select_related("workspace", "state", "parent")
+            .prefetch_related(
+                "assignees", "labels", "issue_module__module", "issue_cycle__cycle"
+            )
+        )
+
+        if cycle_id is not None:
+            cycle_issues = CycleIssue.objects.filter(
+                **self.filters["base_filters"], cycle_id=cycle_id
+            ).values_list("issue_id", flat=True)
+            cycle = Cycle.objects.filter(id=cycle_id).first()
+            if cycle and cycle.start_date:
+                start_date = cycle.start_date.date()
+                end_date = cycle.end_date.date()
+            else:
+                return {"data": [], "schema": {}}
+            queryset = cycle_issues
+
+        elif module_id is not None:
+            module_issues = ModuleIssue.objects.filter(
+                **self.filters["base_filters"], module_id=module_id
+            ).values_list("issue_id", flat=True)
+            module = Module.objects.filter(id=module_id).first()
+            if module and module.start_date:
+                start_date = module.start_date
+                end_date = module.target_date
+            else:
+                return {"data": [], "schema": {}}
+            queryset = module_issues
+
+        else:
+            project = Project.objects.filter(id=project_id).first()
+            if project.created_at:
+                start_date = project.created_at.date().replace(day=1)
+            else:
+                return {"data": [], "schema": {}}
+
+        if cycle_id or module_id:
+            # Get daily stats with optimized query
+            daily_stats = (
+                queryset.values("created_at__date")
+                .annotate(
+                    created_count=Count("id"),
+                    completed_count=Count(
+                        "id", filter=Q(issue__state__group="completed")
+                    ),
+                )
+                .order_by("created_at__date")
+            )
+
+            # Create a dictionary of existing stats with summed counts
+            stats_dict = {
+                stat["created_at__date"].strftime("%Y-%m-%d"): {
+                    "created_count": stat["created_count"],
+                    "completed_count": stat["completed_count"],
+                }
+                for stat in daily_stats
+            }
+
+            # Generate data for all days in the range
+            data = []
+            current_date = start_date
+            while current_date <= end_date:
+                date_str = current_date.strftime("%Y-%m-%d")
+                stats = stats_dict.get(
+                    date_str, {"created_count": 0, "completed_count": 0}
+                )
+                data.append(
+                    {
+                        "key": date_str,
+                        "name": date_str,
+                        "count": stats["created_count"] + stats["completed_count"],
+                        "completed_issues": stats["completed_count"],
+                        "created_issues": stats["created_count"],
+                    }
+                )
+                current_date += timedelta(days=1)
+        else:
+            # Apply date range filter if available
+            if self.filters["chart_period_range"]:
+                start_date, end_date = self.filters["chart_period_range"]
+                queryset = queryset.filter(
+                    created_at__date__gte=start_date, created_at__date__lte=end_date
+                )
+
+            # Annotate by month and count
+            monthly_stats = (
+                queryset.annotate(month=TruncMonth("created_at"))
+                .values("month")
+                .annotate(
+                    created_count=Count("id"),
+                    completed_count=Count("id", filter=Q(state__group="completed")),
+                )
+                .order_by("month")
+            )
+
+            # Create dictionary of month -> counts
+            stats_dict = {
+                stat["month"].strftime("%Y-%m-%d"): {
+                    "created_count": stat["created_count"],
+                    "completed_count": stat["completed_count"],
+                }
+                for stat in monthly_stats
+            }
+
+            # Generate monthly data (ensure months with 0 count are included)
+            data = []
+            # include the current date at the end
+            end_date = timezone.now().date()
+            last_month = end_date.replace(day=1)
+            current_month = start_date
+
+            while current_month <= last_month:
+                date_str = current_month.strftime("%Y-%m-%d")
+                stats = stats_dict.get(
+                    date_str, {"created_count": 0, "completed_count": 0}
+                )
+                data.append(
+                    {
+                        "key": date_str,
+                        "name": date_str,
+                        "count": stats["created_count"],
+                        "completed_issues": stats["completed_count"],
+                        "created_issues": stats["created_count"],
+                    }
+                )
+                # Move to next month
+                if current_month.month == 12:
+                    current_month = current_month.replace(
+                        year=current_month.year + 1, month=1
+                    )
+                else:
+                    current_month = current_month.replace(month=current_month.month + 1)
+
+        schema = {
+            "completed_issues": "completed_issues",
+            "created_issues": "created_issues",
+        }
+
+        return {"data": data, "schema": schema}
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def get(self, request: HttpRequest, slug: str, project_id: str) -> Response:
+        self.initialize_workspace(slug, type="chart")
+        type = request.GET.get("type", "projects")
+        group_by = request.GET.get("group_by", None)
+        x_axis = request.GET.get("x_axis", "PRIORITY")
+        cycle_id = request.GET.get("cycle_id", None)
+        module_id = request.GET.get("module_id", None)
+
+        if type == "custom-work-items":
+            queryset = (
+                Issue.issue_objects.filter(**self.filters["base_filters"])
+                .filter(project_id=project_id)
+                .select_related("workspace", "state", "parent")
+                .prefetch_related(
+                    "assignees", "labels", "issue_module__module", "issue_cycle__cycle"
+                )
+            )
+
+            # Apply cycle/module filters if present
+            if cycle_id is not None:
+                cycle_issues = CycleIssue.objects.filter(
+                    **self.filters["base_filters"], cycle_id=cycle_id
+                ).values_list("issue_id", flat=True)
+                queryset = queryset.filter(id__in=cycle_issues)
+
+            elif module_id is not None:
+                module_issues = ModuleIssue.objects.filter(
+                    **self.filters["base_filters"], module_id=module_id
+                ).values_list("issue_id", flat=True)
+                queryset = queryset.filter(id__in=module_issues)
+
+            # Apply date range filter if available
+            if self.filters["chart_period_range"]:
+                start_date, end_date = self.filters["chart_period_range"]
+                queryset = queryset.filter(
+                    created_at__date__gte=start_date, created_at__date__lte=end_date
+                )
+
+            return Response(
+                build_analytics_chart(queryset, x_axis, group_by),
+                status=status.HTTP_200_OK,
+            )
+
+        elif type == "work-items":
+            # Optionally accept cycle_id or module_id as query params
+            cycle_id = request.GET.get("cycle_id", None)
+            module_id = request.GET.get("module_id", None)
+
+            return Response(
+                self.work_item_completion_chart(
+                    project_id=project_id, cycle_id=cycle_id, module_id=module_id
+                ),
+                status=status.HTTP_200_OK,
+            )
+
+        return Response({"message": "Invalid type"}, status=status.HTTP_400_BAD_REQUEST)

apiserver/plane/app/views/project/base.py

@@ -445,7 +445,7 @@ class ProjectViewSet(BaseViewSet):
                 is_active=True,
             ).exists()
         ):
-            project = Project.objects.get(pk=pk)
+            project = Project.objects.get(pk=pk, workspace__slug=slug)
             project.delete()
             webhook_activity.delay(
                 event="project",

apiserver/plane/db/migrations/0096_user_is_email_valid_user_masked_at.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.20 on 2025-05-21 13:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("db", "0095_page_external_id_page_external_source"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="user",
+            name="is_email_valid",
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name="user",
+            name="masked_at",
+            field=models.DateTimeField(null=True),
+        ),
+    ]

apiserver/plane/db/models/user.py

@@ -106,6 +106,12 @@ class User(AbstractBaseUser, PermissionsMixin):
         max_length=255, default="UTC", choices=USER_TIMEZONE_CHOICES
     )
 
+    # email validation
+    is_email_valid = models.BooleanField(default=False)
+
+    # masking
+    masked_at = models.DateTimeField(null=True)
+
     USERNAME_FIELD = "email"
     REQUIRED_FIELDS = ["username"]
 

apiserver/plane/license/api/views/instance.py

@@ -57,7 +57,7 @@ class InstanceEndpoint(BaseAPIView):
             POSTHOG_API_KEY,
             POSTHOG_HOST,
             UNSPLASH_ACCESS_KEY,
-            OPENAI_API_KEY,
+            LLM_API_KEY,
             IS_INTERCOM_ENABLED,
             INTERCOM_APP_ID,
         ) = get_configuration_value(
@@ -112,8 +112,8 @@ class InstanceEndpoint(BaseAPIView):
                     "default": os.environ.get("UNSPLASH_ACCESS_KEY", ""),
                 },
                 {
-                    "key": "OPENAI_API_KEY",
-                    "default": os.environ.get("OPENAI_API_KEY", ""),
+                    "key": "LLM_API_KEY",
+                    "default": os.environ.get("LLM_API_KEY", ""),
                 },
                 # Intercom settings
                 {
@@ -151,7 +151,7 @@ class InstanceEndpoint(BaseAPIView):
         data["has_unsplash_configured"] = bool(UNSPLASH_ACCESS_KEY)
 
         # Open AI settings
-        data["has_openai_configured"] = bool(OPENAI_API_KEY)
+        data["has_llm_configured"] = bool(LLM_API_KEY)
 
         # File size settings
         data["file_size_limit"] = float(os.environ.get("FILE_SIZE_LIMIT", 5242880))

apiserver/plane/middleware/logger.py

@@ -83,6 +83,32 @@ class APITokenLogMiddleware:
         self.process_request(request, response, request_body)
         return response
 
+    def _safe_decode_body(self, content):
+        """
+        Safely decodes request/response body content, handling binary data.
+        Returns None if content is None, or a string representation of the content.
+        """
+        # If the content is None, return None
+        if content is None:
+            return None
+
+        # If the content is an empty bytes object, return None
+        if content == b"":
+            return None
+
+        # Check if content is binary by looking for common binary file signatures
+        if (
+            content.startswith(b"\x89PNG")
+            or content.startswith(b"\xff\xd8\xff")
+            or content.startswith(b"%PDF")
+        ):
+            return "[Binary Content]"
+
+        try:
+            return content.decode("utf-8")
+        except UnicodeDecodeError:
+            return "[Could not decode content]"
+
     def process_request(self, request, response, request_body):
         api_key_header = "X-Api-Key"
         api_key = request.headers.get(api_key_header)
@@ -95,9 +121,13 @@ class APITokenLogMiddleware:
                     method=request.method,
                     query_params=request.META.get("QUERY_STRING", ""),
                     headers=str(request.headers),
-                    body=(request_body.decode("utf-8") if request_body else None),
+                    body=(
+                        self._safe_decode_body(request_body) if request_body else None
+                    ),
                     response_body=(
-                        response.content.decode("utf-8") if response.content else None
+                        self._safe_decode_body(response.content)
+                        if response.content
+                        else None
                     ),
                     response_code=response.status_code,
                     ip_address=get_client_ip(request=request),

apiserver/plane/space/views/issue.py

@@ -179,7 +179,7 @@ class ProjectIssuesPublicEndpoint(BaseAPIView):
                             Q(issue_intake__status=1)
                             | Q(issue_intake__status=-1)
                             | Q(issue_intake__status=2)
-                            | Q(issue_intake__status=True),
+                            | Q(issue_intake__isnull=True),
                             archived_at__isnull=True,
                             is_draft=False,
                         ),
@@ -205,7 +205,7 @@ class ProjectIssuesPublicEndpoint(BaseAPIView):
                         Q(issue_intake__status=1)
                         | Q(issue_intake__status=-1)
                         | Q(issue_intake__status=2)
-                        | Q(issue_intake__status=True),
+                        | Q(issue_intake__isnull=True),
                         archived_at__isnull=True,
                         is_draft=False,
                     ),

apiserver/templates/emails/notifications/issue-updates.html

@@ -209,7 +209,7 @@
                     {% for actor_comment in comment.actor_comments.new_value %} 
                     <tr>
                       <td>
-                        <div style=" padding: 6px 10px; margin-left: 10px; background-color: white; font-size: 0.8rem; color: #525252; margin-top: 5px; border-radius: 4px; display: flex; align-items: center; " >
+                        <div style=" padding: 6px 10px; margin-left: 10px; background-color: white; font-size: 0.8rem; color: #525252; margin-top: 5px; border-radius: 4px; overflow-x: scroll; max-width: 430px;" >
                           <p> {{ actor_comment|safe }} </p>
                         </div>
                       </td>

god-mode/.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

god-mode/.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/

god-mode/app/ai/form.tsx

@@ -0,0 +1,134 @@
+"use client";
+import { FC } from "react";
+import { useForm } from "react-hook-form";
+import { Lightbulb } from "lucide-react";
+import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ControllerInput, TControllerInputFormField } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type IInstanceAIForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
+
+export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
+  const { config } = props;
+  // store
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<AIFormValues>({
+    defaultValues: {
+      LLM_API_KEY: config["LLM_API_KEY"],
+      LLM_MODEL: config["LLM_MODEL"],
+    },
+  });
+
+  const aiFormFields: TControllerInputFormField[] = [
+    {
+      key: "LLM_MODEL",
+      type: "text",
+      label: "LLM Model",
+      description: (
+        <>
+          Choose an OpenAI engine.{" "}
+          <a
+            href="https://platform.openai.com/docs/models/overview"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "gpt-4o-mini",
+      error: Boolean(errors.LLM_MODEL),
+      required: false,
+    },
+    {
+      key: "LLM_API_KEY",
+      type: "password",
+      label: "API key",
+      description: (
+        <>
+          You will find your API key{" "}
+          <a
+            href="https://platform.openai.com/api-keys"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </>
+      ),
+      placeholder: "sk-asddassdfasdefqsdfasd23das3dasdcasd",
+      error: Boolean(errors.LLM_API_KEY),
+      required: false,
+    },
+  ];
+
+  const onSubmit = async (formData: AIFormValues) => {
+    const payload: Partial<AIFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "AI Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-3">
+        <div>
+          <div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
+          <div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
+        </div>
+        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
+          {aiFormFields.map((field) => (
+            <ControllerInput
+              key={field.key}
+              control={control}
+              type={field.type}
+              name={field.key}
+              label={field.label}
+              description={field.description}
+              placeholder={field.placeholder}
+              error={field.error}
+              required={field.required}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+
+        <div className="relative inline-flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200">
+          <Lightbulb height="14" width="14" />
+          <div>
+            If you have a preferred AI models vendor, please get in{" "}
+            <a className="underline font-medium" href="https://plane.so/contact">
+              touch with us.
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

god-mode/app/ai/layout.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { AdminLayout } from "@/layouts/admin-layout";
+
+export const metadata: Metadata = {
+  title: "Artificial Intelligence Settings - Plane Web",
+};
+
+export default function AILayout({ children }: { children: ReactNode }) {
+  return <AdminLayout>{children}</AdminLayout>;
+}

god-mode/app/ai/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { Loader } from "@plane/ui";
+// hooks
+import { useInstance } from "@/hooks/store";
+// components
+import { InstanceAIForm } from "./form";
+
+const InstanceAIPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig } = useInstance();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <>
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
+          <div className="text-sm font-normal text-custom-text-300">
+            Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
+          </div>
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceAIForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="40%" />
+              <div className="w-2/3 grid grid-cols-2 gap-x-8 gap-y-4">
+                <Loader.Item height="50px" />
+                <Loader.Item height="50px" />
+              </div>
+              <Loader.Item height="50px" width="20%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceAIPage;

god-mode/app/authentication/github/form.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import {
+  CodeBlock,
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
+
+export const InstanceGithubConfigForm: FC<Props> = (props) => {
+  const { config } = props;
+  // states
+  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<GithubConfigFormValues>({
+    defaultValues: {
+      GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"],
+      GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"],
+      GITHUB_ORGANIZATION_ID: config["GITHUB_ORGANIZATION_ID"],
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GITHUB_FORM_FIELDS: TControllerInputFormField[] = [
+    {
+      key: "GITHUB_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          You will get this from your{" "}
+          <a
+            tabIndex={-1}
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitHub OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "70a44354520df8bd9bcd",
+      error: Boolean(errors.GITHUB_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GITHUB_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret is also found in your{" "}
+          <a
+            tabIndex={-1}
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitHub OAuth application settings.
+          </a>
+        </>
+      ),
+      placeholder: "9b0050f94ec1b744e32ce79ea4ffacd40d4119cb",
+      error: Boolean(errors.GITHUB_CLIENT_SECRET),
+      required: true,
+    },
+    {
+      key: "GITHUB_ORGANIZATION_ID",
+      type: "text",
+      label: "Organization ID",
+      description: <>The organization github ID.</>,
+      placeholder: "123456789",
+      error: Boolean(errors.GITHUB_ORGANIZATION_ID),
+      required: false,
+    },
+  ];
+
+  const GITHUB_SERVICE_FIELD: TCopyField[] = [
+    {
+      key: "Origin_URL",
+      label: "Origin URL",
+      url: originURL,
+      description: (
+        <>
+          We will auto-generate this. Paste this into the <CodeBlock darkerShade>Authorized origin URL</CodeBlock> field{" "}
+          <a
+            tabIndex={-1}
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/github/callback/`,
+      description: (
+        <>
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
+          field{" "}
+          <a
+            tabIndex={-1}
+            href="https://github.com/settings/applications/new"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GithubConfigFormValues) => {
+    const payload: Partial<GithubConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your GitHub authentication is configured. You should test it now.",
+        });
+        reset({
+          GITHUB_CLIENT_ID: response.find((item) => item.key === "GITHUB_CLIENT_ID")?.value,
+          GITHUB_CLIENT_SECRET: response.find((item) => item.key === "GITHUB_CLIENT_SECRET")?.value,
+          GITHUB_ORGANIZATION_ID: response.find((item) => item.key === "GITHUB_ORGANIZATION_ID")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (isDirty) {
+      e.preventDefault();
+      setIsDiscardChangesModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDiscardModal
+        isOpen={isDiscardChangesModalOpen}
+        onDiscardHref="/authentication"
+        handleClose={() => setIsDiscardChangesModalOpen(false)}
+      />
+      <div className="flex flex-col gap-8">
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">GitHub-provided details for Plane</div>
+            {GITHUB_FORM_FIELDS.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
+                </Button>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
+                  Go back
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Plane-provided details for GitHub</div>
+              {GITHUB_SERVICE_FIELD.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

god-mode/app/authentication/github/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+// plane internal packages
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+// icons
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+// local components
+import { InstanceGithubConfigForm } from "./form";
+
+const InstanceGithubAuthenticationPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // theme
+  const { resolvedTheme } = useTheme();
+  // config
+  const enableGithubConfig = formattedConfig?.IS_GITHUB_ENABLED ?? "";
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GITHUB_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration...",
+      success: {
+        title: "Configuration saved",
+        message: () => `GitHub authentication is now ${value ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+  return (
+    <>
+      <PageHeader title="GitHub Authentication - Plane Web" />
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <AuthenticationMethodCard
+            name="GitHub"
+            description="Allow members to login or sign up to plane with their GitHub accounts."
+            icon={
+              <Image
+                src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+                height={24}
+                width={24}
+                alt="GitHub Logo"
+              />
+            }
+            config={
+              <ToggleSwitch
+                value={Boolean(parseInt(enableGithubConfig))}
+                onChange={() => {
+                  Boolean(parseInt(enableGithubConfig)) === true
+                    ? updateConfig("IS_GITHUB_ENABLED", "0")
+                    : updateConfig("IS_GITHUB_ENABLED", "1");
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceGithubConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceGithubAuthenticationPage;

god-mode/app/authentication/gitlab/form.tsx

@@ -0,0 +1,212 @@
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import {
+  CodeBlock,
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
+
+export const InstanceGitlabConfigForm: FC<Props> = (props) => {
+  const { config } = props;
+  // states
+  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<GitlabConfigFormValues>({
+    defaultValues: {
+      GITLAB_HOST: config["GITLAB_HOST"],
+      GITLAB_CLIENT_ID: config["GITLAB_CLIENT_ID"],
+      GITLAB_CLIENT_SECRET: config["GITLAB_CLIENT_SECRET"],
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GITLAB_FORM_FIELDS: TControllerInputFormField[] = [
+    {
+      key: "GITLAB_HOST",
+      type: "text",
+      label: "Host",
+      description: (
+        <>
+          This is either https://gitlab.com or the <CodeBlock>domain.tld</CodeBlock> where you host GitLab.
+        </>
+      ),
+      placeholder: "https://gitlab.com",
+      error: Boolean(errors.GITLAB_HOST),
+      required: true,
+    },
+    {
+      key: "GITLAB_CLIENT_ID",
+      type: "text",
+      label: "Application ID",
+      description: (
+        <>
+          Get this from your{" "}
+          <a
+            tabIndex={-1}
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitLab OAuth application settings
+          </a>
+          .
+        </>
+      ),
+      placeholder: "c2ef2e7fc4e9d15aa7630f5637d59e8e4a27ff01dceebdb26b0d267b9adcf3c3",
+      error: Boolean(errors.GITLAB_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GITLAB_CLIENT_SECRET",
+      type: "password",
+      label: "Secret",
+      description: (
+        <>
+          The client secret is also found in your{" "}
+          <a
+            tabIndex={-1}
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitLab OAuth application settings
+          </a>
+          .
+        </>
+      ),
+      placeholder: "gloas-f79cfa9a03c97f6ffab303177a5a6778a53c61e3914ba093412f68a9298a1b28",
+      error: Boolean(errors.GITLAB_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const GITLAB_SERVICE_FIELD: TCopyField[] = [
+    {
+      key: "Callback_URL",
+      label: "Callback URL",
+      url: `${originURL}/auth/gitlab/callback/`,
+      description: (
+        <>
+          We will auto-generate this. Paste this into the <CodeBlock darkerShade>Redirect URI</CodeBlock> field of your{" "}
+          <a
+            tabIndex={-1}
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitLab OAuth application
+          </a>
+          .
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GitlabConfigFormValues) => {
+    const payload: Partial<GitlabConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your GitLab authentication is configured. You should test it now.",
+        });
+        reset({
+          GITLAB_HOST: response.find((item) => item.key === "GITLAB_HOST")?.value,
+          GITLAB_CLIENT_ID: response.find((item) => item.key === "GITLAB_CLIENT_ID")?.value,
+          GITLAB_CLIENT_SECRET: response.find((item) => item.key === "GITLAB_CLIENT_SECRET")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (isDirty) {
+      e.preventDefault();
+      setIsDiscardChangesModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDiscardModal
+        isOpen={isDiscardChangesModalOpen}
+        onDiscardHref="/authentication"
+        handleClose={() => setIsDiscardChangesModalOpen(false)}
+      />
+      <div className="flex flex-col gap-8">
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">GitLab-provided details for Plane</div>
+            {GITLAB_FORM_FIELDS.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
+                </Button>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
+                  Go back
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Plane-provided details for GitLab</div>
+              {GITLAB_SERVICE_FIELD.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

god-mode/app/authentication/gitlab/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import useSWR from "swr";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+// icons
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+// local components
+import { InstanceGitlabConfigForm } from "./form";
+
+const InstanceGitlabAuthenticationPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // config
+  const enableGitlabConfig = formattedConfig?.IS_GITLAB_ENABLED ?? "";
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GITLAB_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration...",
+      success: {
+        title: "Configuration saved",
+        message: () => `GitLab authentication is now ${value ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+  return (
+    <>
+      <PageHeader title="GitLab Authentication - Plane Web" />
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <AuthenticationMethodCard
+            name="GitLab"
+            description="Allow members to login or sign up to plane with their GitLab accounts."
+            icon={<Image src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
+            config={
+              <ToggleSwitch
+                value={Boolean(parseInt(enableGitlabConfig))}
+                onChange={() => {
+                  Boolean(parseInt(enableGitlabConfig)) === true
+                    ? updateConfig("IS_GITLAB_ENABLED", "0")
+                    : updateConfig("IS_GITLAB_ENABLED", "1");
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceGitlabConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceGitlabAuthenticationPage;

god-mode/app/authentication/google/form.tsx

@@ -0,0 +1,214 @@
+"use client";
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import {
+  CodeBlock,
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
+
+export const InstanceGoogleConfigForm: FC<Props> = (props) => {
+  const { config } = props;
+  // states
+  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<GoogleConfigFormValues>({
+    defaultValues: {
+      GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"],
+      GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"],
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GOOGLE_FORM_FIELDS: TControllerInputFormField[] = [
+    {
+      key: "GOOGLE_CLIENT_ID",
+      type: "text",
+      label: "Client ID",
+      description: (
+        <>
+          Your client ID lives in your Google API Console.{" "}
+          <a
+            tabIndex={-1}
+            href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "840195096245-0p2tstej9j5nc4l8o1ah2dqondscqc1g.apps.googleusercontent.com",
+      error: Boolean(errors.GOOGLE_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GOOGLE_CLIENT_SECRET",
+      type: "password",
+      label: "Client secret",
+      description: (
+        <>
+          Your client secret should also be in your Google API Console.{" "}
+          <a
+            tabIndex={-1}
+            href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            Learn more
+          </a>
+        </>
+      ),
+      placeholder: "GOCShX-ADp4cI0kPqav1gGCBg5bE02E",
+      error: Boolean(errors.GOOGLE_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
+    {
+      key: "Origin_URL",
+      label: "Origin URL",
+      url: originURL,
+      description: (
+        <p>
+          We will auto-generate this. Paste this into your{" "}
+          <CodeBlock darkerShade>Authorized JavaScript origins</CodeBlock> field. For this OAuth client{" "}
+          <a
+            href="https://console.cloud.google.com/apis/credentials/oauthclient"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </p>
+      ),
+    },
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/google/callback/`,
+      description: (
+        <p>
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Redirect URI</CodeBlock>{" "}
+          field. For this OAuth client{" "}
+          <a
+            href="https://console.cloud.google.com/apis/credentials/oauthclient"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </p>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GoogleConfigFormValues) => {
+    const payload: Partial<GoogleConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your Google authentication is configured. You should test it now.",
+        });
+        reset({
+          GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
+          GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_CLIENT_SECRET")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (isDirty) {
+      e.preventDefault();
+      setIsDiscardChangesModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDiscardModal
+        isOpen={isDiscardChangesModalOpen}
+        onDiscardHref="/authentication"
+        handleClose={() => setIsDiscardChangesModalOpen(false)}
+      />
+      <div className="flex flex-col gap-8">
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">Google-provided details for Plane</div>
+            {GOOGLE_FORM_FIELDS.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
+                </Button>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
+                  Go back
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
+              {GOOGLE_SERVICE_DETAILS.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

god-mode/app/authentication/google/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import useSWR from "swr";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+// icons
+import GoogleLogo from "@/public/logos/google-logo.svg";
+// local components
+import { InstanceGoogleConfigForm } from "./form";
+
+const InstanceGoogleAuthenticationPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // config
+  const enableGoogleConfig = formattedConfig?.IS_GOOGLE_ENABLED ?? "";
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GOOGLE_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration...",
+      success: {
+        title: "Configuration saved",
+        message: () => `Google authentication is now ${value ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+  return (
+    <>
+      <PageHeader title="Google Authentication - Plane Web" />
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <AuthenticationMethodCard
+            name="Google"
+            description="Allow members to login or sign up to plane with their Google
+            accounts."
+            icon={<Image src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
+            config={
+              <ToggleSwitch
+                value={Boolean(parseInt(enableGoogleConfig))}
+                onChange={() => {
+                  Boolean(parseInt(enableGoogleConfig)) === true
+                    ? updateConfig("IS_GOOGLE_ENABLED", "0")
+                    : updateConfig("IS_GOOGLE_ENABLED", "1");
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceGoogleConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceGoogleAuthenticationPage;

god-mode/app/authentication/layout.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { AdminLayout } from "@/layouts/admin-layout";
+
+export const metadata: Metadata = {
+  title: "Authentication Settings - Plane Web",
+};
+
+export default function AuthenticationLayout({ children }: { children: ReactNode }) {
+  return <AdminLayout>{children}</AdminLayout>;
+}

god-mode/app/authentication/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane internal packages
+import { TInstanceConfigurationKeys } from "@plane/types";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useInstance } from "@/hooks/store";
+// plane admin components
+import { AuthenticationModes } from "@/plane-admin/components/authentication";
+
+const InstanceAuthenticationPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // derived values
+  const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
+
+  const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving configuration",
+      success: {
+        title: "Success",
+        message: () => "Configuration saved successfully",
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+
+  return (
+    <>
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="text-xl font-medium text-custom-text-100">Manage authentication modes for your instance</div>
+          <div className="text-sm font-normal text-custom-text-300">
+            Configure authentication modes for your team and restrict sign-ups to be invite only.
+          </div>
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <div className="space-y-3">
+              <div className={cn("w-full flex items-center gap-14 rounded")}>
+                <div className="flex grow items-center gap-4">
+                  <div className="grow">
+                    <div className="text-lg font-medium pb-1">Allow anyone to sign up even without an invite</div>
+                    <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                      Toggling this off will only let users sign up when they are invited.
+                    </div>
+                  </div>
+                </div>
+                <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
+                  <div className="flex items-center gap-4">
+                    <ToggleSwitch
+                      value={Boolean(parseInt(enableSignUpConfig))}
+                      onChange={() => {
+                        if (Boolean(parseInt(enableSignUpConfig)) === true) {
+                          updateConfig("ENABLE_SIGNUP", "0");
+                        } else {
+                          updateConfig("ENABLE_SIGNUP", "1");
+                        }
+                      }}
+                      size="sm"
+                      disabled={isSubmitting}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="text-lg font-medium pt-6">Available authentication modes</div>
+              <AuthenticationModes disabled={isSubmitting} updateConfig={updateConfig} />
+            </div>
+          ) : (
+            <Loader className="space-y-10">
+              <Loader.Item height="50px" width="75%" />
+              <Loader.Item height="50px" width="75%" />
+              <Loader.Item height="50px" width="40%" />
+              <Loader.Item height="50px" width="40%" />
+              <Loader.Item height="50px" width="20%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceAuthenticationPage;

god-mode/app/email/email-config-form.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import React, { FC, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+// types
+import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
+// ui
+import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ControllerInput, TControllerInputFormField } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+// local components
+import { SendTestEmailModal } from "./test-email-modal";
+
+type IInstanceEmailForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type EmailFormValues = Record<TInstanceEmailConfigurationKeys, string>;
+
+type TEmailSecurityKeys = "EMAIL_USE_TLS" | "EMAIL_USE_SSL" | "NONE";
+
+const EMAIL_SECURITY_OPTIONS: { [key in TEmailSecurityKeys]: string } = {
+  EMAIL_USE_TLS: "TLS",
+  EMAIL_USE_SSL: "SSL",
+  NONE: "No email security",
+};
+
+export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
+  const { config } = props;
+  // states
+  const [isSendTestEmailModalOpen, setIsSendTestEmailModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    control,
+    formState: { errors, isValid, isDirty, isSubmitting },
+  } = useForm<EmailFormValues>({
+    defaultValues: {
+      EMAIL_HOST: config["EMAIL_HOST"],
+      EMAIL_PORT: config["EMAIL_PORT"],
+      EMAIL_HOST_USER: config["EMAIL_HOST_USER"],
+      EMAIL_HOST_PASSWORD: config["EMAIL_HOST_PASSWORD"],
+      EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
+      EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
+      EMAIL_FROM: config["EMAIL_FROM"],
+    },
+  });
+
+  const emailFormFields: TControllerInputFormField[] = [
+    {
+      key: "EMAIL_HOST",
+      type: "text",
+      label: "Host",
+      placeholder: "email.google.com",
+      error: Boolean(errors.EMAIL_HOST),
+      required: true,
+    },
+    {
+      key: "EMAIL_PORT",
+      type: "text",
+      label: "Port",
+      placeholder: "8080",
+      error: Boolean(errors.EMAIL_PORT),
+      required: true,
+    },
+    {
+      key: "EMAIL_FROM",
+      type: "text",
+      label: "Sender's email address",
+      description:
+        "This is the email address your users will see when getting emails from this instance. You will need to verify this address.",
+      placeholder: "[email protected]",
+      error: Boolean(errors.EMAIL_FROM),
+      required: true,
+    },
+  ];
+
+  const OptionalEmailFormFields: TControllerInputFormField[] = [
+    {
+      key: "EMAIL_HOST_USER",
+      type: "text",
+      label: "Username",
+      placeholder: "[email protected]",
+      error: Boolean(errors.EMAIL_HOST_USER),
+      required: false,
+    },
+    {
+      key: "EMAIL_HOST_PASSWORD",
+      type: "password",
+      label: "Password",
+      placeholder: "Password",
+      error: Boolean(errors.EMAIL_HOST_PASSWORD),
+      required: false,
+    },
+  ];
+
+  const onSubmit = async (formData: EmailFormValues) => {
+    const payload: Partial<EmailFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Email Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  const useTLSValue = watch("EMAIL_USE_TLS");
+  const useSSLValue = watch("EMAIL_USE_SSL");
+  const emailSecurityKey: TEmailSecurityKeys = useMemo(() => {
+    if (useTLSValue === "1") return "EMAIL_USE_TLS";
+    if (useSSLValue === "1") return "EMAIL_USE_SSL";
+    return "NONE";
+  }, [useTLSValue, useSSLValue]);
+
+  const handleEmailSecurityChange = (key: TEmailSecurityKeys) => {
+    if (key === "EMAIL_USE_SSL") {
+      setValue("EMAIL_USE_TLS", "0");
+      setValue("EMAIL_USE_SSL", "1");
+    }
+    if (key === "EMAIL_USE_TLS") {
+      setValue("EMAIL_USE_TLS", "1");
+      setValue("EMAIL_USE_SSL", "0");
+    }
+    if (key === "NONE") {
+      setValue("EMAIL_USE_TLS", "0");
+      setValue("EMAIL_USE_SSL", "0");
+    }
+  };
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <SendTestEmailModal isOpen={isSendTestEmailModalOpen} handleClose={() => setIsSendTestEmailModalOpen(false)} />
+        <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-start justify-between gap-10 lg:grid-cols-2">
+          {emailFormFields.map((field) => (
+            <ControllerInput
+              key={field.key}
+              control={control}
+              type={field.type}
+              name={field.key}
+              label={field.label}
+              description={field.description}
+              placeholder={field.placeholder}
+              error={field.error}
+              required={field.required}
+            />
+          ))}
+          <div className="flex flex-col gap-1">
+            <h4 className="text-sm text-custom-text-300">Email security</h4>
+            <CustomSelect
+              value={emailSecurityKey}
+              label={EMAIL_SECURITY_OPTIONS[emailSecurityKey]}
+              onChange={handleEmailSecurityChange}
+              buttonClassName="rounded-md border-custom-border-200"
+              optionsClassName="w-full"
+              input
+            >
+              {Object.entries(EMAIL_SECURITY_OPTIONS).map(([key, value]) => (
+                <CustomSelect.Option key={key} value={key} className="w-full">
+                  {value}
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          </div>
+        </div>
+        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-custom-border-100">
+          <div className="flex w-full max-w-xl flex-col gap-y-10 px-1">
+            <div className="mr-8 flex items-center gap-10 pt-4">
+              <div className="grow">
+                <div className="text-sm font-medium text-custom-text-100">Authentication</div>
+                <div className="text-xs font-normal text-custom-text-300">
+                  This is optional, but we recommend setting up a username and a password for your SMTP server.
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-10 lg:grid-cols-2">
+            {OptionalEmailFormFields.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+      <div className="flex max-w-4xl items-center py-1 gap-4">
+        <Button
+          variant="primary"
+          onClick={handleSubmit(onSubmit)}
+          loading={isSubmitting}
+          disabled={!isValid || !isDirty}
+        >
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+        <Button
+          variant="outline-primary"
+          onClick={() => setIsSendTestEmailModalOpen(true)}
+          loading={isSubmitting}
+          disabled={!isValid}
+        >
+          Send test email
+        </Button>
+      </div>
+    </div>
+  );
+};

god-mode/app/email/layout.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { AdminLayout } from "@/layouts/admin-layout";
+
+interface EmailLayoutProps {
+  children: ReactNode;
+}
+
+export const metadata: Metadata = {
+  title: "Email Settings - Plane Web",
+};
+
+export default function EmailLayout({ children }: EmailLayoutProps) {
+  return <AdminLayout>{children}</AdminLayout>;
+}

god-mode/app/email/page.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { Loader } from "@plane/ui";
+// hooks
+import { useInstance } from "@/hooks/store";
+// components
+import { InstanceEmailForm } from "./email-config-form";
+
+const InstanceEmailPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig } = useInstance();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <>
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
+          <div className="text-sm font-normal text-custom-text-300">
+            Plane can send useful emails to you and your users from your own instance without talking to the Internet.
+            <div className="text-sm font-normal text-custom-text-300">
+              Set it up below and please test your settings before you save them.&nbsp;
+              <span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
+            </div>
+          </div>
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceEmailForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-10">
+              <Loader.Item height="50px" width="75%" />
+              <Loader.Item height="50px" width="75%" />
+              <Loader.Item height="50px" width="40%" />
+              <Loader.Item height="50px" width="40%" />
+              <Loader.Item height="50px" width="20%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceEmailPage;

god-mode/app/email/test-email-modal.tsx

@@ -0,0 +1,135 @@
+import React, { FC, useEffect, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+// plane imports
+import { InstanceService } from "@plane/services";
+// ui
+import { Button, Input } from "@plane/ui";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+enum ESendEmailSteps {
+  SEND_EMAIL = "SEND_EMAIL",
+  SUCCESS = "SUCCESS",
+  FAILED = "FAILED",
+}
+
+const instanceService = new InstanceService();
+
+export const SendTestEmailModal: FC<Props> = (props) => {
+  const { isOpen, handleClose } = props;
+
+  // state
+  const [receiverEmail, setReceiverEmail] = useState("");
+  const [sendEmailStep, setSendEmailStep] = useState<ESendEmailSteps>(ESendEmailSteps.SEND_EMAIL);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  // reset state
+  const resetState = () => {
+    setReceiverEmail("");
+    setSendEmailStep(ESendEmailSteps.SEND_EMAIL);
+    setIsLoading(false);
+    setError("");
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      resetState();
+    }
+  }, [isOpen]);
+
+  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+
+    setIsLoading(true);
+    await instanceService
+      .sendTestEmail(receiverEmail)
+      .then(() => {
+        setSendEmailStep(ESendEmailSteps.SUCCESS);
+      })
+      .catch((error) => {
+        setError(error?.error || "Failed to send email");
+        setSendEmailStep(ESendEmailSteps.FAILED);
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="my-10 flex justify-center p-4 text-center sm:p-0 md:my-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-xl">
+                <h3 className="text-lg font-medium leading-6 text-custom-text-100">
+                  {sendEmailStep === ESendEmailSteps.SEND_EMAIL
+                    ? "Send test email"
+                    : sendEmailStep === ESendEmailSteps.SUCCESS
+                      ? "Email send"
+                      : "Failed"}{" "}
+                </h3>
+                <div className="pt-6 pb-2">
+                  {sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
+                    <Input
+                      id="receiver_email"
+                      type="email"
+                      value={receiverEmail}
+                      onChange={(e) => setReceiverEmail(e.target.value)}
+                      placeholder="Receiver email"
+                      className="w-full resize-none text-lg"
+                      tabIndex={1}
+                    />
+                  )}
+                  {sendEmailStep === ESendEmailSteps.SUCCESS && (
+                    <div className="flex flex-col gap-y-4 text-sm">
+                      <p>
+                        We have sent the test email to {receiverEmail}. Please check your spam folder if you cannot find
+                        it.
+                      </p>
+                      <p>If you still cannot find it, recheck your SMTP configuration and trigger a new test email.</p>
+                    </div>
+                  )}
+                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-sm">{error}</div>}
+                  <div className="flex items-center gap-2 justify-end mt-5">
+                    <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={2}>
+                      {sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
+                    </Button>
+                    {sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
+                      <Button variant="primary" size="sm" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
+                        {isLoading ? "Sending email..." : "Send email"}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

god-mode/app/general/form.tsx

@@ -0,0 +1,155 @@
+"use client";
+import { FC } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Telescope } from "lucide-react";
+// types
+import { IInstance, IInstanceAdmin } from "@plane/types";
+// ui
+import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
+// components
+import { ControllerInput } from "@/components/common";
+import { useInstance } from "@/hooks/store";
+import { IntercomConfig } from "./intercom";
+// hooks
+
+export interface IGeneralConfigurationForm {
+  instance: IInstance;
+  instanceAdmins: IInstanceAdmin[];
+}
+
+export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer((props) => {
+  const { instance, instanceAdmins } = props;
+  // hooks
+  const { instanceConfigurations, updateInstanceInfo, updateInstanceConfigurations } = useInstance();
+
+  // form data
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { errors, isSubmitting },
+  } = useForm<Partial<IInstance>>({
+    defaultValues: {
+      instance_name: instance?.instance_name,
+      is_telemetry_enabled: instance?.is_telemetry_enabled,
+    },
+  });
+
+  const onSubmit = async (formData: Partial<IInstance>) => {
+    const payload: Partial<IInstance> = { ...formData };
+
+    // update the intercom configuration
+    const isIntercomEnabled =
+      instanceConfigurations?.find((config) => config.key === "IS_INTERCOM_ENABLED")?.value === "1";
+    if (!payload.is_telemetry_enabled && isIntercomEnabled) {
+      try {
+        await updateInstanceConfigurations({ IS_INTERCOM_ENABLED: "0" });
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    await updateInstanceInfo(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-3">
+        <div className="text-lg font-medium">Instance details</div>
+        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-8 md:grid-cols-2 lg:grid-cols-3">
+          <ControllerInput
+            key="instance_name"
+            name="instance_name"
+            control={control}
+            type="text"
+            label="Name of instance"
+            placeholder="Instance name"
+            error={Boolean(errors.instance_name)}
+            required
+          />
+
+          <div className="flex flex-col gap-1">
+            <h4 className="text-sm text-custom-text-300">Email</h4>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={instanceAdmins[0]?.user_detail?.email ?? ""}
+              placeholder="Admin email"
+              className="w-full cursor-not-allowed !text-custom-text-400"
+              autoComplete="on"
+              disabled
+            />
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <h4 className="text-sm text-custom-text-300">Instance ID</h4>
+            <Input
+              id="instance_id"
+              name="instance_id"
+              type="text"
+              value={instance.instance_id}
+              className="w-full cursor-not-allowed rounded-md font-medium !text-custom-text-400"
+              disabled
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <div className="text-lg font-medium">Chat + telemetry</div>
+        <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
+        <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
+          <div className="grow flex items-center gap-4">
+            <div className="shrink-0">
+              <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
+                <Telescope className="w-6 h-6 text-custom-text-300/80 p-0.5" />
+              </div>
+            </div>
+            <div className="grow">
+              <div className="text-sm font-medium text-custom-text-100 leading-5">
+                Let Plane collect anonymous usage data
+              </div>
+              <div className="text-xs font-normal text-custom-text-300 leading-5">
+                No PII is collected.This anonymized data is used to understand how you use Plane and build new features
+                in line with{" "}
+                <a
+                  href="https://developers.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  className="text-custom-primary-100 hover:underline"
+                  rel="noreferrer"
+                >
+                  our Telemetry Policy.
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
+            <Controller
+              control={control}
+              name="is_telemetry_enabled"
+              render={({ field: { value, onChange } }) => (
+                <ToggleSwitch value={value ?? false} onChange={onChange} size="sm" disabled={isSubmitting} />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </div>
+  );
+});

god-mode/app/general/intercom.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { FC, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { MessageSquare } from "lucide-react";
+import { IFormattedInstanceConfiguration } from "@plane/types";
+import { ToggleSwitch } from "@plane/ui";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type TIntercomConfig = {
+  isTelemetryEnabled: boolean;
+};
+
+export const IntercomConfig: FC<TIntercomConfig> = observer((props) => {
+  const { isTelemetryEnabled } = props;
+  // hooks
+  const { instanceConfigurations, updateInstanceConfigurations, fetchInstanceConfigurations } = useInstance();
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+  // derived values
+  const isIntercomEnabled = isTelemetryEnabled
+    ? instanceConfigurations
+      ? instanceConfigurations?.find((config) => config.key === "IS_INTERCOM_ENABLED")?.value === "1"
+        ? true
+        : false
+      : undefined
+    : false;
+
+  const { isLoading } = useSWR(isTelemetryEnabled ? "INSTANCE_CONFIGURATIONS" : null, () =>
+    isTelemetryEnabled ? fetchInstanceConfigurations() : null
+  );
+
+  const initialLoader = isLoading && isIntercomEnabled === undefined;
+
+  const submitInstanceConfigurations = async (payload: Partial<IFormattedInstanceConfiguration>) => {
+    try {
+      await updateInstanceConfigurations(payload);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const enableIntercomConfig = () => {
+    submitInstanceConfigurations({ IS_INTERCOM_ENABLED: isIntercomEnabled ? "0" : "1" });
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
+        <div className="grow flex items-center gap-4">
+          <div className="shrink-0">
+            <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
+              <MessageSquare className="w-6 h-6 text-custom-text-300/80 p-0.5" />
+            </div>
+          </div>
+
+          <div className="grow">
+            <div className="text-sm font-medium text-custom-text-100 leading-5">Chat with us</div>
+            <div className="text-xs font-normal text-custom-text-300 leading-5">
+              Let your users chat with us via Intercom or another service. Toggling Telemetry off turns this off
+              automatically.
+            </div>
+          </div>
+
+          <div className="ml-auto">
+            <ToggleSwitch
+              value={isIntercomEnabled ? true : false}
+              onChange={enableIntercomConfig}
+              size="sm"
+              disabled={!isTelemetryEnabled || isSubmitting || initialLoader}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});

god-mode/app/general/layout.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { AdminLayout } from "@/layouts/admin-layout";
+
+export const metadata: Metadata = {
+  title: "General Settings - Plane Web",
+};
+
+export default function GeneralLayout({ children }: { children: ReactNode }) {
+  return <AdminLayout>{children}</AdminLayout>;
+}

god-mode/app/general/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+import { observer } from "mobx-react";
+// hooks
+import { useInstance } from "@/hooks/store";
+// components
+import { GeneralConfigurationForm } from "./form";
+
+function GeneralPage() {
+  const { instance, instanceAdmins } = useInstance();
+
+  return (
+    <>
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="text-xl font-medium text-custom-text-100">General settings</div>
+          <div className="text-sm font-normal text-custom-text-300">
+            Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your
+            instance.
+          </div>
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {instance && instanceAdmins && (
+            <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default observer(GeneralPage);

god-mode/app/image/form.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { FC } from "react";
+import { useForm } from "react-hook-form";
+import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { ControllerInput } from "@/components/common";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type IInstanceImageConfigForm = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type ImageConfigFormValues = Record<TInstanceImageConfigurationKeys, string>;
+
+export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) => {
+  const { config } = props;
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<ImageConfigFormValues>({
+    defaultValues: {
+      UNSPLASH_ACCESS_KEY: config["UNSPLASH_ACCESS_KEY"],
+    },
+  });
+
+  const onSubmit = async (formData: ImageConfigFormValues) => {
+    const payload: Partial<ImageConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Image Configuration Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
+        <ControllerInput
+          control={control}
+          type="password"
+          name="UNSPLASH_ACCESS_KEY"
+          label="Access key from your Unsplash account"
+          description={
+            <>
+              You will find your access key in your Unsplash developer console.&nbsp;
+              <a
+                href="https://unsplash.com/documentation#creating-a-developer-account"
+                target="_blank"
+                className="text-custom-primary-100 hover:underline"
+                rel="noreferrer"
+              >
+                Learn more.
+              </a>
+            </>
+          }
+          placeholder="oXgq-sdfadsaeweqasdfasdf3234234rassd"
+          error={Boolean(errors.UNSPLASH_ACCESS_KEY)}
+          required
+        />
+      </div>
+
+      <div>
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </div>
+  );
+};

god-mode/app/image/layout.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { AdminLayout } from "@/layouts/admin-layout";
+
+interface ImageLayoutProps {
+  children: ReactNode;
+}
+
+export const metadata: Metadata = {
+  title: "Images Settings - Plane Web",
+};
+
+export default function ImageLayout({ children }: ImageLayoutProps) {
+  return <AdminLayout>{children}</AdminLayout>;
+}

god-mode/app/image/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { Loader } from "@plane/ui";
+// hooks
+import { useInstance } from "@/hooks/store";
+// local
+import { InstanceImageConfigForm } from "./form";
+
+const InstanceImagePage = observer(() => {
+  // store
+  const { formattedConfig, fetchInstanceConfigurations } = useInstance();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <>
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="text-xl font-medium text-custom-text-100">Third-party image libraries</div>
+          <div className="text-sm font-normal text-custom-text-300">
+            Let your users search and choose images from third-party libraries
+          </div>
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceImageConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="50%" />
+              <Loader.Item height="50px" width="20%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceImagePage;

god-mode/app/layout.tsx

@@ -0,0 +1,35 @@
+type RootLayoutProps = {
+  children: React.ReactNode;
+};
+
+export default function RootLayout(props: RootLayoutProps) {
+  const { children } = props;
+  // router
+  const router = useRouter();
+  // store hooks
+  const { isUserLoggedIn } = useUser();
+
+  useEffect(() => {
+    if (isUserLoggedIn === false) {
+      router.push("/");
+    }
+  }, [router, isUserLoggedIn]);
+
+  if (isUserLoggedIn === undefined) {
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+  }
+  return (
+    <div className="relative flex h-screen w-screen overflow-hidden">
+      <InstanceSidebar />
+      <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+        <InstanceHeader />
+        <div className="h-full w-full overflow-hidden">{children}</div>
+      </main>
+      <NewUserPopup />
+    </div>
+  );
+}

god-mode/app/routes.ts

@@ -0,0 +1,12 @@
+import { type RouteConfig, route, layout } from "@react-router/dev/routes";
+
+export default [
+  layout("/", "./layout.tsx", [
+    route("ai", "./ai/layout.tsx"),
+    route("authentication", "./authentication/layout.tsx"),
+    route("email", "./email/layout.tsx"),
+    route("general", "./general/layout.tsx"),
+    route("image", "./image/layout.tsx"),
+    route("workspace", "./workspace/layout.tsx"),
+  ]),
+] satisfies RouteConfig;

god-mode/app/workspace/create/form.tsx

@@ -0,0 +1,210 @@
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { WEB_BASE_URL, ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
+import { InstanceWorkspaceService } from "@plane/services";
+import { IWorkspace } from "@plane/types";
+// components
+import { Button, CustomSelect, getButtonStyling, Input, setToast, TOAST_TYPE } from "@plane/ui";
+// hooks
+import { useWorkspace } from "@/hooks/store";
+
+const instanceWorkspaceService = new InstanceWorkspaceService();
+
+export const WorkspaceCreateForm = () => {
+  // router
+  const router = useRouter();
+  // states
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+  const [defaultValues, setDefaultValues] = useState<Partial<IWorkspace>>({
+    name: "",
+    slug: "",
+    organization_size: "",
+  });
+  // store hooks
+  const { createWorkspace } = useWorkspace();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    getValues,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
+  // derived values
+  const workspaceBaseURL = encodeURI(WEB_BASE_URL || window.location.origin + "/");
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    await instanceWorkspaceService
+      .slugCheck(formData.slug)
+      .then(async (res) => {
+        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+          setSlugError(false);
+          await createWorkspace(formData)
+            .then(async () => {
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: "Success!",
+                message: "Workspace created successfully.",
+              });
+              router.push(`/workspace`);
+            })
+            .catch(() => {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: "Error!",
+                message: "Workspace could not be created. Please try again.",
+              });
+            });
+        } else setSlugError(true);
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Some error occurred while creating workspace. Please try again.",
+        });
+      });
+  };
+
+  useEffect(
+    () => () => {
+      // when the component unmounts set the default values to whatever user typed in
+      setDefaultValues(getValues());
+    },
+    [getValues, setDefaultValues]
+  );
+
+  return (
+    <div className="space-y-8">
+      <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-start justify-between gap-x-10 gap-y-6 lg:grid-cols-2">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm text-custom-text-300">Name your workspace</h4>
+          <div className="flex flex-col gap-1">
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: "This is a required field.",
+                validate: (value) =>
+                  /^[\w\s-]*$/.test(value) ||
+                  `Workspaces names can contain only (" "), ( - ), ( _ ) and alphanumeric characters.`,
+                maxLength: {
+                  value: 80,
+                  message: "Limit your name to 80 characters.",
+                },
+              }}
+              render={({ field: { value, ref, onChange } }) => (
+                <Input
+                  id="workspaceName"
+                  type="text"
+                  value={value}
+                  onChange={(e) => {
+                    onChange(e.target.value);
+                    setValue("name", e.target.value);
+                    setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
+                      shouldValidate: true,
+                    });
+                  }}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Something familiar and recognizable is always best."
+                  className="w-full"
+                />
+              )}
+            />
+            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+          </div>
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm text-custom-text-300">Set your workspace&apos;s URL</h4>
+          <div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
+            <span className="whitespace-nowrap text-sm text-custom-text-200">{workspaceBaseURL}</span>
+            <Controller
+              control={control}
+              name="slug"
+              rules={{
+                required: "The URL is a required field.",
+                maxLength: {
+                  value: 48,
+                  message: "Limit your URL to 48 characters.",
+                },
+              }}
+              render={({ field: { onChange, value, ref } }) => (
+                <Input
+                  id="workspaceUrl"
+                  type="text"
+                  value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                  onChange={(e) => {
+                    if (/^[a-zA-Z0-9_-]+$/.test(e.target.value)) setInvalidSlug(false);
+                    else setInvalidSlug(true);
+                    onChange(e.target.value.toLowerCase());
+                  }}
+                  ref={ref}
+                  hasError={Boolean(errors.slug)}
+                  placeholder="workspace-name"
+                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-sm"
+                />
+              )}
+            />
+          </div>
+          {slugError && <p className="text-sm text-red-500">This URL is taken. Try something else.</p>}
+          {invalidSlug && (
+            <p className="text-sm text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
+          )}
+          {errors.slug && <span className="text-xs text-red-500">{errors.slug.message}</span>}
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm text-custom-text-300">How many people will use this workspace?</h4>
+          <div className="w-full">
+            <Controller
+              name="organization_size"
+              control={control}
+              rules={{ required: "This is a required field." }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={
+                    ORGANIZATION_SIZE.find((c) => c === value) ?? (
+                      <span className="text-custom-text-400">Select a range</span>
+                    )
+                  }
+                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
+                  input
+                  optionsClassName="w-full"
+                >
+                  {ORGANIZATION_SIZE.map((item) => (
+                    <CustomSelect.Option key={item} value={item}>
+                      {item}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+            {errors.organization_size && (
+              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex max-w-4xl items-center py-1 gap-4">
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={handleSubmit(handleCreateWorkspace)}
+          disabled={!isValid}
+          loading={isSubmitting}
+        >
+          {isSubmitting ? "Creating workspace" : "Create workspace"}
+        </Button>
+        <Link className={getButtonStyling("neutral-primary", "sm")} href="/workspace">
+          Go back
+        </Link>
+      </div>
+    </div>
+  );
+};

god-mode/app/workspace/create/page.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { WorkspaceCreateForm } from "./form";
+
+const WorkspaceCreatePage = observer(() => (
+  <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+    <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+      <div className="text-xl font-medium text-custom-text-100">Create a new workspace on this instance.</div>
+      <div className="text-sm font-normal text-custom-text-300">
+        You will need to invite users from Workspace Settings after you create this workspace.
+      </div>
+    </div>
+    <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+      <WorkspaceCreateForm />
+    </div>
+  </div>
+));
+
+export default WorkspaceCreatePage;

god-mode/app/workspace/layout.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+// layouts
+import { AdminLayout } from "@/layouts/admin-layout";
+
+export const metadata: Metadata = {
+  title: "Workspace Management - Plane Web",
+};
+
+export default function WorkspaceManagementLayout({ children }: { children: ReactNode }) {
+  return <AdminLayout>{children}</AdminLayout>;
+}

god-mode/app/workspace/page.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import useSWR from "swr";
+import { Loader as LoaderIcon } from "lucide-react";
+// types
+import { TInstanceConfigurationKeys } from "@plane/types";
+import { Button, getButtonStyling, Loader, setPromiseToast, ToggleSwitch } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { WorkspaceListItem } from "@/components/workspace";
+// hooks
+import { useInstance, useWorkspace } from "@/hooks/store";
+
+const WorkspaceManagementPage = observer(() => {
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // store
+  const { formattedConfig, fetchInstanceConfigurations, updateInstanceConfigurations } = useInstance();
+  const {
+    workspaceIds,
+    loader: workspaceLoader,
+    paginationInfo,
+    fetchWorkspaces,
+    fetchNextWorkspaces,
+  } = useWorkspace();
+  // derived values
+  const disableWorkspaceCreation = formattedConfig?.DISABLE_WORKSPACE_CREATION ?? "";
+  const hasNextPage = paginationInfo?.next_page_results && paginationInfo?.next_cursor !== undefined;
+
+  // fetch data
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+  useSWR("INSTANCE_WORKSPACES", () => fetchWorkspaces());
+
+  const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving configuration",
+      success: {
+        title: "Success",
+        message: () => "Configuration saved successfully",
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+
+  return (
+    <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+      <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="flex flex-col gap-1">
+          <div className="text-xl font-medium text-custom-text-100">Workspaces on this instance</div>
+          <div className="text-sm font-normal text-custom-text-300">
+            See all workspaces and control who can create them.
+          </div>
+        </div>
+      </div>
+      <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="space-y-3">
+          {formattedConfig ? (
+            <div className={cn("w-full flex items-center gap-14 rounded")}>
+              <div className="flex grow items-center gap-4">
+                <div className="grow">
+                  <div className="text-lg font-medium pb-1">Prevent anyone else from creating a workspace.</div>
+                  <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                    Toggling this on will let only you create workspaces. You will have to invite users to new
+                    workspaces.
+                  </div>
+                </div>
+              </div>
+              <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
+                <div className="flex items-center gap-4">
+                  <ToggleSwitch
+                    value={Boolean(parseInt(disableWorkspaceCreation))}
+                    onChange={() => {
+                      if (Boolean(parseInt(disableWorkspaceCreation)) === true) {
+                        updateConfig("DISABLE_WORKSPACE_CREATION", "0");
+                      } else {
+                        updateConfig("DISABLE_WORKSPACE_CREATION", "1");
+                      }
+                    }}
+                    size="sm"
+                    disabled={isSubmitting}
+                  />
+                </div>
+              </div>
+            </div>
+          ) : (
+            <Loader>
+              <Loader.Item height="50px" width="100%" />
+            </Loader>
+          )}
+          {workspaceLoader !== "init-loader" ? (
+            <>
+              <div className="pt-6 flex items-center justify-between gap-2">
+                <div className="flex flex-col items-start gap-x-2">
+                  <div className="flex items-center gap-2 text-lg font-medium">
+                    All workspaces on this instance{" "}
+                    <span className="text-custom-text-300">• {workspaceIds.length}</span>
+                    {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
+                      <LoaderIcon className="w-4 h-4 animate-spin" />
+                    )}
+                  </div>
+                  <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                    You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
+                    Member.
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Link href="/workspace/create" className={getButtonStyling("primary", "sm")}>
+                    Create workspace
+                  </Link>
+                </div>
+              </div>
+              <div className="flex flex-col gap-4 py-2">
+                {workspaceIds.map((workspaceId) => (
+                  <WorkspaceListItem key={workspaceId} workspaceId={workspaceId} />
+                ))}
+              </div>
+              {hasNextPage && (
+                <div className="flex justify-center">
+                  <Button
+                    variant="link-primary"
+                    onClick={() => fetchNextWorkspaces()}
+                    disabled={workspaceLoader === "pagination"}
+                  >
+                    Load more
+                    {workspaceLoader === "pagination" && <LoaderIcon className="w-3 h-3 animate-spin" />}
+                  </Button>
+                </div>
+              )}
+            </>
+          ) : (
+            <Loader className="space-y-10 py-8">
+              <Loader.Item height="24px" width="20%" />
+              <Loader.Item height="92px" width="100%" />
+              <Loader.Item height="92px" width="100%" />
+              <Loader.Item height="92px" width="100%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default WorkspaceManagementPage;

god-mode/dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]

god-mode/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "god-mode",
+  "description": "Admin UI for Plane",
+  "version": "0.26.0",
+  "license": "AGPL-3.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:errors": "eslint . --ext .ts,.tsx --quiet"
+  },
+  "dependencies": {
+    "@react-router/node": "^7.5.3",
+    "@react-router/serve": "^7.5.3",
+    "isbot": "^5.1.27",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.5.3"
+  },
+  "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@plane/tailwind-config": "*",
+    "@plane/typescript-config": "*",
+    "@react-router/dev": "^7.5.3",
+    "@tailwindcss/vite": "^4.1.4",
+    "@types/node": "^20",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "typescript": "5.3.3",
+    "vite": "^6.3.3",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

god-mode/react-router.config.ts

@@ -0,0 +1,5 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  ssr: false,
+} satisfies Config;

god-mode/vite.config.ts

@@ -0,0 +1,8 @@
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+});

packages/constants/src/file.ts

@@ -1 +1,14 @@
 export const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export const ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE = {
+  "image/jpeg": [],
+  "image/jpg": [],
+  "image/png": [],
+  "image/webp": [],
+};
+export const ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE = {
+  "image/jpeg": [],
+  "image/jpg": [],
+  "image/png": [],
+  "image/webp": [],
+};

packages/constants/src/issue/filter.ts

@@ -355,7 +355,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_PAGE: TIssueFiltersToDisplayByPageType = {
   sub_work_items: {
     list: {
       display_properties: SUB_ISSUES_DISPLAY_PROPERTIES_KEYS,
-      filters: ["priority", "state", "project", "issue_type", "assignees", "start_date", "target_date"],
+      filters: ["priority", "state", "issue_type", "assignees", "start_date", "target_date"],
       display_filters: {
         order_by: ["-created_at", "-updated_at", "start_date", "-priority"],
         group_by: ["state", "priority", "assignees", null],

packages/eslint-config/library.js

@@ -5,7 +5,7 @@ const project = resolve(process.cwd(), "tsconfig.json");
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   extends: ["prettier", "plugin:@typescript-eslint/recommended"],
-  plugins: ["react", "@typescript-eslint", "import"],
+  plugins: ["react", "react-hooks", "@typescript-eslint", "import"],
   globals: {
     React: true,
     JSX: true,
@@ -38,7 +38,7 @@ module.exports = {
     "react/self-closing-comp": ["error", { component: true, html: true }],
     "react/jsx-boolean-value": "error",
     "react/jsx-no-duplicate-props": "error",
-    // "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/exhaustive-deps": "warn",
     "@typescript-eslint/no-unused-expressions": "warn",
     "@typescript-eslint/no-unused-vars": ["warn"],
     "@typescript-eslint/no-explicit-any": "warn",

packages/eslint-config/package.json

@@ -17,6 +17,7 @@
     "eslint-config-turbo": "^1.12.4",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "typescript": "5.3.3"
   }
 }

packages/i18n/src/locales/cs/translations.json

@@ -746,7 +746,8 @@
         "message": "Něco se pokazilo. Zkuste to prosím znovu."
       },
       "required": "Toto pole je povinné",
-      "entity_required": "{entity} je povinná"
+      "entity_required": "{entity} je povinná",
+      "restricted_entity": "{entity} je omezen"
     },
     "update_link": "Aktualizovat odkaz",
     "attach": "Připojit",
@@ -1107,6 +1108,18 @@
     "remove": {
       "success": "Podřízená pracovní položka úspěšně odebrána",
       "error": "Chyba při odebírání podřízené položky"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Nemáte podřízené pracovní položky, které odpovídají použitým filtrům.",
+        "description": "Chcete-li zobrazit všechny podřízené pracovní položky, odstraňte všechny použité filtry.",
+        "action": "Odstranit filtry"
+      },
+      "list_filters": {
+        "title": "Nemáte pracovní položky, které odpovídají použitým filtrům.",
+        "description": "Chcete-li zobrazit všechny pracovní položky, odstraňte všechny použité filtry.",
+        "action": "Odstranit filtry"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/de/translations.json

@@ -746,7 +746,8 @@
         "message": "Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut."
       },
       "required": "Dieses Feld ist erforderlich",
-      "entity_required": "{entity} ist erforderlich"
+      "entity_required": "{entity} ist erforderlich",
+      "restricted_entity": "{entity} ist eingeschränkt"
     },
     "update_link": "Link aktualisieren",
     "attach": "Anhängen",
@@ -1107,6 +1108,18 @@
     "remove": {
       "success": "Untergeordnetes Arbeitselement erfolgreich entfernt",
       "error": "Fehler beim Entfernen des untergeordneten Elements"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Sie haben keine untergeordneten Arbeitselemente, die den von Ihnen angewendeten Filtern entsprechen.",
+        "description": "Um alle untergeordneten Arbeitselemente anzuzeigen, entfernen Sie alle angewendeten Filter.",
+        "action": "Filter entfernen"
+      },
+      "list_filters": {
+        "title": "Sie haben keine Arbeitselemente, die den von Ihnen angewendeten Filtern entsprechen.",
+        "description": "Um alle Arbeitselemente anzuzeigen, entfernen Sie alle angewendeten Filter.",
+        "action": "Filter entfernen"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/en/translations.json

@@ -580,7 +580,8 @@
         "message": "Something went wrong. Please try again."
       },
       "required": "This field is required",
-      "entity_required": "{entity} is required"
+      "entity_required": "{entity} is required",
+      "restricted_entity": "{entity} is restricted"
     },
     "update_link": "Update link",
     "attach": "Attach",
@@ -943,6 +944,18 @@
     "remove": {
       "success": "Sub-work item removed successfully",
       "error": "Error removing sub-work item"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "You don't have sub-work items that match the filters you've applied.",
+        "description": "To see all sub-work items, clear all applied filters.",
+        "action": "Clear filters"
+      },
+      "list_filters": {
+        "title": "You don't have work items that match the filters you've applied.",
+        "description": "To see all work items, clear all applied filters.",
+        "action": "Clear filters"
+      }
     }
   },
   "view": {
@@ -2283,4 +2296,4 @@
     "previously_edited_by": "Previously edited by",
     "edited_by": "Edited by"
   }
-}
+}

packages/i18n/src/locales/es/translations.json

@@ -750,7 +750,8 @@
         "message": "Algo salió mal. Por favor, inténtalo de nuevo."
       },
       "required": "Este campo es obligatorio",
-      "entity_required": "{entity} es obligatorio"
+      "entity_required": "{entity} es obligatorio",
+      "restricted_entity": "{entity} está restringido"
     },
     "update_link": "Actualizar enlace",
     "attach": "Adjuntar",
@@ -1110,6 +1111,18 @@
     "remove": {
       "success": "Sub-elemento eliminado correctamente",
       "error": "Error al eliminar el sub-elemento"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "No tienes sub-elementos de trabajo que coincidan con los filtros que has aplicado.",
+        "description": "Para ver todos los sub-elementos de trabajo, elimina todos los filtros aplicados.",
+        "action": "Eliminar filtros"
+      },
+      "list_filters": {
+        "title": "No tienes elementos de trabajo que coincidan con los filtros que has aplicado.",
+        "description": "Para ver todos los elementos de trabajo, elimina todos los filtros aplicados.",
+        "action": "Eliminar filtros"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/fr/translations.json

@@ -748,7 +748,8 @@
         "message": "Quelque chose s'est mal passé. Veuillez réessayer."
       },
       "required": "Ce champ est obligatoire",
-      "entity_required": "{entity} est requis"
+      "entity_required": "{entity} est requis",
+      "restricted_entity": "{entity} est restreint"
     },
     "update_link": "Mettre à jour le lien",
     "attach": "Joindre",
@@ -1108,6 +1109,18 @@
     "remove": {
       "success": "Sous-élément de travail supprimé avec succès",
       "error": "Erreur lors de la suppression du sous-élément de travail"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Vous n'avez pas de sous-éléments de travail qui correspondent aux filtres que vous avez appliqués.",
+        "description": "Pour voir tous les sous-éléments de travail, effacer tous les filtres appliqués.",
+        "action": "Effacer les filtres"
+      },
+      "list_filters": {
+        "title": "Vous n'avez pas d'éléments de travail qui correspondent aux filtres que vous avez appliqués.",
+        "description": "Pour voir tous les éléments de travail, effacer tous les filtres appliqués.",
+        "action": "Effacer les filtres"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/id/translations.json

@@ -746,7 +746,8 @@
         "message": "Sesuatu telah salah. Silakan coba lagi."
       },
       "required": "Bidang ini diperlukan",
-      "entity_required": "{entity} diperlukan"
+      "entity_required": "{entity} diperlukan",
+      "restricted_entity": "{entity} dibatasi"
     },
     "update_link": "Perbarui tautan",
     "attach": "Lampirkan",
@@ -1107,6 +1108,18 @@
     "remove": {
       "success": "Sub-item kerja berhasil dihapus",
       "error": "Kesalahan saat menghapus sub-item kerja"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Anda tidak memiliki sub-item kerja yang cocok dengan filter yang Anda terapkan.",
+        "description": "Untuk melihat semua sub-item kerja, hapus semua filter yang diterapkan.",
+        "action": "Hapus filter"
+      },
+      "list_filters": {
+        "title": "Anda tidak memiliki item kerja yang cocok dengan filter yang Anda terapkan.",
+        "description": "Untuk melihat semua item kerja, hapus semua filter yang diterapkan.",
+        "action": "Hapus filter"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/it/translations.json

@@ -743,7 +743,8 @@
         "message": "Qualcosa è andato storto. Per favore, riprova."
       },
       "required": "Questo campo è obbligatorio",
-      "entity_required": "{entity} è obbligatorio"
+      "entity_required": "{entity} è obbligatorio",
+      "restricted_entity": "{entity} è limitato"
     },
     "update_link": "Aggiorna link",
     "attach": "Allega",
@@ -1106,6 +1107,18 @@
     "remove": {
       "success": "Sotto-elemento di lavoro rimosso con successo",
       "error": "Errore nella rimozione del sotto-elemento di lavoro"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Non hai sotto-elementi di lavoro che corrispondono ai filtri che hai applicato.",
+        "description": "Per vedere tutti i sotto-elementi di lavoro, cancella tutti i filtri applicati.",
+        "action": "Cancella filtri"
+      },
+      "list_filters": {
+        "title": "Non hai elementi di lavoro che corrispondono ai filtri che hai applicato.",
+        "description": "Per vedere tutti gli elementi di lavoro, cancella tutti i filtri applicati.",
+        "action": "Cancella filtri"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/ja/translations.json

@@ -748,7 +748,8 @@
         "message": "問題が発生しました。もう一度お試しください。"
       },
       "required": "この項目は必須です",
-      "entity_required": "{entity}は必須です"
+      "entity_required": "{entity}は必須です",
+      "restricted_entity": "{entity} は制限されています"
     },
     "update_link": "リンクを更新",
     "attach": "添付",
@@ -1108,6 +1109,18 @@
     "remove": {
       "success": "サブ作業項目を削除しました",
       "error": "サブ作業項目の削除中にエラーが発生しました"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "適用されたフィルターに一致するサブ作業項目がありません。",
+        "description": "すべてのサブ作業項目を表示するには、すべての適用されたフィルターをクリアしてください。",
+        "action": "フィルターをクリア"
+      },
+      "list_filters": {
+        "title": "適用されたフィルターに一致する作業項目がありません。",
+        "description": "すべての作業項目を表示するには、すべての適用されたフィルターをクリアしてください。",
+        "action": "フィルターをクリア"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/ko/translations.json

@@ -748,7 +748,8 @@
         "message": "문제가 발생했습니다. 다시 시도해주세요."
       },
       "required": "이 필드는 필수입니다",
-      "entity_required": "{entity}가 필요합니다"
+      "entity_required": "{entity}가 필요합니다",
+      "restricted_entity": "{entity}은(는) 제한되어 있습니다"
     },
     "update_link": "링크 업데이트",
     "attach": "첨부",
@@ -1109,6 +1110,18 @@
     "remove": {
       "success": "하위 작업 항목이 성공적으로 제거되었습니다",
       "error": "하위 작업 항목 제거 중 오류 발생"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "적용된 필터에 일치하는 하위 작업 항목이 없습니다.",
+        "description": "모든 하위 작업 항목을 보려면 모든 적용된 필터를 지우세요.",
+        "action": "필터 지우기"
+      },
+      "list_filters": {
+        "title": "적용된 필터에 일치하는 작업 항목이 없습니다.",
+        "description": "모든 작업 항목을 보려면 모든 적용된 필터를 지우세요.",
+        "action": "필터 지우기"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/pl/translations.json

@@ -748,7 +748,8 @@
         "message": "Coś poszło nie tak. Spróbuj ponownie."
       },
       "required": "To pole jest wymagane",
-      "entity_required": "{entity} jest wymagane"
+      "entity_required": "{entity} jest wymagane",
+      "restricted_entity": "{entity} jest ograniczony"
     },
     "update_link": "Zaktualizuj link",
     "attach": "Dołącz",
@@ -1109,6 +1110,18 @@
     "remove": {
       "success": "Podrzędny element pracy usunięto pomyślnie",
       "error": "Błąd podczas usuwania elementu podrzędnego"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Nie masz elementów podrzędnych, które pasują do filtrów, które zastosowałeś.",
+        "description": "Aby zobaczyć wszystkie elementy podrzędne, wyczyść wszystkie zastosowane filtry.",
+        "action": "Wyczyść filtry"
+      },
+      "list_filters": {
+        "title": "Nie masz elementów pracy, które pasują do filtrów, które zastosowałeś.",
+        "description": "Aby zobaczyć wszystkie elementy pracy, wyczyść wszystkie zastosowane filtry.",
+        "action": "Wyczyść filtry"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/pt-BR/translations.json

@@ -748,7 +748,8 @@
         "message": "Algo deu errado. Por favor, tente novamente."
       },
       "required": "Este campo é obrigatório",
-      "entity_required": "{entity} é obrigatório"
+      "entity_required": "{entity} é obrigatório",
+      "restricted_entity": "{entity} está restrito"
     },
     "update_link": "Atualizar link",
     "attach": "Anexar",
@@ -1109,6 +1110,18 @@
     "remove": {
       "success": "Sub-item de trabalho removido com sucesso",
       "error": "Erro ao remover sub-item de trabalho"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Você não tem sub-itens de trabalho que correspondem aos filtros que você aplicou.",
+        "description": "Para ver todos os sub-itens de trabalho, limpe todos os filtros aplicados.",
+        "action": "Limpar filtros"
+      },
+      "list_filters": {
+        "title": "Você não tem itens de trabalho que correspondem aos filtros que você aplicou.",
+        "description": "Para ver todos os itens de trabalho, limpe todos os filtros aplicados.",
+        "action": "Limpar filtros"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/ro/translations.json

@@ -746,7 +746,8 @@
         "message": "Ceva a funcționat greșit. Te rugăm să încerci din nou."
       },
       "required": "Acest câmp este obligatoriu",
-      "entity_required": "{entity} este obligatoriu"
+      "entity_required": "{entity} este obligatoriu",
+      "restricted_entity": "{entity} este restricționat"
     },
     "update_link": "Actualizează link-ul",
     "attach": "Atașează",
@@ -1107,6 +1108,18 @@
     "remove": {
       "success": "Sub-activitatea a fost eliminată cu succes",
       "error": "Eroare la eliminarea sub-activității"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Nu ai sub-elemente de lucru care corespund filtrelor pe care le-ai aplicat.",
+        "description": "Pentru a vedea toate sub-elementele de lucru, șterge toate filtrele aplicate.",
+        "action": "Șterge filtrele"
+      },
+      "list_filters": {
+        "title": "Nu ai elemente de lucru care corespund filtrelor pe care le-ai aplicat.",
+        "description": "Pentru a vedea toate elementele de lucru, șterge toate filtrele aplicate.",
+        "action": "Șterge filtrele"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/ru/translations.json

@@ -748,7 +748,8 @@
         "message": "Что-то пошло не так. Попробуйте позже."
       },
       "required": "Это поле обязательно",
-      "entity_required": "{entity} обязательно"
+      "entity_required": "{entity} обязательно",
+      "restricted_entity": "{entity} ограничен"
     },
     "update_link": "обновить ссылку",
     "attach": "Прикрепить",
@@ -1109,6 +1110,18 @@
     "remove": {
       "success": "Подэлемент успешно удален",
       "error": "Ошибка удаления подэлемента"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "У вас нет подэлементов, которые соответствуют примененным фильтрам.",
+        "description": "Чтобы увидеть все подэлементы, очистите все примененные фильтры.",
+        "action": "Очистить фильтры"
+      },
+      "list_filters": {
+        "title": "У вас нет рабочих элементов, которые соответствуют примененным фильтрам.",
+        "description": "Чтобы увидеть все рабочие элементы, очистите все примененные фильтры.",
+        "action": "Очистить фильтры"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/sk/translations.json

@@ -748,7 +748,8 @@
         "message": "Niečo sa pokazilo. Skúste to prosím znova."
       },
       "required": "Toto pole je povinné",
-      "entity_required": "{entity} je povinná"
+      "entity_required": "{entity} je povinná",
+      "restricted_entity": "{entity} je obmedzený"
     },
     "update_link": "Aktualizovať odkaz",
     "attach": "Pripojiť",
@@ -1109,6 +1110,18 @@
     "remove": {
       "success": "Podriadená pracovná položka bola úspešne odstránená",
       "error": "Chyba pri odstraňovaní podriadenej položky"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Nemáte podriadené pracovné položky, ktoré zodpovedajú použitým filtrom.",
+        "description": "Pre zobrazenie všetkých podriadených pracovných položiek vymažte všetky použité filtre.",
+        "action": "Vymazať filtre"
+      },
+      "list_filters": {
+        "title": "Nemáte pracovné položky, ktoré zodpovedajú použitým filtrom.",
+        "description": "Pre zobrazenie všetkých pracovných položiek vymažte všetky použité filtre.",
+        "action": "Vymazať filtre"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/tr-TR/translations.json

@@ -748,7 +748,8 @@
         "message": "Bir hata oluştu. Lütfen tekrar deneyin."
       },
       "required": "Bu alan gereklidir",
-      "entity_required": "{entity} gereklidir"
+      "entity_required": "{entity} gereklidir",
+      "restricted_entity": "{entity} kısıtlanmıştır"
     },
     "update_link": "Bağlantıyı güncelle",
     "attach": "Ekle",
@@ -1110,6 +1111,18 @@
     "remove": {
       "success": "Alt iş öğesi başarıyla kaldırıldı",
       "error": "Alt iş öğesi kaldırılırken hata oluştu"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Alt iş öğelerinizin filtreleriyle eşleşmiyor.",
+        "description": "Tüm alt iş öğelerini görmek için tüm uygulanan filtreleri temizleyin.",
+        "action": "Filtreleri temizle"
+      },
+      "list_filters": {
+        "title": "İş öğelerinizin filtreleriyle eşleşmiyor.",
+        "description": "Tüm iş öğelerini görmek için tüm uygulanan filtreleri temizleyin.",
+        "action": "Filtreleri temizle"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/ua/translations.json

@@ -747,8 +747,9 @@
         "title": "Помилка!",
         "message": "Щось пішло не так. Будь ласка, спробуйте ще раз."
       },
-      "required": "Це поле є обов’язковим",
-      "entity_required": "{entity} є обов’язковим"
+      "required": "Це поле є обов'язковим",
+      "entity_required": "{entity} є обов'язковим",
+      "restricted_entity": "{entity} обмежено"
     },
     "update_link": "Оновити посилання",
     "attach": "Прикріпити",
@@ -1109,6 +1110,18 @@
     "remove": {
       "success": "Похідну робочу одиницю успішно вилучено",
       "error": "Помилка під час вилучення похідної одиниці"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Ви не маєте похідних робочих одиниць, які відповідають застосованим фільтрам.",
+        "description": "Щоб побачити всі похідні робочі одиниці, очистіть всі застосовані фільтри.",
+        "action": "Очистити фільтри"
+      },
+      "list_filters": {
+        "title": "Ви не маєте робочих одиниць, які відповідають застосованим фільтрам.",
+        "description": "Щоб побачити всі робочі одиниці, очистіть всі застосовані фільтри.",
+        "action": "Очистити фільтри"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/vi-VN/translations.json

@@ -748,7 +748,8 @@
         "message": "Đã xảy ra lỗi. Vui lòng thử lại."
       },
       "required": "Trường này là bắt buộc",
-      "entity_required": "{entity} là bắt buộc"
+      "entity_required": "{entity} là bắt buộc",
+      "restricted_entity": "{entity} bị hạn chế"
     },
     "update_link": "Cập nhật liên kết",
     "attach": "Đính kèm",
@@ -1108,6 +1109,18 @@
     "remove": {
       "success": "Đã xóa mục công việc con thành công",
       "error": "Đã xảy ra lỗi khi xóa mục công việc con"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Bạn không có mục công việc con nào phù hợp với các bộ lọc mà bạn đã áp dụng.",
+        "description": "Để xem tất cả các mục công việc con, hãy xóa tất cả các bộ lọc đã áp dụng.",
+        "action": "Xóa bộ lọc"
+      },
+      "list_filters": {
+        "title": "Bạn không có mục công việc nào phù hợp với các bộ lọc mà bạn đã áp dụng.",
+        "description": "Để xem tất cả các mục công việc, hãy xóa tất cả các bộ lọc đã áp dụng.",
+        "action": "Xóa bộ lọc"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/zh-CN/translations.json

@@ -748,7 +748,8 @@
         "message": "发生错误。请重试。"
       },
       "required": "此字段为必填项",
-      "entity_required": "{entity}为必填项"
+      "entity_required": "{entity}为必填项",
+      "restricted_entity": "{entity}已被限制"
     },
     "update_link": "更新链接",
     "attach": "附加",
@@ -1108,6 +1109,18 @@
     "remove": {
       "success": "子工作项移除成功",
       "error": "移除子工作项时出错"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "您没有符合您应用的过滤器的子工作项。",
+        "description": "要查看所有子工作项，请清除所有应用的过滤器。",
+        "action": "清除过滤器"
+      },
+      "list_filters": {
+        "title": "您没有符合您应用的过滤器的工作项。",
+        "description": "要查看所有工作项，请清除所有应用的过滤器。",
+        "action": "清除过滤器"
+      }
     }
   },
   "view": {

packages/i18n/src/locales/zh-TW/translations.json

@@ -748,7 +748,8 @@
         "message": "發生錯誤。請再試一次。"
       },
       "required": "此欄位為必填",
-      "entity_required": "{entity} 為必填"
+      "entity_required": "{entity} 為必填",
+      "restricted_entity": "{entity}已被限制"
     },
     "update_link": "更新連結",
     "attach": "附加",
@@ -1109,6 +1110,18 @@
     "remove": {
       "success": "子工作事項移除成功",
       "error": "移除子工作事項時發生錯誤"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "您沒有符合您應用過的過濾器的子工作事項。",
+        "description": "要查看所有子工作事項，請清除所有應用過的過濾器。",
+        "action": "清除過濾器"
+      },
+      "list_filters": {
+        "title": "您沒有符合您應用過的過濾器的工作事項。",
+        "description": "要查看所有工作事項，請清除所有應用過的過濾器。",
+        "action": "清除過濾器"
+      }
     }
   },
   "view": {

packages/tailwind-config/tailwind.config.js

@@ -461,9 +461,9 @@ module.exports = {
         "onboarding-gradient-200": "var( --gradient-onboarding-200)",
         "onboarding-gradient-300": "var( --gradient-onboarding-300)",
       },
-    },
-    fontFamily: {
-      custom: ["Inter", "sans-serif"],
+      fontFamily: {
+        custom: ["Inter", "sans-serif"],
+      },
     },
   },
   plugins: [

packages/types/src/instance/ai.d.ts

@@ -1 +1 @@
-export type TInstanceAIConfigurationKeys = "OPENAI_API_KEY" | "GPT_ENGINE";
+export type TInstanceAIConfigurationKeys = "LLM_API_KEY" | "LLM_MODEL";

packages/types/src/instance/base.d.ts

@@ -49,7 +49,7 @@ export interface IInstanceConfig {
   posthog_api_key: string | undefined;
   posthog_host: string | undefined;
   has_unsplash_configured: boolean;
-  has_openai_configured: boolean;
+  has_llm_configured: boolean;
   file_size_limit: number | undefined;
   is_smtp_configured: boolean;
   app_base_url: string | undefined;

packages/ui/src/dropdown/dropdown.d.ts

@@ -4,7 +4,7 @@ export interface IDropdown {
   // root props
   onOpen?: () => void;
   onClose?: () => void;
-  containerClassName?: (isOpen: boolean) => string;
+  containerClassName?: string | ((isOpen: boolean) => string);
   tabIndex?: number;
   placement?: Placement;
   disabled?: boolean;

packages/ui/src/dropdown/multi-select.tsx

@@ -1,19 +1,14 @@
-import React, { FC, useMemo, useRef, useState } from "react";
-import sortBy from "lodash/sortBy";
-// headless ui
 import { Combobox } from "@headlessui/react";
-// popper-js
+import sortBy from "lodash/sortBy";
+import React, { FC, useMemo, useRef, useState } from "react";
 import { usePopper } from "react-popper";
-// plane helpers
+// plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
-// components
+// local imports
+import { cn } from "../../helpers";
+import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
-// hooks
-import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
-// helper
-import { cn } from "../../helpers";
-// types
 import { IMultiSelectDropdown } from "./dropdown";
 
 export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
@@ -118,7 +113,10 @@ export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
       ref={dropdownRef}
       value={value}
       onChange={onChange}
-      className={cn("h-full", containerClassName)}
+      className={cn(
+        "h-full",
+        typeof containerClassName === "function" ? containerClassName(isOpen) : containerClassName
+      )}
       tabIndex={tabIndex}
       multiple
       onKeyDown={handleKeyDown}

packages/ui/src/dropdown/single-select.tsx

@@ -1,19 +1,14 @@
-import React, { FC, useMemo, useRef, useState } from "react";
-import sortBy from "lodash/sortBy";
-// headless ui
 import { Combobox } from "@headlessui/react";
-// popper-js
+import sortBy from "lodash/sortBy";
+import React, { FC, useMemo, useRef, useState } from "react";
 import { usePopper } from "react-popper";
-// plane helpers
+// plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
-// components
+// local imports
+import { cn } from "../../helpers";
+import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
-// hooks
-import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
-// helper
-import { cn } from "../../helpers";
-// types
 import { ISingleSelectDropdown } from "./dropdown";
 
 export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
@@ -118,7 +113,10 @@ export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
       ref={dropdownRef}
       value={value}
       onChange={onChange}
-      className={cn("h-full", containerClassName)}
+      className={cn(
+        "h-full",
+        typeof containerClassName === "function" ? containerClassName(isOpen) : containerClassName
+      )}
       tabIndex={tabIndex}
       onKeyDown={handleKeyDown}
       disabled={disabled}

packages/utils/src/string.ts

@@ -86,36 +86,6 @@ export const copyUrlToClipboard = async (path: string) => {
   await copyTextToClipboard(url.toString());
 };
 
-/**
- * @description Generates a deterministic HSL color based on input string
- * @param {string} string - Input string to generate color from
- * @returns {string} HSL color string
- * @example
- * generateRandomColor("hello") // returns consistent HSL color for "hello"
- * generateRandomColor("") // returns "rgb(var(--color-primary-100))"
- */
-export const generateRandomColor = (string: string): string => {
-  if (!string) return "rgb(var(--color-primary-100))";
-
-  string = `${string}`;
-
-  const uniqueId = string.length.toString() + string;
-  const combinedString = uniqueId + string;
-
-  const hash = Array.from(combinedString).reduce((acc, char) => {
-    const charCode = char.charCodeAt(0);
-    return (acc << 5) - acc + charCode;
-  }, 0);
-
-  const hue = hash % 360;
-  const saturation = 70;
-  const lightness = 60;
-
-  const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-
-  return randomColor;
-};
-
 /**
  * @description Gets first character of first word or first characters of first two words
  * @param {string} str - Input string
@@ -275,6 +245,33 @@ export const checkURLValidity = (url: string): boolean => {
   return urlPattern.test(url);
 };
 
+/**
+ * Combines array elements with a separator and adds a conjunction before the last element
+ * @param array Array of strings to combine
+ * @param separator Separator to use between elements (default: ", ")
+ * @param conjunction Conjunction to use before last element (default: "and")
+ * @returns Combined string with conjunction before the last element
+ */
+export const joinWithConjunction = (array: string[], separator: string = ", ", conjunction: string = "and"): string => {
+  if (!array || array.length === 0) return "";
+  if (array.length === 1) return array[0];
+  if (array.length === 2) return `${array[0]} ${conjunction} ${array[1]}`;
+
+  const lastElement = array[array.length - 1];
+  const elementsExceptLast = array.slice(0, -1);
+
+  return `${elementsExceptLast.join(separator)}${separator}${conjunction} ${lastElement}`;
+};
+
+/**
+ * @description Ensures a URL has a protocol
+ * @param {string} url
+ * @returns {string}
+ * @example
+ * ensureUrlHasProtocol("example.com") => "http://example.com"
+ */
+export const ensureUrlHasProtocol = (url: string): string => (url.startsWith("http") ? url : `http://${url}`);
+
 // Browser-only clipboard functions
 // let copyTextToClipboard: (text: string) => Promise<void>;