style: remove unnecessary bottom padding from the rich text editor

.codespellrc

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

@@ -2,7 +2,6 @@
 *.pyc
 .env
 venv
-.venv
 node_modules/
 **/node_modules/
 npm-debug.log
@@ -15,55 +14,4 @@ build/
 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
+**/dist/

.env.example

@@ -15,15 +15,12 @@ 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 proxy config for uploads if using minio setup
+# 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
@@ -39,18 +36,5 @@ DOCKERIZED=1  # deprecated
 # set to 1 If using the pre-configured minio setup
 USE_MINIO=1
 
-# 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
-
-# API key rate limit
-API_KEY_RATE_LIMIT="60/minute"
+# Nginx Configuration
+NGINX_PORT=80

.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, plane]
+labels: [🐛bug]
 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, plane]
+labels: [✨feature]
 assignees: [vihar, pushya22]
 body:
 - type: markdown

.github/actions/build-push-ce/action.yml

@@ -0,0 +1,126 @@
+name: "Build and Push Docker Image"
+description: "Reusable action for building and pushing Docker images"
+inputs:
+  docker-username:
+    description: "The Dockerhub username"
+    required: true
+  docker-token:
+    description: "The Dockerhub Token"
+    required: true
+
+  # Docker Image Options
+  docker-image-owner:
+    description: "The owner of the Docker image"
+    required: true
+  docker-image-name:
+    description: "The name of the Docker image"
+    required: true
+  build-context:
+    description: "The build context"
+    required: true
+    default: "."
+  dockerfile-path:
+    description: "The path to the Dockerfile"
+    required: true
+  build-args:
+    description: "The build arguments"
+    required: false
+    default: ""
+  
+  # Buildx Options
+  buildx-driver:
+    description: "Buildx driver"
+    required: true
+    default: "docker-container"
+  buildx-version:
+    description: "Buildx version"
+    required: true
+    default: "latest"
+  buildx-platforms:
+    description: "Buildx platforms"
+    required: true
+    default: "linux/amd64"
+  buildx-endpoint:
+    description: "Buildx endpoint"
+    required: true
+    default: "default"
+
+  # Release Build Options
+  build-release:
+    description: "Flag to publish release"
+    required: false
+    default: "false"
+  build-prerelease:
+    description: "Flag to publish prerelease"
+    required: false
+    default: "false"
+  release-version:
+    description: "The release version"
+    required: false
+    default: "latest"
+
+runs:
+  using: "composite"
+  steps:
+    - name: Set Docker Tag
+      shell: bash
+      env:
+        IMG_OWNER: ${{ inputs.docker-image-owner }}
+        IMG_NAME: ${{ inputs.docker-image-name }}
+        BUILD_RELEASE: ${{ inputs.build-release }}
+        IS_PRERELEASE: ${{ inputs.build-prerelease }}
+        REL_VERSION: ${{ inputs.release-version }}
+      run: |
+        FLAT_BRANCH_VERSION=$(echo "${{ github.ref_name }}" | sed 's/[^a-zA-Z0-9.-]//g')
+
+        if [ "${{ env.BUILD_RELEASE }}" == "true" ]; then
+          semver_regex="^v([0-9]+)\.([0-9]+)\.([0-9]+)(-[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*)?$"
+          if [[ ! ${{ env.REL_VERSION }} =~ $semver_regex ]]; then
+            echo "Invalid Release Version Format : ${{ env.REL_VERSION }}"
+            echo "Please provide a valid SemVer version"
+            echo "e.g. v1.2.3 or v1.2.3-alpha-1"
+            echo "Exiting the build process"
+            exit 1  # Exit with status 1 to fail the step
+          fi
+
+          TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:${{ env.REL_VERSION }}
+
+          if [ "${{ env.IS_PRERELEASE }}" != "true" ]; then
+            TAG=${TAG},${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:stable
+          fi
+        elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
+          TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:latest
+        else
+          TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:${FLAT_BRANCH_VERSION}
+        fi
+        
+        echo "DOCKER_TAGS=${TAG}" >> $GITHUB_ENV
+    - name: Login to Docker Hub
+      uses: docker/login-action@v3
+      with:
+        username: ${{ inputs.docker-username }}
+        password: ${{ inputs.docker-token}}
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+      with:
+        driver: ${{ inputs.buildx-driver }}
+        version: ${{ inputs.buildx-version }}
+        endpoint: ${{ inputs.buildx-endpoint }}
+
+    - name: Check out the repo
+      uses: actions/checkout@v4
+
+    - name: Build and Push Docker Image
+      uses: docker/build-push-action@v5.1.0
+      with:
+        context: ${{ inputs.build-context }}
+        file: ${{ inputs.dockerfile-path }}
+        platforms: ${{ inputs.buildx-platforms }}
+        tags: ${{ env.DOCKER_TAGS }}
+        push: true
+        build-args: ${{ inputs.build-args }}
+      env:
+        DOCKER_BUILDKIT: 1
+        DOCKER_USERNAME: ${{ inputs.docker-username }}
+        DOCKER_PASSWORD: ${{ inputs.docker-token }}

.github/instructions/bash.instructions.md

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

@@ -1,129 +0,0 @@
----
-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/pull_request_template.md

@@ -1,20 +0,0 @@
-### Description
-<!-- Provide a detailed description of the changes in this PR -->
-
-### Type of Change
-<!-- Put an 'x' in the boxes that apply -->
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] Feature (non-breaking change which adds functionality)
-- [ ] Improvement (change that would cause existing functionality to not work as expected)
-- [ ] Code refactoring
-- [ ] Performance improvements
-- [ ] Documentation update
-
-### Screenshots and Media (if applicable)
-<!-- Add screenshots to help explain your changes, ideally showcasing before and after -->
-
-### Test Scenarios 
-<!-- Please describe the tests that you ran to verify your changes -->
-
-### References
-<!-- Link related issues if there are any -->

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

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

@@ -0,0 +1,207 @@
+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-20.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@v5.1.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-20.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@v5.1.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,19 +25,9 @@ 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
+  # push:
+  #   branches:
+  #     - master
 
 env:
   TARGET_BRANCH: ${{ github.ref_name }}
@@ -45,18 +35,23 @@ env:
   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:
     name: Build Setup
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     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 }}
+      build_proxy: ${{ steps.changed_files.outputs.proxy_any_changed }}
+      build_apiserver: ${{ steps.changed_files.outputs.apiserver_any_changed }}
+      build_admin: ${{ steps.changed_files.outputs.admin_any_changed }}
+      build_space: ${{ steps.changed_files.outputs.space_any_changed }}
+      build_web: ${{ steps.changed_files.outputs.web_any_changed }}
+      build_live: ${{ steps.changed_files.outputs.live_any_changed }}
 
       dh_img_web: ${{ steps.set_env_variables.outputs.DH_IMG_WEB }}
       dh_img_space: ${{ steps.set_env_variables.outputs.DH_IMG_SPACE }}
@@ -64,13 +59,11 @@ 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
@@ -96,15 +89,12 @@ 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
@@ -123,250 +113,238 @@ 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
         uses: actions/checkout@v4
 
