feat: init

apps/admin/.env.example

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

apps/admin/.eslintignore

@@ -0,0 +1,12 @@
+.next/*
+out/*
+public/*
+dist/*
+node_modules/*
+.turbo/*
+.env*
+.env
+.env.local
+.env.development
+.env.production
+.env.test

apps/admin/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/next.js"],
+  rules: {
+    "no-duplicate-imports": "off",
+    "import/no-duplicates": ["error", { "prefer-inline": false }],
+    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+    "@typescript-eslint/no-import-type-side-effects": "error",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        prefer: "type-imports",
+        fixStyle: "separate-type-imports",
+        disallowTypeAnnotations: false,
+      },
+    ],
+  },
+};

apps/admin/.prettierignore

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

apps/admin/.prettierrc

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

apps/admin/Dockerfile.admin

@@ -0,0 +1,103 @@
+# syntax=docker/dockerfile:1.7
+FROM node:22-alpine AS base
+
+# Setup pnpm package manager with corepack and configure global bin directory for caching
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+# *****************************************************************************
+# STAGE 1: Build the project
+# *****************************************************************************
+FROM base AS builder
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+ARG TURBO_VERSION=2.5.6
+RUN corepack enable pnpm && pnpm add -g turbo@${TURBO_VERSION}
+COPY . .
+
+RUN turbo prune --scope=admin --docker
+
+# *****************************************************************************
+# STAGE 2: Install dependencies & build the project
+# *****************************************************************************
+FROM base AS installer
+
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
+RUN corepack enable pnpm
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
+
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store
+
+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 pnpm turbo run build --filter=admin
+
+# *****************************************************************************
+# STAGE 3: Copy the project and start it
+# *****************************************************************************
+FROM base AS runner
+WORKDIR /app
+
+# Don't run production as root
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=installer /app/apps/admin/.next/standalone ./
+COPY --from=installer /app/apps/admin/.next/static ./apps/admin/.next/static
+COPY --from=installer /app/apps/admin/public ./apps/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
+
+CMD ["node", "apps/admin/server.js"]

apps/admin/Dockerfile.dev

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

apps/admin/app/(all)/(dashboard)/ai/form.tsx

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

apps/admin/app/(all)/(dashboard)/ai/layout.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Artificial Intelligence Settings - God Mode",
+};
+
+export default function AILayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

apps/admin/app/(all)/(dashboard)/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;

apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx

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

apps/admin/app/(all)/(dashboard)/authentication/github/layout.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "GitHub Authentication - God Mode",
+};
+
+export default function GitHubAuthenticationLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+// plane internal packages
+import { setPromiseToast } from "@plane/propel/toast";
+import { Loader, ToggleSwitch } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+// 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);
+      });
+  };
+
+  const isGithubEnabled = enableGithubConfig === "1";
+
+  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">
+          <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={isGithubEnabled}
+                onChange={() => {
+                  updateConfig("IS_GITHUB_ENABLED", isGithubEnabled ? "0" : "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;

apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx

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

apps/admin/app/(all)/(dashboard)/authentication/gitlab/layout.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "GitLab Authentication - God Mode",
+};
+
+export default function GitlabAuthenticationLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

apps/admin/app/(all)/(dashboard)/authentication/gitlab/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 { setPromiseToast } from "@plane/propel/toast";
+import { Loader, ToggleSwitch } from "@plane/ui";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+// 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 (
+    <>
+      <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={() => {
+                  if (Boolean(parseInt(enableGitlabConfig)) === true) {
+                    updateConfig("IS_GITLAB_ENABLED", "0");
+                  } else {
+                    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;

apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx

@@ -0,0 +1,235 @@
+"use client";
+import type { FC } from "react";
+import { useState } from "react";
+import { isEmpty } from "lodash-es";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { Monitor } from "lucide-react";
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import type { TControllerInputFormField } from "@/components/common/controller-input";
+import { ControllerInput } from "@/components/common/controller-input";
+import type { TCopyField } from "@/components/common/copy-field";
+import { CopyField } from "@/components/common/copy-field";
+// 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_COMMON_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>
+      ),
+    },
+  ];
+
+  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
+    {
+      key: "Callback_URI",
+      label: "Callback URI",
+      url: `${originURL}/auth/google/callback/`,
+      description: (
+        <p>
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Redirect URI</CodeBlock>{" "}
+          field. For this OAuth client{" "}
+          <a
+            href="https://console.cloud.google.com/apis/credentials/oauthclient"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            here.
+          </a>
+        </p>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GoogleConfigFormValues) => {
+    const payload: Partial<GoogleConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your Google authentication is configured. You should test it now.",
+        });
+        reset({
+          GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
+          GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_CLIENT_SECRET")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (isDirty) {
+      e.preventDefault();
+      setIsDiscardChangesModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDiscardModal
+        isOpen={isDiscardChangesModalOpen}
+        onDiscardHref="/authentication"
+        handleClose={() => setIsDiscardChangesModalOpen(false)}
+      />
+      <div className="flex flex-col gap-8">
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">Google-provided details for Plane</div>
+            {GOOGLE_FORM_FIELDS.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
+                </Button>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
+                  Go back
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
+            <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
+
+            <div className="flex flex-col gap-y-4">
+              {/* common service details */}
+              <div className="flex flex-col gap-y-4 px-6 py-4 bg-custom-background-80 rounded-lg">
+                {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
+                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                ))}
+              </div>
+
+              {/* web service details */}
+              <div className="flex flex-col rounded-lg overflow-hidden">
+                <div className="px-6 py-3 bg-custom-background-80/60 font-medium text-xs uppercase flex items-center gap-x-3 text-custom-text-200">
+                  <Monitor className="w-3 h-3" />
+                  Web
+                </div>
+                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                  {GOOGLE_SERVICE_DETAILS.map((field) => (
+                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

apps/admin/app/(all)/(dashboard)/authentication/google/layout.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Google Authentication - God Mode",
+};
+
+export default function GoogleAuthenticationLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import useSWR from "swr";
+import { setPromiseToast } from "@plane/propel/toast";
+import { Loader, ToggleSwitch } from "@plane/ui";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+// 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 (
+    <>
+      <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={() => {
+                  if (Boolean(parseInt(enableGoogleConfig)) === true) {
+                    updateConfig("IS_GOOGLE_ENABLED", "0");
+                  } else {
+                    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;

apps/admin/app/(all)/(dashboard)/authentication/layout.tsx

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

apps/admin/app/(all)/(dashboard)/authentication/page.tsx

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

apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx

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

apps/admin/app/(all)/(dashboard)/email/layout.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { Metadata } from "next";
+
+interface EmailLayoutProps {
+  children: ReactNode;
+}
+
+export const metadata: Metadata = {
+  title: "Email Settings - God Mode",
+};
+
+export default function EmailLayout({ children }: EmailLayoutProps) {
+  return <>{children}</>;
+}

apps/admin/app/(all)/(dashboard)/email/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Loader, ToggleSwitch } from "@plane/ui";
+// hooks
+import { useInstance } from "@/hooks/store";
+// components
+import { InstanceEmailForm } from "./email-config-form";
+
+const InstanceEmailPage: React.FC = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, disableEmail } = useInstance();
+
+  const { isLoading } = useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSMTPEnabled, setIsSMTPEnabled] = useState(false);
+
+  const handleToggle = async () => {
+    if (isSMTPEnabled) {
+      setIsSubmitting(true);
+      try {
+        await disableEmail();
+        setIsSMTPEnabled(false);
+        setToast({
+          title: "Email feature disabled",
+          message: "Email feature has been disabled",
+          type: TOAST_TYPE.SUCCESS,
+        });
+      } catch (_error) {
+        setToast({
+          title: "Error disabling email",
+          message: "Failed to disable email feature. Please try again.",
+          type: TOAST_TYPE.ERROR,
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+      return;
+    }
+    setIsSMTPEnabled(true);
+  };
+  useEffect(() => {
+    if (formattedConfig) {
+      setIsSMTPEnabled(formattedConfig.ENABLE_SMTP === "1");
+    }
+  }, [formattedConfig]);
+
+  return (
+    <>
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="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>
+          {isLoading ? (
+            <Loader>
+              <Loader.Item width="24px" height="16px" className="rounded-full" />
+            </Loader>
+          ) : (
+            <ToggleSwitch value={isSMTPEnabled} onChange={handleToggle} size="sm" disabled={isSubmitting} />
+          )}
+        </div>
+        {isSMTPEnabled && !isLoading && (
+          <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;

apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx

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

apps/admin/app/(all)/(dashboard)/general/form.tsx

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

apps/admin/app/(all)/(dashboard)/general/intercom.tsx

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

apps/admin/app/(all)/(dashboard)/general/layout.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "General Settings - God Mode",
+};
+
+export default function GeneralLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

apps/admin/app/(all)/(dashboard)/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);

apps/admin/app/(all)/(dashboard)/header.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+import { Menu, Settings } from "lucide-react";
+// icons
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+// hooks
+import { useTheme } from "@/hooks/store";
+
+export const HamburgerToggle: 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>
+  );
+});
+
+export const AdminHeader: FC = observer(() => {
+  const pathName = usePathname();
+
+  const getHeaderTitle = (pathName: string) => {
+    switch (pathName) {
+      case "general":
+        return "General";
+      case "ai":
+        return "Artificial Intelligence";
+      case "email":
+        return "Email";
+      case "authentication":
+        return "Authentication";
+      case "image":
+        return "Image";
+      case "google":
+        return "Google";
+      case "github":
+        return "GitHub";
+      case "gitlab":
+        return "GitLab";
+      case "workspace":
+        return "Workspace";
+      case "create":
+        return "Create";
+      default:
+        return pathName.toUpperCase();
+    }
+  };
+
+  // Function to dynamically generate breadcrumb items based on pathname
+  const generateBreadcrumbItems = (pathname: string) => {
+    const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
+    pathSegments.pop();
+
+    let currentUrl = "";
+    const breadcrumbItems = pathSegments.map((segment) => {
+      currentUrl += "/" + segment;
+      return {
+        title: getHeaderTitle(segment),
+        href: currentUrl,
+      };
+    });
+    return breadcrumbItems;
+  };
+
+  const breadcrumbItems = generateBreadcrumbItems(pathName);
+
+  return (
+    <div className="relative z-10 flex h-header 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">
+        <HamburgerToggle />
+        {breadcrumbItems.length >= 0 && (
+          <div>
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink
+                    href="/general/"
+                    label="Settings"
+                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+              {breadcrumbItems.map(
+                (item) =>
+                  item.title && (
+                    <Breadcrumbs.Item
+                      key={item.title}
+                      component={<BreadcrumbLink href={item.href} label={item.title} />}
+                    />
+                  )
+              )}
+            </Breadcrumbs>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

apps/admin/app/(all)/(dashboard)/image/form.tsx

@@ -0,0 +1,81 @@
+"use client";
+import type { FC } from "react";
+import { useForm } from "react-hook-form";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
+// components
+import { ControllerInput } from "@/components/common/controller-input";
+// 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>
+  );
+};

apps/admin/app/(all)/(dashboard)/image/layout.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { Metadata } from "next";
+
+interface ImageLayoutProps {
+  children: ReactNode;
+}
+
+export const metadata: Metadata = {
+  title: "Images Settings - God Mode",
+};
+
+export default function ImageLayout({ children }: ImageLayoutProps) {
+  return <>{children}</>;
+}

apps/admin/app/(all)/(dashboard)/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;

apps/admin/app/(all)/(dashboard)/layout.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { NewUserPopup } from "@/components/new-user-popup";
+// hooks
+import { useUser } from "@/hooks/store";
+// local components
+import { AdminHeader } from "./header";
+import { AdminSidebar } from "./sidebar";
+
+type TAdminLayout = {
+  children: ReactNode;
+};
+
+const AdminLayout: FC<TAdminLayout> = (props) => {
+  const { children } = props;
+  // router
+  const router = useRouter();
+  // store hooks
+  const { isUserLoggedIn } = useUser();
+
+  useEffect(() => {
+    if (isUserLoggedIn === false) {
+      router.push("/");
+    }
+  }, [router, isUserLoggedIn]);
+
+  if (isUserLoggedIn === undefined) {
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+  }
+
+  if (isUserLoggedIn) {
+    return (
+      <div className="relative flex h-screen w-screen overflow-hidden">
+        <AdminSidebar />
+        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+          <AdminHeader />
+          <div className="h-full w-full overflow-hidden">{children}</div>
+        </main>
+        <NewUserPopup />
+      </div>
+    );
+  }
+
+  return <></>;
+};
+
+export default observer(AdminLayout);

apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx

@@ -0,0 +1,147 @@
+"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";
+import { Avatar } from "@plane/ui";
+import { getFileURL, cn } from "@plane/utils";
+// hooks
+import { useTheme, useUser } from "@/hooks/store";
+
+// service initialization
+const authService = new AuthService();
+
+export const AdminSidebarDropdown = observer(() => {
+  // store hooks
+  const { isSidebarCollapsed } = useTheme();
+  const { currentUser, signOut } = useUser();
+  // hooks
+  const { resolvedTheme, setTheme } = useNextTheme();
+  // state
+  const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
+
+  const handleThemeSwitch = () => {
+    const newTheme = resolvedTheme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+  };
+
+  const handleSignOut = () => signOut();
+
+  const getSidebarMenuItems = () => (
+    <Menu.Items
+      className={cn(
+        "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-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
+      </div>
+      <div className="py-2">
+        <Menu.Item
+          as="button"
+          type="button"
+          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]" />
+          Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
+        </Menu.Item>
+      </div>
+      <div className="py-2">
+        <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={handleSignOut}>
+          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+          <Menu.Item
+            as="button"
+            type="submit"
+            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
+          </Menu.Item>
+        </form>
+      </div>
+    </Menu.Items>
+  );
+
+  useEffect(() => {
+    if (csrfToken === undefined)
+      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-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 py-1 ${
+            isSidebarCollapsed ? "justify-center" : ""
+          }`}
+        >
+          <Menu as="div" className="flex-shrink-0">
+            <Menu.Button
+              className={cn("grid place-items-center outline-none", {
+                "cursor-default": !isSidebarCollapsed,
+              })}
+            >
+              <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 && (
+              <Transition
+                as={Fragment}
+                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"
+              >
+                {getSidebarMenuItems()}
+              </Transition>
+            )}
+          </Menu>
+
+          {!isSidebarCollapsed && (
+            <div className="flex w-full gap-2">
+              <h4 className="grow truncate text-base font-medium text-custom-text-200">Instance admin</h4>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!isSidebarCollapsed && currentUser && (
+        <Menu as="div" className="relative flex-shrink-0">
+          <Menu.Button className="grid place-items-center outline-none">
+            <Avatar
+              name={currentUser.display_name}
+              src={getFileURL(currentUser.avatar_url)}
+              size={24}
+              shape="square"
+              className="!text-base"
+            />
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            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"
+          >
+            {getSidebarMenuItems()}
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});

apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import type { FC } from "react";
+import { useState, useRef } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { ExternalLink, HelpCircle, MoveLeft } from "lucide-react";
+import { Transition } from "@headlessui/react";
+// plane internal packages
+import { WEB_BASE_URL } from "@plane/constants";
+import { DiscordIcon, GithubIcon, PageIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "@plane/utils";
+// hooks
+import { useTheme } from "@/hooks/store";
+// assets
+// eslint-disable-next-line import/order
+import packageJson from "package.json";
+
+const helpOptions = [
+  {
+    name: "Documentation",
+    href: "https://docs.plane.so/",
+    Icon: PageIcon,
+  },
+  {
+    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 AdminSidebarHelpSection: 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" width={14} height={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>
+  );
+});

apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
+// plane internal packages
+import { WorkspaceIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "@plane/utils";
+// hooks
+import { useTheme } from "@/hooks/store";
+
+const INSTANCE_ADMIN_LINKS = [
+  {
+    Icon: Cog,
+    name: "General",
+    description: "Identify your instances and get key details.",
+    href: `/general/`,
+  },
+  {
+    Icon: WorkspaceIcon,
+    name: "Workspaces",
+    description: "Manage all workspaces on this instance.",
+    href: `/workspace/`,
+  },
+  {
+    Icon: Mail,
+    name: "Email",
+    description: "Configure your SMTP controls.",
+    href: `/email/`,
+  },
+  {
+    Icon: Lock,
+    name: "Authentication",
+    description: "Configure authentication modes.",
+    href: `/authentication/`,
+  },
+  {
+    Icon: BrainCog,
+    name: "Artificial intelligence",
+    description: "Configure your OpenAI creds.",
+    href: `/ai/`,
+  },
+  {
+    Icon: Image,
+    name: "Images in Plane",
+    description: "Allow third-party image libraries.",
+    href: `/image/`,
+  },
+];
+
+export const AdminSidebarMenu = 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>
+  );
+});

apps/admin/app/(all)/(dashboard)/sidebar.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import type { FC } from "react";
+import { useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// hooks
+import { useTheme } from "@/hooks/store";
+// components
+import { AdminSidebarDropdown } from "./sidebar-dropdown";
+import { AdminSidebarHelpSection } from "./sidebar-help-section";
+import { AdminSidebarMenu } from "./sidebar-menu";
+
+export const AdminSidebar: 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">
+        <AdminSidebarDropdown />
+        <AdminSidebarMenu />
+        <AdminSidebarHelpSection />
+      </div>
+    </div>
+  );
+});

apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx

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

apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx

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

apps/admin/app/(all)/(dashboard)/workspace/layout.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Workspace Management - God Mode",
+};
+
+export default function WorkspaceManagementLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

apps/admin/app/(all)/(dashboard)/workspace/page.tsx

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

apps/admin/app/(all)/(home)/auth-banner.tsx

@@ -0,0 +1,29 @@
+import type { FC } from "react";
+import { Info, X } from "lucide-react";
+// plane constants
+import type { TAdminAuthErrorInfo } from "@plane/constants";
+
+type TAuthBanner = {
+  bannerData: TAdminAuthErrorInfo | undefined;
+  handleBannerData?: (bannerData: TAdminAuthErrorInfo | 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>
+  );
+};

apps/admin/app/(all)/(home)/auth-header.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import Link from "next/link";
+import { PlaneLockup } from "@plane/propel/icons";
+
+export const AuthHeader = () => (
+  <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+    <Link href="/">
+      <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+    </Link>
+  </div>
+);

apps/admin/app/(all)/(home)/auth-helpers.tsx

@@ -0,0 +1,163 @@
+import type { ReactNode } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { KeyRound, Mails } from "lucide-react";
+// plane packages
+import type { TAdminAuthErrorInfo } from "@plane/constants";
+import { SUPPORT_EMAIL, EAdminAuthErrorCodes } from "@plane/constants";
+import type { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
+import { resolveGeneralTheme } from "@plane/utils";
+// components
+import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
+import { GithubConfiguration } from "@/components/authentication/github-config";
+import { GitlabConfiguration } from "@/components/authentication/gitlab-config";
+import { GoogleConfiguration } from "@/components/authentication/google-config";
+import { PasswordLoginConfiguration } from "@/components/authentication/password-config-switch";
+// images
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+import GoogleLogo from "@/public/logos/google-logo.svg";
+
+export enum EErrorAlertType {
+  BANNER_ALERT = "BANNER_ALERT",
+  INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
+  INLINE_EMAIL = "INLINE_EMAIL",
+  INLINE_PASSWORD = "INLINE_PASSWORD",
+  INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
+}
+
+const errorCodeMessages: {
+  [key in EAdminAuthErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
+} = {
+  // admin
+  [EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST]: {
+    title: `Admin already exists`,
+    message: () => `Admin already exists. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
+    title: `Email, password and first name required`,
+    message: () => `Email, password and first name required. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.INVALID_ADMIN_EMAIL]: {
+    title: `Invalid admin email`,
+    message: () => `Invalid admin email. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.INVALID_ADMIN_PASSWORD]: {
+    title: `Invalid admin password`,
+    message: () => `Invalid admin password. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
+    title: `Admin user already exists`,
+    message: () => (
+      <div>
+        Admin user already exists.&nbsp;
+        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+          Sign In
+        </Link>
+        &nbsp;now.
+      </div>
+    ),
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
+    title: `Admin user does not exist`,
+    message: () => (
+      <div>
+        Admin user does not exist.&nbsp;
+        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+          Sign In
+        </Link>
+        &nbsp;now.
+      </div>
+    ),
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_DEACTIVATED]: {
+    title: `User account deactivated`,
+    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
+  },
+};
+
+export const authErrorHandler = (
+  errorCode: EAdminAuthErrorCodes,
+  email?: string | undefined
+): TAdminAuthErrorInfo | undefined => {
+  const bannerAlertErrorCodes = [
+    EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST,
+    EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
+    EAdminAuthErrorCodes.INVALID_ADMIN_EMAIL,
+    EAdminAuthErrorCodes.INVALID_ADMIN_PASSWORD,
+    EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
+    EAdminAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED,
+    EAdminAuthErrorCodes.ADMIN_USER_ALREADY_EXIST,
+    EAdminAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
+    EAdminAuthErrorCodes.ADMIN_USER_DEACTIVATED,
+  ];
+
+  if (bannerAlertErrorCodes.includes(errorCode))
+    return {
+      type: EErrorAlertType.BANNER_ALERT,
+      code: errorCode,
+      title: errorCodeMessages[errorCode]?.title || "Error",
+      message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
+    };
+
+  return undefined;
+};
+
+export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
+  disabled,
+  updateConfig,
+  resolvedTheme,
+}) => [
+  {
+    key: "unique-codes",
+    name: "Unique codes",
+    description:
+      "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
+    icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "passwords-login",
+    name: "Passwords",
+    description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
+    icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "google",
+    name: "Google",
+    description: "Allow members to log in or sign up for Plane with their Google accounts.",
+    icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+    config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "github",
+    name: "GitHub",
+    description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
+    icon: (
+      <Image
+        src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+        height={20}
+        width={20}
+        alt="GitHub Logo"
+      />
+    ),
+    config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "gitlab",
+    name: "GitLab",
+    description: "Allow members to log in or sign up to plane with their GitLab accounts.",
+    icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+];

apps/admin/app/(all)/(home)/layout.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+      {children}
+    </div>
+  );
+}

apps/admin/app/(all)/(home)/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { InstanceFailureView } from "@/components/instance/failure";
+import { InstanceSetupForm } from "@/components/instance/setup-form";
+// hooks
+import { useInstance } from "@/hooks/store";
+// components
+import { InstanceSignInForm } from "./sign-in-form";
+
+const HomePage = () => {
+  // store hooks
+  const { instance, error } = useInstance();
+
+  // if instance is not fetched, show loading
+  if (!instance && !error) {
+    return (
+      <div className="flex items-center justify-center h-screen w-full">
+        <LogoSpinner />
+      </div>
+    );
+  }
+
+  // if instance fetch fails, show failure view
+  if (error) {
+    return <InstanceFailureView />;
+  }
+
+  // if instance is fetched and setup is not done, show setup form
+  if (instance && !instance?.is_setup_done) {
+    return <InstanceSetupForm />;
+  }
+
+  // if instance is fetched and setup is done, show sign in form
+  return <InstanceSignInForm />;
+};
+
+export default observer(HomePage);

apps/admin/app/(all)/(home)/sign-in-form.tsx

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

apps/admin/app/(all)/instance.provider.tsx

@@ -0,0 +1,23 @@
+import type { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type InstanceProviderProps = {
+  children: ReactNode;
+};
+
+export const InstanceProvider: FC<InstanceProviderProps> = observer((props) => {
+  const { children } = props;
+  // store hooks
+  const { fetchInstanceInfo } = useInstance();
+  // fetching instance details
+  useSWR("INSTANCE_DETAILS", () => fetchInstanceInfo(), {
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    errorRetryCount: 0,
+  });
+
+  return <>{children}</>;
+});

apps/admin/app/(all)/layout.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { SWRConfig } from "swr";
+// providers
+import { InstanceProvider } from "./instance.provider";
+import { StoreProvider } from "./store.provider";
+import { ToastWithTheme } from "./toast";
+import { UserProvider } from "./user.provider";
+
+const DEFAULT_SWR_CONFIG = {
+  refreshWhenHidden: false,
+  revalidateIfStale: false,
+  revalidateOnFocus: false,
+  revalidateOnMount: true,
+  refreshInterval: 600000,
+  errorRetryCount: 3,
+};
+
+export default function InstanceLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+      <ToastWithTheme />
+      <SWRConfig value={DEFAULT_SWR_CONFIG}>
+        <StoreProvider>
+          <InstanceProvider>
+            <UserProvider>{children}</UserProvider>
+          </InstanceProvider>
+        </StoreProvider>
+      </SWRConfig>
+    </ThemeProvider>
+  );
+}

apps/admin/app/(all)/store.provider.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { createContext } from "react";
+// plane admin store
+import { RootStore } from "@/plane-admin/store/root.store";
+
+let rootStore = new RootStore();
+
+export const StoreContext = createContext(rootStore);
+
+function initializeStore(initialData = {}) {
+  const singletonRootStore = rootStore ?? new RootStore();
+  // If your page has Next.js data fetching methods that use a Mobx store, it will
+  // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
+  if (initialData) {
+    singletonRootStore.hydrate(initialData);
+  }
+  // For SSG and SSR always create a new store
+  if (typeof window === "undefined") return singletonRootStore;
+  // Create the store once in the client
+  if (!rootStore) rootStore = singletonRootStore;
+  return singletonRootStore;
+}
+
+export type StoreProviderProps = {
+  children: ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initialState?: any;
+};
+
+export const StoreProvider = ({ children, initialState = {} }: StoreProviderProps) => {
+  const store = initializeStore(initialState);
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+};

apps/admin/app/(all)/toast.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toast } from "@plane/propel/toast";
+import { resolveGeneralTheme } from "@plane/utils";
+
+export const ToastWithTheme = () => {
+  const { resolvedTheme } = useTheme();
+  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
+};

apps/admin/app/(all)/user.provider.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import type { FC, ReactNode } from "react";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// hooks
+import { useInstance, useTheme, useUser } from "@/hooks/store";
+
+interface IUserProvider {
+  children: ReactNode;
+}
+
+export const UserProvider: FC<IUserProvider> = observer(({ children }) => {
+  // hooks
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  const { currentUser, fetchCurrentUser } = useUser();
+  const { fetchInstanceAdmins } = useInstance();
+
+  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
+    shouldRetryOnError: false,
+  });
+
+  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
+
+  useEffect(() => {
+    const localValue = localStorage && localStorage.getItem("god_mode_sidebar_collapsed");
+    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
+    if (isSidebarCollapsed === undefined && localBoolValue != isSidebarCollapsed) toggleSidebar(localBoolValue);
+  }, [isSidebarCollapsed, currentUser, toggleSidebar]);
+
+  return <>{children}</>;
+});

apps/admin/app/error.tsx

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

apps/admin/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import type { Metadata } from "next";
+// plane imports
+import { ADMIN_BASE_PATH } from "@plane/constants";
+// styles
+import "@/styles/globals.css";
+
+export const metadata: Metadata = {
+  title: "Plane | Simple, extensible, open-source project management tool.",
+  description:
+    "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
+  openGraph: {
+    title: "Plane | Simple, extensible, open-source project management tool.",
+    description:
+      "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
+    url: "https://plane.so/",
+  },
+  keywords:
+    "software development, customer feedback, software, accelerate, code management, release management, project management, work items tracking, agile, scrum, kanban, collaboration",
+  twitter: {
+    site: "@planepowers",
+  },
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  const ASSET_PREFIX = ADMIN_BASE_PATH;
+  return (
+    <html lang="en">
+      <head>
+        <link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}/favicon/apple-touch-icon.png`} />
+        <link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}/favicon/favicon-32x32.png`} />
+        <link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}/favicon/favicon-16x16.png`} />
+        <link rel="manifest" href={`${ASSET_PREFIX}/site.webmanifest.json`} />
+        <link rel="shortcut icon" href={`${ASSET_PREFIX}/favicon/favicon.ico`} />
+      </head>
+      <body className={`antialiased`}>{children}</body>
+    </html>
+  );
+}

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

@@ -0,0 +1,121 @@
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { KeyRound, Mails } from "lucide-react";
+// types
+import type {
+  TGetBaseAuthenticationModeProps,
+  TInstanceAuthenticationMethodKeys,
+  TInstanceAuthenticationModes,
+} from "@plane/types";
+import { resolveGeneralTheme } from "@plane/utils";
+// components
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
+import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
+import { GithubConfiguration } from "@/components/authentication/github-config";
+import { GitlabConfiguration } from "@/components/authentication/gitlab-config";
+import { GoogleConfiguration } from "@/components/authentication/google-config";
+import { PasswordLoginConfiguration } from "@/components/authentication/password-config-switch";
+// plane admin components
+import { UpgradeButton } from "@/plane-admin/components/common";
+// assets
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+import GoogleLogo from "@/public/logos/google-logo.svg";
+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,
+}) => [
+  {
+    key: "unique-codes",
+    name: "Unique codes",
+    description:
+      "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
+    icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "passwords-login",
+    name: "Passwords",
+    description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
+    icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "google",
+    name: "Google",
+    description: "Allow members to log in or sign up for Plane with their Google accounts.",
+    icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+    config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "github",
+    name: "GitHub",
+    description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
+    icon: (
+      <Image
+        src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+        height={20}
+        width={20}
+        alt="GitHub Logo"
+      />
+    ),
+    config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "gitlab",
+    name: "GitLab",
+    description: "Allow members to log in or sign up to plane with their GitLab accounts.",
+    icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    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}
+        />
+      ))}
+    </>
+  );
+});

