refactor: update Tabs component usage in AnalyticsPage and ImagePickerPopover

- Replace custom tab implementation with Propel Tabs
- Dynamically render only enabled tabs based on configuration
- Filter tabs by isEnabled property for cleaner conditional rendering
- Improve tab navigation and accessibility with Propel components

.codespellrc

@@ -0,0 +1,7 @@
+[codespell]
+# Ref: https://github.com/codespell-project/codespell#using-a-config-file
+skip = .git*,*.svg,i18n,*-lock.yaml,*.css,.codespellrc,migrations,*.js,*.map,*.mjs
+check-hidden = true
+# ignore all CamelCase and camelCase
+ignore-regex = \b[A-Za-z][a-z]+[A-Z][a-zA-Z]+\b
+ignore-words-list = tread

.dockerignore

@@ -16,3 +16,54 @@ out/
 **/out/
 dist/
 **/dist/
+# Logs
+npm-debug.log*
+pnpm-debug.log*
+.pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# OS junk
+.DS_Store
+Thumbs.db
+
+# Editor settings
+.vscode
+.idea
+
+# Coverage and test output
+coverage/
+**/coverage/
+*.lcov
+.junit/
+test-results/
+
+# Caches and build artifacts
+.cache/
+**/.cache/
+storybook-static/
+*storybook.log
+*.tsbuildinfo
+
+# Local env and secrets
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.secrets
+tmp/
+temp/
+
+# Database/cache dumps
+*.rdb
+*.rdb.gz
+
+# Misc
+*.pem
+*.key
+
+# React Router - https://github.com/remix-run/react-router-templates/blob/dc79b1a065f59f3bfd840d4ef75cc27689b611e6/default/.dockerignore
+.react-router/
+build/
+node_modules/
+README.md

.env.example

@@ -15,12 +15,15 @@ RABBITMQ_USER="plane"
 RABBITMQ_PASSWORD="plane"
 RABBITMQ_VHOST="plane"
 
+LISTEN_HTTP_PORT=80
+LISTEN_HTTPS_PORT=443
+
 # AWS Settings
 AWS_REGION=""
 AWS_ACCESS_KEY_ID="access-key"
 AWS_SECRET_ACCESS_KEY="secret-key"
 AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
-# Changing this requires change in the nginx.conf for uploads if using minio setup
+# Changing this requires change in the proxy config for uploads if using minio setup
 AWS_S3_BUCKET_NAME="uploads"
 # Maximum file upload limit
 FILE_SIZE_LIMIT=5242880
@@ -36,8 +39,15 @@ DOCKERIZED=1  # deprecated
 # set to 1 If using the pre-configured minio setup
 USE_MINIO=1
 
-# Nginx Configuration
-NGINX_PORT=80
+# If SSL Cert to be generated, set CERT_EMAIl="email <EMAIL_ADDRESS>"
+CERT_ACME_CA=https://acme-v02.api.letsencrypt.org/directory
+TRUSTED_PROXIES=0.0.0.0/0
+SITE_ADDRESS=:80
+CERT_EMAIL=
+
+# For DNS Challenge based certificate generation, set the CERT_ACME_DNS, CERT_EMAIL
+# CERT_ACME_DNS="acme_dns <CERT_DNS_PROVIDER> <CERT_DNS_PROVIDER_API_KEY>"
+CERT_ACME_DNS=
 
 # Force HTTPS for handling SSL Termination
 MINIO_ENDPOINT_SSL=0

.github/ISSUE_TEMPLATE/--bug-report.yaml

@@ -1,7 +1,7 @@
 name: Bug report
 description: Create a bug report to help us improve Plane
 title: "[bug]: "
-labels: [🐛bug]
+labels: [🐛bug, plane]
 assignees: [vihar, pushya22]
 body:
 - type: markdown

.github/ISSUE_TEMPLATE/--feature-request.yaml

@@ -1,7 +1,7 @@
 name: Feature request
 description: Suggest a feature to improve Plane
 title: "[feature]: "
-labels: [✨feature]
+labels: [✨feature, plane]
 assignees: [vihar, pushya22]
 body:
 - type: markdown

.github/instructions/bash.instructions.md

@@ -0,0 +1,48 @@
+---
+description: Guidelines for bash commands and tooling in the monorepo
+applyTo: "**/*.sh"
+---
+
+# Bash & Tooling Instructions
+
+This document outlines the standard tools and commands used in this monorepo.
+
+## Package Manager
+
+We use **pnpm** for package management.
+- **Do not use `npm` or `yarn`.**
+- Lockfile: `pnpm-lock.yaml`
+- Workspace configuration: `pnpm-workspace.yaml`
+
+### Common Commands
+- Install dependencies: `pnpm install`
+- Run a script in a specific package: `pnpm --filter <package_name> run <script>`
+- Run a script in all packages: `pnpm -r run <script>`
+
+## Monorepo Tooling
+
+We use **Turbo** for build system orchestration.
+- Configuration: `turbo.json`
+
+## Project Structure
+
+- `apps/`: Contains application services (admin, api, live, proxy, space, web).
+- `packages/`: Contains shared packages and libraries.
+- `deployments/`: Deployment configurations.
+
+## Running Tests
+
+- To run tests in a specific package (e.g., codemods):
+  ```bash
+  cd packages/codemods
+  pnpm run test
+  ```
+- Or from root:
+  ```bash
+  pnpm --filter @plane/codemods run test
+  ```
+
+## Docker
+
+- Local development uses `docker-compose-local.yml`.
+- Production/Staging uses `docker-compose.yml`.

.github/instructions/typescript.instructions.md

@@ -0,0 +1,129 @@
+---
+description: Guidelines for using modern TypeScript features (v5.0-v5.8)
+applyTo: "**/*.{ts,tsx,mts,cts}"
+---
+
+# TypeScript Coding Guidelines & Modern Features (v5.0 - v5.8)
+
+When writing TypeScript code, prioritize using modern features and best practices introduced in recent versions (up to 5.8).
+
+## Global Themes Across 5.x
+
+1. **Standard decorators are here; legacy decorators are legacy.**
+   New TC39-compliant decorators landed in 5.0 and were extended in 5.2 (metadata). Old `experimentalDecorators`-style behavior is still supported but should be treated as legacy.
+
+2. **Type system is more precise and less noisy.**
+   Major work went into narrowing, control flow analysis, error messages, and new helpers like `NoInfer`, inferred predicates, and better `undefined`/`never`/uninitialized checks.
+
+3. **Module / runtime interop has been modernized.**
+   Options like `--moduleResolution bundler`, `--module nodenext`/`node18`, `--rewriteRelativeImportExtensions`, `--erasableSyntaxOnly`, and `--verbatimModuleSyntax` are about playing nicely with ESM, Node 18+/22+, direct TypeScript execution, and bundlers.
+
+4. **The standard library keeps tracking modern JS.**
+   Support for new ES features (iterator helpers, `Object.groupBy`/`Map.groupBy`, new Set/ES2024 APIs) shows up as type declarations and sometimes extra checks (regex syntax checking, etc.).
+
+When generating or refactoring code, prefer these newer idioms, and avoid patterns that conflict with updated checks.
+
+## Modern Features to Utilize
+
+### Type System & Inference
+- **`const` Type Parameters (5.0)**: Use `const` type parameters for more precise literal inference.
+  ```typescript
+  declare function names<const T extends string[]>(...names: T): void;
+  ```
+- **`@satisfies` Operator (5.0)**: Use `satisfies` to validate types without widening them.
+- **Inferred Type Predicates (5.5)**: Allow TypeScript to infer type predicates for functions that filter arrays or check types, reducing the need for explicit `is` return types.
+- **`NoInfer` Utility (5.4)**: Use `NoInfer<T>` to block inference for specific type arguments when you want them to be determined by other arguments.
+- **Narrowing**:
+  - **Switch(true) (5.3)**: Utilize narrowing in `switch(true)` blocks.
+  - **Boolean Comparisons (5.3)**: Rely on narrowing from direct boolean comparisons.
+  - **Closures (5.4)**: Trust preserved narrowing in closures when variables aren't modified after the check.
+  - **Constant Indexed Access (5.5)**: Use constant indices to narrow object/array properties.
+
+### Syntax & Control Flow
+- **Decorators (5.0)**: Use standard ECMAScript decorators (Stage 3).
+- **`using` Declarations (5.2)**: Use `using` for explicit resource management (Disposable pattern) instead of manual cleanup.
+  ```typescript
+  using resource = new Resource();
+  ```
+- **Import Attributes (5.3/5.8)**: Use `with { type: "json" }` for import attributes. Avoid the deprecated `assert` syntax.
+- **`switch` Exhaustiveness**: Rely on TypeScript's exhaustiveness checking in switch statements.
+
+### Modules & Imports
+- **`verbatimModuleSyntax` (5.0)**: Respect this flag by using `import type` explicitly when importing types to ensure they are erased during compilation.
+- **Type-Only Imports with Extensions (5.2)**: You can use `.ts`, `.mts`, `.cts` extensions in `import type` statements.
+- **`resolution-mode` (5.3)**: Use `import type { Type } from "mod" with { "resolution-mode": "import" }` if needed for specific module resolution contexts.
+- **JSDoc `@import` (5.5)**: Use `@import` tags in JSDoc for cleaner type imports in JS files if working in a mixed codebase.
+
+### Standard Library & Built-ins
+- **Iterator Helpers (5.6)**: Use new iterator methods (map, filter, etc.) if targeting modern environments.
+- **Set Methods (5.5)**: Utilize new `Set` methods like `union`, `intersection`, etc., when available.
+- **`Object.groupBy` / `Map.groupBy` (5.4)**: Use these standard methods for grouping instead of external libraries like Lodash when appropriate.
+- **`Promise.withResolvers` (5.7)**: Use `Promise.withResolvers()` for creating promises with exposed resolve/reject functions.
+
+### Configuration & Tooling
+- **`--moduleResolution bundler` (5.0)**: Assume this resolution strategy for modern web projects (Vite, Next.js, etc.).
+- **`--erasableSyntaxOnly` (5.8)**: Be aware of this flag; avoid TypeScript-specific syntax that cannot be simply erased (like `enum`s or `namespaces`) if the project aims for maximum compatibility with tools like Node.js's `--strip-types`. Prefer `const` objects or unions over `enum`s if requested.
+
+## Specific Coding Patterns
+
+### Arrays & Collections
+- Use **Copying Array Methods (5.2)** (`toSorted`, `toSpliced`, `with`) for immutable array operations.
+- **TypedArrays (5.7)**: Be aware that TypedArrays are now generic over `ArrayBufferLike`.
+
+### Classes
+- **Parameter Decorators (5.0/5.2)**: Use modern standard decorators.
+- **`super` Property Access (5.3)**: Avoid accessing instance fields via `super`.
+
+### Error Handling
+- **Checks for Never-Initialized Variables (5.7)**: Ensure variables are initialized before use to avoid new errors.
+
+## Deprecations to Avoid
+- Avoid `import ... assert` (use `with`).
+- Avoid implicit `any` returns in `undefined`-returning functions (though 5.1 makes this easier, explicit is better).
+- Avoid `enum`s if the project prefers erasable syntax (5.8).
+
+## Version-Specific Highlights
+
+### TypeScript 5.0
+- **Decorators**: Use standard decorators unless `experimentalDecorators` is explicitly enabled.
+- **`const` Type Parameters**: Use for literal inference.
+- **Enums**: All enums are union enums.
+- **Modules**: `--moduleResolution bundler` and `--verbatimModuleSyntax` are key for modern bundlers.
+
+### TypeScript 5.1
+- **Returns**: `undefined`-returning functions don't need explicit returns.
+- **Getters/Setters**: Can have unrelated types with explicit annotations.
+
+### TypeScript 5.2
+- **Resource Management**: `using` declarations for `Symbol.dispose`.
+- **Decorator Metadata**: Use `context.metadata` for design-time metadata.
+
+### TypeScript 5.3
+- **Import Attributes**: Use `with { type: "json" }`.
+- **Switch(true)**: Narrowing works in `switch(true)`.
+
+### TypeScript 5.4
+- **Closures**: Narrowing preserved in closures if last assignment is before creation.
+- **`NoInfer`**: Block inference for specific arguments.
+- **Grouping**: `Object.groupBy` / `Map.groupBy`.
+
+### TypeScript 5.5
+- **Inferred Predicates**: Functions checking types often don't need explicit `is` return types.
+- **Constant Index Access**: Better narrowing for constant keys.
+- **Regex**: Syntax checking for regex literals.
+
+### TypeScript 5.6
+- **Truthiness Checks**: Errors on always-truthy/falsy conditions (e.g., `if (/regex/)`).
+- **Iterator Helpers**: `.map`, `.filter` on iterators.
+
+### TypeScript 5.7
+- **Uninitialized Variables**: Stricter checks for never-initialized variables.
+- **Relative Imports**: `--rewriteRelativeImportExtensions` for `.ts` imports in output.
+- **ES2024**: Support for `Promise.withResolvers`, `Atomics.waitAsync`.
+
+### TypeScript 5.8
+- **Return Checks**: Granular checks for conditional returns.
+- **Node Modules**: `--module node18` stable; `require()` of ESM allowed in `nodenext`.
+- **Erasable Syntax**: `--erasableSyntaxOnly` forbids enums, namespaces, etc.
+
+When generating code, always prefer the most modern, standard, and type-safe approach available in TypeScript 5.8.

.github/workflows/build-aio-base.yml