+      - name: Get changed files
+        id: changed_files
+        uses: tj-actions/changed-files@v42
+        with:
+          files_yaml: |
+            apiserver:
+              - apiserver/**
+            proxy:
+              - nginx/**
+            admin:
+              - admin/**
+              - packages/**
+              - "package.json"
+              - "yarn.lock"
+              - "tsconfig.json"
+              - "turbo.json"
+            space:
+              - space/**
+              - packages/**
+              - "package.json"
+              - "yarn.lock"
+              - "tsconfig.json"
+              - "turbo.json"
+            web:
+              - web/**
+              - packages/**
+              - "package.json"
+              - "yarn.lock"
+              - "tsconfig.json"
+              - "turbo.json"
+            live:
+              - live/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+
   branch_build_push_admin:
+    if: ${{ needs.branch_build_setup.outputs.build_admin == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push Admin Docker Image
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     steps:
+      - id: checkout_files
+        name: Checkout Files
+        uses: actions/checkout@v4
       - name: Admin Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: ./.github/actions/build-push-ce
         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-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_admin }}
           build-context: .
-          dockerfile-path: ./apps/admin/Dockerfile.admin
+          dockerfile-path: ./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 }}
           buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
 
   branch_build_push_web:
+    if: ${{ needs.branch_build_setup.outputs.build_web == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push Web Docker Image
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     steps:
+      - id: checkout_files
+        name: Checkout Files
+        uses: actions/checkout@v4
       - name: Web Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: ./.github/actions/build-push-ce
         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-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_web }}
           build-context: .
-          dockerfile-path: ./apps/web/Dockerfile.web
+          dockerfile-path: ./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 }}
           buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
 
   branch_build_push_space:
+    if: ${{ needs.branch_build_setup.outputs.build_space == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push Space Docker Image
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     steps:
+      - id: checkout_files
+        name: Checkout Files
+        uses: actions/checkout@v4
       - name: Space Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: ./.github/actions/build-push-ce
         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-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_space }}
           build-context: .
-          dockerfile-path: ./apps/space/Dockerfile.space
+          dockerfile-path: ./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 }}
           buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
 
   branch_build_push_live:
+    if: ${{ needs.branch_build_setup.outputs.build_live == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push Live Collaboration Docker Image
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     steps:
+      - id: checkout_files
+        name: Checkout Files
+        uses: actions/checkout@v4
       - name: Live Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: ./.github/actions/build-push-ce
         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-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_live }}
           build-context: .
-          dockerfile-path: ./apps/live/Dockerfile.live
+          dockerfile-path: ./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_api:
+  branch_build_push_apiserver:
+    if: ${{ needs.branch_build_setup.outputs.build_apiserver == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push API Server Docker Image
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     steps:
+      - id: checkout_files
+        name: Checkout Files
+        uses: actions/checkout@v4
       - name: Backend Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: ./.github/actions/build-push-ce
         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-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_backend }}
-          build-context: ./apps/api
-          dockerfile-path: ./apps/api/Dockerfile.api
+          build-context: ./apiserver
+          dockerfile-path: ./apiserver/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 }}
           buildx-endpoint: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
 
   branch_build_push_proxy:
+    if: ${{ needs.branch_build_setup.outputs.build_proxy == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push Proxy Docker Image
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     steps:
+      - id: checkout_files
+        name: Checkout Files
+        uses: actions/checkout@v4
       - name: Proxy Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: ./.github/actions/build-push-ce
         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-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_proxy }}
-          build-context: ./apps/proxy
-          dockerfile-path: ./apps/proxy/Dockerfile.ce
+          build-context: ./nginx
+          dockerfile-path: ./nginx/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 }}
 
-  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
+  attach_assets_to_build:
+    if: ${{ needs.branch_build_setup.outputs.build_type == 'Build' }}
+    name: Attach Assets to Build
+    runs-on: ubuntu-20.04
+    needs: [branch_build_setup]
     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
+      - name: Checkout
         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 ./deploy/selfhost/install.sh deploy/selfhost/setup.sh
 
-          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
+      - name: Attach Assets
+        id: attach_assets
         uses: actions/upload-artifact@v4
         with:
-          name: community-assets
+          name: selfhost-assets
+          retention-days: 2
           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
+            ${{ github.workspace }}/deploy/selfhost/setup.sh
+            ${{ github.workspace }}/deploy/selfhost/restore.sh
+            ${{ github.workspace }}/deploy/selfhost/docker-compose.yml
+            ${{ github.workspace }}/deploy/selfhost/variables.env
 
   publish_release:
     if: ${{ needs.branch_build_setup.outputs.build_type == 'Release' }}
     name: Build Release
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     needs:
       [
         branch_build_setup,
@@ -374,7 +352,7 @@ jobs:
         branch_build_push_web,
         branch_build_push_space,
         branch_build_push_live,
-        branch_build_push_api,
+        branch_build_push_apiserver,
         branch_build_push_proxy,
       ]
     env:
@@ -385,13 +363,11 @@ jobs:
 
       - name: Update Assets
         run: |
-          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
+          cp ./deploy/selfhost/install.sh deploy/selfhost/setup.sh
 
       - name: Create Release
         id: create_release
-        uses: softprops/action-gh-release@v2.1.0
+        uses: softprops/action-gh-release@v2.0.8
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
         with:
@@ -401,9 +377,7 @@ jobs:
           prerelease: ${{ env.IS_PRERELEASE }}
           generate_release_notes: true
           files: |
-            ${{ 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.workspace }}/deploy/selfhost/setup.sh
+            ${{ github.workspace }}/deploy/selfhost/restore.sh
+            ${{ github.workspace }}/deploy/selfhost/docker-compose.yml
+            ${{ github.workspace }}/deploy/selfhost/variables.env

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

@@ -0,0 +1,138 @@
+name: Build and Lint on Pull Request
+
+on:
+  workflow_dispatch:
+  pull_request:
+    types: ["opened", "synchronize", "ready_for_review"]
+
+jobs:
+  get-changed-files:
+    if: github.event.pull_request.draft == false
+    runs-on: ubuntu-latest
+    outputs:
+      apiserver_changed: ${{ steps.changed-files.outputs.apiserver_any_changed }}
+      admin_changed: ${{ steps.changed-files.outputs.admin_any_changed }}
+      space_changed: ${{ steps.changed-files.outputs.space_any_changed }}
+      web_changed: ${{ steps.changed-files.outputs.web_any_changed }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v44
+        with:
+          files_yaml: |
+            apiserver:
+              - apiserver/**
+            admin:
+              - admin/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+            space:
+              - space/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+            web:
+              - web/**
+              - packages/**
+              - 'package.json'
+              - 'yarn.lock'
+              - 'tsconfig.json'
+              - 'turbo.json'
+
+  lint-apiserver:
+    needs: get-changed-files
+    runs-on: ubuntu-latest
+    if: needs.get-changed-files.outputs.apiserver_changed == 'true'
+    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:
+    needs: get-changed-files
+    if: needs.get-changed-files.outputs.admin_changed == 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+      - run: yarn install
+      - run: yarn lint --filter=admin
+
+  lint-space:
+    needs: get-changed-files
+    if: needs.get-changed-files.outputs.space_changed == 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+      - run: yarn install
+      - run: yarn lint --filter=space
+
+  lint-web:
+    needs: get-changed-files
+    if: needs.get-changed-files.outputs.web_changed == 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.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: 18.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: 18.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: 18.x
+      - run: yarn install
+      - run: yarn build --filter=web

.github/workflows/check-version.yml

@@ -17,6 +17,8 @@ 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,9 +3,11 @@ name: "CodeQL"
 on:
   workflow_dispatch:
   push:
-    branches: ["preview", "canary", "master"]
+    branches: ["preview", "master"]
   pull_request:
-    branches: ["preview", "canary", "master"]
+    branches: ["develop", "preview", "master"]
+  schedule:
+    - cron: "53 19 * * 5"
 
 jobs:
   analyze:
@@ -27,11 +29,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -44,7 +46,7 @@ jobs:
       # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@v2
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -57,6 +59,6 @@ jobs:
       #     ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v2
         with:
           category: "/language:${{matrix.language}}"

.github/workflows/codespell.yml

@@ -1,25 +0,0 @@
-# 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/feature-deployment.yml

@@ -51,7 +51,7 @@ jobs:
         uses: actions/checkout@v4
 
   full_build_push:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
       BUILD_TYPE: full
@@ -79,7 +79,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v6.9.0
+        uses: docker/build-push-action@v5.1.0
         with:
           context: .
           file: ./aio/Dockerfile-app

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

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

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

.github/workflows/sync-repo-pr.yml

@@ -21,7 +21,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v4.1.1
         with:
           fetch-depth: 0 # Fetch all history for all branches and tags
 

.github/workflows/sync-repo.yml

@@ -11,13 +11,13 @@ env:
 
 jobs:
   sync_changes:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-20.04
     permissions:
       pull-requests: write
       contents: read
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v4.1.1
         with:
           persist-credentials: false
           fetch-depth: 0

.gitignore

@@ -1,6 +1,5 @@
 node_modules
 .next
-.yarn
 
 ### NextJS ###
 # Dependencies
@@ -16,22 +15,19 @@ 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
@@ -56,14 +52,11 @@ mediafiles
 .env
 .DS_Store
 logs/
-htmlcov/
-.coverage
 
 node_modules/
 assets/dist/
 npm-debug.log
 yarn-error.log
-pnpm-debug.log
 
 # Editor directories and files
 .idea
@@ -79,34 +72,16 @@ package-lock.json
 
 # lock files
 package-lock.json
+pnpm-lock.yaml
+pnpm-workspace.yaml
 
-
-
+.npmrc
 .secrets
 tmp/
-
 ## packages
 dist
 .temp/
 deploy/selfhost/plane-app/
-
 ## Storybook
 *storybook.log
 output.css
-
-dev-editor
-# Redis
-*.rdb
-*.rdb.gz
-
-storybook-static
-
-CLAUDE.md
-
-build/
-.react-router/
-
-build/
-.react-router/
-temp/
-scripts/

.husky/pre-commit

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

.mise.toml

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

.npmrc

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

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

.prettierrc

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

AGENTS.md

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

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

CONTRIBUTING.md

@@ -15,40 +15,20 @@ Without said minimal reproduction, we won't be able to investigate all [issues](
 
 You can open a new issue with this [issue form](https://github.com/makeplane/plane/issues/new).
 
-### Naming conventions for issues
-
-When opening a new issue, please use a clear and concise title that follows this format:
-
-- For bugs: `🐛 Bug: [short description]`
-- For features: `🚀 Feature: [short description]`
-- For improvements: `🛠️ Improvement: [short description]`
-- 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`
-
-This helps us triage and manage issues more efficiently.
-
 ## Projects setup and Architecture
 
 ### Requirements
 
-- Docker Engine installed and running
-- Node.js version 20+ [LTS version](https://nodejs.org/en/about/previous-releases)
+- Node.js version v16.18.0
 - Python version 3.8+
 - Postgres version v14
 - Redis version v6.2.7
-- **Memory**: Minimum **12 GB RAM** recommended
-  > ⚠️ Running the project on a system with only 8 GB RAM may lead to setup failures or memory crashes (especially during Docker container build/start or dependency install). Use cloud environments like GitHub Codespaces or upgrade local RAM if possible.
 
 ### Setup the project
 
 The project is a monorepo, with backend api and frontend in a single repo.
 
-The backend is a django project which is kept inside apps/api
+The backend is a django project which is kept inside apiserver
 
 1. Clone the repo
 
@@ -70,17 +50,6 @@ chmod +x setup.sh
 docker compose -f docker-compose-local.yml up
 ```
 
-4. Start web apps:
-
-```bash
-pnpm dev
-```
-
-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! 🎉
-
 ## Missing a Feature?
 
 If a feature is missing, you can directly _request_ a new one [here](https://github.com/makeplane/plane/issues/new?assignees=&labels=feature&template=feature_request.yml&title=%F0%9F%9A%80+Feature%3A+). You also can do the same by choosing "🚀 Feature" when raising a [New Issue](https://github.com/makeplane/plane/issues/new/choose) on our GitHub Repository.
@@ -91,157 +60,19 @@ 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 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`.
+- We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
+
+## Need help? Questions and suggestions
+
+Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Discord Server](https://discord.com/invite/A92xrEGCge).
 
 ## Ways to contribute
 
 - Try Plane Cloud and the self hosting platform and give feedback
 - Add new integrations
-- Add or update translations
 - Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose)
 - Share your thoughts and suggestions with us
 - Help create tutorials and blog posts
 - Request a feature by submitting a proposal
 - Report a bug
 - **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:
-
-```
-packages/i18n/src/locales/
-    ├── en/
-    │   ├── core.json       # Critical translations
-    │   └── translations.json
-    ├── fr/
-    │   └── translations.json
-    └── [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
-{
-  "issue": {
-    "label": "Work item",
-    "title": {
-      "label": "Work item title"
-    }
-  }
-}
-```
-
-### 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
-  {
-    "greeting": "Hello, {name}!"
-  }
-  ```
-
-- **Pluralization**
-  ```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.
-
-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:
-
-```ts
-// packages/i18n/src/types/language.ts
-export type TLanguage = "en" | "fr" | "your-lang";
-```
-
-1.  **Add language configuration**
-    Include the new language in the list of supported languages:
-
-```ts
-// packages/i18n/src/constants/language.ts
-export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
-  { label: "English", value: "en" },
-  { label: "Your Language", value: "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.
-
-3.  **Update import logic**
-    Modify the language import logic to include your new language:
-
-```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.
-- Nested structures match across all language files.
-- ICU message formats are correctly implemented.
-- All languages load without errors in the application.
-- Dynamic values and pluralization work as expected.
-- 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.
-- Double-check that nested key access paths are accurate.
-
-Happy translating! 🌍✨
-
-## Need help? Questions and suggestions
-
-Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Discord Server](https://discord.com/invite/A92xrEGCge).

ENV_SETUP.md

@@ -0,0 +1,91 @@
+# 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"
+# Error logs
+SENTRY_DSN=""
+SENTRY_ENVIRONMENT="development"
+# 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,10 +2,12 @@
 
 <p align="center">
 <a href="https://plane.so">
-  <img src="https://media.docs.plane.so/logo/plane_github_readme.png" alt="Plane Logo" width="400">
+  <img src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_logo_.webp" alt="Plane Logo" width="70">
 </a>
 </p>
-<p align="center"><b>Modern project management for all teams</b></p>
+
+<h3 align="center"><b>Plane</b></h3>
+<p align="center"><b>Open-source project management that unlocks customer value</b></p>
 
 <p align="center">
 <a href="https://discord.com/invite/A92xrEGCge">
@@ -15,88 +17,122 @@
 </p>
 
 <p align="center">
-    <a href="https://plane.so/"><b>Website</b></a> •
-    <a href="https://github.com/makeplane/plane/releases"><b>Releases</b></a> •
-    <a href="https://twitter.com/planepowers"><b>Twitter</b></a> •
-    <a href="https://docs.plane.so/"><b>Documentation</b></a>
+    <a href="https://dub.sh/plane-website-readme"><b>Website</b></a> •
+    <a href="https://git.new/releases"><b>Releases</b></a> •
+    <a href="https://dub.sh/planepowershq"><b>Twitter</b></a> •
+    <a href="https://dub.sh/planedocs"><b>Documentation</b></a>
 </p>
 
 <p>
     <a href="https://app.plane.so/#gh-light-mode-only" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-top.webp"
+        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"
         alt="Plane Screens"
         width="100%"
       />
     </a>
 </p>
 
-Meet [Plane](https://plane.so/), an open-source project management tool to track issues, run ~sprints~ cycles, and manage product roadmaps without the chaos of managing the tool itself. 🧘‍♀️
+Meet [Plane](https://dub.sh/plane-website-readme), an open-source project management tool to track issues, run ~sprints~ cycles, and manage product roadmaps without the chaos of managing the tool itself. 🧘‍♀️
 
 > Plane is evolving every day. Your suggestions, ideas, and reported bugs help us immensely. Do not hesitate to join in the conversation on [Discord](https://discord.com/invite/A92xrEGCge) or raise a GitHub issue. We read everything and respond to most.
 
-## 🚀 Installation
+## ⚡ Installation
 
-Getting started with Plane is simple. Choose the setup that works best for you:
+The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account.
 
-- **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.
+If you would like to self-host Plane, please see our [deployment guide](https://docs.plane.so/docker-compose).
 
-- **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.
+| Installation methods | Docs link                                                                                                                                          |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://docs.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://docs.plane.so/kubernetes) |
 
-| 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) |
+`Instance admins` can configure instance settings with [God-mode](https://docs.plane.so/instance-admin).
 
-`Instance admins` can configure instance settings with [God mode](https://developers.plane.so/self-hosting/govern/instance-admin).
+## 🚀 Features
 
-## 🌟 Features
+- **Issues**: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to problems for better organization and tracking.
 
-- **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**:
+  Keep up your team's momentum with Cycles. Gain insights into your project's progress with burn-down charts and other valuable features.
 
-- **Cycles**
-  Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.
+- **Modules**: Break down your large projects into smaller, more manageable modules. Assign modules between teams to track and plan your project's progress easily.
 
-- **Modules**
-  Simplify complex projects by dividing them into smaller, manageable modules.
+- **Views**: Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.
 
-- **Views**
-  Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.
+- **Pages**: Plane pages, equipped with AI and a rich text editor, let you jot down your thoughts on the fly. Format your text, upload images, hyperlink, or sync your existing ideas into an actionable item or issue.
 
-- **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.
+- **Analytics**: Get insights into all your Plane data in real-time. Visualize issue data to spot trends, remove blockers, and progress your work.
 
-- **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.
 
-## 🛠️ Local development
+## 🛠️ Quick start for contributors
 
-See [CONTRIBUTING](./CONTRIBUTING.md)
+> Development system must have docker engine installed and running.
 
-## ⚙️ Built with
+Setting up local environment is extremely easy and straight forward. Follow the below step and you will be ready to contribute - 
 
-[![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)
+1. Clone the code locally using:
+   ```
+   git clone https://github.com/makeplane/plane.git
+   ```
+2. Switch to the code folder:
+   ```
+   cd plane
+   ```
+3. Create your feature or fix branch you plan to work on using:
+   ```
+   git checkout -b <feature-branch-name>
+   ```
+4. Open terminal and run:
+   ```
+   ./setup.sh
+   ```
+5. Open the code on VSCode or similar equivalent IDE.
+6. Review the `.env` files available in various folders.
+   Visit [Environment Setup](./ENV_SETUP.md) to know about various environment variables used in system.
+7. Run the docker command to initiate services:
+   ```
+   docker compose -f docker-compose-local.yml up -d
+   ```
+
+You are ready to make changes to the code. Do not forget to refresh the browser (in case it does not auto-reload).
+
+Thats it!
+
+## ❤️ Community
+
+The Plane community can be found on [GitHub Discussions](https://github.com/orgs/makeplane/discussions), and our [Discord server](https://discord.com/invite/A92xrEGCge). Our [Code of conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) applies to all Plane community chanels.
+
+Ask questions, report bugs, join discussions, voice ideas, make feature requests, or share your projects.
+
+### Repo Activity
+
+![Plane Repo Activity](https://repobeats.axiom.co/api/embed/2523c6ed2f77c082b7908c33e2ab208981d76c39.svg "Repobeats analytics image")
 
 ## 📸 Screenshots
 
-  <p>
+<p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-work-items.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Issues_rNZjrGgFl.png?updatedAt=1709298765880"
         alt="Plane Views"
         width="100%"
       />
     </a>
   </p>
-  <p>
+<p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-cycles.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Cycles_jCDhqmTl9.png?updatedAt=1709298780697"
         width="100%"
       />
     </a>
@@ -104,7 +140,7 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
   <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-modules.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Modules_PSCVsbSfI.png?updatedAt=1709298796783"
         alt="Plane Cycles and Modules"
         width="100%"
       />
@@ -113,7 +149,7 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
   <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-views.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Views_uxXsRatS4.png?updatedAt=1709298834522"
         alt="Plane Analytics"
         width="100%"
       />
@@ -122,51 +158,41 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
    <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-analytics.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Analytics_0o22gLRtp.png?updatedAt=1709298834389"
         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
+## ⛓️ Security
 
-Explore Plane's [product documentation](https://docs.plane.so/) and [developer documentation](https://developers.plane.so/) to learn about features, setup, and usage.
+If you believe you have found a security vulnerability in Plane, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports.
 
-## ❤️ Community
+Email squawk@plane.so to disclose any security vulnerabilities.
 
-Join the Plane community on [GitHub Discussions](https://github.com/orgs/makeplane/discussions) and our [Discord server](https://discord.com/invite/A92xrEGCge). We follow a [Code of conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) in all our community channels.
+## ❤️ Contribute
 
-Feel free to ask questions, report bugs, participate in discussions, share ideas, request features, or showcase your projects. We’d love to hear from you!
+There are many ways to contribute to Plane, including:
 
-## 🛡️ Security
-
-If you discover a security vulnerability in Plane, please report it responsibly instead of opening a public issue. We take all legitimate reports seriously and will investigate them promptly. See [Security policy](https://github.com/makeplane/plane/blob/master/SECURITY.md) for more info.
-
-To disclose any security issues, please email us at security@plane.so.
-
-## 🤝 Contributing
-
-There are many ways you can contribute to Plane:
-
-- Report [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) or submit [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+).
-- Review the [documentation](https://docs.plane.so/) and submit [pull requests](https://github.com/makeplane/docs) to improve it—whether it's fixing typos or adding new content.
-- Talk or write about Plane or any other ecosystem integration and [let us know](https://discord.com/invite/A92xrEGCge)!
-- Show your support by upvoting [popular feature requests](https://github.com/makeplane/plane/issues).
-
-Please read [CONTRIBUTING.md](https://github.com/makeplane/plane/blob/master/CONTRIBUTING.md) for details on the process for submitting pull requests to us.
-
-### Repo activity
-
-![Plane Repo Activity](https://repobeats.axiom.co/api/embed/2523c6ed2f77c082b7908c33e2ab208981d76c39.svg "Repobeats analytics image")
+- Submitting [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) and [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+) for various components.
+- Reviewing [the documentation](https://docs.plane.so/) and submitting [pull requests](https://github.com/makeplane/plane), from fixing typos to adding new features.
+- Speaking or writing about Plane or any other ecosystem integration and [letting us know](https://discord.com/invite/A92xrEGCge)!
+- Upvoting [popular feature requests](https://github.com/makeplane/plane/issues) to show your support.
 
 ### We couldn't have done this without you.
 
 <a href="https://github.com/makeplane/plane/graphs/contributors">
   <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

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_API_BASE_URL=""
+NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+NEXT_PUBLIC_WEB_BASE_URL=""

admin/.eslintrc.js

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

admin/.prettierignore

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

admin/.prettierrc

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

admin/Dockerfile.admin

@@ -0,0 +1,86 @@
+# *****************************************************************************
+# STAGE 1: Build the project
+# *****************************************************************************
+FROM node:18-alpine 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 node:18-alpine 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 node:18-alpine 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

@@ -0,0 +1,17 @@
+FROM node:18-alpine
+RUN apk add --no-cache libc6-compat
+# Set working directory
+WORKDIR /app
+
+COPY . .
+
+RUN yarn global add turbo
+RUN yarn install
+
+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

@@ -0,0 +1,129 @@
+"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: {
+      OPENAI_API_KEY: config["OPENAI_API_KEY"],
+      GPT_ENGINE: config["GPT_ENGINE"],
+    },
+  });
+
+  const aiFormFields: TControllerInputFormField[] = [
+    {
+      key: "GPT_ENGINE",
+      type: "text",
+      label: "GPT_ENGINE",
+      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-3.5-turbo",
+      error: Boolean(errors.GPT_ENGINE),
+      required: false,
+    },
+    {
+      key: "OPENAI_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.OPENAI_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 touch with us.</div>
+        </div>
+      </div>
+    </div>
+  );
+};

admin/app/ai/layout.tsx

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

admin/app/ai/page.tsx

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

admin/app/authentication/github/form.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+// ui
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+// components
+import {
+  CodeBlock,
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "@/components/common";
+// helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+// 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"],
+    },
+  });
+
+  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,
+    },
+  ];
+
+  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,
+        });
+      })
+      .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("link-neutral", "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

@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication";
+import { PageHeader } from "@/components/common";
+// helpers
+import { resolveGeneralTheme } from "@/helpers/common.helper";
+// 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

@@ -0,0 +1,214 @@
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
+// ui
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+// components
+import {
+  CodeBlock,
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "@/components/common";
+// helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+// 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("link-neutral", "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

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

admin/app/authentication/google/form.tsx

@@ -0,0 +1,215 @@
+"use client";
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+// ui
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+// components
+import {
+  CodeBlock,
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "@/components/common";
+// helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+// 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("link-neutral", "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

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

admin/app/authentication/layout.tsx

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

admin/app/authentication/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { TInstanceConfigurationKeys } from "@plane/types";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// 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={() => {
+                        Boolean(parseInt(enableSignUpConfig)) === true
+                          ? updateConfig("ENABLE_SIGNUP", "0")
+                          : updateConfig("ENABLE_SIGNUP", "1");
+                      }}
+                      size="sm"
+                      disabled={isSubmitting}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="text-lg font-medium pt-6">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/email-config-form.tsx

@@ -1,14 +1,13 @@
-import { useMemo, useState } from "react";
+"use client";
+
+import React, { FC, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 // types
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
 // ui
-import { CustomSelect } from "@plane/ui";
+import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import { ControllerInput } from "@/components/common/controller-input";
+import { ControllerInput, TControllerInputFormField } from "@/components/common";
 // hooks
 import { useInstance } from "@/hooks/store";
 // local components
@@ -28,7 +27,7 @@ const EMAIL_SECURITY_OPTIONS: { [key in TEmailSecurityKeys]: string } = {
   NONE: "No email security",
 };
 
-export function InstanceEmailForm(props: IInstanceEmailForm) {
+export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
   const { config } = props;
   // states
   const [isSendTestEmailModalOpen, setIsSendTestEmailModalOpen] = useState(false);
@@ -50,9 +49,9 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
       EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
       EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
       EMAIL_FROM: config["EMAIL_FROM"],
-      ENABLE_SMTP: config["ENABLE_SMTP"],
     },
   });
+
   const emailFormFields: TControllerInputFormField[] = [
     {
       key: "EMAIL_HOST",
@@ -73,7 +72,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
     {
       key: "EMAIL_FROM",
       type: "text",
-      label: "Sender's email address",
+      label: "Sender email address",
       description:
         "This is the email address your users will see when getting emails from this instance. You will need to verify this address.",
       placeholder: "no-reply@projectplane.so",
@@ -102,7 +101,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
   ];
 
   const onSubmit = async (formData: EmailFormValues) => {
-    const payload: Partial<EmailFormValues> = { ...formData, ENABLE_SMTP: "1" };
+    const payload: Partial<EmailFormValues> = { ...formData };
 
     await updateInstanceConfigurations(payload)
       .then(() =>
@@ -157,12 +156,13 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             />
           ))}
           <div className="flex flex-col gap-1">
-            <h4 className="text-13 text-tertiary">Email security</h4>
+            <h4 className="text-sm text-custom-text-300">Email security</h4>
             <CustomSelect
               value={emailSecurityKey}
               label={EMAIL_SECURITY_OPTIONS[emailSecurityKey]}
               onChange={handleEmailSecurityChange}
-              buttonClassName="rounded-md border-subtle"
+              buttonClassName="rounded-md border-custom-border-200"
+              optionsClassName="w-full"
               input
             >
               {Object.entries(EMAIL_SECURITY_OPTIONS).map(([key, value]) => (
@@ -173,13 +173,13 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             </CustomSelect>
           </div>
         </div>
-        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-subtle">
-          <div className="flex w-full max-w-xl flex-col gap-y-10 px-1">
+        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-custom-border-100">
+          <div className="flex w-full max-w-md flex-col gap-y-10 px-1">
             <div className="mr-8 flex items-center gap-10 pt-4">
               <div className="grow">
-                <div className="text-13 font-medium text-primary">Authentication</div>
-                <div className="text-11 font-regular text-tertiary">
-                  This is optional, but we recommend setting up a username and a password for your SMTP server.
+                <div className="text-sm font-medium text-custom-text-100">Authentication (optional)</div>
+                <div className="text-xs font-normal text-custom-text-300">
+                  We recommend setting up a username password for your SMTP server
                 </div>
               </div>
             </div>
@@ -204,16 +204,14 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
       <div className="flex max-w-4xl items-center py-1 gap-4">
         <Button
           variant="primary"
-          size="lg"
           onClick={handleSubmit(onSubmit)}
           loading={isSubmitting}
           disabled={!isValid || !isDirty}
         >
-          {isSubmitting ? "Saving" : "Save changes"}
+          {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
         <Button
-          variant="secondary"
-          size="lg"
+          variant="outline-primary"
           onClick={() => setIsSendTestEmailModalOpen(true)}
           loading={isSubmitting}
           disabled={!isValid}
@@ -223,4 +221,4 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
       </div>
     </div>
   );
-}
+};

admin/app/email/layout.tsx

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

admin/app/email/page.tsx

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

admin/app/email/test-email-modal.tsx

@@ -1,10 +1,9 @@
-import { useEffect, useState, Fragment } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-// plane imports
-import { Button } from "@plane/propel/button";
-import { InstanceService } from "@plane/services";
 // ui
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
+// services
+import { InstanceService } from "@/services/instance.service";
 
 type Props = {
   isOpen: boolean;
@@ -19,7 +18,7 @@ enum ESendEmailSteps {
 
 const instanceService = new InstanceService();
 
-export function SendTestEmailModal(props: Props) {
+export const SendTestEmailModal: FC<Props> = (props) => {
   const { isOpen, handleClose } = props;
 
   // state
@@ -61,10 +60,10 @@ export function SendTestEmailModal(props: Props) {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
+    <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={Fragment}
+          as={React.Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -72,12 +71,12 @@ export function SendTestEmailModal(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="my-10 flex justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
-              as={Fragment}
+              as={React.Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               enterTo="opacity-100 translate-y-0 sm:scale-100"
@@ -85,8 +84,8 @@ export function SendTestEmailModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all w-full sm:max-w-xl">
-                <h3 className="text-16 font-medium leading-6 text-primary">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-xl">
+                <h3 className="text-lg font-medium leading-6 text-custom-text-100">
                   {sendEmailStep === ESendEmailSteps.SEND_EMAIL
                     ? "Send test email"
                     : sendEmailStep === ESendEmailSteps.SUCCESS
@@ -101,12 +100,12 @@ export function SendTestEmailModal(props: Props) {
                       value={receiverEmail}
                       onChange={(e) => setReceiverEmail(e.target.value)}
                       placeholder="Receiver email"
-                      className="w-full resize-none text-16"
+                      className="w-full resize-none text-lg"
                       tabIndex={1}
                     />
                   )}
                   {sendEmailStep === ESendEmailSteps.SUCCESS && (
-                    <div className="flex flex-col gap-y-4 text-13">
+                    <div className="flex flex-col gap-y-4 text-sm">
                       <p>
                         We have sent the test email to {receiverEmail}. Please check your spam folder if you cannot find
                         it.
@@ -114,14 +113,14 @@ export function SendTestEmailModal(props: Props) {
                       <p>If you still cannot find it, recheck your SMTP configuration and trigger a new test email.</p>
                     </div>
                   )}
-                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
+                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-sm">{error}</div>}
                   <div className="flex items-center gap-2 justify-end mt-5">
-                    <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={2}>
+                    <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={2}>
                       {sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
                     </Button>
                     {sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
-                      <Button variant="primary" size="lg" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
-                        {isLoading ? "Sending email" : "Send email"}
+                      <Button variant="primary" size="sm" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
+                        {isLoading ? "Sending email..." : "Send email"}
                       </Button>
                     )}
                   </div>
@@ -133,4 +132,4 @@ export function SendTestEmailModal(props: Props) {
       </Dialog>
     </Transition.Root>
   );
-}
+};

admin/app/error.tsx

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

admin/app/general/form.tsx

@@ -0,0 +1,154 @@
+"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">
+                Allow Plane to collect anonymous usage events
+              </div>
+              <div className="text-xs font-normal text-custom-text-300 leading-5">
+                We collect usage events without any PII to analyse and improve Plane.{" "}
+                <a
+                  href="https://docs.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  className="text-custom-primary-100 hover:underline"
+                  rel="noreferrer"
+                >
+                  Know more.
+                </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

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

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

admin/app/general/page.tsx

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

admin/app/globals.css

@@ -0,0 +1,432 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .text-1\.5xl {
+    font-size: 1.375rem;
+    line-height: 1.875rem;
+  }
+
+  .text-2\.5xl {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+}
+
+@layer base {
+  html {
+    font-family: "Inter", sans-serif;
+  }
+
+  :root {
+    color-scheme: light !important;
+
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 247, 247, 247; /* secondary bg */
+    --color-background-80: 232, 232, 232; /* tertiary bg */
+
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
+    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
+    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
+      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
+    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
+    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+
+    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
+    --color-sidebar-shadow-xs: var(--color-shadow-xs);
+    --color-sidebar-shadow-sm: var(--color-shadow-sm);
+    --color-sidebar-shadow-rg: var(--color-shadow-rg);
+    --color-sidebar-shadow-md: var(--color-shadow-md);
+    --color-sidebar-shadow-lg: var(--color-shadow-lg);
+    --color-sidebar-shadow-xl: var(--color-shadow-xl);
+    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
+    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
+    --color-sidebar-shadow-4xl: var(--color-shadow-4xl);
+  }
+
+  [data-theme="light"],
+  [data-theme="light-contrast"] {
+    color-scheme: light !important;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 247, 247, 247; /* secondary bg */
+    --color-background-80: 232, 232, 232; /* tertiary bg */
+  }
+
+  [data-theme="light"] {
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    /* onboarding colors */
+    --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
+    --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
+    --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
+    --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
+
+    --color-onboarding-text-100: 23, 23, 23;
+    --color-onboarding-text-200: 58, 58, 58;
+    --color-onboarding-text-300: 82, 82, 82;
+    --color-onboarding-text-400: 163, 163, 163;
+
+    --color-onboarding-background-100: 236, 241, 255;
+    --color-onboarding-background-200: 255, 255, 255;
+    --color-onboarding-background-300: 236, 241, 255;
+    --color-onboarding-background-400: 177, 206, 250;
+
+    --color-onboarding-border-100: 229, 229, 229;
+    --color-onboarding-border-200: 217, 228, 255;
+    --color-onboarding-border-300: 229, 229, 229, 0.5;
+
+    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
+
+    /* toast theme */
+    --color-toast-success-text: 62, 155, 79;
+    --color-toast-error-text: 220, 62, 66;
+    --color-toast-warning-text: 255, 186, 24;
+    --color-toast-info-text: 51, 88, 212;
+    --color-toast-loading-text: 28, 32, 36;
+    --color-toast-secondary-text: 128, 131, 141;
+    --color-toast-tertiary-text: 96, 100, 108;
+
+    --color-toast-success-background: 253, 253, 254;
+    --color-toast-error-background: 255, 252, 252;
+    --color-toast-warning-background: 254, 253, 251;
+    --color-toast-info-background: 253, 253, 254;
+    --color-toast-loading-background: 253, 253, 254;
+
+    --color-toast-success-border: 218, 241, 219;
+    --color-toast-error-border: 255, 219, 220;
+    --color-toast-warning-border: 255, 247, 194;
+    --color-toast-info-border: 210, 222, 255;
+    --color-toast-loading-border: 224, 225, 230;
+  }
+
+  [data-theme="light-contrast"] {
+    --color-text-100: 11, 11, 11; /* primary text */
+    --color-text-200: 38, 38, 38; /* secondary text */
+    --color-text-300: 58, 58, 58; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark"],
+  [data-theme="dark-contrast"] {
+    color-scheme: dark !important;
+
+    --color-background-100: 25, 25, 25; /* primary bg */
+    --color-background-90: 32, 32, 32; /* secondary bg */
+    --color-background-80: 44, 44, 44; /* tertiary bg */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
+    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
+  }
+
+  [data-theme="dark"] {
+    --color-text-100: 229, 229, 229; /* primary text */
+    --color-text-200: 163, 163, 163; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-text-400: 82, 82, 82; /* placeholder text */
+
+    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+
+    /* onboarding colors */
+    --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
+    --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
+    --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
+
+    --color-onboarding-text-100: 237, 238, 240;
+    --color-onboarding-text-200: 176, 180, 187;
+    --color-onboarding-text-300: 118, 123, 132;
+    --color-onboarding-text-400: 105, 110, 119;
+
+    --color-onboarding-background-100: 54, 58, 64;
+    --color-onboarding-background-200: 40, 42, 45;
+    --color-onboarding-background-300: 40, 42, 45;
+    --color-onboarding-background-400: 67, 72, 79;
+
+    --color-onboarding-border-100: 54, 58, 64;
+    --color-onboarding-border-200: 54, 58, 64;
+    --color-onboarding-border-300: 34, 35, 38, 0.5;
+
+    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
+
+    /* toast theme */
+    --color-toast-success-text: 178, 221, 181;
+    --color-toast-error-text: 206, 44, 49;
+    --color-toast-warning-text: 255, 186, 24;
+    --color-toast-info-text: 141, 164, 239;
+    --color-toast-loading-text: 255, 255, 255;
+    --color-toast-secondary-text: 185, 187, 198;
+    --color-toast-tertiary-text: 139, 141, 152;
+
+    --color-toast-success-background: 46, 46, 46;
+    --color-toast-error-background: 46, 46, 46;
+    --color-toast-warning-background: 46, 46, 46;
+    --color-toast-info-background: 46, 46, 46;
+    --color-toast-loading-background: 46, 46, 46;
+
+    --color-toast-success-border: 42, 126, 59;
+    --color-toast-error-border: 100, 23, 35;
+    --color-toast-warning-border: 79, 52, 34;
+    --color-toast-info-border: 58, 91, 199;
+    --color-toast-loading-border: 96, 100, 108;
+  }
+
+  [data-theme="dark-contrast"] {
+    --color-text-100: 250, 250, 250; /* primary text */
+    --color-text-200: 241, 241, 241; /* secondary text */
+    --color-text-300: 212, 212, 212; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light"],
+  [data-theme="dark"],
+  [data-theme="light-contrast"],
+  [data-theme="dark-contrast"] {
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: none;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  color: rgba(var(--color-text-100));
+}
+
+/* scrollbar style */
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: none;
+  }
+  .vertical-scrollbar,
+  .horizontal-scrollbar {
+    scrollbar-width: initial;
+    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
+  }
+  .vertical-scrollbar:hover,
+  .horizontal-scrollbar:hover {
+    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
+  }
+  .vertical-scrollbar:active,
+  .horizontal-scrollbar:active {
+    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
+  }
+}
+
+.vertical-scrollbar {
+  overflow-y: auto;
+}
+.horizontal-scrollbar {
+  overflow-x: auto;
+}
+.vertical-scrollbar::-webkit-scrollbar,
+.horizontal-scrollbar::-webkit-scrollbar {
+  display: block;
+}
+.vertical-scrollbar::-webkit-scrollbar-track,
+.horizontal-scrollbar::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 9999px;
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb,
+.horizontal-scrollbar::-webkit-scrollbar-thumb {
+  background-clip: padding-box;
+  background-color: rgba(96, 100, 108, 0.1);
+  border-radius: 9999px;
+}
+.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
+.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(96, 100, 108, 0.25);
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
+.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(96, 100, 108, 0.5);
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb:active,
+.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
+  background-color: rgba(96, 100, 108, 0.7);
+}
+.vertical-scrollbar::-webkit-scrollbar-corner,
+.horizontal-scrollbar::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
+  margin-top: 44px;
+}
+
+/* scrollbar sm size */
+.scrollbar-sm::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
+}
+.scrollbar-sm::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
+}
+/* scrollbar md size */
+.scrollbar-md::-webkit-scrollbar {
+  height: 14px;
+  width: 14px;
+}
+.scrollbar-md::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
+}
+/* scrollbar lg size */
+
+.scrollbar-lg::-webkit-scrollbar {
+  height: 16px;
+  width: 16px;
+}
+.scrollbar-lg::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+}
+/* end scrollbar style */
+
+/* progress bar */
+.progress-bar {
+  fill: currentColor;
+  color: rgba(var(--color-sidebar-background-100));
+}
+
+::-webkit-input-placeholder,
+::placeholder,
+:-ms-input-placeholder {
+  color: rgb(var(--color-text-400));
+}