apps/admin/ce/components/authentication/index.ts

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

apps/admin/ce/components/common/index.ts

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

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

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

apps/admin/ce/store/root.store.ts

@@ -0,0 +1,19 @@
+import { enableStaticRendering } from "mobx-react";
+// stores
+import { CoreRootStore } from "@/store/root.store";
+
+enableStaticRendering(typeof window === "undefined");
+
+export class RootStore extends CoreRootStore {
+  constructor() {
+    super();
+  }
+
+  hydrate(initialData: any) {
+    super.hydrate(initialData);
+  }
+
+  resetOnSignOut() {
+    super.resetOnSignOut();
+  }
+}

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

@@ -0,0 +1,56 @@
+"use client";
+
+import type { FC } from "react";
+// helpers
+import { cn } from "@plane/utils";
+
+type Props = {
+  name: string;
+  description: string;
+  icon: React.ReactNode;
+  config: React.ReactNode;
+  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>
+  );
+};

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

@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+// hooks
+import type { 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={() => {
+        const newEnableMagicLogin = Boolean(parseInt(enableMagicLogin)) === true ? "0" : "1";
+        updateConfig("ENABLE_MAGIC_LINK_LOGIN", newEnableMagicLogin);
+      }}
+      size="sm"
+      disabled={disabled}
+    />
+  );
+});

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+// hooks
+import type { 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={() => {
+        const newEnableEmailPassword = Boolean(parseInt(enableEmailPassword)) === true ? "0" : "1";
+        updateConfig("ENABLE_EMAIL_PASSWORD", newEnableEmailPassword);
+      }}
+      size="sm"
+      disabled={disabled}
+    />
+  );
+});