@@ -1,139 +0,0 @@
-name: Build AIO Base Image
-
-on:
-  workflow_dispatch:
-    inputs:
-      base_tag_name:
-        description: 'Base Tag Name'
-        required: false
-        default: ''
-
-env:
-  TARGET_BRANCH: ${{ github.ref_name }}
-
-jobs:
-  base_build_setup:
-    name: Build Preparation
-    runs-on: ubuntu-latest
-    outputs:
-      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
-      gh_buildx_driver: ${{ steps.set_env_variables.outputs.BUILDX_DRIVER }}
-      gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
-      gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
-      gh_buildx_endpoint: ${{ steps.set_env_variables.outputs.BUILDX_ENDPOINT }}
-      image_tag: ${{ steps.set_env_variables.outputs.IMAGE_TAG }}
-
-    steps:
-      - id: set_env_variables
-        name: Set Environment Variables
-        run: |
-          echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
-
-          if [ "${{ github.event.inputs.base_tag_name }}" != "" ]; then
-            echo "IMAGE_TAG=${{ github.event.inputs.base_tag_name }}" >> $GITHUB_OUTPUT
-          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            echo "IMAGE_TAG=latest" >> $GITHUB_OUTPUT
-          elif [ "${{ env.TARGET_BRANCH }}" == "preview" ]; then
-              echo "IMAGE_TAG=preview" >> $GITHUB_OUTPUT
-          else
-            echo "IMAGE_TAG=develop" >> $GITHUB_OUTPUT
-          fi
-
-
-          if [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            echo "BUILDX_DRIVER=cloud" >> $GITHUB_OUTPUT
-            echo "BUILDX_VERSION=lab:latest" >> $GITHUB_OUTPUT
-            echo "BUILDX_PLATFORMS=linux/amd64,linux/arm64" >> $GITHUB_OUTPUT
-            echo "BUILDX_ENDPOINT=makeplane/plane-dev" >> $GITHUB_OUTPUT
-          else
-            echo "BUILDX_DRIVER=docker-container" >> $GITHUB_OUTPUT
-            echo "BUILDX_VERSION=latest" >> $GITHUB_OUTPUT
-            echo "BUILDX_PLATFORMS=linux/amd64" >> $GITHUB_OUTPUT
-            echo "BUILDX_ENDPOINT=" >> $GITHUB_OUTPUT
-          fi
-
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
-
-  full_base_build_push:
-    runs-on: ubuntu-latest
-    needs: [base_build_setup]
-    env:
-      BASE_IMG_TAG: makeplane/plane-aio-base:full-${{ needs.base_build_setup.outputs.image_tag }}
-      BUILDX_DRIVER: ${{ needs.base_build_setup.outputs.gh_buildx_driver }}
-      BUILDX_VERSION: ${{ needs.base_build_setup.outputs.gh_buildx_version }}
-      BUILDX_PLATFORMS: ${{ needs.base_build_setup.outputs.gh_buildx_platforms }}
-      BUILDX_ENDPOINT: ${{ needs.base_build_setup.outputs.gh_buildx_endpoint }}
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: ${{ env.BUILDX_DRIVER }}
-          version: ${{ env.BUILDX_VERSION }}
-          endpoint: ${{ env.BUILDX_ENDPOINT }}
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v6.9.0
-        with:
-          context: ./aio
-          file: ./aio/Dockerfile-base-full
-          platforms: ${{ env.BUILDX_PLATFORMS }}
-          tags: ${{ env.BASE_IMG_TAG }}
-          push: true
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
-  slim_base_build_push:
-    runs-on: ubuntu-latest
-    needs: [base_build_setup]
-    env:
-      BASE_IMG_TAG: makeplane/plane-aio-base:slim-${{ needs.base_build_setup.outputs.image_tag }}
-      BUILDX_DRIVER: ${{ needs.base_build_setup.outputs.gh_buildx_driver }}
-      BUILDX_VERSION: ${{ needs.base_build_setup.outputs.gh_buildx_version }}
-      BUILDX_PLATFORMS: ${{ needs.base_build_setup.outputs.gh_buildx_platforms }}
-      BUILDX_ENDPOINT: ${{ needs.base_build_setup.outputs.gh_buildx_endpoint }}
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: ${{ env.BUILDX_DRIVER }}
-          version: ${{ env.BUILDX_VERSION }}
-          endpoint: ${{ env.BUILDX_ENDPOINT }}
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v6.9.0
-        with:
-          context: ./aio
-          file: ./aio/Dockerfile-base-slim
-          platforms: ${{ env.BUILDX_PLATFORMS }}
-          tags: ${{ env.BASE_IMG_TAG }}
-          push: true
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

.github/workflows/build-aio-branch.yml

@@ -1,207 +0,0 @@
-name: Branch Build AIO
-
-on:
-  workflow_dispatch:
-    inputs:
-      full:
-        description: 'Run full build'
-        type: boolean
-        required: false
-        default: false
-      slim:
-        description: 'Run slim build'
-        type: boolean
-        required: false
-        default: false
-      base_tag_name:
-        description: 'Base Tag Name'
-        required: false
-        default: ''
-  release:
-    types: [released, prereleased]
-
-env:
-  TARGET_BRANCH: ${{ github.ref_name || github.event.release.target_commitish }}
-  FULL_BUILD_INPUT: ${{ github.event.inputs.full }}
-  SLIM_BUILD_INPUT: ${{ github.event.inputs.slim }}
-
-jobs:
-  branch_build_setup:
-    name: Build Setup
-    runs-on: ubuntu-latest
-    outputs:
-      gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
-      flat_branch_name: ${{ steps.set_env_variables.outputs.FLAT_BRANCH_NAME }}
-      gh_buildx_driver: ${{ steps.set_env_variables.outputs.BUILDX_DRIVER }}
-      gh_buildx_version: ${{ steps.set_env_variables.outputs.BUILDX_VERSION }}
-      gh_buildx_platforms: ${{ steps.set_env_variables.outputs.BUILDX_PLATFORMS }}
-      gh_buildx_endpoint: ${{ steps.set_env_variables.outputs.BUILDX_ENDPOINT }}
-      aio_base_tag: ${{ steps.set_env_variables.outputs.AIO_BASE_TAG }}
-      do_full_build: ${{ steps.set_env_variables.outputs.DO_FULL_BUILD }}
-      do_slim_build: ${{ steps.set_env_variables.outputs.DO_SLIM_BUILD }}
-
-    steps:
-      - id: set_env_variables
-        name: Set Environment Variables
-        run: |
-          if [ "${{ env.TARGET_BRANCH }}" == "master" ] || [ "${{ github.event_name }}" == "release" ]; then
-            echo "BUILDX_DRIVER=cloud" >> $GITHUB_OUTPUT
-            echo "BUILDX_VERSION=lab:latest" >> $GITHUB_OUTPUT
-            echo "BUILDX_PLATFORMS=linux/amd64,linux/arm64" >> $GITHUB_OUTPUT
-            echo "BUILDX_ENDPOINT=makeplane/plane-dev" >> $GITHUB_OUTPUT
-
-            echo "AIO_BASE_TAG=latest" >> $GITHUB_OUTPUT
-          else
-            echo "BUILDX_DRIVER=docker-container" >> $GITHUB_OUTPUT
-            echo "BUILDX_VERSION=latest" >> $GITHUB_OUTPUT
-            echo "BUILDX_PLATFORMS=linux/amd64" >> $GITHUB_OUTPUT
-            echo "BUILDX_ENDPOINT=" >> $GITHUB_OUTPUT
-
-            if [ "${{ github.event_name}}" == "workflow_dispatch" ] && [ "${{ github.event.inputs.base_tag_name }}" != "" ]; then
-              echo "AIO_BASE_TAG=${{ github.event.inputs.base_tag_name }}" >> $GITHUB_OUTPUT
-            elif [ "${{ env.TARGET_BRANCH }}" == "preview" ]; then
-              echo "AIO_BASE_TAG=preview" >> $GITHUB_OUTPUT
-            else
-              echo "AIO_BASE_TAG=develop" >> $GITHUB_OUTPUT
-            fi
-          fi
-          echo "TARGET_BRANCH=${{ env.TARGET_BRANCH }}" >> $GITHUB_OUTPUT
-
-          if [ "${{ env.FULL_BUILD_INPUT }}" == "true" ] || [ "${{github.event_name}}" == "push" ] || [ "${{github.event_name}}" == "release" ]; then
-            echo "DO_FULL_BUILD=true" >> $GITHUB_OUTPUT
-          else
-            echo "DO_FULL_BUILD=false" >> $GITHUB_OUTPUT
-          fi
-
-          if [ "${{ env.SLIM_BUILD_INPUT }}" == "true" ] || [ "${{github.event_name}}" == "push" ] || [ "${{github.event_name}}" == "release" ]; then
-            echo "DO_SLIM_BUILD=true" >> $GITHUB_OUTPUT
-          else
-            echo "DO_SLIM_BUILD=false" >> $GITHUB_OUTPUT
-          fi
-
-          FLAT_BRANCH_NAME=$(echo "${{ env.TARGET_BRANCH }}" | sed 's/[^a-zA-Z0-9]/-/g')
-          echo "FLAT_BRANCH_NAME=$FLAT_BRANCH_NAME" >> $GITHUB_OUTPUT
-
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
-
-  full_build_push:
-    if: ${{ needs.branch_build_setup.outputs.do_full_build == 'true' }}
-    runs-on: ubuntu-22.04
-    needs: [branch_build_setup]
-    env:
-      BUILD_TYPE: full
-      AIO_BASE_TAG: ${{ needs.branch_build_setup.outputs.aio_base_tag }}
-      AIO_IMAGE_TAGS: makeplane/plane-aio:full-${{ needs.branch_build_setup.outputs.flat_branch_name }}
-      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
-      BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
-      BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
-      BUILDX_PLATFORMS: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
-      BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
-    steps:
-      - name: Set Docker Tag
-        run: |
-          if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-aio:${{env.BUILD_TYPE}}-stable,makeplane/plane-aio:${{env.BUILD_TYPE}}-${{ github.event.release.tag_name }}
-          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-aio:${{env.BUILD_TYPE}}-latest
-          else
-            TAG=${{ env.AIO_IMAGE_TAGS }}
-          fi
-          echo "AIO_IMAGE_TAGS=${TAG}" >> $GITHUB_ENV
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: ${{ env.BUILDX_DRIVER }}
-          version: ${{ env.BUILDX_VERSION }}
-          endpoint: ${{ env.BUILDX_ENDPOINT }}
-
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v6.9.0
-        with:
-          context: .
-          file: ./aio/Dockerfile-app
-          platforms: ${{ env.BUILDX_PLATFORMS }}
-          tags: ${{ env.AIO_IMAGE_TAGS }}
-          push: true
-          build-args: |
-            BASE_TAG=${{ env.AIO_BASE_TAG }}
-            BUILD_TYPE=${{env.BUILD_TYPE}}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
-
-  slim_build_push:
-    if: ${{ needs.branch_build_setup.outputs.do_slim_build == 'true' }}
-    runs-on: ubuntu-22.04
-    needs: [branch_build_setup]
-    env:
-      BUILD_TYPE: slim
-      AIO_BASE_TAG: ${{ needs.branch_build_setup.outputs.aio_base_tag }}
-      AIO_IMAGE_TAGS: makeplane/plane-aio:slim-${{ needs.branch_build_setup.outputs.flat_branch_name }}
-      TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
-      BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
-      BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
-      BUILDX_PLATFORMS: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
-      BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
-    steps:
-      - name: Set Docker Tag
-        run: |
-          if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=makeplane/plane-aio:${{env.BUILD_TYPE}}-stable,makeplane/plane-aio:${{env.BUILD_TYPE}}-${{ github.event.release.tag_name }}
-          elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=makeplane/plane-aio:${{env.BUILD_TYPE}}-latest
-          else
-            TAG=${{ env.AIO_IMAGE_TAGS }}
-          fi
-          echo "AIO_IMAGE_TAGS=${TAG}" >> $GITHUB_ENV
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-        with:
-          driver: ${{ env.BUILDX_DRIVER }}
-          version: ${{ env.BUILDX_VERSION }}
-          endpoint: ${{ env.BUILDX_ENDPOINT }}
-
-      - name: Check out the repo
-        uses: actions/checkout@v4
-
-      - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v6.9.0
-        with:
-          context: .
-          file: ./aio/Dockerfile-app
-          platforms: ${{ env.BUILDX_PLATFORMS }}
-          tags: ${{ env.AIO_IMAGE_TAGS }}
-          push: true
-          build-args: |
-            BASE_TAG=${{ env.AIO_BASE_TAG }}
-            BUILD_TYPE=${{env.BUILD_TYPE}}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-        env:
-          DOCKER_BUILDKIT: 1
-          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-          DOCKER_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

.github/workflows/build-branch.yml

@@ -25,17 +25,27 @@ on:
         required: false
         default: false
         type: boolean
+      aio_build:
+        description: "Build for AIO docker image"
+        required: false
+        default: false
+        type: boolean
   push:
     branches:
       - preview
       - canary
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 env:
   TARGET_BRANCH: ${{ github.ref_name }}
   ARM64_BUILD: ${{ github.event.inputs.arm64 }}
   BUILD_TYPE: ${{ github.event.inputs.build_type }}
   RELEASE_VERSION: ${{ github.event.inputs.releaseVersion }}
   IS_PRERELEASE: ${{ github.event.inputs.isPrerelease }}
+  AIO_BUILD: ${{ github.event.inputs.aio_build }}
 
 jobs:
   branch_build_setup:
@@ -54,11 +64,13 @@ jobs:
       dh_img_live: ${{ steps.set_env_variables.outputs.DH_IMG_LIVE }}
       dh_img_backend: ${{ steps.set_env_variables.outputs.DH_IMG_BACKEND }}
       dh_img_proxy: ${{ steps.set_env_variables.outputs.DH_IMG_PROXY }}
+      dh_img_aio: ${{ steps.set_env_variables.outputs.DH_IMG_AIO }}
 
       build_type: ${{steps.set_env_variables.outputs.BUILD_TYPE}}
       build_release: ${{ steps.set_env_variables.outputs.BUILD_RELEASE }}
       build_prerelease: ${{ steps.set_env_variables.outputs.BUILD_PRERELEASE }}
       release_version: ${{ steps.set_env_variables.outputs.RELEASE_VERSION }}
+      aio_build: ${{ steps.set_env_variables.outputs.AIO_BUILD }}
 
     steps:
       - id: set_env_variables
@@ -84,12 +96,15 @@ jobs:
           echo "DH_IMG_LIVE=plane-live" >> $GITHUB_OUTPUT
           echo "DH_IMG_BACKEND=plane-backend" >> $GITHUB_OUTPUT
           echo "DH_IMG_PROXY=plane-proxy" >> $GITHUB_OUTPUT
+          echo "DH_IMG_AIO=plane-aio-community" >> $GITHUB_OUTPUT
 
           echo "BUILD_TYPE=${{env.BUILD_TYPE}}" >> $GITHUB_OUTPUT
           BUILD_RELEASE=false
           BUILD_PRERELEASE=false
           RELVERSION="latest"
 
+          BUILD_AIO=${{ env.AIO_BUILD }}
+
           if [ "${{ env.BUILD_TYPE }}" == "Release" ]; then
             FLAT_RELEASE_VERSION=$(echo "${{ env.RELEASE_VERSION }}" | sed 's/[^a-zA-Z0-9.-]//g')
             echo "FLAT_RELEASE_VERSION=${FLAT_RELEASE_VERSION}" >> $GITHUB_OUTPUT
@@ -108,10 +123,14 @@ jobs:
             if [ "${{ env.IS_PRERELEASE }}" == "true" ]; then
               BUILD_PRERELEASE=true
             fi
+
+            BUILD_AIO=true
           fi
+
           echo "BUILD_RELEASE=${BUILD_RELEASE}" >> $GITHUB_OUTPUT
           echo "BUILD_PRERELEASE=${BUILD_PRERELEASE}" >> $GITHUB_OUTPUT
           echo "RELEASE_VERSION=${RELVERSION}" >> $GITHUB_OUTPUT
+          echo "AIO_BUILD=${BUILD_AIO}" >> $GITHUB_OUTPUT
 
       - id: checkout_files
         name: Checkout Files
@@ -133,7 +152,7 @@ jobs:
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_admin }}
           build-context: .
-          dockerfile-path: ./admin/Dockerfile.admin
+          dockerfile-path: ./apps/admin/Dockerfile.admin
           buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
           buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
           buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
@@ -155,7 +174,7 @@ jobs:
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_web }}
           build-context: .
-          dockerfile-path: ./web/Dockerfile.web
+          dockerfile-path: ./apps/web/Dockerfile.web
           buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
           buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
           buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
@@ -177,7 +196,7 @@ jobs:
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_space }}
           build-context: .
-          dockerfile-path: ./space/Dockerfile.space
+          dockerfile-path: ./apps/space/Dockerfile.space
           buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
           buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
           buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
@@ -199,13 +218,13 @@ jobs:
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_live }}
           build-context: .
-          dockerfile-path: ./live/Dockerfile.live
+          dockerfile-path: ./apps/live/Dockerfile.live
           buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
           buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
           buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
           buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
 
-  branch_build_push_apiserver:
+  branch_build_push_api:
     name: Build-Push API Server Docker Image
     runs-on: ubuntu-22.04
     needs: [branch_build_setup]
@@ -220,8 +239,8 @@ jobs:
           dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_backend }}
-          build-context: ./apiserver
-          dockerfile-path: ./apiserver/Dockerfile.api
+          build-context: ./apps/api
+          dockerfile-path: ./apps/api/Dockerfile.api
           buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
           buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
           buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