admin/app/image/form.tsx

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

admin/app/image/layout.tsx

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

admin/app/image/page.tsx

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

admin/app/layout.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { ReactNode } from "react";
+import { ThemeProvider, useTheme } from "next-themes";
+import { SWRConfig } from "swr";
+// ui
+import { Toast } from "@plane/ui";
+// constants
+import { SWR_CONFIG } from "@/constants/swr-config";
+// helpers
+import { ASSET_PREFIX, resolveGeneralTheme } from "@/helpers/common.helper";
+// lib
+import { InstanceProvider } from "@/lib/instance-provider";
+import { StoreProvider } from "@/lib/store-provider";
+import { UserProvider } from "@/lib/user-provider";
+// styles
+import "./globals.css";
+
+const ToastWithTheme = () => {
+  const { resolvedTheme } = useTheme();
+  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  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={SWR_CONFIG}>
+            <StoreProvider>
+              <InstanceProvider>
+                <UserProvider>{children}</UserProvider>
+              </InstanceProvider>
+            </StoreProvider>
+          </SWRConfig>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

admin/app/page.tsx

@@ -0,0 +1,30 @@
+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 issues, 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 issues, 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, issue tracking, agile, scrum, kanban, collaboration",
+  twitter: {
+    site: "@planepowers",
+  },
+};
+
+export default async function LoginPage() {
+  return (
+    <DefaultLayout>
+      <InstanceSignInForm />
+    </DefaultLayout>
+  );
+}

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