apps/admin/core/components/common/banner.tsx

@@ -0,0 +1,32 @@
+import type { 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>
+  );
+};

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

@@ -0,0 +1,38 @@
+"use client";
+
+import Link from "next/link";
+import { Tooltip } from "@plane/propel/tooltip";
+
+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>
+  );
+};

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

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

apps/admin/core/components/common/confirm-discard-modal.tsx

@@ -0,0 +1,74 @@
+"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";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onDiscardHref: string;
+};
+
+export const ConfirmDiscardModal: React.FC<Props> = (props) => {
+  const { isOpen, handleClose, onDiscardHref } = props;
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-32">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform 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-lg font-medium leading-6 text-custom-text-300">
+                        You have unsaved changes
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <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>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
+                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                    Keep editing
+                  </Button>
+                  <Link href={onDiscardHref} className={getButtonStyling("primary", "sm")}>
+                    Go back
+                  </Link>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

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

@@ -0,0 +1,84 @@
+"use client";
+
+import React, { useState } from "react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// icons
+import { Eye, EyeOff } from "lucide-react";
+// plane internal packages
+import { Input } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+type Props = {
+  control: Control<any>;
+  type: "text" | "password";
+  name: string;
+  label: string;
+  description?: string | React.ReactNode;
+  placeholder: string;
+  error: boolean;
+  required: boolean;
+};
+
+export type TControllerInputFormField = {
+  key: string;
+  type: "text" | "password";
+  label: string;
+  description?: string | React.ReactNode;
+  placeholder: string;
+  error: boolean;
+  required: boolean;
+};
+
+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-sm text-custom-text-300">{label}</h4>
+      <div className="relative">
+        <Controller
+          control={control}
+          name={name}
+          rules={{ required: required ? `${label} is required.` : false }}
+          render={({ field: { value, onChange, ref } }) => (
+            <Input
+              id={name}
+              name={name}
+              type={type === "password" && showPassword ? "text" : type}
+              value={value}
+              onChange={onChange}
+              ref={ref}
+              hasError={error}
+              placeholder={placeholder}
+              className={cn("w-full rounded-md font-medium", {
+                "pr-10": type === "password",
+              })}
+            />
+          )}
+        />
+        {type === "password" &&
+          (showPassword ? (
+            <button
+              tabIndex={-1}
+              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" />
+            </button>
+          ) : (
+            <button
+              tabIndex={-1}
+              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-xs text-custom-text-300">{description}</p>}
+    </div>
+  );
+};

apps/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 } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+
+type Props = {
+  label: string;
+  url: string;
+  description: string | React.ReactNode;
+};
+
+export type TCopyField = {
+  key: string;
+  label: string;
+  url: string;
+  description: string | React.ReactNode;
+};
+
+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>
+  );
+};