@@ -242,13 +261,108 @@ jobs:
           dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_proxy }}
-          build-context: ./nginx
-          dockerfile-path: ./nginx/Dockerfile
+          build-context: ./apps/proxy
+          dockerfile-path: ./apps/proxy/Dockerfile.ce
           buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
           buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
           buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
           buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
 
+  branch_build_push_aio:
+    if: ${{ needs.branch_build_setup.outputs.aio_build == 'true' }}
+    name: Build-Push AIO Docker Image
+    runs-on: ubuntu-22.04
+    needs:
+      - branch_build_setup
+      - branch_build_push_admin
+      - branch_build_push_web
+      - branch_build_push_space
+      - branch_build_push_live
+      - branch_build_push_api
+      - branch_build_push_proxy
+    steps:
+      - name: Checkout Files
+        uses: actions/checkout@v4
+
+      - name: Prepare AIO Assets
+        id: prepare_aio_assets
+        run: |
+          cd deployments/aio/community
+
+          if [ "${{ needs.branch_build_setup.outputs.build_type }}" == "Release" ]; then
+            aio_version=${{ needs.branch_build_setup.outputs.release_version }}
+          else
+            aio_version=${{ needs.branch_build_setup.outputs.gh_branch_name }}
+          fi
+          bash ./build.sh --release $aio_version
+          echo "AIO_BUILD_VERSION=${aio_version}" >> $GITHUB_OUTPUT
+
+      - name: Upload AIO Assets
+        uses: actions/upload-artifact@v4
+        with:
+          path: ./deployments/aio/community/dist
+          name: aio-assets-dist
+
+      - name: AIO Build and Push
+        uses: makeplane/actions/build-push@v1.1.0
+        with:
+          build-release: ${{ needs.branch_build_setup.outputs.build_release }}
+          build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
+          release-version: ${{ needs.branch_build_setup.outputs.release_version }}
+          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          docker-image-owner: makeplane
+          docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_aio }}
+          build-context: ./deployments/aio/community
+          dockerfile-path: ./deployments/aio/community/Dockerfile
+          buildx-driver: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
+          buildx-version: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
+          buildx-platforms: ${{ needs.branch_build_setup.outputs.gh_buildx_platforms }}
+          buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
+          additional-assets: aio-assets-dist
+          additional-assets-dir: ./deployments/aio/community/dist
+          build-args: |
+            PLANE_VERSION=${{ steps.prepare_aio_assets.outputs.AIO_BUILD_VERSION }}
+
+  upload_build_assets:
+    name: Upload Build Assets
+    runs-on: ubuntu-22.04
+    needs:
+      - branch_build_setup
+      - branch_build_push_admin
+      - branch_build_push_web
+      - branch_build_push_space
+      - branch_build_push_live
+      - branch_build_push_api
+      - branch_build_push_proxy
+    steps:
+      - name: Checkout Files
+        uses: actions/checkout@v4
+
+      - name: Update Assets
+        run: |
+          if [ "${{ needs.branch_build_setup.outputs.build_type }}" == "Release" ]; then
+            REL_VERSION=${{ needs.branch_build_setup.outputs.release_version }}
+          else
+            REL_VERSION=${{ needs.branch_build_setup.outputs.gh_branch_name }}
+          fi
+
+          cp ./deployments/cli/community/install.sh deployments/cli/community/setup.sh
+          sed -i 's/${APP_RELEASE:-stable}/${APP_RELEASE:-'${REL_VERSION}'}/g' deployments/cli/community/docker-compose.yml
+          # sed -i 's/APP_RELEASE=stable/APP_RELEASE='${REL_VERSION}'/g' deployments/cli/community/variables.env
+
+      - name: Upload Assets
+        uses: actions/upload-artifact@v4
+        with:
+          name: community-assets
+          path: |
+            ./deployments/cli/community/setup.sh
+            ./deployments/cli/community/restore.sh
+            ./deployments/cli/community/restore-airgapped.sh
+            ./deployments/cli/community/docker-compose.yml
+            ./deployments/cli/community/variables.env
+            ./deployments/swarm/community/swarm.sh
+
   publish_release:
     if: ${{ needs.branch_build_setup.outputs.build_type == 'Release' }}
     name: Build Release
@@ -260,7 +374,7 @@ jobs:
         branch_build_push_web,
         branch_build_push_space,
         branch_build_push_live,
-        branch_build_push_apiserver,
+        branch_build_push_api,
         branch_build_push_proxy,
       ]
     env:
@@ -271,9 +385,9 @@ jobs:
 
       - name: Update Assets
         run: |
-          cp ./deploy/selfhost/install.sh deploy/selfhost/setup.sh
-          sed -i 's/${APP_RELEASE:-stable}/${APP_RELEASE:-'${REL_VERSION}'}/g' deploy/selfhost/docker-compose.yml
-          # sed -i 's/APP_RELEASE=stable/APP_RELEASE='${REL_VERSION}'/g' deploy/selfhost/variables.env
+          cp ./deployments/cli/community/install.sh deployments/cli/community/setup.sh
+          sed -i 's/${APP_RELEASE:-stable}/${APP_RELEASE:-'${REL_VERSION}'}/g' deployments/cli/community/docker-compose.yml
+          # sed -i 's/APP_RELEASE=stable/APP_RELEASE='${REL_VERSION}'/g' deployments/cli/community/variables.env
 
       - name: Create Release
         id: create_release
@@ -287,9 +401,9 @@ jobs:
           prerelease: ${{ env.IS_PRERELEASE }}
           generate_release_notes: true
           files: |
-            ${{ github.workspace }}/deploy/selfhost/setup.sh
-            ${{ github.workspace }}/deploy/selfhost/swarm.sh
-            ${{ github.workspace }}/deploy/selfhost/restore.sh
-            ${{ github.workspace }}/deploy/selfhost/restore-airgapped.sh
-            ${{ github.workspace }}/deploy/selfhost/docker-compose.yml
-            ${{ github.workspace }}/deploy/selfhost/variables.env
+            ${{ github.workspace }}/deployments/cli/community/setup.sh
+            ${{ github.workspace }}/deployments/cli/community/restore.sh
+            ${{ github.workspace }}/deployments/cli/community/restore-airgapped.sh
+            ${{ github.workspace }}/deployments/cli/community/docker-compose.yml
+            ${{ github.workspace }}/deployments/cli/community/variables.env
+            ${{ github.workspace }}/deployments/swarm/community/swarm.sh

.github/workflows/build-test-pull-request.yml

@@ -1,95 +0,0 @@
-name: Build and Lint on Pull Request
-
-on:
-  workflow_dispatch:
-  pull_request:
-    types: ["opened", "synchronize", "ready_for_review"]
-
-jobs:
-  lint-apiserver:
-    if: github.event.pull_request.draft == false
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Set up Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: "3.x" # Specify the Python version you need
-      - name: Install Pylint
-        run: python -m pip install ruff
-      - name: Install Apiserver Dependencies
-        run: cd apiserver && pip install -r requirements.txt
-      - name: Lint apiserver
-        run: ruff check --fix apiserver
-
-  lint-admin:
-    if: github.event.pull_request.draft == false
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-      - run: yarn install
-      - run: yarn lint --filter=admin
-
-  lint-space:
-    if: github.event.pull_request.draft == false
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-      - run: yarn install
-      - run: yarn lint --filter=space
-
-  lint-web:
-    if: github.event.pull_request.draft == false
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-      - run: yarn install
-      - run: yarn lint --filter=web
-
-  build-admin:
-    needs: lint-admin
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-      - run: yarn install
-      - run: yarn build --filter=admin
-
-  build-space:
-    needs: lint-space
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-      - run: yarn install
-      - run: yarn build --filter=space
-
-  build-web:
-    needs: lint-web
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-      - run: yarn install
-      - run: yarn build --filter=web

.github/workflows/check-version.yml

@@ -17,8 +17,6 @@ jobs:
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
-        with:
-          node-version: '18'
 
       - name: Get PR Branch version
         run: echo "PR_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV

.github/workflows/codeql.yml

@@ -3,11 +3,9 @@ name: "CodeQL"
 on:
   workflow_dispatch:
   push:
-    branches: ["preview", "master"]
+    branches: ["preview", "canary", "master"]
   pull_request:
-    branches: ["develop", "preview", "master"]
-  schedule:
-    - cron: "53 19 * * 5"
+    branches: ["preview", "canary", "master"]
 
 jobs:
   analyze:

.github/workflows/codespell.yml

@@ -0,0 +1,25 @@
+# Codespell configuration is within .codespellrc
+---
+name: Codespell
+
+on:
+  push:
+    branches: [preview]
+  pull_request:
+    branches: [preview]
+
+permissions:
+  contents: read
+
+jobs:
+  codespell:
+    name: Check for spelling errors
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Annotate locations with typos
+        uses: codespell-project/codespell-problem-matcher@v1
+      - name: Codespell
+        uses: codespell-project/actions-codespell@v2

.github/workflows/pull-request-build-lint-api.yml

@@ -0,0 +1,42 @@
+name: Build and lint API
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - "preview"
+    types:
+      - "opened"
+      - "synchronize"
+      - "ready_for_review"
+      - "review_requested"
+      - "reopened"
+    paths:
+      - "apps/api/**"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint-api:
+    name: Lint API
+    runs-on: ubuntu-latest
+    timeout-minutes: 25
+    if: |
+      github.event.pull_request.draft == false &&
+      github.event.pull_request.requested_reviewers != null
+    steps:
+      - uses: actions/checkout@v6
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.12.x"
+          cache: 'pip'
+          cache-dependency-path: 'apps/api/requirements.txt'
+      - name: Install Pylint
+        run: python -m pip install ruff
+      - name: Install API Dependencies
+        run: cd apps/api && pip install -r requirements.txt
+      - name: Lint apps/api
+        run: ruff check --fix apps/api

.github/workflows/pull-request-build-lint-web-apps.yml

@@ -0,0 +1,169 @@
+name: Build and lint web apps
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - "preview"
+    types:
+      - "opened"
+      - "synchronize"
+      - "ready_for_review"
+      - "review_requested"
+      - "reopened"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  # Format check has no build dependencies - run immediately in parallel
+  check-format:
+    name: check:format
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    if: |
+      github.event.pull_request.draft == false &&
+      github.event.pull_request.requested_reviewers != null
+    env:
+      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
+      TURBO_SCM_HEAD: ${{ github.sha }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 50
+          filter: blob:none
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+
+      - name: Enable Corepack and pnpm
+        run: corepack enable pnpm
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Check formatting
+        run: pnpm turbo run check:format --affected
+
+  # Build packages - required for lint and type checks
+  build:
+    name: Build packages
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    if: |
+      github.event.pull_request.draft == false &&
+      github.event.pull_request.requested_reviewers != null
+    env:
+      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
+      TURBO_SCM_HEAD: ${{ github.sha }}
+      NODE_OPTIONS: "--max-old-space-size=4096"
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 50
+          filter: blob:none
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+
+      - name: Enable Corepack and pnpm
+        run: corepack enable pnpm
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-${{ runner.os }}-
+
+      - name: Restore Turbo cache
+        uses: actions/cache/restore@v4
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
+          restore-keys: |
+            turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-
+            turbo-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm turbo run build --affected
+
+      - name: Save Turbo cache
+        uses: actions/cache/save@v4
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
+
+  # Lint and type checks depend on build artifacts
+  check:
+    name: ${{ matrix.task }}
+    runs-on: ubuntu-latest
+    needs: build
+    timeout-minutes: 15
+    strategy:
+      fail-fast: false
+      matrix:
+        task: [check:lint, check:types]
+    env:
+      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
+      TURBO_SCM_HEAD: ${{ github.sha }}
+      NODE_OPTIONS: "--max-old-space-size=4096"
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 50
+          filter: blob:none
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+
+      - name: Enable Corepack and pnpm
+        run: corepack enable pnpm
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            pnpm-store-${{ runner.os }}-
+
+      - name: Restore Turbo cache
+        uses: actions/cache/restore@v4
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run ${{ matrix.task }}
+        run: pnpm turbo run ${{ matrix.task }} --affected

.gitignore

@@ -16,19 +16,22 @@ node_modules
 /out/
 
 # Production
-/build
 dist/
 out/
+build/
+.react-router/
 
 # Misc
 .DS_Store
 *.pem
 .history
+tsconfig.tsbuildinfo
 
 # Debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 .pnpm-debug.log*
 
 # Local env files
@@ -60,6 +63,7 @@ node_modules/
 assets/dist/
 npm-debug.log
 yarn-error.log
+pnpm-debug.log
 
 # Editor directories and files
 .idea
@@ -75,10 +79,9 @@ package-lock.json
 
 # lock files
 package-lock.json
-pnpm-lock.yaml
-pnpm-workspace.yaml
 
-.npmrc
+
+
 .secrets
 tmp/
 
@@ -95,3 +98,15 @@ dev-editor
 # Redis
 *.rdb
 *.rdb.gz
+
+storybook-static
+
+CLAUDE.md
+
+build/
+.react-router/
+
+build/
+.react-router/
+temp/
+scripts/

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

.mise.toml

@@ -0,0 +1,2 @@
+[tools]
+node = "22.18.0"

.npmrc

@@ -0,0 +1,54 @@
+# ------------------------------
+# Core Workspace Behavior
+# ------------------------------
+
+# Always prefer using local workspace packages when available
+prefer-workspace-packages = true
+
+# Symlink workspace packages instead of duplicating them
+link-workspace-packages = true
+
+# Use a single lockfile across the whole monorepo
+shared-workspace-lockfile = true
+
+# Ensure packages added from workspace save using workspace: protocol
+save-workspace-protocol = true
+
+
+# ------------------------------
+# Dependency Resolution
+# ------------------------------
+
+# Choose the highest compatible version across the workspace
+# → reduces fragmentation & node_modules bloat
+resolution-mode = highest
+
+# Automatically install peer dependencies instead of forcing every package to declare them
+auto-install-peers = true
+
+# Don't break the install if peers are missing
+strict-peer-dependencies = false
+
+
+# ------------------------------
+# Performance Optimizations
+# ------------------------------
+
+# Use cached artifacts for native modules (sharp, esbuild, etc.)
+side-effects-cache = true
+
+# Prefer local cached packages rather than hitting network
+prefer-offline = true
+
+# In CI, refuse to modify lockfile (prevents drift)
+prefer-frozen-lockfile = true
+
+# Use isolated linker (best compatibility with Node ecosystem tools)
+node-linker = isolated
+
+# Hoist commonly used tools to the root to prevent duplicates and speed up resolution
+public-hoist-pattern[] = typescript
+public-hoist-pattern[] = eslint
+public-hoist-pattern[] = *@plane/*
+public-hoist-pattern[] = vite
+public-hoist-pattern[] = turbo

.prettierignore

@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "overrides": [
+    {
+      "files": ["packages/codemods/**/*"],
+      "options": {
+        "printWidth": 80
+      }
+    }
+  ],
+  "plugins": ["@prettier/plugin-oxc"],
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

AGENTS.md