@@ -0,0 +1,70 @@
+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 "@/helpers/authentication.helper";
+// 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

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

admin/ce/components/common/index.ts

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

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

@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+// icons
+import { SquareArrowOutUpRight } from "lucide-react";
+// ui
+import { getButtonStyling } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+export const UpgradeButton: React.FC = () => (
+  <a href="https://plane.so/one" target="_blank" className={cn(getButtonStyling("primary", "sm"))}>
+    Available on One
+    <SquareArrowOutUpRight className="h-3.5 w-3.5 p-0.5" />
+  </a>
+);

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

@@ -0,0 +1,138 @@
+"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";
+// ui
+import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
+// helpers
+import { WEB_BASE_URL, cn } from "@/helpers/common.helper";
+// hooks
+import { useTheme } from "@/hooks/store";
+// assets
+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

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

@@ -0,0 +1,56 @@
+"use client";
+
+import { FC, useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/helpers";
+// 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-dropdown.tsx

@@ -1,20 +1,24 @@
+"use client";
+
 import { Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme as useNextTheme } from "next-themes";
 import { LogOut, UserCog2, Palette } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
-// plane internal packages
-import { API_BASE_URL } from "@plane/constants";
-import { AuthService } from "@plane/services";
+// plane ui
 import { Avatar } from "@plane/ui";
-import { getFileURL, cn } from "@plane/utils";
+// helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+import { getFileURL } from "@/helpers/file.helper";
 // hooks
 import { useTheme, useUser } from "@/hooks/store";
+// services
+import { AuthService } from "@/services/auth.service";
 
 // service initialization
 const authService = new AuthService();
 
-export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
+export const SidebarDropdown = observer(() => {
   // store hooks
   const { isSidebarCollapsed } = useTheme();
   const { currentUser, signOut } = useUser();
@@ -33,20 +37,20 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   const getSidebarMenuItems = () => (
     <Menu.Items
       className={cn(
-        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-subtle rounded-md border border-subtle bg-surface-1 px-1 py-2 text-11 shadow-lg outline-none",
+        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none",
         {
           "left-4": isSidebarCollapsed,
         }
       )}
     >
       <div className="flex flex-col gap-2.5 pb-2">
-        <span className="px-2 text-secondary truncate">{currentUser?.email}</span>
+        <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
       </div>
       <div className="py-2">
         <Menu.Item
           as="button"
           type="button"
-          className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
+          className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
           onClick={handleThemeSwitch}
         >
           <Palette className="h-4 w-4 stroke-[1.5]" />
@@ -59,7 +63,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
           <Menu.Item
             as="button"
             type="submit"
-            className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
+            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
           >
             <LogOut className="h-4 w-4 stroke-[1.5]" />
             Sign out
@@ -71,14 +75,14 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
 
   useEffect(() => {
     if (csrfToken === undefined)
-      void authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
   }, [csrfToken]);
 
   return (
-    <div className="flex max-h-header items-center gap-x-5 gap-y-2 border-b border-subtle px-4 py-2.5">
+    <div className="flex max-h-[3.75rem] items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
       <div className="h-full w-full truncate">
         <div
-          className={`flex flex-grow items-center gap-x-2 truncate rounded-sm ${
+          className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
             isSidebarCollapsed ? "justify-center" : ""
           }`}
         >
@@ -88,8 +92,8 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
                 "cursor-default": !isSidebarCollapsed,
               })}
             >
-              <div className="flex size-8 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
-                <UserCog2 className="size-5 text-primary" />
+              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
+                <UserCog2 className="h-5 w-5 text-custom-text-200" />
               </div>
             </Menu.Button>
             {isSidebarCollapsed && (
@@ -109,7 +113,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
 
           {!isSidebarCollapsed && (
             <div className="flex w-full gap-2">
-              <h4 className="grow truncate text-body-md-medium text-primary">Instance admin</h4>
+              <h4 className="grow truncate text-base font-medium text-custom-text-200">Instance admin</h4>
             </div>
           )}
         </div>
@@ -123,7 +127,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
               src={getFileURL(currentUser.avatar_url)}
               size={24}
               shape="square"
-              className="!text-body-sm-medium"
+              className="!text-base"
             />
           </Menu.Button>
 

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

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

@@ -0,0 +1,104 @@
+"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";
+import { Tooltip } from "@plane/ui";
+// hooks
+import { cn } from "@/helpers/common.helper";
+import { useTheme } from "@/hooks/store";
+// helpers
+
+const INSTANCE_ADMIN_LINKS = [
+  {
+    Icon: Cog,
+    name: "General",
+    description: "Identify your instances and get key details",
+    href: `/general/`,
+  },
+  {
+    Icon: Mail,
+    name: "Email",
+    description: "Set up emails to your users",
+    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

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

@@ -0,0 +1,29 @@
+import { FC } from "react";
+import { Info, X } from "lucide-react";
+// helpers
+import { TAuthErrorInfo } from "@/helpers/authentication.helper";
+
+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

@@ -0,0 +1,56 @@
+"use client";
+
+import { FC } from "react";
+// helpers
+import { cn } from "helpers/common.helper";
+
+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

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

@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { Settings2 } from "lucide-react";
+// types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// 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

@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { Settings2 } from "lucide-react";
+// types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// 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

@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { Settings2 } from "lucide-react";
+// types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// 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

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

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

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

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

@@ -0,0 +1,21 @@
+import { cn } from "@/helpers/common.helper";
+
+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/confirm-discard-modal.tsx

@@ -1,9 +1,11 @@
+"use client";
+
 import React from "react";
 import Link from "next/link";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button, getButtonStyling } from "@plane/propel/button";
+import { Button, getButtonStyling } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -11,7 +13,7 @@ type Props = {
   onDiscardHref: string;
 };
 
-export function ConfirmDiscardModal(props: Props) {
+export const ConfirmDiscardModal: React.FC<Props> = (props) => {
   const { isOpen, handleClose, onDiscardHref } = props;
 
   return (
@@ -26,7 +28,7 @@ export function ConfirmDiscardModal(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-10 overflow-y-auto">
           <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-32">
@@ -39,15 +41,15 @@ export function ConfirmDiscardModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[30rem]">
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-tertiary">
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-300">
                         You have unsaved changes
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-13 text-placeholder">
+                        <p className="text-sm text-custom-text-400">
                           Changes you made will be lost if you go back. Do you wish to go back?
                         </p>
                       </div>
@@ -55,10 +57,10 @@ export function ConfirmDiscardModal(props: Props) {
                   </div>
                 </div>
                 <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
-                  <Button variant="secondary" size="lg" onClick={handleClose}>
+                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
                     Keep editing
                   </Button>
-                  <Link href={onDiscardHref} className={getButtonStyling("primary", "base")}>
+                  <Link href={onDiscardHref} className={getButtonStyling("primary", "sm")}>
                     Go back
                   </Link>
                 </div>
@@ -69,4 +71,4 @@ export function ConfirmDiscardModal(props: Props) {
       </Dialog>
     </Transition.Root>
   );
-}
+};

admin/core/components/common/controller-input.tsx

@@ -1,18 +1,20 @@
+"use client";
+
 import React, { useState } from "react";
-import type { Control } from "react-hook-form";
-import { Controller } from "react-hook-form";
+import { Controller, Control } from "react-hook-form";
 // icons
 import { Eye, EyeOff } from "lucide-react";
-// plane internal packages
+// ui
 import { Input } from "@plane/ui";
-import { cn } from "@plane/utils";
+// helpers
+import { cn } from "@/helpers/common.helper";
 
 type Props = {
   control: Control<any>;
   type: "text" | "password";
   name: string;
   label: string;
-  description?: string | React.ReactNode;
+  description?: string | JSX.Element;
   placeholder: string;
   error: boolean;
   required: boolean;
@@ -22,20 +24,22 @@ export type TControllerInputFormField = {
   key: string;
   type: "text" | "password";
   label: string;
-  description?: string | React.ReactNode;
+  description?: string | JSX.Element;
   placeholder: string;
   error: boolean;
   required: boolean;
 };
 
-export function ControllerInput(props: Props) {
+export const ControllerInput: React.FC<Props> = (props) => {
   const { name, control, type, label, description, placeholder, error, required } = props;
   // states
   const [showPassword, setShowPassword] = useState(false);
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-13 text-tertiary">{label}</h4>
+      <h4 className="text-sm text-custom-text-300">
+        {label}
+      </h4>
       <div className="relative">
         <Controller
           control={control}
@@ -61,7 +65,7 @@ export function ControllerInput(props: Props) {
           (showPassword ? (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
+              className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
               onClick={() => setShowPassword(false)}
             >
               <EyeOff className="h-4 w-4" />
@@ -69,14 +73,14 @@ export function ControllerInput(props: Props) {
           ) : (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
+              className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
               onClick={() => setShowPassword(true)}
             >
               <Eye className="h-4 w-4" />
             </button>
           ))}
       </div>
-      {description && <p className="pt-0.5 text-11 text-tertiary">{description}</p>}
+      {description && <p className="pt-0.5 text-xs text-custom-text-300">{description}</p>}
     </div>
   );
-}
+};

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

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

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

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

@@ -0,0 +1,17 @@
+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/page-header.tsx

@@ -1,9 +1,11 @@
+"use client";
+
 type TPageHeader = {
   title?: string;
   description?: string;
 };
 
-export function PageHeader(props: TPageHeader) {
+export const PageHeader: React.FC<TPageHeader> = (props) => {
   const { title = "God Mode - Plane", description = "Plane god mode" } = props;
 
   return (
@@ -12,4 +14,4 @@ export function PageHeader(props: TPageHeader) {
       <meta name="description" content={description} />
     </>
   );
-}
+};

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

@@ -0,0 +1,94 @@
+"use client";
+
+import { FC, useMemo } from "react";
+// import { CircleCheck } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import {
+  E_PASSWORD_STRENGTH,
+  // PASSWORD_CRITERIA,
+  getPasswordStrength,
+} from "@/helpers/password.helper";
+
+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

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

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

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

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

@@ -0,0 +1,359 @@
+"use client";
+
+import { FC, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+// icons
+import { Eye, EyeOff } from "lucide-react";
+// ui
+import { Button, Checkbox, Input, Spinner } from "@plane/ui";
+// components
+import { Banner, PasswordStrengthMeter } from "@/components/common";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
+// services
+import { AuthService } from "@/services/auth.service";
+
+// 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://docs.plane.so/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

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