apps/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/propel/button";
+
+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>
+);

apps/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" ? LogoSpinnerLight : LogoSpinnerDark;
+
+  return (
+    <div className="flex items-center justify-center">
+      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+    </div>
+  );
+};

apps/admin/core/components/common/page-header.tsx

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

apps/admin/core/components/instance/failure.tsx

@@ -0,0 +1,42 @@
+"use client";
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+import { Button } from "@plane/propel/button";
+// assets
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
+import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
+import InstanceFailureImage from "@/public/instance/instance-failure.svg";
+
+export const InstanceFailureView: FC = observer(() => {
+  const { resolvedTheme } = useTheme();
+
+  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
+
+  const handleRetry = () => {
+    window.location.reload();
+  };
+
+  return (
+    <>
+      <AuthHeader />
+      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+          <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 text-center">Unable to fetch instance details.</h3>
+            <p className="font-medium text-base text-center">
+              We were unable to fetch the details of the instance. 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>
+    </>
+  );
+});

apps/admin/core/components/instance/form-header.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+export const FormHeader = ({ heading, subHeading }: { heading: string; subHeading: string }) => (
+  <div className="flex flex-col gap-1">
+    <span className="text-2xl font-semibold text-custom-text-100 leading-7">{heading}</span>
+    <span className="text-lg font-semibold text-custom-text-400 leading-7">{subHeading}</span>
+  </div>
+);

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