@@ -0,0 +1,24 @@
+# Agent Development Guide
+
+## Commands
+
+- `pnpm dev` - Start all dev servers (web:3000, admin:3001)
+- `pnpm build` - Build all packages and apps
+- `pnpm check` - Run all checks (format, lint, types)
+- `pnpm check:lint` - ESLint across all packages
+- `pnpm check:types` - TypeScript type checking
+- `pnpm fix` - Auto-fix format and lint issues
+- `pnpm turbo run <command> --filter=<package>` - Target specific package/app
+- `pnpm --filter=@plane/ui storybook` - Start Storybook on port 6006
+
+## Code Style
+
+- **Imports**: Use `workspace:*` for internal packages, `catalog:` for external deps
+- **TypeScript**: Strict mode enabled, all files must be typed
+- **Formatting**: Prettier with Tailwind plugin, run `pnpm fix:format`
+- **Linting**: ESLint with shared config, max warnings vary by package
+- **Naming**: camelCase for variables/functions, PascalCase for components/types
+- **Error Handling**: Use try-catch with proper error types, log errors appropriately
+- **State Management**: MobX stores in `packages/shared-state`, reactive patterns
+- **Testing**: All features require unit tests, use existing test framework per package
+- **Components**: Build in `@plane/ui` with Storybook for isolated development

CODEOWNERS

@@ -0,0 +1 @@
+eslint.config.mjs   @lifeiscontent

CONTRIBUTING.md

@@ -25,6 +25,7 @@ When opening a new issue, please use a clear and concise title that follows this
 - For documentation: `📘 Docs: [short description]`
 
 **Examples:**
+
 - `🐛 Bug: API token expiry time not saving correctly`
 - `📘 Docs: Clarify RAM requirement for local setup`
 - `🚀 Feature: Allow custom time selection for token expiration`
@@ -47,7 +48,7 @@ This helps us triage and manage issues more efficiently.
 
 The project is a monorepo, with backend api and frontend in a single repo.
 
-The backend is a django project which is kept inside apiserver
+The backend is a django project which is kept inside apps/api
 
 1. Clone the repo
 
@@ -69,14 +70,14 @@ chmod +x setup.sh
 docker compose -f docker-compose-local.yml up
 ```
 
-5. Start web apps:
+4. Start web apps:
 
 ```bash
-yarn dev
+pnpm dev
 ```
 
-6. Open your browser to http://localhost:3001/god-mode/ and register yourself as instance admin
-7. Open up your browser to http://localhost:3000 then log in using the same credentials from the previous step
+5. Open your browser to http://localhost:3001/god-mode/ and register yourself as instance admin
+6. Open up your browser to http://localhost:3000 then log in using the same credentials from the previous step
 
 That’s it! You’re all set to begin coding. Remember to refresh your browser if changes don’t auto-reload. Happy contributing! 🎉
 
@@ -90,7 +91,7 @@ If you would like to _implement_ it, an issue with your proposal must be submitt
 To ensure consistency throughout the source code, please keep these rules in mind as you are working:
 
 - All features or bug fixes must be tested by one or more specs (unit-tests).
-- We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
+- We lint with [ESLint 9](https://eslint.org/docs/latest/) using the shared `eslint.config.mjs` (type-aware via `typescript-eslint`) and format with [Prettier](https://prettier.io/) using `prettier.config.cjs`.
 
 ## Ways to contribute
 
@@ -105,11 +106,13 @@ To ensure consistency throughout the source code, please keep these rules in min
 - **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.
 
 ## Contributing to language support
+
 This guide is designed to help contributors understand how to add or update translations in the application.
 
 ### Understanding translation structure
 
 #### File organization
+
 Translations are organized by language in the locales directory. Each language has its own folder containing JSON files for translations. Here's how it looks:
 
 ```
@@ -122,7 +125,9 @@ packages/i18n/src/locales/
     └── [language]/
         └── translations.json
 ```
+
 #### Nested structure
+
 To keep translations organized, we use a nested structure for keys. This makes it easier to manage and locate specific translations. For example:
 
 ```json
@@ -137,32 +142,37 @@ To keep translations organized, we use a nested structure for keys. This makes i
 ```
 
 ### Translation formatting guide
+
 We use [IntlMessageFormat](https://formatjs.github.io/docs/intl-messageformat/) to handle dynamic content, such as variables and pluralization. Here's how to format your translations:
 
 #### Examples
+
 - **Simple variables**
-    ```json
-    {
+
+  ```json
+  {
     "greeting": "Hello, {name}!"
-    }
-    ```
+  }
+  ```
 
 - **Pluralization**
-    ```json
-    {
+  ```json
+  {
     "items": "{count, plural, one {Work item} other {Work items}}"
-    }
-    ```
+  }
+  ```
 
 ### Contributing guidelines
 
 #### Updating existing translations
+
 1. Locate the key in `locales/<language>/translations.json`.
 
 2. Update the value while ensuring the key structure remains intact.
 3. Preserve any existing ICU formats (e.g., variables, pluralization).
 
 #### Adding new translation keys
+
 1. When introducing a new key, ensure it is added to **all** language files, even if translations are not immediately available. Use English as a placeholder if needed.
 
 2. Keep the nesting structure consistent across all languages.
@@ -170,48 +180,50 @@ We use [IntlMessageFormat](https://formatjs.github.io/docs/intl-messageformat/)
 3. If the new key requires dynamic content (e.g., variables or pluralization), ensure the ICU format is applied uniformly across all languages.
 
 ### Adding new languages
+
 Adding a new language involves several steps to ensure it integrates seamlessly with the project. Follow these instructions carefully:
 
-1. **Update type definitions**
-Add the new language to the TLanguage type in the language definitions file:
+1.  **Update type definitions**
+    Add the new language to the TLanguage type in the language definitions file:
 
-    ```typescript
-    // types/language.ts
-    export type TLanguage = "en" | "fr" | "your-lang";
-    ```
+```ts
+// packages/i18n/src/types/language.ts
+export type TLanguage = "en" | "fr" | "your-lang";
+```
 
-2. **Add language configuration**
-Include the new language in the list of supported languages:
+1.  **Add language configuration**
+    Include the new language in the list of supported languages:
 
-    ```typescript
-    // constants/language.ts
-    export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
-    { label: "English", value: "en" },
-    { label: "Your Language", value: "your-lang" }
-    ];
-    ```
+```ts
+// packages/i18n/src/constants/language.ts
+export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
+  { label: "English", value: "en" },
+  { label: "Your Language", value: "your-lang" },
+];
+```
 
-3. **Create translation files**
-    1.  Create a new folder for your language under locales (e.g., `locales/your-lang/`).
+2.  **Create translation files**
+    1. Create a new folder for your language under locales (e.g., `locales/your-lang/`).
 
     2. Add a `translations.json` file inside the folder.
 
     3. Copy the structure from an existing translation file and translate all keys.
 
-4. **Update import logic**
-Modify the language import logic to include your new language:
+3.  **Update import logic**
+    Modify the language import logic to include your new language:
 
-    ```typescript
-    private importLanguageFile(language: TLanguage): Promise<any> {
-    switch (language) {
-        case "your-lang":
-        return import("../locales/your-lang/translations.json");
-        // ...
-    }
-    }
-    ```
+```ts
+      private importLanguageFile(language: TLanguage): Promise<any> {
+      switch (language) {
+          case "your-lang":
+          return import("../locales/your-lang/translations.json");
+          // ...
+      }
+      }
+```
 
 ### Quality checklist
+
 Before submitting your contribution, please ensure the following:
 
 - All translation keys exist in every language file.
@@ -222,6 +234,7 @@ Before submitting your contribution, please ensure the following:
 - There are no missing or untranslated keys.
 
 #### Pro tips
+
 - When in doubt, refer to the English translations for context.
 - Verify pluralization works with different numbers.
 - Ensure dynamic values (e.g., `{name}`) are correctly interpolated.

ENV_SETUP.md

@@ -1,88 +0,0 @@
-# Environment Variables
-
-Environment variables are distributed in various files. Please refer them carefully.
-
-## {PROJECT_FOLDER}/.env
-
-File is available in the project root folder​
-
-```
-# Database Settings
-POSTGRES_USER="plane"
-POSTGRES_PASSWORD="plane"
-POSTGRES_DB="plane"
-PGDATA="/var/lib/postgresql/data"
-# Redis Settings
-REDIS_HOST="plane-redis"
-REDIS_PORT="6379"
-# AWS Settings
-AWS_REGION=""
-AWS_ACCESS_KEY_ID="access-key"
-AWS_SECRET_ACCESS_KEY="secret-key"
-AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
-# Changing this requires change in the nginx.conf for uploads if using minio setup
-AWS_S3_BUCKET_NAME="uploads"
-# Maximum file upload limit
-FILE_SIZE_LIMIT=5242880
-# GPT settings
-OPENAI_API_BASE="https://api.openai.com/v1" # deprecated
-OPENAI_API_KEY="sk-" # deprecated
-GPT_ENGINE="gpt-3.5-turbo" # deprecated
-# Settings related to Docker
-DOCKERIZED=1  # deprecated
-# set to 1 If using the pre-configured minio setup
-USE_MINIO=1
-# Nginx Configuration
-NGINX_PORT=80
-```
-
-## {PROJECT_FOLDER}/apiserver/.env
-
-```
-# Backend
-# Debug value for api server use it as 0 for production use
-DEBUG=0
-CORS_ALLOWED_ORIGINS="http://localhost"
-# Database Settings
-POSTGRES_USER="plane"
-POSTGRES_PASSWORD="plane"
-POSTGRES_HOST="plane-db"
-POSTGRES_DB="plane"
-POSTGRES_PORT=5432
-DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB}
-# Redis Settings
-REDIS_HOST="plane-redis"
-REDIS_PORT="6379"
-REDIS_URL="redis://${REDIS_HOST}:6379/"
-# AWS Settings
-AWS_REGION=""
-AWS_ACCESS_KEY_ID="access-key"
-AWS_SECRET_ACCESS_KEY="secret-key"
-AWS_S3_ENDPOINT_URL="http://plane-minio:9000"
-# Changing this requires change in the nginx.conf for uploads if using minio setup
-AWS_S3_BUCKET_NAME="uploads"
-# Maximum file upload limit
-FILE_SIZE_LIMIT=5242880
-# Settings related to Docker
-DOCKERIZED=1 # deprecated
-# set to 1 If using the pre-configured minio setup
-USE_MINIO=1
-# Nginx Configuration
-NGINX_PORT=80
-# Email redirections and minio domain settings
-WEB_URL="http://localhost"
-# Gunicorn Workers
-GUNICORN_WORKERS=2
-# Base URLs
-ADMIN_BASE_URL=
-SPACE_BASE_URL=
-APP_BASE_URL=
-SECRET_KEY="gxoytl7dmnc1y37zahah820z5iq3iozu38cnfjtu3yaau9cd9z"
-```
-
-## Updates​
-
-- The naming convention for containers and images has been updated.
-- The plane-worker image will no longer be maintained, as it has been merged with plane-backend.
-- The Tiptap pro-extension dependency has been removed, eliminating the need for Tiptap API keys.
-- The image name for Plane deployment has been changed to plane-space.

README.md

@@ -2,11 +2,10 @@
 
 <p align="center">
 <a href="https://plane.so">
-  <img src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_logo_.webp" alt="Plane Logo" width="70">
+  <img src="https://media.docs.plane.so/logo/plane_github_readme.png" alt="Plane Logo" width="400">
 </a>
 </p>
-<h1 align="center"><b>Plane</b></h1>
-<p align="center"><b>Open-source project management that unlocks customer value</b></p>
+<p align="center"><b>Modern project management for all teams</b></p>
 
 <p align="center">
 <a href="https://discord.com/invite/A92xrEGCge">
@@ -25,14 +24,7 @@
 <p>
     <a href="https://app.plane.so/#gh-light-mode-only" target="_blank">
       <img
-        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_screen.webp"
-        alt="Plane Screens"
-        width="100%"
-      />
-    </a>
-    <a href="https://app.plane.so/#gh-dark-mode-only" target="_blank">
-      <img
-        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_screens_dark_mode.webp"
+        src="https://media.docs.plane.so/GitHub-readme/github-top.webp"
         alt="Plane Screens"
         width="100%"
       />
@@ -48,13 +40,13 @@ Meet [Plane](https://plane.so/), an open-source project management tool to track
 Getting started with Plane is simple. Choose the setup that works best for you:
 
 - **Plane Cloud**
-Sign up for a free account on [Plane Cloud](https://app.plane.so)—it's the fastest way to get up and running without worrying about infrastructure.
+  Sign up for a free account on [Plane Cloud](https://app.plane.so)—it's the fastest way to get up and running without worrying about infrastructure.
 
 - **Self-host Plane**
-Prefer full control over your data and infrastructure? Install and run Plane on your own servers. Follow our detailed [deployment guides](https://developers.plane.so/self-hosting/overview) to get started.
+  Prefer full control over your data and infrastructure? Install and run Plane on your own servers. Follow our detailed [deployment guides](https://developers.plane.so/self-hosting/overview) to get started.
 
-| Installation methods | Docs link                                                                                                                                          |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Installation methods | Docs link                                                                                                                                                                               |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://developers.plane.so/self-hosting/methods/docker-compose)         |
 | Kubernetes           | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://developers.plane.so/self-hosting/methods/kubernetes) |
 
@@ -62,59 +54,57 @@ Prefer full control over your data and infrastructure? Install and run Plane on
 
 ## 🌟 Features
 
-- **Issues**
-Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.
+- **Work Items**
+  Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.
 
 - **Cycles**
-Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.
+  Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.
 
 - **Modules**
-Simplify complex projects by dividing them into smaller, manageable modules.
+  Simplify complex projects by dividing them into smaller, manageable modules.
 
 - **Views**
-Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.
+  Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.
 
 - **Pages**
-Capture and organize ideas using Plane Pages, complete with AI capabilities and a rich text editor. Format text, insert images, add hyperlinks, or convert your notes into actionable items.
+  Capture and organize ideas using Plane Pages, complete with AI capabilities and a rich text editor. Format text, insert images, add hyperlinks, or convert your notes into actionable items.
 
 - **Analytics**
-Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.
-
-- **Drive** (_coming soon_): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.
-
+  Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.
 
 ## 🛠️ Local development
 
 See [CONTRIBUTING](./CONTRIBUTING.md)
 
 ## ⚙️ Built with
-[![Next JS](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
+
+[![React Router](https://img.shields.io/badge/-React%20Router-CA4245?logo=react-router&style=for-the-badge&logoColor=white)](https://reactrouter.com/)
 [![Django](https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=green)](https://www.djangoproject.com/)
 [![Node JS](https://img.shields.io/badge/node.js-339933?style=for-the-badge&logo=Node.js&logoColor=white)](https://nodejs.org/en)
 
 ## 📸 Screenshots
 
-<p>
+  <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/w2okwbtu2/Issues_rNZjrGgFl.png?updatedAt=1709298765880"
+        src="https://media.docs.plane.so/GitHub-readme/github-work-items.webp"
         alt="Plane Views"
         width="100%"
       />
     </a>
   </p>
-<p>
-    <a href="https://plane.so" target="_blank">
-      <img
-        src="https://ik.imagekit.io/w2okwbtu2/Cycles_jCDhqmTl9.png?updatedAt=1709298780697"
-        width="100%"
-      />
-    </a>
-  </p>
   <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/w2okwbtu2/Modules_PSCVsbSfI.png?updatedAt=1709298796783"
+        src="https://media.docs.plane.so/GitHub-readme/github-cycles.webp"
+        width="100%"
+      />
+    </a>
+  </p>
+  <p>
+    <a href="https://plane.so" target="_blank">
+      <img
+        src="https://media.docs.plane.so/GitHub-readme/github-modules.webp"
         alt="Plane Cycles and Modules"
         width="100%"
       />
@@ -123,7 +113,7 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
   <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/w2okwbtu2/Views_uxXsRatS4.png?updatedAt=1709298834522"
+        src="https://media.docs.plane.so/GitHub-readme/github-views.webp"
         alt="Plane Analytics"
         width="100%"
       />
@@ -132,25 +122,16 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
    <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/w2okwbtu2/Analytics_0o22gLRtp.png?updatedAt=1709298834389"
+        src="https://media.docs.plane.so/GitHub-readme/github-analytics.webp"
         alt="Plane Pages"
         width="100%"
       />
     </a>
   </p>
 </p>
-<p>
-    <a href="https://plane.so" target="_blank">
-      <img
-        src="https://ik.imagekit.io/w2okwbtu2/Drive_LlfeY4xn3.png?updatedAt=1709298837917"
-        alt="Plane Command Menu"
-        width="100%"
-      />
-    </a>
-  </p>
-</p>
 
 ## 📝 Documentation
+
 Explore Plane's [product documentation](https://docs.plane.so/) and [developer documentation](https://developers.plane.so/) to learn about features, setup, and usage.
 
 ## ❤️ Community
@@ -186,6 +167,6 @@ Please read [CONTRIBUTING.md](https://github.com/makeplane/plane/blob/master/CON
   <img src="https://contrib.rocks/image?repo=makeplane/plane" />
 </a>
 
-
 ## License
+
 This project is licensed under the [GNU Affero General Public License v3.0](https://github.com/makeplane/plane/blob/master/LICENSE.txt).

admin/.env.example

@@ -1,12 +0,0 @@
-NEXT_PUBLIC_API_BASE_URL="http://localhost:8000"
-
-NEXT_PUBLIC_WEB_BASE_URL="http://localhost:3000"
-
-NEXT_PUBLIC_ADMIN_BASE_URL="http://localhost:3001"
-NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-
-NEXT_PUBLIC_SPACE_BASE_URL="http://localhost:3002"
-NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
-
-NEXT_PUBLIC_LIVE_BASE_URL="http://localhost:3100"
-NEXT_PUBLIC_LIVE_BASE_PATH="/live"

admin/.eslintrc.js

@@ -1,5 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/next.js"],
-  parser: "@typescript-eslint/parser",
-};

admin/.prettierignore

@@ -1,6 +0,0 @@
-.next
-.vercel
-.tubro
-out/
-dis/
-build/

admin/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}

admin/Dockerfile.admin

@@ -1,88 +0,0 @@
-FROM node:20-alpine as base
-
-# *****************************************************************************
-# STAGE 1: Build the project
-# *****************************************************************************
-FROM base AS builder
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-
-RUN yarn global add turbo
-COPY . .
-
-RUN turbo prune --scope=admin --docker
-
-# *****************************************************************************
-# STAGE 2: Install dependencies & build the project
-# *****************************************************************************
-FROM base AS installer
-
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-
-COPY .gitignore .gitignore
-COPY --from=builder /app/out/json/ .
-COPY --from=builder /app/out/yarn.lock ./yarn.lock
-RUN yarn install --network-timeout 500000
-
-COPY --from=builder /app/out/full/ .
-COPY turbo.json turbo.json
-
-ARG NEXT_PUBLIC_API_BASE_URL=""
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-
-ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
-ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
-
-ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
-
-ARG NEXT_PUBLIC_SPACE_BASE_URL=""
-ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
-
-ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
-ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
-
-ARG NEXT_PUBLIC_WEB_BASE_URL=""
-ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
-
-ENV NEXT_TELEMETRY_DISABLED 1
-ENV TURBO_TELEMETRY_DISABLED 1
-
-RUN yarn turbo run build --filter=admin
-
-# *****************************************************************************
-# STAGE 3: Copy the project and start it
-# *****************************************************************************
-FROM base AS runner
-WORKDIR /app
-
-COPY --from=installer /app/admin/next.config.js .
-COPY --from=installer /app/admin/package.json .
-
-COPY --from=installer /app/admin/.next/standalone ./
-COPY --from=installer /app/admin/.next/static ./admin/.next/static
-COPY --from=installer /app/admin/public ./admin/public
-
-ARG NEXT_PUBLIC_API_BASE_URL=""
-ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
-
-ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
-ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
-
-ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
-
-ARG NEXT_PUBLIC_SPACE_BASE_URL=""
-ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
-
-ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
-ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
-
-ARG NEXT_PUBLIC_WEB_BASE_URL=""
-ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
-
-ENV NEXT_TELEMETRY_DISABLED 1
-ENV TURBO_TELEMETRY_DISABLED 1
-
-EXPOSE 3000

admin/Dockerfile.dev

@@ -1,17 +0,0 @@
-FROM node:20-alpine
-RUN apk add --no-cache libc6-compat
-# Set working directory
-WORKDIR /app
-
-COPY . .
-
-RUN yarn global add turbo
-RUN yarn install
-
-ENV NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
-
-EXPOSE 3000
-
-VOLUME [ "/app/node_modules", "/app/admin/node_modules" ]
-
-CMD ["yarn", "dev", "--filter=admin"]

admin/app/ai/form.tsx

@@ -1,134 +0,0 @@
-"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>
-  );
-};

admin/app/ai/layout.tsx

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

admin/app/ai/page.tsx

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

admin/app/authentication/github/form.tsx

@@ -1,227 +0,0 @@
-"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>
-    </>
-  );
-};

admin/app/authentication/github/page.tsx

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

admin/app/authentication/gitlab/form.tsx

@@ -1,212 +0,0 @@
-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>
-    </>
-  );
-};

admin/app/authentication/gitlab/page.tsx

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

admin/app/authentication/google/form.tsx

@@ -1,214 +0,0 @@
-"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>
-    </>
-  );
-};

admin/app/authentication/google/page.tsx

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

admin/app/authentication/layout.tsx

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

admin/app/authentication/page.tsx

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

admin/app/email/layout.tsx

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

admin/app/email/page.tsx

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

admin/app/error.tsx

@@ -1,9 +0,0 @@
-"use client";
-
-export default function RootErrorPage() {
-  return (
-    <div>
-      <p>Something went wrong.</p>
-    </div>
-  );
-}

admin/app/general/form.tsx

@@ -1,155 +0,0 @@
-"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>
-  );
-});

admin/app/general/intercom.tsx

@@ -1,82 +0,0 @@
-"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>
-    </>
-  );
-});

admin/app/general/layout.tsx

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

admin/app/general/page.tsx

@@ -1,31 +0,0 @@
-"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);

admin/app/image/form.tsx

@@ -1,80 +0,0 @@
-"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>
-  );
-};

admin/app/image/layout.tsx

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

admin/app/image/page.tsx

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

admin/app/layout.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-import { ThemeProvider, useTheme } from "next-themes";
-import { SWRConfig } from "swr";
-// plane imports
-import { ADMIN_BASE_PATH, DEFAULT_SWR_CONFIG } from "@plane/constants";
-import { Toast } from "@plane/ui";
-import { resolveGeneralTheme } from "@plane/utils";
-// lib
-import { InstanceProvider } from "@/lib/instance-provider";
-import { StoreProvider } from "@/lib/store-provider";
-import { UserProvider } from "@/lib/user-provider";
-// styles
-import "@/styles/globals.css";
-
-const ToastWithTheme = () => {
-  const { resolvedTheme } = useTheme();
-  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
-};
-
-export default function RootLayout({ children }: { children: ReactNode }) {
-  const ASSET_PREFIX = ADMIN_BASE_PATH;
-  return (
-    <html lang="en">
-      <head>
-        <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}/favicon/apple-touch-icon.png`} />
-        <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}/favicon/favicon-32x32.png`} />
-        <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}/favicon/favicon-16x16.png`} />
-        <link rel="manifest" href={`${ASSET_PREFIX}/site.webmanifest.json`} />
-        <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
-      </head>
-      <body className={`antialiased`}>
-        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
-          <ToastWithTheme />
-          <SWRConfig value={DEFAULT_SWR_CONFIG}>
-            <StoreProvider>
-              <InstanceProvider>
-                <UserProvider>{children}</UserProvider>
-              </InstanceProvider>
-            </StoreProvider>
-          </SWRConfig>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}