@@ -0,0 +1,30 @@
+"use client";
+
+import type { FC } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "@plane/propel/button";
+// 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-custom-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>
+);

apps/admin/core/components/instance/loading.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 InstanceLoading = () => {
+  const { resolvedTheme } = useTheme();
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
+
+  return (
+    <div className="flex items-center justify-center">
+      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+    </div>
+  );
+};

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

@@ -0,0 +1,355 @@
+"use client";
+
+import type { FC } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+// icons
+import { Eye, EyeOff } from "lucide-react";
+// plane internal packages
+import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { AuthService } from "@plane/services";
+import { Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
+import { getPasswordStrength } from "@plane/utils";
+// components
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
+import { Banner } from "@/components/common/banner";
+import { FormHeader } from "@/components/instance/form-header";
+
+// 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 (
+    <>
+      <AuthHeader />
+      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+          <FormHeader
+            heading="Setup your Plane Instance"
+            subHeading="Post setup you will be able to manage this Plane instance."
+          />
+          {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-custom-text-300 font-medium" htmlFor="first_name">
+                  First name <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-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-custom-text-300 font-medium" htmlFor="last_name">
+                  Last name <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-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-custom-text-300 font-medium" htmlFor="email">
+                Email <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-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-custom-text-300 font-medium" htmlFor="company_name">
+                Company name <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-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-custom-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-custom-border-100 !bg-custom-background-100 placeholder:text-custom-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>
+              )}
+              <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-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-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-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 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-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
+                Allow Plane to anonymously collect usage events.{" "}
+                <a
+                  tabIndex={-1}
+                  href="https://developers.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
+                >
+                  See More
+                </a>
+              </label>
+            </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>
+    </>
+  );
+};

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

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

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

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