admin/app/page.tsx

@@ -1,30 +0,0 @@
-import { Metadata } from "next";
-// components
-import { InstanceSignInForm } from "@/components/login";
-// layouts
-import { DefaultLayout } from "@/layouts/default-layout";
-
-export const metadata: Metadata = {
-  title: "Plane | Simple, extensible, open-source project management tool.",
-  description:
-    "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
-  openGraph: {
-    title: "Plane | Simple, extensible, open-source project management tool.",
-    description:
-      "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
-    url: "https://plane.so/",
-  },
-  keywords:
-    "software development, customer feedback, software, accelerate, code management, release management, project management, work items tracking, agile, scrum, kanban, collaboration",
-  twitter: {
-    site: "@planepowers",
-  },
-};
-
-export default async function LoginPage() {
-  return (
-    <DefaultLayout>
-      <InstanceSignInForm />
-    </DefaultLayout>
-  );
-}

admin/app/workspace/create/form.tsx

@@ -1,210 +0,0 @@
-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>
-  );
-};

admin/app/workspace/create/page.tsx

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

admin/app/workspace/layout.tsx

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

admin/app/workspace/page.tsx

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

admin/ce/components/authentication/authentication-modes.tsx

@@ -1,70 +0,0 @@
-import { observer } from "mobx-react";
-import Image from "next/image";
-import { useTheme } from "next-themes";
-// types
-import {
-  TGetBaseAuthenticationModeProps,
-  TInstanceAuthenticationMethodKeys,
-  TInstanceAuthenticationModes,
-} from "@plane/types";
-// components
-import { AuthenticationMethodCard } from "@/components/authentication";
-// helpers
-import { getBaseAuthenticationModes } from "@/lib/auth-helpers";
-// plane admin components
-import { UpgradeButton } from "@/plane-admin/components/common";
-// images
-import OIDCLogo from "@/public/logos/oidc-logo.svg";
-import SAMLLogo from "@/public/logos/saml-logo.svg";
-
-export type TAuthenticationModeProps = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-// Authentication methods
-export const getAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
-  disabled,
-  updateConfig,
-  resolvedTheme,
-}) => [
-  ...getBaseAuthenticationModes({ disabled, updateConfig, resolvedTheme }),
-  {
-    key: "oidc",
-    name: "OIDC",
-    description: "Authenticate your users via the OpenID Connect protocol.",
-    icon: <Image src={OIDCLogo} height={22} width={22} alt="OIDC Logo" />,
-    config: <UpgradeButton />,
-    unavailable: true,
-  },
-  {
-    key: "saml",
-    name: "SAML",
-    description: "Authenticate your users via the Security Assertion Markup Language protocol.",
-    icon: <Image src={SAMLLogo} height={22} width={22} alt="SAML Logo" className="pl-0.5" />,
-    config: <UpgradeButton />,
-    unavailable: true,
-  },
-];
-
-export const AuthenticationModes: React.FC<TAuthenticationModeProps> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // next-themes
-  const { resolvedTheme } = useTheme();
-
-  return (
-    <>
-      {getAuthenticationModes({ disabled, updateConfig, resolvedTheme }).map((method) => (
-        <AuthenticationMethodCard
-          key={method.key}
-          name={method.name}
-          description={method.description}
-          icon={method.icon}
-          config={method.config}
-          disabled={disabled}
-          unavailable={method.unavailable}
-        />
-      ))}
-    </>
-  );
-});

admin/ce/components/authentication/index.ts

@@ -1 +0,0 @@
-export * from "./authentication-modes";

admin/ce/components/common/index.ts

@@ -1 +0,0 @@
-export * from "./upgrade-button";

admin/ce/components/common/upgrade-button.tsx

@@ -1,15 +0,0 @@
-"use client";
-
-import React from "react";
-// icons
-import { SquareArrowOutUpRight } from "lucide-react";
-// plane internal packages
-import { getButtonStyling } from "@plane/ui";
-import { cn } from "@plane/utils";
-
-export const UpgradeButton: React.FC = () => (
-  <a href="https://plane.so/pricing?mode=self-hosted" target="_blank" className={cn(getButtonStyling("primary", "sm"))}>
-    Upgrade
-    <SquareArrowOutUpRight className="h-3.5 w-3.5 p-0.5" />
-  </a>
-);

admin/core/components/admin-sidebar/help-section.tsx

@@ -1,139 +0,0 @@
-"use client";
-
-import { FC, useState, useRef } from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
-import { Transition } from "@headlessui/react";
-// plane internal packages
-import { WEB_BASE_URL } from "@plane/constants";
-import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
-import { cn } from "@plane/utils";
-// hooks
-import { useTheme } from "@/hooks/store";
-// assets
-// eslint-disable-next-line import/order
-import packageJson from "package.json";
-
-const helpOptions = [
-  {
-    name: "Documentation",
-    href: "https://docs.plane.so/",
-    Icon: FileText,
-  },
-  {
-    name: "Join our Discord",
-    href: "https://discord.com/invite/A92xrEGCge",
-    Icon: DiscordIcon,
-  },
-  {
-    name: "Report a bug",
-    href: "https://github.com/makeplane/plane/issues/new/choose",
-    Icon: GithubIcon,
-  },
-];
-
-export const HelpSection: FC = observer(() => {
-  // states
-  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
-  // store
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
-  // refs
-  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
-
-  const redirectionLink = encodeURI(WEB_BASE_URL + "/");
-
-  return (
-    <div
-      className={cn(
-        "flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
-        {
-          "flex-col h-auto py-1.5": isSidebarCollapsed,
-        }
-      )}
-    >
-      <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
-        <Tooltip tooltipContent="Redirect to Plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
-          <a
-            href={redirectionLink}
-            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
-          >
-            <ExternalLink size={14} />
-            {!isSidebarCollapsed && "Redirect to Plane"}
-          </a>
-        </Tooltip>
-        <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
-          <button
-            type="button"
-            className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-              isSidebarCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
-          >
-            <HelpCircle className="h-3.5 w-3.5" />
-          </button>
-        </Tooltip>
-        <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
-          <button
-            type="button"
-            className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-              isSidebarCollapsed ? "w-full" : ""
-            }`}
-            onClick={() => toggleSidebar(!isSidebarCollapsed)}
-          >
-            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
-          </button>
-        </Tooltip>
-      </div>
-
-      <div className="relative">
-        <Transition
-          show={isNeedHelpOpen}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <div
-            className={`absolute bottom-2 min-w-[10rem] z-[15] ${
-              isSidebarCollapsed ? "left-full" : "-left-[75px]"
-            } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
-            ref={helpOptionsRef}
-          >
-            <div className="space-y-1 pb-2">
-              {helpOptions.map(({ name, Icon, href }) => {
-                if (href)
-                  return (
-                    <Link href={href} key={name} target="_blank">
-                      <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
-                        <div className="grid flex-shrink-0 place-items-center">
-                          <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
-                        </div>
-                        <span className="text-xs">{name}</span>
-                      </div>
-                    </Link>
-                  );
-                else
-                  return (
-                    <button
-                      key={name}
-                      type="button"
-                      className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
-                    >
-                      <div className="grid flex-shrink-0 place-items-center">
-                        <Icon className="h-3.5 w-3.5 text-custom-text-200" />
-                      </div>
-                      <span className="text-xs">{name}</span>
-                    </button>
-                  );
-              })}
-            </div>
-            <div className="px-2 pb-1 pt-2 text-[10px]">Version: v{packageJson.version}</div>
-          </div>
-        </Transition>
-      </div>
-    </div>
-  );
-});

admin/core/components/admin-sidebar/index.ts

@@ -1,5 +0,0 @@
-export * from "./root";
-export * from "./help-section";
-export * from "./sidebar-menu";
-export * from "./sidebar-dropdown";
-export * from "./sidebar-menu-hamburger-toogle";

admin/core/components/admin-sidebar/root.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { FC, useEffect, useRef } from "react";
-import { observer } from "mobx-react";
-// plane helpers
-import { useOutsideClickDetector } from "@plane/hooks";
-// components
-import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
-// hooks
-import { useTheme } from "@/hooks/store";
-
-export const InstanceSidebar: FC = observer(() => {
-  // store
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  useOutsideClickDetector(ref, () => {
-    if (isSidebarCollapsed === false) {
-      if (window.innerWidth < 768) {
-        toggleSidebar(!isSidebarCollapsed);
-      }
-    }
-  });
-
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth <= 768) {
-        toggleSidebar(true);
-      }
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [toggleSidebar]);
-
-  return (
-    <div
-      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
-        fixed md:relative
-        ${isSidebarCollapsed ? "-ml-[290px]" : ""}
-        sm:${isSidebarCollapsed ? "-ml-[290px]" : ""}
-        md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
-        lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
-      `}
-    >
-      <div ref={ref} className="flex h-full w-full flex-1 flex-col">
-        <SidebarDropdown />
-        <SidebarMenu />
-        <HelpSection />
-      </div>
-    </div>
-  );
-});

admin/core/components/admin-sidebar/sidebar-menu-hamburger-toogle.tsx

@@ -1,20 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import { observer } from "mobx-react";
-// hooks
-import { Menu } from "lucide-react";
-import { useTheme } from "@/hooks/store";
-// icons
-
-export const SidebarHamburgerToggle: FC = observer(() => {
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
-  return (
-    <div
-      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
-      onClick={() => toggleSidebar(!isSidebarCollapsed)}
-    >
-      <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
-    </div>
-  );
-});

admin/core/components/admin-sidebar/sidebar-menu.tsx

@@ -1,110 +0,0 @@
-"use client";
-
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
-// plane internal packages
-import { Tooltip, WorkspaceIcon } from "@plane/ui";
-import { cn } from "@plane/utils";
-// hooks
-import { useTheme } from "@/hooks/store";
-
-const INSTANCE_ADMIN_LINKS = [
-  {
-    Icon: Cog,
-    name: "General",
-    description: "Identify your instances and get key details.",
-    href: `/general/`,
-  },
-  {
-    Icon: WorkspaceIcon,
-    name: "Workspaces",
-    description: "Manage all workspaces on this instance.",
-    href: `/workspace/`,
-  },
-  {
-    Icon: Mail,
-    name: "Email",
-    description: "Configure your SMTP controls.",
-    href: `/email/`,
-  },
-  {
-    Icon: Lock,
-    name: "Authentication",
-    description: "Configure authentication modes.",
-    href: `/authentication/`,
-  },
-  {
-    Icon: BrainCog,
-    name: "Artificial intelligence",
-    description: "Configure your OpenAI creds.",
-    href: `/ai/`,
-  },
-  {
-    Icon: Image,
-    name: "Images in Plane",
-    description: "Allow third-party image libraries.",
-    href: `/image/`,
-  },
-];
-
-export const SidebarMenu = observer(() => {
-  // store hooks
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
-  // router
-  const pathName = usePathname();
-
-  const handleItemClick = () => {
-    if (window.innerWidth < 768) {
-      toggleSidebar(!isSidebarCollapsed);
-    }
-  };
-
-  return (
-    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 py-4">
-      {INSTANCE_ADMIN_LINKS.map((item, index) => {
-        const isActive = item.href === pathName || pathName.includes(item.href);
-        return (
-          <Link key={index} href={item.href} onClick={handleItemClick}>
-            <div>
-              <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
-                <div
-                  className={cn(
-                    `group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors`,
-                    isActive
-                      ? "bg-custom-primary-100/10 text-custom-primary-100"
-                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80",
-                    isSidebarCollapsed ? "justify-center" : "w-[260px]"
-                  )}
-                >
-                  {<item.Icon className="h-4 w-4 flex-shrink-0" />}
-                  {!isSidebarCollapsed && (
-                    <div className="w-full ">
-                      <div
-                        className={cn(
-                          `text-sm font-medium transition-colors`,
-                          isActive ? "text-custom-primary-100" : "text-custom-sidebar-text-200"
-                        )}
-                      >
-                        {item.name}
-                      </div>
-                      <div
-                        className={cn(
-                          `text-[10px] transition-colors`,
-                          isActive ? "text-custom-primary-90" : "text-custom-sidebar-text-400"
-                        )}
-                      >
-                        {item.description}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </Tooltip>
-            </div>
-          </Link>
-        );
-      })}
-    </div>
-  );
-});

admin/core/components/auth-header.tsx

@@ -1,96 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
-// mobx
-// ui
-import { Settings } from "lucide-react";
-// icons
-import { Breadcrumbs } from "@plane/ui";
-// components
-import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
-import { BreadcrumbLink } from "@/components/common";
-
-export const InstanceHeader: FC = observer(() => {
-  const pathName = usePathname();
-
-  const getHeaderTitle = (pathName: string) => {
-    switch (pathName) {
-      case "general":
-        return "General";
-      case "ai":
-        return "Artificial Intelligence";
-      case "email":
-        return "Email";
-      case "authentication":
-        return "Authentication";
-      case "image":
-        return "Image";
-      case "google":
-        return "Google";
-      case "github":
-        return "GitHub";
-      case "gitlab":
-        return "GitLab";
-      case "workspace":
-        return "Workspace";
-      case "create":
-        return "Create";
-      default:
-        return pathName.toUpperCase();
-    }
-  };
-
-  // Function to dynamically generate breadcrumb items based on pathname
-  const generateBreadcrumbItems = (pathname: string) => {
-    const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
-    pathSegments.pop();
-
-    let currentUrl = "";
-    const breadcrumbItems = pathSegments.map((segment) => {
-      currentUrl += "/" + segment;
-      return {
-        title: getHeaderTitle(segment),
-        href: currentUrl,
-      };
-    });
-    return breadcrumbItems;
-  };
-
-  const breadcrumbItems = generateBreadcrumbItems(pathName);
-
-  return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <SidebarHamburgerToggle />
-        {breadcrumbItems.length >= 0 && (
-          <div>
-            <Breadcrumbs>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <BreadcrumbLink
-                    href="/general/"
-                    label="Settings"
-                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-                  />
-                }
-              />
-              {breadcrumbItems.map(
-                (item) =>
-                  item.title && (
-                    <Breadcrumbs.BreadcrumbItem
-                      key={item.title}
-                      type="text"
-                      link={<BreadcrumbLink href={item.href} label={item.title} />}
-                    />
-                  )
-              )}
-            </Breadcrumbs>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});

admin/core/components/authentication/auth-banner.tsx

@@ -1,29 +0,0 @@
-import { FC } from "react";
-import { Info, X } from "lucide-react";
-// plane constants
-import { TAuthErrorInfo } from "@plane/constants";
-
-type TAuthBanner = {
-  bannerData: TAuthErrorInfo | undefined;
-  handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
-};
-
-export const AuthBanner: FC<TAuthBanner> = (props) => {
-  const { bannerData, handleBannerData } = props;
-
-  if (!bannerData) return <></>;
-  return (
-    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
-      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
-        <Info size={16} className="text-custom-primary-100" />
-      </div>
-      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
-      <div
-        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
-        onClick={() => handleBannerData && handleBannerData(undefined)}
-      >
-        <X className="w-4 h-4 flex-shrink-0" />
-      </div>
-    </div>
-  );
-};

admin/core/components/authentication/authentication-method-card.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { FC } from "react";
-// helpers
-import { cn } from "@plane/utils";
-
-type Props = {
-  name: string;
-  description: string;
-  icon: JSX.Element;
-  config: JSX.Element;
-  disabled?: boolean;
-  withBorder?: boolean;
-  unavailable?: boolean;
-};
-
-export const AuthenticationMethodCard: FC<Props> = (props) => {
-  const { name, description, icon, config, disabled = false, withBorder = true, unavailable = false } = props;
-
-  return (
-    <div
-      className={cn("w-full flex items-center gap-14 rounded", {
-        "px-4 py-3 border border-custom-border-200": withBorder,
-      })}
-    >
-      <div
-        className={cn("flex grow items-center gap-4", {
-          "opacity-50": unavailable,
-        })}
-      >
-        <div className="shrink-0">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-custom-background-80">{icon}</div>
-        </div>
-        <div className="grow">
-          <div
-            className={cn("font-medium leading-5 text-custom-text-100", {
-              "text-sm": withBorder,
-              "text-xl": !withBorder,
-            })}
-          >
-            {name}
-          </div>
-          <div
-            className={cn("font-normal leading-5 text-custom-text-300", {
-              "text-xs": withBorder,
-              "text-sm": !withBorder,
-            })}
-          >
-            {description}
-          </div>
-        </div>
-      </div>
-      <div className={`shrink-0 ${disabled && "opacity-70"}`}>{config}</div>
-    </div>
-  );
-};

admin/core/components/authentication/email-config-switch.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-// hooks
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
-import { useInstance } from "@/hooks/store";
-// ui
-// types
-
-type Props = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-export const EmailCodesConfiguration: React.FC<Props> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // store
-  const { formattedConfig } = useInstance();
-  // derived values
-  const enableMagicLogin = formattedConfig?.ENABLE_MAGIC_LINK_LOGIN ?? "";
-
-  return (
-    <ToggleSwitch
-      value={Boolean(parseInt(enableMagicLogin))}
-      onChange={() => {
-        Boolean(parseInt(enableMagicLogin)) === true
-          ? updateConfig("ENABLE_MAGIC_LINK_LOGIN", "0")
-          : updateConfig("ENABLE_MAGIC_LINK_LOGIN", "1");
-      }}
-      size="sm"
-      disabled={disabled}
-    />
-  );
-});

admin/core/components/authentication/github-config.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-// icons
-import { Settings2 } from "lucide-react";
-// plane internal packages
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-import { cn } from "@plane/utils";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-export const GithubConfiguration: React.FC<Props> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // store
-  const { formattedConfig } = useInstance();
-  // derived values
-  const enableGithubConfig = formattedConfig?.IS_GITHUB_ENABLED ?? "";
-  const isGithubConfigured = !!formattedConfig?.GITHUB_CLIENT_ID && !!formattedConfig?.GITHUB_CLIENT_SECRET;
-
-  return (
-    <>
-      {isGithubConfigured ? (
-        <div className="flex items-center gap-4">
-          <Link href="/authentication/github" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
-            Edit
-          </Link>
-          <ToggleSwitch
-            value={Boolean(parseInt(enableGithubConfig))}
-            onChange={() => {
-              Boolean(parseInt(enableGithubConfig)) === true
-                ? updateConfig("IS_GITHUB_ENABLED", "0")
-                : updateConfig("IS_GITHUB_ENABLED", "1");
-            }}
-            size="sm"
-            disabled={disabled}
-          />
-        </div>
-      ) : (
-        <Link
-          href="/authentication/github"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
-          Configure
-        </Link>
-      )}
-    </>
-  );
-});

admin/core/components/authentication/gitlab-config.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-// icons
-import { Settings2 } from "lucide-react";
-// plane internal packages
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-import { cn } from "@plane/utils";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-export const GitlabConfiguration: React.FC<Props> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // store
-  const { formattedConfig } = useInstance();
-  // derived values
-  const enableGitlabConfig = formattedConfig?.IS_GITLAB_ENABLED ?? "";
-  const isGitlabConfigured = !!formattedConfig?.GITLAB_CLIENT_ID && !!formattedConfig?.GITLAB_CLIENT_SECRET;
-
-  return (
-    <>
-      {isGitlabConfigured ? (
-        <div className="flex items-center gap-4">
-          <Link href="/authentication/gitlab" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
-            Edit
-          </Link>
-          <ToggleSwitch
-            value={Boolean(parseInt(enableGitlabConfig))}
-            onChange={() => {
-              Boolean(parseInt(enableGitlabConfig)) === true
-                ? updateConfig("IS_GITLAB_ENABLED", "0")
-                : updateConfig("IS_GITLAB_ENABLED", "1");
-            }}
-            size="sm"
-            disabled={disabled}
-          />
-        </div>
-      ) : (
-        <Link
-          href="/authentication/gitlab"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
-          Configure
-        </Link>
-      )}
-    </>
-  );
-});

admin/core/components/authentication/google-config.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-// icons
-import { Settings2 } from "lucide-react";
-// plane internal packages
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-import { cn } from "@plane/utils";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-export const GoogleConfiguration: React.FC<Props> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // store
-  const { formattedConfig } = useInstance();
-  // derived values
-  const enableGoogleConfig = formattedConfig?.IS_GOOGLE_ENABLED ?? "";
-  const isGoogleConfigured = !!formattedConfig?.GOOGLE_CLIENT_ID && !!formattedConfig?.GOOGLE_CLIENT_SECRET;
-
-  return (
-    <>
-      {isGoogleConfigured ? (
-        <div className="flex items-center gap-4">
-          <Link href="/authentication/google" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
-            Edit
-          </Link>
-          <ToggleSwitch
-            value={Boolean(parseInt(enableGoogleConfig))}
-            onChange={() => {
-              Boolean(parseInt(enableGoogleConfig)) === true
-                ? updateConfig("IS_GOOGLE_ENABLED", "0")
-                : updateConfig("IS_GOOGLE_ENABLED", "1");
-            }}
-            size="sm"
-            disabled={disabled}
-          />
-        </div>
-      ) : (
-        <Link
-          href="/authentication/google"
-          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
-        >
-          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
-          Configure
-        </Link>
-      )}
-    </>
-  );
-});

admin/core/components/authentication/index.ts

@@ -1,7 +0,0 @@
-export * from "./auth-banner";
-export * from "./email-config-switch";
-export * from "./password-config-switch";
-export * from "./authentication-method-card";
-export * from "./gitlab-config";
-export * from "./github-config";
-export * from "./google-config";

admin/core/components/authentication/password-config-switch.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-// hooks
-import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
-import { useInstance } from "@/hooks/store";
-// ui
-// types
-
-type Props = {
-  disabled: boolean;
-  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
-};
-
-export const PasswordLoginConfiguration: React.FC<Props> = observer((props) => {
-  const { disabled, updateConfig } = props;
-  // store
-  const { formattedConfig } = useInstance();
-  // derived values
-  const enableEmailPassword = formattedConfig?.ENABLE_EMAIL_PASSWORD ?? "";
-
-  return (
-    <ToggleSwitch
-      value={Boolean(parseInt(enableEmailPassword))}
-      onChange={() => {
-        Boolean(parseInt(enableEmailPassword)) === true
-          ? updateConfig("ENABLE_EMAIL_PASSWORD", "0")
-          : updateConfig("ENABLE_EMAIL_PASSWORD", "1");
-      }}
-      size="sm"
-      disabled={disabled}
-    />
-  );
-});

admin/core/components/common/banner.tsx

@@ -1,32 +0,0 @@
-import { FC } from "react";
-import { AlertCircle, CheckCircle2 } from "lucide-react";
-
-type TBanner = {
-  type: "success" | "error";
-  message: string;
-};
-
-export const Banner: FC<TBanner> = (props) => {
-  const { type, message } = props;
-
-  return (
-    <div
-      className={`rounded-md p-2 w-full border ${type === "error" ? "bg-red-500/5 border-red-400" : "bg-green-500/5 border-green-400"}`}
-    >
-      <div className="flex items-center justify-center">
-        <div className="flex-shrink-0">
-          {type === "error" ? (
-            <span className="flex items-center justify-center h-6 w-6 rounded-full">
-              <AlertCircle className="h-5 w-5 text-red-600" aria-hidden="true" />
-            </span>
-          ) : (
-            <CheckCircle2 className="h-5 w-5 text-green-600" aria-hidden="true" />
-          )}
-        </div>
-        <div className="ml-1">
-          <p className={`text-sm font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p>
-        </div>
-      </div>
-    </div>
-  );
-};