apps/admin/core/hooks/store/index.ts

@@ -0,0 +1,4 @@
+export * from "./use-theme";
+export * from "./use-instance";
+export * from "./use-user";
+export * from "./use-workspace";

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

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

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

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

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

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

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

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

apps/admin/core/store/instance.store.ts

@@ -0,0 +1,218 @@
+import { set } from "lodash-es";
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// plane internal packages
+import type { TInstanceStatus } from "@plane/constants";
+import { EInstanceStatus } from "@plane/constants";
+import { InstanceService } from "@plane/services";
+import type {
+  IInstance,
+  IInstanceAdmin,
+  IInstanceConfiguration,
+  IFormattedInstanceConfiguration,
+  IInstanceInfo,
+  IInstanceConfig,
+} from "@plane/types";
+// root store
+import type { CoreRootStore } from "@/store/root.store";
+
+export interface IInstanceStore {
+  // issues
+  isLoading: boolean;
+  error: any;
+  instanceStatus: TInstanceStatus | undefined;
+  instance: IInstance | undefined;
+  config: IInstanceConfig | undefined;
+  instanceAdmins: IInstanceAdmin[] | undefined;
+  instanceConfigurations: IInstanceConfiguration[] | undefined;
+  // computed
+  formattedConfig: IFormattedInstanceConfiguration | undefined;
+  // action
+  hydrate: (data: IInstanceInfo) => void;
+  fetchInstanceInfo: () => Promise<IInstanceInfo | undefined>;
+  updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance | undefined>;
+  fetchInstanceAdmins: () => Promise<IInstanceAdmin[] | undefined>;
+  fetchInstanceConfigurations: () => Promise<IInstanceConfiguration[] | undefined>;
+  updateInstanceConfigurations: (data: Partial<IFormattedInstanceConfiguration>) => Promise<IInstanceConfiguration[]>;
+  disableEmail: () => Promise<void>;
+}
+
+export class InstanceStore implements IInstanceStore {
+  isLoading: boolean = true;
+  error: any = undefined;
+  instanceStatus: TInstanceStatus | undefined = undefined;
+  instance: IInstance | undefined = undefined;
+  config: IInstanceConfig | undefined = undefined;
+  instanceAdmins: IInstanceAdmin[] | undefined = undefined;
+  instanceConfigurations: IInstanceConfiguration[] | undefined = undefined;
+  // service
+  instanceService;
+
+  constructor(private store: CoreRootStore) {
+    makeObservable(this, {
+      // observable
+      isLoading: observable.ref,
+      error: observable.ref,
+      instanceStatus: observable,
+      instance: observable,
+      instanceAdmins: observable,
+      instanceConfigurations: observable,
+      // computed
+      formattedConfig: computed,
+      // actions
+      hydrate: action,
+      fetchInstanceInfo: action,
+      fetchInstanceAdmins: action,
+      updateInstanceInfo: action,
+      fetchInstanceConfigurations: action,
+      updateInstanceConfigurations: action,
+    });
+
+    this.instanceService = new InstanceService();
+  }
+
+  hydrate = (data: IInstanceInfo) => {
+    if (data) {
+      this.instance = data.instance;
+      this.config = data.config;
+    }
+  };
+
+  /**
+   * computed value for instance configurations data for forms.
+   * @returns configurations in the form of {key, value} pair.
+   */
+  get formattedConfig() {
+    if (!this.instanceConfigurations) return undefined;
+    return this.instanceConfigurations?.reduce((formData: IFormattedInstanceConfiguration, config) => {
+      formData[config.key] = config.value;
+      return formData;
+    }, {} as IFormattedInstanceConfiguration);
+  }
+
+  /**
+   * @description fetching instance configuration
+   * @returns {IInstance} instance
+   */
+  fetchInstanceInfo = async () => {
+    try {
+      if (this.instance === undefined) this.isLoading = true;
+      this.error = undefined;
+      const instanceInfo = await this.instanceService.info();
+      // handling the new user popup toggle
+      if (this.instance === undefined && !instanceInfo?.instance?.workspaces_exist)
+        this.store.theme.toggleNewUserPopup();
+      runInAction(() => {
+        // console.log("instanceInfo: ", instanceInfo);
+        this.isLoading = false;
+        this.instance = instanceInfo.instance;
+        this.config = instanceInfo.config;
+      });
+      return instanceInfo;
+    } catch (error) {
+      console.error("Error fetching the instance info");
+      this.isLoading = false;
+      this.error = { message: "Failed to fetch the instance info" };
+      this.instanceStatus = {
+        status: EInstanceStatus.ERROR,
+      };
+      throw error;
+    }
+  };
+
+  /**
+   * @description updating instance information
+   * @param {Partial<IInstance>} data
+   * @returns void
+   */
+  updateInstanceInfo = async (data: Partial<IInstance>) => {
+    try {
+      const instanceResponse = await this.instanceService.update(data);
+      if (instanceResponse) {
+        runInAction(() => {
+          if (this.instance) set(this.instance, "instance", instanceResponse);
+        });
+      }
+      return instanceResponse;
+    } catch (error) {
+      console.error("Error updating the instance info");
+      throw error;
+    }
+  };
+
+  /**
+   * @description fetching instance admins
+   * @return {IInstanceAdmin[]} instanceAdmins
+   */
+  fetchInstanceAdmins = async () => {
+    try {
+      const instanceAdmins = await this.instanceService.admins();
+      if (instanceAdmins) runInAction(() => (this.instanceAdmins = instanceAdmins));
+      return instanceAdmins;
+    } catch (error) {
+      console.error("Error fetching the instance admins");
+      throw error;
+    }
+  };
+
+  /**
+   * @description fetching instance configurations
+   * @return {IInstanceAdmin[]} instanceConfigurations
+   */
+  fetchInstanceConfigurations = async () => {
+    try {
+      const instanceConfigurations = await this.instanceService.configurations();
+      if (instanceConfigurations) runInAction(() => (this.instanceConfigurations = instanceConfigurations));
+      return instanceConfigurations;
+    } catch (error) {
+      console.error("Error fetching the instance configurations");
+      throw error;
+    }
+  };
+
+  /**
+   * @description updating instance configurations
+   * @param data
+   */
+  updateInstanceConfigurations = async (data: Partial<IFormattedInstanceConfiguration>) => {
+    try {
+      const response = await this.instanceService.updateConfigurations(data);
+      runInAction(() => {
+        this.instanceConfigurations = this.instanceConfigurations?.map((config) => {
+          const item = response.find((item) => item.key === config.key);
+          if (item) return item;
+          return config;
+        });
+      });
+      return response;
+    } catch (error) {
+      console.error("Error updating the instance configurations");
+      throw error;
+    }
+  };
+
+  disableEmail = async () => {
+    const instanceConfigurations = this.instanceConfigurations;
+    try {
+      runInAction(() => {
+        this.instanceConfigurations = this.instanceConfigurations?.map((config) => {
+          if (
+            [
+              "EMAIL_HOST",
+              "EMAIL_PORT",
+              "EMAIL_HOST_USER",
+              "EMAIL_HOST_PASSWORD",
+              "EMAIL_FROM",
+              "ENABLE_SMTP",
+            ].includes(config.key)
+          )
+            return { ...config, value: "" };
+          return config;
+        });
+      });
+      await this.instanceService.disableEmail();
+    } catch (_error) {
+      console.error("Error disabling the email");
+      this.instanceConfigurations = instanceConfigurations;
+    }
+  };
+}

apps/admin/core/store/root.store.ts

@@ -0,0 +1,41 @@
+import { enableStaticRendering } from "mobx-react";
+// stores
+import type { IInstanceStore } from "./instance.store";
+import { InstanceStore } from "./instance.store";
+import type { IThemeStore } from "./theme.store";
+import { ThemeStore } from "./theme.store";
+import type { IUserStore } from "./user.store";
+import { UserStore } from "./user.store";
+import type { IWorkspaceStore } from "./workspace.store";
+import { WorkspaceStore } from "./workspace.store";
+
+enableStaticRendering(typeof window === "undefined");
+
+export abstract class CoreRootStore {
+  theme: IThemeStore;
+  instance: IInstanceStore;
+  user: IUserStore;
+  workspace: IWorkspaceStore;
+
+  constructor() {
+    this.theme = new ThemeStore(this);
+    this.instance = new InstanceStore(this);
+    this.user = new UserStore(this);
+    this.workspace = new WorkspaceStore(this);
+  }
+
+  hydrate(initialData: any) {
+    this.theme.hydrate(initialData.theme);
+    this.instance.hydrate(initialData.instance);
+    this.user.hydrate(initialData.user);
+    this.workspace.hydrate(initialData.workspace);
+  }
+
+  resetOnSignOut() {
+    localStorage.setItem("theme", "system");
+    this.instance = new InstanceStore(this);
+    this.user = new UserStore(this);
+    this.theme = new ThemeStore(this);
+    this.workspace = new WorkspaceStore(this);
+  }
+}

apps/admin/core/store/theme.store.ts

@@ -0,0 +1,68 @@
+import { action, observable, makeObservable } from "mobx";
+// root store
+import type { CoreRootStore } from "@/store/root.store";
+
+type TTheme = "dark" | "light";
+export interface IThemeStore {
+  // observables
+  isNewUserPopup: boolean;
+  theme: string | undefined;
+  isSidebarCollapsed: boolean | undefined;
+  // actions
+  hydrate: (data: any) => void;
+  toggleNewUserPopup: () => void;
+  toggleSidebar: (collapsed: boolean) => void;
+  setTheme: (currentTheme: TTheme) => void;
+}
+
+export class ThemeStore implements IThemeStore {
+  // observables
+  isNewUserPopup: boolean = false;
+  isSidebarCollapsed: boolean | undefined = undefined;
+  theme: string | undefined = undefined;
+
+  constructor(private store: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      isNewUserPopup: observable.ref,
+      isSidebarCollapsed: observable.ref,
+      theme: observable.ref,
+      // action
+      toggleNewUserPopup: action,
+      toggleSidebar: action,
+      setTheme: action,
+    });
+  }
+
+  hydrate = (data: any) => {
+    if (data) this.theme = data;
+  };
+
+  /**
+   * @description Toggle the new user popup modal
+   */
+  toggleNewUserPopup = () => (this.isNewUserPopup = !this.isNewUserPopup);
+
+  /**
+   * @description Toggle the sidebar collapsed state
+   * @param isCollapsed
+   */
+  toggleSidebar = (isCollapsed: boolean) => {
+    if (isCollapsed === undefined) this.isSidebarCollapsed = !this.isSidebarCollapsed;
+    else this.isSidebarCollapsed = isCollapsed;
+    localStorage.setItem("god_mode_sidebar_collapsed", isCollapsed.toString());
+  };
+
+  /**
+   * @description Sets the user theme and applies it to the platform
+   * @param currentTheme
+   */
+  setTheme = async (currentTheme: TTheme) => {
+    try {
+      localStorage.setItem("theme", currentTheme);
+      this.theme = currentTheme;
+    } catch (error) {
+      console.error("setting user theme error", error);
+    }
+  };
+}

apps/admin/core/store/user.store.ts

@@ -0,0 +1,103 @@
+import { action, observable, runInAction, makeObservable } from "mobx";
+// plane internal packages
+import type { TUserStatus } from "@plane/constants";
+import { EUserStatus } from "@plane/constants";
+import { AuthService, UserService } from "@plane/services";
+import type { IUser } from "@plane/types";
+// root store
+import type { CoreRootStore } from "@/store/root.store";
+
+export interface IUserStore {
+  // observables
+  isLoading: boolean;
+  userStatus: TUserStatus | undefined;
+  isUserLoggedIn: boolean | undefined;
+  currentUser: IUser | undefined;
+  // fetch actions
+  hydrate: (data: any) => void;
+  fetchCurrentUser: () => Promise<IUser>;
+  reset: () => void;
+  signOut: () => void;
+}
+
+export class UserStore implements IUserStore {
+  // observables
+  isLoading: boolean = true;
+  userStatus: TUserStatus | undefined = undefined;
+  isUserLoggedIn: boolean | undefined = undefined;
+  currentUser: IUser | undefined = undefined;
+  // services
+  userService;
+  authService;
+
+  constructor(private store: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      isLoading: observable.ref,
+      userStatus: observable,
+      isUserLoggedIn: observable.ref,
+      currentUser: observable,
+      // action
+      fetchCurrentUser: action,
+      reset: action,
+      signOut: action,
+    });
+    this.userService = new UserService();
+    this.authService = new AuthService();
+  }
+
+  hydrate = (data: any) => {
+    if (data) this.currentUser = data;
+  };
+
+  /**
+   * @description Fetches the current user
+   * @returns Promise<IUser>
+   */
+  fetchCurrentUser = async () => {
+    try {
+      if (this.currentUser === undefined) this.isLoading = true;
+      const currentUser = await this.userService.adminDetails();
+      if (currentUser) {
+        await this.store.instance.fetchInstanceAdmins();
+        runInAction(() => {
+          this.isUserLoggedIn = true;
+          this.currentUser = currentUser;
+          this.isLoading = false;
+        });
+      } else {
+        runInAction(() => {
+          this.isUserLoggedIn = false;
+          this.currentUser = undefined;
+          this.isLoading = false;
+        });
+      }
+      return currentUser;
+    } catch (error: any) {
+      this.isLoading = false;
+      this.isUserLoggedIn = false;
+      if (error.status === 403)
+        this.userStatus = {
+          status: EUserStatus.AUTHENTICATION_NOT_DONE,
+          message: error?.message || "",
+        };
+      else
+        this.userStatus = {
+          status: EUserStatus.ERROR,
+          message: error?.message || "",
+        };
+      throw error;
+    }
+  };
+
+  reset = async () => {
+    this.isUserLoggedIn = false;
+    this.currentUser = undefined;
+    this.isLoading = false;
+    this.userStatus = undefined;
+  };
+
+  signOut = async () => {
+    this.store.resetOnSignOut();
+  };
+}

apps/admin/core/store/workspace.store.ts