admin/core/components/common/breadcrumb-link.tsx

@@ -1,38 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { Tooltip } from "@plane/ui";
-
-type Props = {
-  label?: string;
-  href?: string;
-  icon?: React.ReactNode | undefined;
-};
-
-export const BreadcrumbLink: React.FC<Props> = (props) => {
-  const { href, label, icon } = props;
-  return (
-    <Tooltip tooltipContent={label} position="bottom">
-      <li className="flex items-center space-x-2" tabIndex={-1}>
-        <div className="flex flex-wrap items-center gap-2.5">
-          {href ? (
-            <Link
-              className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
-              href={href}
-            >
-              {icon && (
-                <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
-              )}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-            </Link>
-          ) : (
-            <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
-              {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-            </div>
-          )}
-        </div>
-      </li>
-    </Tooltip>
-  );
-};

admin/core/components/common/code-block.tsx

@@ -1,21 +0,0 @@
-import { cn } from "@plane/utils";
-
-type TProps = {
-  children: React.ReactNode;
-  className?: string;
-  darkerShade?: boolean;
-};
-
-export const CodeBlock = ({ children, className, darkerShade }: TProps) => (
-  <span
-    className={cn(
-      "px-0.5 text-xs text-custom-text-300 bg-custom-background-90 font-semibold rounded-md border border-custom-border-100",
-      {
-        "text-custom-text-200 bg-custom-background-80 border-custom-border-200": darkerShade,
-      },
-      className
-    )}
-  >
-    {children}
-  </span>
-);

admin/core/components/common/copy-field.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import React from "react";
-// ui
-import { Copy } from "lucide-react";
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-// icons
-
-type Props = {
-  label: string;
-  url: string;
-  description: string | JSX.Element;
-};
-
-export type TCopyField = {
-  key: string;
-  label: string;
-  url: string;
-  description: string | JSX.Element;
-};
-
-export const CopyField: React.FC<Props> = (props) => {
-  const { label, url, description } = props;
-
-  return (
-    <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-200">{label}</h4>
-      <Button
-        variant="neutral-primary"
-        className="flex items-center justify-between py-2"
-        onClick={() => {
-          navigator.clipboard.writeText(url);
-          setToast({
-            type: TOAST_TYPE.INFO,
-            title: "Copied to clipboard",
-            message: `The ${label} has been successfully copied to your clipboard`,
-          });
-        }}
-      >
-        <p className="text-sm font-medium">{url}</p>
-        <Copy size={18} color="#B9B9B9" />
-      </Button>
-      <div className="text-xs text-custom-text-300">{description}</div>
-    </div>
-  );
-};

admin/core/components/common/empty-state.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import React from "react";
-import Image from "next/image";
-import { Button } from "@plane/ui";
-
-type Props = {
-  title: string;
-  description?: React.ReactNode;
-  image?: any;
-  primaryButton?: {
-    icon?: any;
-    text: string;
-    onClick: () => void;
-  };
-  secondaryButton?: React.ReactNode;
-  disabled?: boolean;
-};
-
-export const EmptyState: React.FC<Props> = ({
-  title,
-  description,
-  image,
-  primaryButton,
-  secondaryButton,
-  disabled = false,
-}) => (
-  <div className={`flex h-full w-full items-center justify-center`}>
-    <div className="flex w-full flex-col items-center text-center">
-      {image && <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
-      <h6 className="mb-3 mt-6 text-xl font-semibold sm:mt-8">{title}</h6>
-      {description && <p className="mb-7 px-5 text-custom-text-300 sm:mb-8">{description}</p>}
-      <div className="flex items-center gap-4">
-        {primaryButton && (
-          <Button
-            variant="primary"
-            prependIcon={primaryButton.icon}
-            onClick={primaryButton.onClick}
-            disabled={disabled}
-          >
-            {primaryButton.text}
-          </Button>
-        )}
-        {secondaryButton}
-      </div>
-    </div>
-  </div>
-);

admin/core/components/common/index.ts

@@ -1,10 +0,0 @@
-export * from "./breadcrumb-link";
-export * from "./confirm-discard-modal";
-export * from "./controller-input";
-export * from "./copy-field";
-export * from "./password-strength-meter";
-export * from "./banner";
-export * from "./empty-state";
-export * from "./logo-spinner";
-export * from "./page-header";
-export * from "./code-block";

admin/core/components/common/logo-spinner.tsx

@@ -1,17 +0,0 @@
-import Image from "next/image";
-import { useTheme } from "next-themes";
-// assets
-import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
-import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
-
-export const LogoSpinner = () => {
-  const { resolvedTheme } = useTheme();
-
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
-
-  return (
-    <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
-    </div>
-  );
-};

admin/core/components/common/password-strength-meter.tsx

@@ -1,89 +0,0 @@
-"use client";
-
-import { FC, useMemo } from "react";
-// plane internal packages
-import { E_PASSWORD_STRENGTH } from "@plane/constants";
-import { cn, getPasswordStrength } from "@plane/utils";
-
-type TPasswordStrengthMeter = {
-  password: string;
-  isFocused?: boolean;
-};
-
-export const PasswordStrengthMeter: FC<TPasswordStrengthMeter> = (props) => {
-  const { password, isFocused = false } = props;
-  // derived values
-  const strength = useMemo(() => getPasswordStrength(password), [password]);
-  const strengthBars = useMemo(() => {
-    switch (strength) {
-      case E_PASSWORD_STRENGTH.EMPTY: {
-        return {
-          bars: [`bg-custom-text-100`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Please enter your password.",
-          textColor: "text-custom-text-100",
-        };
-      }
-      case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID: {
-        return {
-          bars: [`bg-red-500`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Password length should me more than 8 characters.",
-          textColor: "text-red-500",
-        };
-      }
-      case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID: {
-        return {
-          bars: [`bg-red-500`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Password is weak.",
-          textColor: "text-red-500",
-        };
-      }
-      case E_PASSWORD_STRENGTH.STRENGTH_VALID: {
-        return {
-          bars: [`bg-green-500`, `bg-green-500`, `bg-green-500`],
-          text: "Password is strong.",
-          textColor: "text-green-500",
-        };
-      }
-      default: {
-        return {
-          bars: [`bg-custom-text-100`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Please enter your password.",
-          textColor: "text-custom-text-100",
-        };
-      }
-    }
-  }, [strength]);
-
-  const isPasswordMeterVisible = isFocused ? true : strength === E_PASSWORD_STRENGTH.STRENGTH_VALID ? false : true;
-
-  if (!isPasswordMeterVisible) return <></>;
-  return (
-    <div className="w-full space-y-2 pt-2">
-      <div className="space-y-1.5">
-        <div className="relative flex items-center gap-2">
-          {strengthBars?.bars.map((color, index) => (
-            <div key={`${color}-${index}`} className={cn("w-full h-1 rounded-full", color)} />
-          ))}
-        </div>
-        <div className={cn(`text-xs font-medium text-custom-text-100`, strengthBars?.textColor)}>
-          {strengthBars?.text}
-        </div>
-      </div>
-
-      {/* <div className="relative flex flex-wrap gap-x-4 gap-y-2">
-        {PASSWORD_CRITERIA.map((criteria) => (
-          <div
-            key={criteria.key}
-            className={cn(
-              "relative flex items-center gap-1 text-xs",
-              criteria.isCriteriaValid(password) ? `text-green-500/70` : "text-custom-text-300"
-            )}
-          >
-            <CircleCheck width={14} height={14} />
-            {criteria.label}
-          </div>
-        ))}
-      </div> */}
-    </div>
-  );
-};

admin/core/components/instance/index.ts

@@ -1,3 +0,0 @@
-export * from "./instance-not-ready";
-export * from "./instance-failure-view";
-export * from "./setup-form";

admin/core/components/instance/instance-failure-view.tsx

@@ -1,38 +0,0 @@
-"use client";
-import { FC } from "react";
-import Image from "next/image";
-import { useTheme } from "next-themes";
-import { Button } from "@plane/ui";
-// assets
-import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
-import InstanceFailureImage from "@/public/instance/instance-failure.svg";
-
-export const InstanceFailureView: FC = () => {
-  const { resolvedTheme } = useTheme();
-
-  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
-
-  const handleRetry = () => {
-    window.location.reload();
-  };
-
-  return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
-          <Image src={instanceImage} alt="Plane Logo" />
-          <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
-          <p className="font-medium text-base text-center">
-            We were unable to fetch the details of the instance. <br />
-            Fret not, it might just be a connectivity issue.
-          </p>
-        </div>
-        <div className="flex justify-center">
-          <Button size="md" onClick={handleRetry}>
-            Retry
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};

admin/core/components/instance/instance-not-ready.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import { FC } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { Button } from "@plane/ui";
-// assets
-import PlaneTakeOffImage from "@/public/images/plane-takeoff.png";
-
-export const InstanceNotReady: FC = () => (
-  <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-    <div className="w-auto max-w-2xl relative space-y-8 py-10">
-      <div className="relative flex flex-col justify-center items-center space-y-4">
-        <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
-        <Image src={PlaneTakeOffImage} alt="Plane Logo" />
-        <p className="font-medium text-base text-onboarding-text-400">
-          Get started by setting up your instance and workspace
-        </p>
-      </div>
-
-      <div>
-        <Link href={"/setup/?auth_enabled=0"}>
-          <Button size="lg" className="w-full">
-            Get started
-          </Button>
-        </Link>
-      </div>
-    </div>
-  </div>
-);

admin/core/components/instance/setup-form.tsx

@@ -1,357 +0,0 @@
-"use client";
-
-import { FC, useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "next/navigation";
-// icons
-import { Eye, EyeOff } from "lucide-react";
-// plane internal packages
-import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
-import { AuthService } from "@plane/services";
-import { Button, Checkbox, Input, Spinner } from "@plane/ui";
-import { getPasswordStrength } from "@plane/utils";
-// components
-import { Banner, PasswordStrengthMeter } from "@/components/common";
-
-// service initialization
-const authService = new AuthService();
-
-// error codes
-enum EErrorCodes {
-  INSTANCE_NOT_CONFIGURED = "INSTANCE_NOT_CONFIGURED",
-  ADMIN_ALREADY_EXIST = "ADMIN_ALREADY_EXIST",
-  REQUIRED_EMAIL_PASSWORD_FIRST_NAME = "REQUIRED_EMAIL_PASSWORD_FIRST_NAME",
-  INVALID_EMAIL = "INVALID_EMAIL",
-  INVALID_PASSWORD = "INVALID_PASSWORD",
-  USER_ALREADY_EXISTS = "USER_ALREADY_EXISTS",
-}
-
-type TError = {
-  type: EErrorCodes | undefined;
-  message: string | undefined;
-};
-
-// form data
-type TFormData = {
-  first_name: string;
-  last_name: string;
-  email: string;
-  company_name: string;
-  password: string;
-  confirm_password?: string;
-  is_telemetry_enabled: boolean;
-};
-
-const defaultFromData: TFormData = {
-  first_name: "",
-  last_name: "",
-  email: "",
-  company_name: "",
-  password: "",
-  is_telemetry_enabled: true,
-};
-
-export const InstanceSetupForm: FC = (props) => {
-  const {} = props;
-  // search params
-  const searchParams = useSearchParams();
-  const firstNameParam = searchParams.get("first_name") || undefined;
-  const lastNameParam = searchParams.get("last_name") || undefined;
-  const companyParam = searchParams.get("company") || undefined;
-  const emailParam = searchParams.get("email") || undefined;
-  const isTelemetryEnabledParam = (searchParams.get("is_telemetry_enabled") === "True" ? true : false) || true;
-  const errorCode = searchParams.get("error_code") || undefined;
-  const errorMessage = searchParams.get("error_message") || undefined;
-  // state
-  const [showPassword, setShowPassword] = useState({
-    password: false,
-    retypePassword: false,
-  });
-  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
-  const [formData, setFormData] = useState<TFormData>(defaultFromData);
-  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
-
-  const handleShowPassword = (key: keyof typeof showPassword) =>
-    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
-
-  const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
-    setFormData((prev) => ({ ...prev, [key]: value }));
-
-  useEffect(() => {
-    if (csrfToken === undefined)
-      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
-  }, [csrfToken]);
-
-  useEffect(() => {
-    if (firstNameParam) setFormData((prev) => ({ ...prev, first_name: firstNameParam }));
-    if (lastNameParam) setFormData((prev) => ({ ...prev, last_name: lastNameParam }));
-    if (companyParam) setFormData((prev) => ({ ...prev, company_name: companyParam }));
-    if (emailParam) setFormData((prev) => ({ ...prev, email: emailParam }));
-    if (isTelemetryEnabledParam) setFormData((prev) => ({ ...prev, is_telemetry_enabled: isTelemetryEnabledParam }));
-  }, [firstNameParam, lastNameParam, companyParam, emailParam, isTelemetryEnabledParam]);
-
-  // derived values
-  const errorData: TError = useMemo(() => {
-    if (errorCode && errorMessage) {
-      switch (errorCode) {
-        case EErrorCodes.INSTANCE_NOT_CONFIGURED:
-          return { type: EErrorCodes.INSTANCE_NOT_CONFIGURED, message: errorMessage };
-        case EErrorCodes.ADMIN_ALREADY_EXIST:
-          return { type: EErrorCodes.ADMIN_ALREADY_EXIST, message: errorMessage };
-        case EErrorCodes.REQUIRED_EMAIL_PASSWORD_FIRST_NAME:
-          return { type: EErrorCodes.REQUIRED_EMAIL_PASSWORD_FIRST_NAME, message: errorMessage };
-        case EErrorCodes.INVALID_EMAIL:
-          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
-        case EErrorCodes.INVALID_PASSWORD:
-          return { type: EErrorCodes.INVALID_PASSWORD, message: errorMessage };
-        case EErrorCodes.USER_ALREADY_EXISTS:
-          return { type: EErrorCodes.USER_ALREADY_EXISTS, message: errorMessage };
-        default:
-          return { type: undefined, message: undefined };
-      }
-    } else return { type: undefined, message: undefined };
-  }, [errorCode, errorMessage]);
-
-  const isButtonDisabled = useMemo(
-    () =>
-      !isSubmitting &&
-      formData.first_name &&
-      formData.email &&
-      formData.password &&
-      getPasswordStrength(formData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID &&
-      formData.password === formData.confirm_password
-        ? false
-        : true,
-    [formData.confirm_password, formData.email, formData.first_name, formData.password, isSubmitting]
-  );
-
-  const password = formData?.password ?? "";
-  const confirmPassword = formData?.confirm_password ?? "";
-  const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
-
-  return (
-    <div className="max-w-lg lg:max-w-md w-full">
-      <div className="relative flex flex-col space-y-6">
-        <div className="text-center space-y-1">
-          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-            Setup your Plane Instance
-          </h3>
-          <p className="font-medium text-onboarding-text-400">
-            Post setup you will be able to manage this Plane instance.
-          </p>
-        </div>
-
-        {errorData.type &&
-          errorData?.message &&
-          ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
-            <Banner type="error" message={errorData?.message} />
-          )}
-
-        <form
-          className="space-y-4"
-          method="POST"
-          action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
-          onSubmit={() => setIsSubmitting(true)}
-          onError={() => setIsSubmitting(false)}
-        >
-          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-          <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
-
-          <div className="flex flex-col sm:flex-row items-center gap-4">
-            <div className="w-full space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
-                First name <span className="text-red-500">*</span>
-              </label>
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="first_name"
-                name="first_name"
-                type="text"
-                inputSize="md"
-                placeholder="Wilber"
-                value={formData.first_name}
-                onChange={(e) => handleFormChange("first_name", e.target.value)}
-                autoComplete="on"
-                autoFocus
-              />
-            </div>
-            <div className="w-full space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
-                Last name <span className="text-red-500">*</span>
-              </label>
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="last_name"
-                name="last_name"
-                type="text"
-                inputSize="md"
-                placeholder="Wright"
-                value={formData.last_name}
-                onChange={(e) => handleFormChange("last_name", e.target.value)}
-                autoComplete="on"
-              />
-            </div>
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-              Email <span className="text-red-500">*</span>
-            </label>
-            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-              id="email"
-              name="email"
-              type="email"
-              inputSize="md"
-              placeholder="name@company.com"
-              value={formData.email}
-              onChange={(e) => handleFormChange("email", e.target.value)}
-              hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
-              autoComplete="on"
-            />
-            {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
-              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
-            )}
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="company_name">
-              Company name <span className="text-red-500">*</span>
-            </label>
-            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-              id="company_name"
-              name="company_name"
-              type="text"
-              inputSize="md"
-              placeholder="Company name"
-              value={formData.company_name}
-              onChange={(e) => handleFormChange("company_name", e.target.value)}
-            />
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-              Set a password <span className="text-red-500">*</span>
-            </label>
-            <div className="relative">
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="password"
-                name="password"
-                type={showPassword.password ? "text" : "password"}
-                inputSize="md"
-                placeholder="New password..."
-                value={formData.password}
-                onChange={(e) => handleFormChange("password", e.target.value)}
-                hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
-                onFocus={() => setIsPasswordInputFocused(true)}
-                onBlur={() => setIsPasswordInputFocused(false)}
-                autoComplete="on"
-              />
-              {showPassword.password ? (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
-                >
-                  <EyeOff className="h-4 w-4" />
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
-                >
-                  <Eye className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-            {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
-              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
-            )}
-            <PasswordStrengthMeter password={formData.password} isFocused={isPasswordInputFocused} />
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-              Confirm password <span className="text-red-500">*</span>
-            </label>
-            <div className="relative">
-              <Input
-                type={showPassword.retypePassword ? "text" : "password"}
-                id="confirm_password"
-                name="confirm_password"
-                inputSize="md"
-                value={formData.confirm_password}
-                onChange={(e) => handleFormChange("confirm_password", e.target.value)}
-                placeholder="Confirm password"
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
-                onFocus={() => setIsRetryPasswordInputFocused(true)}
-                onBlur={() => setIsRetryPasswordInputFocused(false)}
-              />
-              {showPassword.retypePassword ? (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
-                >
-                  <EyeOff className="h-4 w-4" />
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
-                >
-                  <Eye className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-            {!!formData.confirm_password &&
-              formData.password !== formData.confirm_password &&
-              renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
-          </div>
-
-          <div className="relative flex items-center pt-2 gap-2">
-            <div>
-              <Checkbox
-                className="w-4 h-4"
-                iconClassName="w-3 h-3"
-                id="is_telemetry_enabled"
-                onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
-                checked={formData.is_telemetry_enabled}
-              />
-            </div>
-            <label
-              className="text-sm text-onboarding-text-300 font-medium cursor-pointer"
-              htmlFor="is_telemetry_enabled"
-            >
-              Allow Plane to anonymously collect usage events.
-            </label>
-            <a
-              tabIndex={-1}
-              href="https://developers.plane.so/self-hosting/telemetry"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm font-medium text-blue-500 hover:text-blue-600"
-            >
-              See More
-            </a>
-          </div>
-
-          <div className="py-2">
-            <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};

admin/core/components/login/index.ts

@@ -1 +0,0 @@
-export * from "./sign-in-form";

admin/core/components/login/sign-in-form.tsx

@@ -1,194 +0,0 @@
-"use client";
-
-import { FC, useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "next/navigation";
-import { Eye, EyeOff } from "lucide-react";
-// plane internal packages
-import { API_BASE_URL, EAdminAuthErrorCodes, TAuthErrorInfo } from "@plane/constants";
-import { AuthService } from "@plane/services";
-import { Button, Input, Spinner } from "@plane/ui";
-// components
-import { Banner } from "@/components/common";
-// helpers
-import { authErrorHandler } from "@/lib/auth-helpers";
-// local components
-import { AuthBanner } from "../authentication";
-
-// service initialization
-const authService = new AuthService();
-
-// error codes
-enum EErrorCodes {
-  INSTANCE_NOT_CONFIGURED = "INSTANCE_NOT_CONFIGURED",
-  REQUIRED_EMAIL_PASSWORD = "REQUIRED_EMAIL_PASSWORD",
-  INVALID_EMAIL = "INVALID_EMAIL",
-  USER_DOES_NOT_EXIST = "USER_DOES_NOT_EXIST",
-  AUTHENTICATION_FAILED = "AUTHENTICATION_FAILED",
-}
-
-type TError = {
-  type: EErrorCodes | undefined;
-  message: string | undefined;
-};
-
-// form data
-type TFormData = {
-  email: string;
-  password: string;
-};
-
-const defaultFromData: TFormData = {
-  email: "",
-  password: "",
-};
-
-export const InstanceSignInForm: FC = (props) => {
-  const {} = props;
-  // search params
-  const searchParams = useSearchParams();
-  const emailParam = searchParams.get("email") || undefined;
-  const errorCode = searchParams.get("error_code") || undefined;
-  const errorMessage = searchParams.get("error_message") || undefined;
-  // state
-  const [showPassword, setShowPassword] = useState(false);
-  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
-  const [formData, setFormData] = useState<TFormData>(defaultFromData);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
-
-  const handleFormChange = (key: keyof TFormData, value: string | boolean) =>
-    setFormData((prev) => ({ ...prev, [key]: value }));
-
-  useEffect(() => {
-    if (csrfToken === undefined)
-      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
-  }, [csrfToken]);
-
-  useEffect(() => {
-    if (emailParam) setFormData((prev) => ({ ...prev, email: emailParam }));
-  }, [emailParam]);
-
-  // derived values
-  const errorData: TError = useMemo(() => {
-    if (errorCode && errorMessage) {
-      switch (errorCode) {
-        case EErrorCodes.INSTANCE_NOT_CONFIGURED:
-          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
-        case EErrorCodes.REQUIRED_EMAIL_PASSWORD:
-          return { type: EErrorCodes.REQUIRED_EMAIL_PASSWORD, message: errorMessage };
-        case EErrorCodes.INVALID_EMAIL:
-          return { type: EErrorCodes.INVALID_EMAIL, message: errorMessage };
-        case EErrorCodes.USER_DOES_NOT_EXIST:
-          return { type: EErrorCodes.USER_DOES_NOT_EXIST, message: errorMessage };
-        case EErrorCodes.AUTHENTICATION_FAILED:
-          return { type: EErrorCodes.AUTHENTICATION_FAILED, message: errorMessage };
-        default:
-          return { type: undefined, message: undefined };
-      }
-    } else return { type: undefined, message: undefined };
-  }, [errorCode, errorMessage]);
-
-  const isButtonDisabled = useMemo(
-    () => (!isSubmitting && formData.email && formData.password ? false : true),
-    [formData.email, formData.password, isSubmitting]
-  );
-
-  useEffect(() => {
-    if (errorCode) {
-      const errorDetail = authErrorHandler(errorCode?.toString() as EAdminAuthErrorCodes);
-      if (errorDetail) {
-        setErrorInfo(errorDetail);
-      }
-    }
-  }, [errorCode]);
-
-  return (
-    <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
-      <div className="relative flex flex-col space-y-6">
-        <div className="text-center space-y-1">
-          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-            Manage your Plane instance
-          </h3>
-          <p className="font-medium text-onboarding-text-400">
-            Configure instance-wide settings to secure your instance
-          </p>
-        </div>
-
-        {errorData.type && errorData?.message ? (
-          <Banner type="error" message={errorData?.message} />
-        ) : (
-          <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
-        )}
-
-        <form
-          className="space-y-4"
-          method="POST"
-          action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
-          onSubmit={() => setIsSubmitting(true)}
-          onError={() => setIsSubmitting(false)}
-        >
-          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-              Email <span className="text-red-500">*</span>
-            </label>
-            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-              id="email"
-              name="email"
-              type="email"
-              inputSize="md"
-              placeholder="name@company.com"
-              value={formData.email}
-              onChange={(e) => handleFormChange("email", e.target.value)}
-              autoComplete="on"
-              autoFocus
-            />
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-              Password <span className="text-red-500">*</span>
-            </label>
-            <div className="relative">
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="password"
-                name="password"
-                type={showPassword ? "text" : "password"}
-                inputSize="md"
-                placeholder="Enter your password"
-                value={formData.password}
-                onChange={(e) => handleFormChange("password", e.target.value)}
-                autoComplete="on"
-              />
-              {showPassword ? (
-                <button
-                  type="button"
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(false)}
-                >
-                  <EyeOff className="h-4 w-4" />
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => setShowPassword(true)}
-                >
-                  <Eye className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-          </div>
-          <div className="py-2">
-            <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};

admin/core/components/new-user-popup.tsx

@@ -1,53 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-import Image from "next/image";
-import Link from "next/link";
-import { useTheme as nextUseTheme } from "next-themes";
-// ui
-import { Button, getButtonStyling } from "@plane/ui";
-import { resolveGeneralTheme } from "@plane/utils";
-// hooks
-import { useTheme } from "@/hooks/store";
-// icons
-import TakeoffIconLight from "/public/logos/takeoff-icon-light.svg";
-import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";
-
-export const NewUserPopup: React.FC = observer(() => {
-  // hooks
-  const { isNewUserPopup, toggleNewUserPopup } = useTheme();
-  // theme
-  const { resolvedTheme } = nextUseTheme();
-
-  if (!isNewUserPopup) return <></>;
-  return (
-    <div className="absolute bottom-8 right-8 p-6 w-96 border border-custom-border-100 shadow-md rounded-lg bg-custom-background-100">
-      <div className="flex gap-4">
-        <div className="grow">
-          <div className="text-base font-semibold">Create workspace</div>
-          <div className="py-2 text-sm font-medium text-custom-text-300">
-            Instance setup done! Welcome to Plane instance portal. Start your journey with by creating your first
-            workspace.
-          </div>
-          <div className="flex items-center gap-4 pt-2">
-            <Link href="/workspace/create" className={getButtonStyling("primary", "sm")}>
-              Create workspace
-            </Link>
-            <Button variant="neutral-primary" size="sm" onClick={toggleNewUserPopup}>
-              Close
-            </Button>
-          </div>
-        </div>
-        <div className="shrink-0 flex items-center justify-center">
-          <Image
-            src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
-            height={80}
-            width={80}
-            alt="Plane icon"
-          />
-        </div>
-      </div>
-    </div>
-  );
-});

admin/core/components/workspace/index.ts

@@ -1 +0,0 @@
-export * from "./list-item";

admin/core/components/workspace/list-item.tsx

@@ -1,81 +0,0 @@
-import { observer } from "mobx-react";
-import { ExternalLink } from "lucide-react";
-// plane internal packages
-import { WEB_BASE_URL } from "@plane/constants";
-import { Tooltip } from "@plane/ui";
-import { getFileURL } from "@plane/utils";
-// hooks
-import { useWorkspace } from "@/hooks/store";
-
-type TWorkspaceListItemProps = {
-  workspaceId: string;
-};
-
-export const WorkspaceListItem = observer(({ workspaceId }: TWorkspaceListItemProps) => {
-  // store hooks
-  const { getWorkspaceById } = useWorkspace();
-  // derived values
-  const workspace = getWorkspaceById(workspaceId);
-
-  if (!workspace) return null;
-  return (
-    <a
-      key={workspaceId}
-      href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
-      target="_blank"
-      className="group flex items-center justify-between p-4 gap-2.5 truncate border border-custom-border-200/70 hover:border-custom-border-200 hover:bg-custom-background-90 rounded-md"
-    >
-      <div className="flex items-start gap-4">
-        <span
-          className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 mt-1 text-xs uppercase ${
-            !workspace?.logo_url && "rounded bg-custom-primary-500 text-white"
-          }`}
-        >
-          {workspace?.logo_url && workspace.logo_url !== "" ? (
-            <img
-              src={getFileURL(workspace.logo_url)}
-              className="absolute left-0 top-0 h-full w-full rounded object-cover"
-              alt="Workspace Logo"
-            />
-          ) : (
-            (workspace?.name?.[0] ?? "...")
-          )}
-        </span>
-        <div className="flex flex-col items-start gap-1">
-          <div className="flex flex-wrap w-full items-center gap-2.5">
-            <h3 className={`text-base font-medium capitalize`}>{workspace.name}</h3>/
-            <Tooltip tooltipContent="The unique URL of your workspace">
-              <h4 className="text-sm text-custom-text-300">[{workspace.slug}]</h4>
-            </Tooltip>
-          </div>
-          {workspace.owner.email && (
-            <div className="flex items-center gap-1 text-xs">
-              <h3 className="text-custom-text-200 font-medium">Owned by:</h3>
-              <h4 className="text-custom-text-300">{workspace.owner.email}</h4>
-            </div>
-          )}
-          <div className="flex items-center gap-2.5 text-xs">
-            {workspace.total_projects !== null && (
-              <span className="flex items-center gap-1">
-                <h3 className="text-custom-text-200 font-medium">Total projects:</h3>
-                <h4 className="text-custom-text-300">{workspace.total_projects}</h4>
-              </span>
-            )}
-            {workspace.total_members !== null && (
-              <>
-                •
-                <span className="flex items-center gap-1">
-                  <h3 className="text-custom-text-200 font-medium">Total members:</h3>
-                  <h4 className="text-custom-text-300">{workspace.total_members}</h4>
-                </span>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="flex-shrink-0">
-        <ExternalLink size={14} className="text-custom-text-400 group-hover:text-custom-text-200" />
-      </div>
-    </a>
-  );
-});

admin/core/hooks/store/use-instance.tsx

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-// store
-import { StoreContext } from "@/lib/store-provider";
-import { IInstanceStore } from "@/store/instance.store";
-
-export const useInstance = (): IInstanceStore => {
-  const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("useInstance must be used within StoreProvider");
-  return context.instance;
-};

admin/core/hooks/store/use-theme.tsx

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-// store
-import { StoreContext } from "@/lib/store-provider";
-import { IThemeStore } from "@/store/theme.store";
-
-export const useTheme = (): IThemeStore => {
-  const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("useTheme must be used within StoreProvider");
-  return context.theme;
-};

admin/core/hooks/store/use-user.tsx

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-// store
-import { StoreContext } from "@/lib/store-provider";
-import { IUserStore } from "@/store/user.store";
-
-export const useUser = (): IUserStore => {
-  const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("useUser must be used within StoreProvider");
-  return context.user;
-};

admin/core/hooks/store/use-workspace.tsx

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-// store
-import { StoreContext } from "@/lib/store-provider";
-import { IWorkspaceStore } from "@/store/workspace.store";
-
-export const useWorkspace = (): IWorkspaceStore => {
-  const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("useWorkspace must be used within StoreProvider");
-  return context.workspace;
-};