@@ -0,0 +1,150 @@
+import { set } from "lodash-es";
+import { action, observable, runInAction, makeObservable, computed } from "mobx";
+// plane imports
+import { InstanceWorkspaceService } from "@plane/services";
+import type { IWorkspace, TLoader, TPaginationInfo } from "@plane/types";
+// root store
+import type { CoreRootStore } from "@/store/root.store";
+
+export interface IWorkspaceStore {
+  // observables
+  loader: TLoader;
+  workspaces: Record<string, IWorkspace>;
+  paginationInfo: TPaginationInfo | undefined;
+  // computed
+  workspaceIds: string[];
+  // helper actions
+  hydrate: (data: Record<string, IWorkspace>) => void;
+  getWorkspaceById: (workspaceId: string) => IWorkspace | undefined;
+  // fetch actions
+  fetchWorkspaces: () => Promise<IWorkspace[]>;
+  fetchNextWorkspaces: () => Promise<IWorkspace[]>;
+  // curd actions
+  createWorkspace: (data: IWorkspace) => Promise<IWorkspace>;
+}
+
+export class WorkspaceStore implements IWorkspaceStore {
+  // observables
+  loader: TLoader = "init-loader";
+  workspaces: Record<string, IWorkspace> = {};
+  paginationInfo: TPaginationInfo | undefined = undefined;
+  // services
+  instanceWorkspaceService;
+
+  constructor(private store: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      loader: observable,
+      workspaces: observable,
+      paginationInfo: observable,
+      // computed
+      workspaceIds: computed,
+      // helper actions
+      hydrate: action,
+      getWorkspaceById: action,
+      // fetch actions
+      fetchWorkspaces: action,
+      fetchNextWorkspaces: action,
+      // curd actions
+      createWorkspace: action,
+    });
+    this.instanceWorkspaceService = new InstanceWorkspaceService();
+  }
+
+  // computed
+  get workspaceIds() {
+    return Object.keys(this.workspaces);
+  }
+
+  // helper actions
+  /**
+   * @description Hydrates the workspaces
+   * @param data - Record<string, IWorkspace>
+   */
+  hydrate = (data: Record<string, IWorkspace>) => {
+    if (data) this.workspaces = data;
+  };
+
+  /**
+   * @description Gets a workspace by id
+   * @param workspaceId - string
+   * @returns IWorkspace | undefined
+   */
+  getWorkspaceById = (workspaceId: string) => this.workspaces[workspaceId];
+
+  // fetch actions
+  /**
+   * @description Fetches all workspaces
+   * @returns Promise<>
+   */
+  fetchWorkspaces = async (): Promise<IWorkspace[]> => {
+    try {
+      if (this.workspaceIds.length > 0) {
+        this.loader = "mutation";
+      } else {
+        this.loader = "init-loader";
+      }
+      const paginatedWorkspaceData = await this.instanceWorkspaceService.list();
+      runInAction(() => {
+        const { results, ...paginationInfo } = paginatedWorkspaceData;
+        results.forEach((workspace: IWorkspace) => {
+          set(this.workspaces, [workspace.id], workspace);
+        });
+        set(this, "paginationInfo", paginationInfo);
+      });
+      return paginatedWorkspaceData.results;
+    } catch (error) {
+      console.error("Error fetching workspaces", error);
+      throw error;
+    } finally {
+      this.loader = "loaded";
+    }
+  };
+
+  /**
+   * @description Fetches the next page of workspaces
+   * @returns Promise<IWorkspace[]>
+   */
+  fetchNextWorkspaces = async (): Promise<IWorkspace[]> => {
+    if (!this.paginationInfo || this.paginationInfo.next_page_results === false) return [];
+    try {
+      this.loader = "pagination";
+      const paginatedWorkspaceData = await this.instanceWorkspaceService.list(this.paginationInfo.next_cursor);
+      runInAction(() => {
+        const { results, ...paginationInfo } = paginatedWorkspaceData;
+        results.forEach((workspace: IWorkspace) => {
+          set(this.workspaces, [workspace.id], workspace);
+        });
+        set(this, "paginationInfo", paginationInfo);
+      });
+      return paginatedWorkspaceData.results;
+    } catch (error) {
+      console.error("Error fetching next workspaces", error);
+      throw error;
+    } finally {
+      this.loader = "loaded";
+    }
+  };
+
+  // curd actions
+  /**
+   * @description Creates a new workspace
+   * @param data - IWorkspace
+   * @returns Promise<IWorkspace>
+   */
+  createWorkspace = async (data: IWorkspace): Promise<IWorkspace> => {
+    try {
+      this.loader = "mutation";
+      const workspace = await this.instanceWorkspaceService.create(data);
+      runInAction(() => {
+        set(this.workspaces, [workspace.id], workspace);
+      });
+      return workspace;
+    } catch (error) {
+      console.error("Error creating workspace", error);
+      throw error;
+    } finally {
+      this.loader = "loaded";
+    }
+  };
+}

apps/admin/ee/components/authentication/authentication-modes.tsx

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

apps/admin/ee/components/authentication/index.ts

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

apps/admin/ee/components/common/index.ts

@@ -0,0 +1 @@
+export * from "ce/components/common";

apps/admin/ee/store/root.store.ts

@@ -0,0 +1 @@
+export * from "ce/store/root.store";

apps/admin/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/admin/next.config.js

@@ -0,0 +1,29 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  trailingSlash: true,
+  reactStrictMode: false,
+  swcMinify: true,
+  output: "standalone",
+  images: {
+    unoptimized: true,
+  },
+  basePath: process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "",
+  experimental: {
+    optimizePackageImports: [
+      "@plane/constants",
+      "@plane/editor",
+      "@plane/hooks",
+      "@plane/i18n",
+      "@plane/logger",
+      "@plane/propel",
+      "@plane/services",
+      "@plane/shared-state",
+      "@plane/types",
+      "@plane/ui",
+      "@plane/utils",
+    ],
+  },
+};
+
+module.exports = nextConfig;

apps/admin/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "admin",
+  "description": "Admin UI for Plane",
+  "version": "1.1.0",
+  "license": "AGPL-3.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3001",
+    "build": "next build",
+    "preview": "next build && next start",
+    "start": "next start",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
+    "check:lint": "eslint . --max-warnings 19",
+    "check:types": "tsc --noEmit",
+    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "fix:lint": "eslint . --fix",
+    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\""
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.19",
+    "@plane/constants": "workspace:*",
+    "@plane/hooks": "workspace:*",
+    "@plane/propel": "workspace:*",
+    "@plane/services": "workspace:*",
+    "@plane/types": "workspace:*",
+    "@plane/ui": "workspace:*",
+    "@plane/utils": "workspace:*",
+    "autoprefixer": "10.4.14",
+    "axios": "catalog:",
+    "lodash-es": "catalog:",
+    "lucide-react": "catalog:",
+    "mobx": "catalog:",
+    "mobx-react": "catalog:",
+    "next": "catalog:",
+    "next-themes": "^0.2.1",
+    "postcss": "^8.4.49",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-hook-form": "7.51.5",
+    "sharp": "catalog:",
+    "swr": "catalog:",
+    "uuid": "catalog:"
+  },
+  "devDependencies": {
+    "@plane/eslint-config": "workspace:*",
+    "@plane/tailwind-config": "workspace:*",
+    "@plane/typescript-config": "workspace:*",
+    "@types/lodash-es": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "typescript": "catalog:"
+  }
+}

apps/admin/postcss.config.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+module.exports = require("@plane/tailwind-config/postcss.config.js");