snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

2026-09-15 15:14:58 +05:00
commit 23059a1de3
5252 changed files with 573834 additions and 0 deletions
--- a/apps/admin/components/authentication/authentication-method-card.tsx
+++ b/apps/admin/components/authentication/authentication-method-card.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// 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 function AuthenticationMethodCard(props: Props) {
+  const { name, description, icon, config, disabled = false, withBorder = true, unavailable = false } = props;
+
+  return (
+    <div
+      className={cn("flex w-full items-center gap-14 rounded-lg bg-layer-2", {
+        "border border-subtle px-4 py-3": 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-layer-1">{icon}</div>
+        </div>
+        <div className="grow">
+          <div
+            className={cn("leading-5 font-medium text-primary", {
+              "text-13": withBorder,
+              "text-18": !withBorder,
+            })}
+          >
+            {name}
+          </div>
+          <div
+            className={cn("leading-5 font-regular text-tertiary", {
+              "text-11": withBorder,
+              "text-13": !withBorder,
+            })}
+          >
+            {description}
+          </div>
+        </div>
+      </div>
+      <div className={`shrink-0 ${disabled && "opacity-70"}`}>{config}</div>
+    </div>
+  );
+}
--- a/apps/admin/components/authentication/email-config-switch.tsx
+++ b/apps/admin/components/authentication/email-config-switch.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// hooks
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { useInstance } from "@/hooks/store";
+// ui
+// types
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const EmailCodesConfiguration = observer(function EmailCodesConfiguration(props: Props) {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const enableMagicLogin = formattedConfig?.ENABLE_MAGIC_LINK_LOGIN ?? "";
+
+  return (
+    <Switch
+      checked={Boolean(parseInt(enableMagicLogin))}
+      onCheckedChange={() => {
+        const newEnableMagicLogin = Boolean(parseInt(enableMagicLogin)) === true ? "0" : "1";
+        updateConfig("ENABLE_MAGIC_LINK_LOGIN", newEnableMagicLogin);
+      }}
+      size="sm"
+      disabled={disabled}
+    />
+  );
+});
--- a/apps/admin/components/authentication/gitea-config.tsx
+++ b/apps/admin/components/authentication/gitea-config.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { AnchorButton } from "@makeplane/propel/components/anchor-button";
+import { Button } from "@makeplane/propel/components/button";
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GiteaConfiguration = observer(function GiteaConfiguration(props: Props) {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const GiteaConfig = formattedConfig?.IS_GITEA_ENABLED ?? "";
+  const GiteaConfigured =
+    !!formattedConfig?.GITEA_HOST && !!formattedConfig?.GITEA_CLIENT_ID && !!formattedConfig?.GITEA_CLIENT_SECRET;
+
+  return (
+    <>
+      {GiteaConfigured ? (
+        <div className="flex items-center gap-4">
+          <AnchorButton
+            variant="primary"
+            size="sm"
+            nativeButton={false}
+            render={<Link href="/authentication/gitea" />}
+            label="Edit"
+          />
+          <Switch
+            checked={Boolean(parseInt(GiteaConfig))}
+            onCheckedChange={() => {
+              Boolean(parseInt(GiteaConfig)) === true
+                ? updateConfig("IS_GITEA_ENABLED", "0")
+                : updateConfig("IS_GITEA_ENABLED", "1");
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          nativeButton={false}
+          render={<Link href="/authentication/gitea" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
+          label="Configure"
+        />
+      )}
+    </>
+  );
+});
--- a/apps/admin/components/authentication/github-config.tsx
+++ b/apps/admin/components/authentication/github-config.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { AnchorButton } from "@makeplane/propel/components/anchor-button";
+import { Button } from "@makeplane/propel/components/button";
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GithubConfiguration = observer(function GithubConfiguration(props: 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">
+          <AnchorButton
+            variant="primary"
+            size="sm"
+            nativeButton={false}
+            render={<Link href="/authentication/github" />}
+            label="Edit"
+          />
+          <Switch
+            checked={Boolean(parseInt(enableGithubConfig))}
+            onCheckedChange={() => {
+              const newEnableGithubConfig = Boolean(parseInt(enableGithubConfig)) === true ? "0" : "1";
+              updateConfig("IS_GITHUB_ENABLED", newEnableGithubConfig);
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          nativeButton={false}
+          render={<Link href="/authentication/github" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
+          label="Configure"
+        />
+      )}
+    </>
+  );
+});
--- a/apps/admin/components/authentication/gitlab-config.tsx
+++ b/apps/admin/components/authentication/gitlab-config.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { AnchorButton } from "@makeplane/propel/components/anchor-button";
+import { Button } from "@makeplane/propel/components/button";
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GitlabConfiguration = observer(function GitlabConfiguration(props: 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">
+          <AnchorButton
+            variant="primary"
+            size="sm"
+            nativeButton={false}
+            render={<Link href="/authentication/gitlab" />}
+            label="Edit"
+          />
+          <Switch
+            checked={Boolean(parseInt(enableGitlabConfig))}
+            onCheckedChange={() => {
+              const newEnableGitlabConfig = Boolean(parseInt(enableGitlabConfig)) === true ? "0" : "1";
+              updateConfig("IS_GITLAB_ENABLED", newEnableGitlabConfig);
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          nativeButton={false}
+          render={<Link href="/authentication/gitlab" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
+          label="Configure"
+        />
+      )}
+    </>
+  );
+});
--- a/apps/admin/components/authentication/google-config.tsx
+++ b/apps/admin/components/authentication/google-config.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { AnchorButton } from "@makeplane/propel/components/anchor-button";
+import { Button } from "@makeplane/propel/components/button";
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GoogleConfiguration = observer(function GoogleConfiguration(props: 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">
+          <AnchorButton
+            variant="primary"
+            size="sm"
+            nativeButton={false}
+            render={<Link href="/authentication/google" />}
+            label="Edit"
+          />
+          <Switch
+            checked={Boolean(parseInt(enableGoogleConfig))}
+            onCheckedChange={() => {
+              const newEnableGoogleConfig = Boolean(parseInt(enableGoogleConfig)) === true ? "0" : "1";
+              updateConfig("IS_GOOGLE_ENABLED", newEnableGoogleConfig);
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Button
+          variant="secondary"
+          size="sm"
+          stretch="auto"
+          nativeButton={false}
+          render={<Link href="/authentication/google" />}
+          icon={<SettingsOutline className="h-4 w-4 p-0.5 text-tertiary" />}
+          label="Configure"
+        />
+      )}
+    </>
+  );
+});
--- a/apps/admin/components/authentication/password-config-switch.tsx
+++ b/apps/admin/components/authentication/password-config-switch.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// hooks
+import { Switch } from "@makeplane/propel/components/switch";
+import type { TInstanceAuthenticationMethodKeys } from "@plane/types";
+import { useInstance } from "@/hooks/store";
+// ui
+// types
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const PasswordLoginConfiguration = observer(function PasswordLoginConfiguration(props: Props) {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const enableEmailPassword = formattedConfig?.ENABLE_EMAIL_PASSWORD ?? "";
+
+  return (
+    <Switch
+      checked={Boolean(parseInt(enableEmailPassword))}
+      onCheckedChange={() => {
+        const newEnableEmailPassword = Boolean(parseInt(enableEmailPassword)) === true ? "0" : "1";
+        updateConfig("ENABLE_EMAIL_PASSWORD", newEnableEmailPassword);
+      }}
+      size="sm"
+      disabled={disabled}
+    />
+  );
+});
--- a/apps/admin/components/common/banner.tsx
+++ b/apps/admin/components/common/banner.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { TickCircleOutline, WarningCircleOutline } from "@makeplane/propel/icons";
+
+type TBanner = {
+  type: "success" | "error";
+  message: string;
+};
+
+export function Banner(props: TBanner) {
+  const { type, message } = props;
+
+  return (
+    <div
+      className={`w-full rounded-md border p-2 ${type === "error" ? "border-danger-strong bg-danger-subtle" : "border-success-strong bg-success-subtle"}`}
+    >
+      <div className="flex items-center justify-center">
+        <div className="flex-shrink-0">
+          {type === "error" ? (
+            <span className="flex h-6 w-6 items-center justify-center rounded-full">
+              <WarningCircleOutline className="h-5 w-5 text-danger-primary" aria-hidden="true" />
+            </span>
+          ) : (
+            <TickCircleOutline className="h-5 w-5 text-success-primary" aria-hidden="true" />
+          )}
+        </div>
+        <div className="ml-1">
+          <p className={`text-13 font-medium ${type === "error" ? "text-danger-primary" : "text-success-primary"}`}>
+            {message}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/admin/components/common/code-block.tsx
+++ b/apps/admin/components/common/code-block.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cn } from "@plane/utils";
+
+type TProps = {
+  children: React.ReactNode;
+  className?: string;
+  darkerShade?: boolean;
+};
+
+export function CodeBlock({ children, className, darkerShade }: TProps) {
+  return (
+    <span
+      className={cn(
+        "rounded-md border border-subtle bg-surface-2 px-0.5 text-11 font-semibold text-tertiary",
+        {
+          "border-subtle bg-layer-1 text-secondary": darkerShade,
+        },
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}
--- a/apps/admin/components/common/confirm-discard-modal.tsx
+++ b/apps/admin/components/common/confirm-discard-modal.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import Link from "next/link";
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "@makeplane/propel/components/button";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onDiscardHref: string;
+};
+
+export function ConfirmDiscardModal(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-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-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mt-3 text-center sm:mt-0 sm:text-left">
+                      <Dialog.Title as="h3" className="text-16 leading-6 font-medium text-tertiary">
+                        You have unsaved changes
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-13 text-placeholder">
+                          Changes you made will be lost if you go back. Do you wish to go back?
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-center justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="secondary" size="md" stretch="auto" onClick={handleClose} label="Keep editing" />
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    stretch="auto"
+                    nativeButton={false}
+                    render={<Link href={onDiscardHref} />}
+                    label="Go back"
+                  />
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}
--- a/apps/admin/components/common/controller-input.tsx
+++ b/apps/admin/components/common/controller-input.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// icons
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+
+// Generic over the form's values because react-hook-form's Control is invariant: its
+// `_options.validate` narrows `name` to a keyof union, so `Control<any>` no longer
+// accepts a typed form's control. Inferring from `control` keeps call sites unchanged.
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  control: Control<TFieldValues>;
+  type: "text" | "password";
+  name: FieldPath<TFieldValues>;
+  label: string;
+  description?: string | React.ReactNode;
+  placeholder: string;
+  error: boolean;
+  required: boolean;
+};
+
+export type TControllerInputFormField<TFieldValues extends FieldValues = FieldValues> = {
+  key: FieldPath<TFieldValues>;
+  type: "text" | "password";
+  label: string;
+  description?: string | React.ReactNode;
+  placeholder: string;
+  error: boolean;
+  required: boolean;
+};
+
+export function ControllerInput<TFieldValues extends FieldValues = FieldValues>(props: Props<TFieldValues>) {
+  const { name, control, type, label, description, placeholder, error, required } = props;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-1">
+      <h4 className="text-13 text-tertiary">{label}</h4>
+      <InputGroup size="lg">
+        <Controller
+          control={control}
+          name={name}
+          rules={{ required: required ? `${label} is required.` : false }}
+          render={({ field: { value, onChange, ref } }) => (
+            <Input
+              size="lg"
+              id={name}
+              name={name}
+              type={type === "password" && showPassword ? "text" : type}
+              value={value}
+              onChange={onChange}
+              ref={ref}
+              aria-invalid={error}
+              placeholder={placeholder}
+            />
+          )}
+        />
+        {type === "password" &&
+          (showPassword ? (
+            <button
+              type="button"
+              aria-label="Hide password"
+              className="flex items-center justify-center text-placeholder"
+              onClick={() => setShowPassword(false)}
+            >
+              <HideOutline className="h-4 w-4" />
+            </button>
+          ) : (
+            <button
+              type="button"
+              aria-label="Show password"
+              className="flex items-center justify-center text-placeholder"
+              onClick={() => setShowPassword(true)}
+            >
+              <ShowOutline className="h-4 w-4" />
+            </button>
+          ))}
+      </InputGroup>
+      {description && <p className="pt-0.5 text-11 text-tertiary">{description}</p>}
+    </div>
+  );
+}
--- a/apps/admin/components/common/controller-switch.tsx
+++ b/apps/admin/components/common/controller-switch.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane internal packages
+import { Switch } from "@makeplane/propel/components/switch";
+
+type Props<T extends FieldValues = FieldValues> = {
+  control: Control<T>;
+  field: TControllerSwitchFormField<T>;
+};
+
+export type TControllerSwitchFormField<T extends FieldValues = FieldValues> = {
+  name: FieldPath<T>;
+  label: string;
+};
+
+export function ControllerSwitch<T extends FieldValues>(props: Props<T>) {
+  const {
+    control,
+    field: { name, label },
+  } = props;
+
+  return (
+    <div className="flex items-center justify-between gap-1">
+      <h4 className="text-sm text-custom-text-300">Refresh user attributes from {label} during sign in</h4>
+      <div className="relative">
+        <Controller
+          control={control}
+          name={name as FieldPath<T>}
+          render={({ field: { value, onChange } }) => {
+            const parsedValue = Number.parseInt(typeof value === "string" ? value : String(value ?? "0"), 10);
+            const isOn = !Number.isNaN(parsedValue) && parsedValue !== 0;
+            return <Switch checked={isOn} onCheckedChange={() => onChange(isOn ? "0" : "1")} size="sm" />;
+          }}
+        />
+      </div>
+    </div>
+  );
+}
--- a/apps/admin/components/common/copy-field.tsx
+++ b/apps/admin/components/common/copy-field.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// ui
+import { Button } from "@makeplane/propel/components/button";
+import { CopyOutline } from "@makeplane/propel/icons";
+// components
+import { TOAST_TYPE, setToast } from "@/providers/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 function CopyField(props: Props) {
+  const { label, url, description } = props;
+
+  return (
+    <div className="flex flex-col gap-1">
+      <h4 className="text-13 text-secondary">{label}</h4>
+      <Button
+        variant="secondary"
+        size="md"
+        stretch="auto"
+        icon={<CopyOutline width={18} height={18} color="#B9B9B9" />}
+        iconPosition="end"
+        label={url}
+        onClick={() => {
+          navigator.clipboard.writeText(url);
+          setToast({
+            type: TOAST_TYPE.INFO,
+            title: "Copied to clipboard",
+            message: `The ${label} has been successfully copied to your clipboard`,
+          });
+        }}
+      />
+      <div className="text-11 text-tertiary">{description}</div>
+    </div>
+  );
+}
--- a/apps/admin/components/common/header/core.ts
+++ b/apps/admin/components/common/header/core.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const CORE_HEADER_SEGMENT_LABELS: Record<string, string> = {
+  general: "General",
+  ai: "Artificial Intelligence",
+  email: "Email",
+  authentication: "Authentication",
+  image: "Image",
+  google: "Google",
+  github: "GitHub",
+  gitlab: "GitLab",
+  gitea: "Gitea",
+  workspace: "Workspace",
+  create: "Create",
+};
--- a/apps/admin/components/common/header/extended.ts
+++ b/apps/admin/components/common/header/extended.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const EXTENDED_HEADER_SEGMENT_LABELS: Record<string, string> = {};
--- a/apps/admin/components/common/header/index.tsx
+++ b/apps/admin/components/common/header/index.tsx
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+// icons
+import { Menu } from "lucide-react";
+import { SettingsOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "@makeplane/propel/components/breadcrumb";
+// hooks
+import { useTheme } from "@/hooks/store";
+// local imports
+import { CORE_HEADER_SEGMENT_LABELS } from "./core";
+import { EXTENDED_HEADER_SEGMENT_LABELS } from "./extended";
+
+export const HamburgerToggle = observer(function HamburgerToggle() {
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  return (
+    <button
+      type="button"
+      aria-label="Toggle sidebar"
+      className="group flex size-7 cursor-pointer items-center justify-center rounded-sm bg-layer-1 transition-all hover:bg-layer-1-hover md:hidden"
+      onClick={() => toggleSidebar(!isSidebarCollapsed)}
+    >
+      <Menu size={14} className="text-secondary transition-all group-hover:text-primary" />
+    </button>
+  );
+});
+
+const HEADER_SEGMENT_LABELS = {
+  ...CORE_HEADER_SEGMENT_LABELS,
+  ...EXTENDED_HEADER_SEGMENT_LABELS,
+};
+
+// 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: HEADER_SEGMENT_LABELS[segment] ?? segment.toUpperCase(),
+      href: currentUrl,
+    };
+  });
+  return breadcrumbItems;
+};
+
+export const AdminHeader = observer(function AdminHeader() {
+  const pathName = usePathname();
+
+  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-subtle bg-surface-1 p-4">
+      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <HamburgerToggle />
+        <div>
+          <Breadcrumb aria-label="Breadcrumb">
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  label="Settings"
+                  icon={<SettingsOutline className="h-4 w-4 text-tertiary" />}
+                  render={<Link href="/general/" />}
+                />
+              </BreadcrumbItem>
+              {breadcrumbItems.map(
+                (item) =>
+                  item.title && (
+                    <Fragment key={item.title}>
+                      <BreadcrumbSeparator />
+                      <BreadcrumbItem>
+                        <BreadcrumbLink label={item.title} render={<Link href={item.href} />} />
+                      </BreadcrumbItem>
+                    </Fragment>
+                  )
+              )}
+            </BreadcrumbList>
+          </Breadcrumb>
+        </div>
+      </div>
+    </div>
+  );
+});
--- a/apps/admin/components/common/logo-spinner.tsx
+++ b/apps/admin/components/common/logo-spinner.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTheme } from "next-themes";
+import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
+import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";
+
+export function LogoSpinner() {
+  const { resolvedTheme } = useTheme();
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
+
+  return (
+    <div className="flex items-center justify-center">
+      <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
+    </div>
+  );
+}
--- a/apps/admin/components/common/new-user-popup.tsx
+++ b/apps/admin/components/common/new-user-popup.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useTheme as useNextTheme } from "next-themes";
+// ui
+import { Button } from "@makeplane/propel/components/button";
+import { resolveGeneralTheme } from "@plane/utils";
+// hooks
+import TakeoffIconDark from "@/app/assets/logos/takeoff-icon-dark.svg?url";
+import TakeoffIconLight from "@/app/assets/logos/takeoff-icon-light.svg?url";
+import { useTheme } from "@/hooks/store";
+// icons
+
+export const NewUserPopup = observer(function NewUserPopup() {
+  // hooks
+  const { isNewUserPopup, toggleNewUserPopup } = useTheme();
+  // theme
+  const { resolvedTheme } = useNextTheme();
+
+  if (!isNewUserPopup) return <></>;
+  return (
+    <div className="shadow-md absolute right-8 bottom-8 w-96 rounded-lg border border-subtle bg-surface-1 p-6">
+      <div className="flex gap-4">
+        <div className="grow">
+          <div className="text-14 font-semibold">Create workspace</div>
+          <div className="py-2 text-13 font-medium text-tertiary">
+            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">
+            <Button
+              variant="primary"
+              size="md"
+              stretch="auto"
+              nativeButton={false}
+              render={<Link href="/workspace/create" />}
+              label="Create workspace"
+            />
+            <Button variant="secondary" size="md" stretch="auto" onClick={toggleNewUserPopup} label="Close" />
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center justify-center">
+          <img
+            src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
+            height={80}
+            width={80}
+            alt="Plane icon"
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
--- a/apps/admin/components/common/page-wrapper.tsx
+++ b/apps/admin/components/common/page-wrapper.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+
+type TPageWrapperProps = {
+  children: ReactNode;
+  header?: {
+    title: string;
+    description: string | ReactNode;
+    actions?: ReactNode;
+  };
+  customHeader?: ReactNode;
+  size?: "lg" | "md";
+};
+
+export const PageWrapper = (props: TPageWrapperProps) => {
+  const { children, header, customHeader, size = "md" } = props;
+
+  return (
+    <div
+      className={cn("mx-auto h-full w-full space-y-6 py-4", {
+        "max-w-[1000px] md:px-4 2xl:max-w-[1200px]": size === "md",
+        "px-4 lg:px-12": size === "lg",
+      })}
+    >
+      {customHeader ? (
+        <div className="mx-4 shrink-0 space-y-1 border-b border-subtle py-4">{customHeader}</div>
+      ) : (
+        header && (
+          <div className="mx-4 flex shrink-0 items-center justify-between gap-4 space-y-1 border-b border-subtle py-4">
+            <div className={header.actions ? "flex flex-col gap-1" : "space-y-1"}>
+              <div className="text-h5-semibold text-primary">{header.title}</div>
+              <div className="text-body-sm-regular text-secondary">{header.description}</div>
+            </div>
+            {header.actions && <div className="shrink-0">{header.actions}</div>}
+          </div>
+        )
+      )}
+      <div className="vertical-scrollbar scrollbar-sm flex-grow overflow-hidden overflow-y-scroll px-4 pb-4">
+        {children}
+      </div>
+    </div>
+  );
+};
--- a/apps/admin/components/common/password-strength-indicator.tsx
+++ b/apps/admin/components/common/password-strength-indicator.tsx
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { TickCircleOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import { cn, getPasswordCriteria, getPasswordStrength } from "@plane/utils";
+
+interface StrengthInfo {
+  message: string;
+  textColor: string;
+  activeFragments: number;
+}
+
+/**
+ * Get strength information including message, color, and active fragments
+ */
+const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo => {
+  switch (strength) {
+    case E_PASSWORD_STRENGTH.EMPTY:
+      return {
+        message: "Please enter your password",
+        textColor: "text-primary",
+        activeFragments: 0,
+      };
+    case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID:
+      return {
+        message: "Password is too short",
+        textColor: "text-danger-primary",
+        activeFragments: 1,
+      };
+    case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID:
+      return {
+        message: "Password is weak",
+        textColor: "text-orange-500",
+        activeFragments: 2,
+      };
+    case E_PASSWORD_STRENGTH.STRENGTH_VALID:
+      return {
+        message: "Password is strong",
+        textColor: "text-success-primary",
+        activeFragments: 3,
+      };
+    default:
+      return {
+        message: "Please enter your password",
+        textColor: "text-primary",
+        activeFragments: 0,
+      };
+  }
+};
+
+/**
+ * Get fragment color based on position and active state
+ */
+const getFragmentColor = (fragmentIndex: number, activeFragments: number): string => {
+  if (fragmentIndex >= activeFragments) {
+    return "bg-layer-1";
+  }
+
+  switch (activeFragments) {
+    case 1:
+      return "bg-danger-primary";
+    case 2:
+      return "bg-orange-500";
+    case 3:
+      return "bg-success-primary";
+    default:
+      return "bg-layer-1";
+  }
+};
+
+export interface PasswordStrengthIndicatorProps {
+  password: string;
+  showCriteria?: boolean;
+  isFocused?: boolean;
+}
+
+export function PasswordStrengthIndicator({
+  password,
+  showCriteria = true,
+  isFocused = false,
+}: PasswordStrengthIndicatorProps) {
+  const strength = getPasswordStrength(password);
+  const criteria = getPasswordCriteria(password);
+  const strengthInfo = getStrengthInfo(strength);
+
+  const isPasswordMeterVisible = isFocused ? true : strength === E_PASSWORD_STRENGTH.STRENGTH_VALID ? false : true;
+
+  if ((!password && !showCriteria) || !isPasswordMeterVisible) {
+    return null;
+  }
+
+  return (
+    <div className={cn("space-y-3")}>
+      {/* Strength Indicator */}
+      <div className="space-y-2">
+        <div className="flex w-full gap-1 transition-all duration-300 ease-linear">
+          {[0, 1, 2].map((fragmentIndex) => (
+            <div
+              key={fragmentIndex}
+              className={cn(
+                "h-1 flex-1 rounded-xs transition-all duration-300 ease-in-out",
+                getFragmentColor(fragmentIndex, strengthInfo.activeFragments)
+              )}
+            />
+          ))}
+        </div>
+
+        {/* Strength Message */}
+        {password && <p className={cn("!text-13 font-medium", strengthInfo.textColor)}>{strengthInfo.message}</p>}
+      </div>
+
+      {/* Criteria list */}
+      {showCriteria && (
+        <div className="flex flex-wrap gap-2">
+          {criteria.map((criterion) => (
+            <div key={criterion.key} className="flex items-center gap-1.5">
+              <div className="flex items-center justify-center p-0.5">
+                <TickCircleOutline
+                  className={cn("h-3 w-3 flex-shrink-0", {
+                    "text-success-primary": criterion.isValid,
+                    "text-primary": !criterion.isValid,
+                  })}
+                />
+              </div>
+              <span
+                className={cn("!text-11", {
+                  "text-success-primary": criterion.isValid,
+                  "text-primary": !criterion.isValid,
+                })}
+              >
+                {criterion.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/apps/admin/components/common/plane-lockup.tsx
+++ b/apps/admin/components/common/plane-lockup.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+// Plane logo lockup. Not part of @makeplane/propel's icon set, so it is kept as a local asset.
+
+type PlaneLockupProps = {
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  color?: string;
+};
+
+export function PlaneLockup({ width = "253", height = "53", className, color = "currentColor" }: PlaneLockupProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 253 53"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_27_76)">
+        <path
+          d="M217.077 51.4468H210.972L210.98 31.4317C210.717 27.7545 208.786 25.1545 205.03 24.6199C198.587 23.7006 194.663 27.8828 194.21 34.0258L194.218 51.4468H188.041V20.2543H192.158L194.255 26.8846H194.6C195.825 22.8701 198.684 20.4831 202.898 19.5757C210.126 18.0231 216.643 22.2724 217.079 29.8239V51.4468H217.077Z"
+          fill={color}
+        />
+        <path
+          d="M163.812 19.7315C158.03 20.9566 153.67 25.2354 153.222 31.264H159.395C159.669 28.3484 161.561 25.9969 164.267 24.9553C167.418 23.7401 172.805 23.8881 175.178 26.6005C176.774 28.4253 177.305 31.5816 175.212 33.2249C172.675 35.2173 166.39 34.6117 163.214 34.7636C158.631 34.9826 154.141 36.8429 153.183 41.7727C151.1 52.5042 165.035 54.9267 171.902 49.8963C174.095 48.2885 175.672 45.8443 176.261 43.1792H176.577L178.788 51.4508H182.61V29.964C182.517 20.3214 171.462 18.108 163.81 19.7315H163.812ZM174.847 41.2637C172.484 45.649 166.958 49.0441 162.218 47.3318C158.44 45.9686 158.268 40.4095 161.973 38.9181C165.613 37.4524 173.732 38.9694 176.368 34.949C176.275 37.0855 175.906 39.2989 174.849 41.2637H174.847Z"
+          fill={color}
+        />
+        <path
+          d="M113.082 35.5652V51.4475H106.611V9.00063H124.863C125.007 8.99274 125.141 9.06178 125.283 9.06967C133.732 9.53129 139.297 13.601 139.104 22.6025C138.928 30.7991 132.663 35.2199 124.934 35.5671H113.082V35.5652ZM113.082 14.4828V30.2941H124.088C129.595 29.8956 133.071 27.1022 132.491 21.265C131.967 15.9781 127.802 14.6544 123.107 14.4788C119.795 14.3546 116.402 14.5795 113.082 14.4808V14.4828Z"
+          fill={color}
+        />
+        <path d="M148.647 9H142.529V51.4468H148.647V9Z" fill={color} />
+        <path
+          d="M245.872 42.418C244.911 44.4953 243.138 46.1603 240.934 46.8981C238.368 47.7562 234.479 47.5431 232.083 46.2569C228.67 44.4263 227.145 40.6485 227.137 36.8984H251.891C252.194 33.6908 251.902 30.3648 250.496 27.4333C247.083 20.3177 238.859 17.7236 231.513 19.9429C222.868 22.5568 220.165 31.4162 221.462 39.6543C222.86 48.5611 230.197 52.976 238.958 52.3585C244.884 51.9423 250.271 48.1192 251.788 42.4161H245.874L245.872 42.418ZM227.208 32.4381C227.778 26.2457 233.347 23.2018 239.163 24.4269C243.361 25.3107 245.75 28.9523 245.842 33.1068H227.145C227.145 33.1068 227.19 32.6255 227.208 32.4401V32.4381Z"
+          fill={color}
+        />
+        <path
+          d="M44.3223 2.9264C44.3223 0.754665 46.6083 -0.65811 48.5508 0.313121L80.4551 16.2653C82.9294 17.5024 84.4922 20.0321 84.4922 22.7985V48.2487C84.4922 50.4204 82.2071 51.833 80.2646 50.8619L62.3281 41.8932V22.7975C62.3281 20.0311 60.7653 17.5015 58.291 16.2643L44.3223 9.27992V2.9264ZM0 2.92543C8.01645e-05 0.753753 2.28609 -0.659069 4.22852 0.312144L22.1582 9.27699V28.3766C22.1582 31.1428 23.7213 33.6716 26.1953 34.9088L40.1699 41.8952V48.2487C40.1697 50.4202 37.8847 51.832 35.9424 50.861L4.03711 34.9088C1.56305 33.6716 0 31.1428 0 28.3766V2.92543ZM22.1582 2.92543C22.1583 0.753753 24.4443 -0.659069 26.3867 0.312144L44.3223 9.27992V28.3776C44.3223 31.1439 45.8861 33.6727 48.3604 34.9098L62.3281 41.8932V48.2487C62.3279 50.4202 60.0429 51.832 58.1006 50.861L40.1699 41.8952V22.7975C40.1699 20.0311 38.6071 17.5015 36.1328 16.2643L22.1582 9.27699V2.92543Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_27_76">
+          <rect width="252" height="53" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
--- a/apps/admin/components/common/skeleton.tsx
+++ b/apps/admin/components/common/skeleton.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { cn } from "@plane/utils";
+
+// Loading-placeholder skeleton. @makeplane/propel has no skeleton component yet;
+// this matches the API the workspace @plane/propel skeleton exposed.
+
+type SkeletonProps = {
+  children: React.ReactNode;
+  className?: string;
+  ariaLabel?: string;
+};
+
+function SkeletonRoot({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) {
+  return (
+    <div data-slot="skeleton" className={cn("animate-pulse", className)} role="status" aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
+}
+
+type ItemProps = {
+  height?: string;
+  width?: string;
+  className?: string;
+};
+
+function SkeletonItem({ height = "auto", width = "auto", className = "" }: ItemProps) {
+  return <div data-slot="skeleton-item" className={cn("rounded-md bg-layer-1", className)} style={{ height, width }} />;
+}
+
+const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem });
+
+SkeletonRoot.displayName = "plane-ui-skeleton";
+SkeletonItem.displayName = "plane-ui-skeleton-item";
+
+export { Skeleton };
--- a/apps/admin/components/instance/failure.tsx
+++ b/apps/admin/components/instance/failure.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+import { Button } from "@makeplane/propel/components/button";
+// assets
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
+import InstanceFailureDarkImage from "@/app/assets/instance/instance-failure-dark.svg?url";
+import InstanceFailureImage from "@/app/assets/instance/instance-failure.svg?url";
+
+const handleRetry = () => {
+  window.location.reload();
+};
+
+export const InstanceFailureView = observer(function InstanceFailureView() {
+  const { resolvedTheme } = useTheme();
+
+  const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
+
+  return (
+    <>
+      <AuthHeader />
+      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
+          <div className="relative flex flex-col items-center justify-center space-y-4">
+            <img src={instanceImage} alt="Instance failure illustration" />
+            <h3 className="text-center text-20 font-medium text-on-color">Unable to fetch instance details.</h3>
+            <p className="text-center text-14 font-medium">
+              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 variant="primary" size="md" stretch="auto" onClick={handleRetry} label="Retry" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
--- a/apps/admin/components/instance/form-header.tsx
+++ b/apps/admin/components/instance/form-header.tsx
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-20 leading-7 font-semibold text-primary">{heading}</span>
+      <span className="text-16 leading-7 font-semibold text-placeholder">{subHeading}</span>
+    </div>
+  );
+}
--- a/apps/admin/components/instance/setup-form.tsx
+++ b/apps/admin/components/instance/setup-form.tsx
@@ -0,0 +1,386 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+// icons
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
+// plane internal packages
+import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
+import { Button } from "@makeplane/propel/components/button";
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { AuthService } from "@plane/services";
+import { getPasswordStrength, validatePersonName, validateCompanyName } from "@plane/utils";
+// components
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
+import { PasswordStrengthIndicator } from "@/components/common/password-strength-indicator";
+import { Banner } from "../common/banner";
+import { FormHeader } from "./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 function InstanceSetupForm() {
+  // 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="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
+        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
+          <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 items-center gap-4 sm:flex-row">
+              <div className="w-full space-y-1">
+                <label className="text-13 font-medium text-tertiary" htmlFor="first_name">
+                  First name <span className="text-danger-primary">*</span>
+                </label>
+                <InputGroup size="lg">
+                  <Input
+                    size="lg"
+                    id="first_name"
+                    name="first_name"
+                    type="text"
+                    placeholder="Wilber"
+                    value={formData.first_name}
+                    onChange={(e) => {
+                      const validation = validatePersonName(e.target.value);
+                      if (validation === true || e.target.value === "") {
+                        handleFormChange("first_name", e.target.value);
+                      }
+                    }}
+                    autoComplete="off"
+                    autoFocus
+                    maxLength={50}
+                  />
+                </InputGroup>
+              </div>
+              <div className="w-full space-y-1">
+                <label className="text-13 font-medium text-tertiary" htmlFor="last_name">
+                  Last name <span className="text-danger-primary">*</span>
+                </label>
+                <InputGroup size="lg">
+                  <Input
+                    size="lg"
+                    id="last_name"
+                    name="last_name"
+                    type="text"
+                    placeholder="Wright"
+                    value={formData.last_name}
+                    onChange={(e) => {
+                      const validation = validatePersonName(e.target.value);
+                      if (validation === true || e.target.value === "") {
+                        handleFormChange("last_name", e.target.value);
+                      }
+                    }}
+                    autoComplete="off"
+                    maxLength={50}
+                  />
+                </InputGroup>
+              </div>
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-13 font-medium text-tertiary" htmlFor="email">
+                Email <span className="text-danger-primary">*</span>
+              </label>
+              <InputGroup size="lg">
+                <Input
+                  size="lg"
+                  id="email"
+                  name="email"
+                  type="email"
+                  placeholder="name@company.com"
+                  value={formData.email}
+                  onChange={(e) => handleFormChange("email", e.target.value)}
+                  aria-invalid={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
+                  autoComplete="off"
+                />
+              </InputGroup>
+              {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
+                <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
+              )}
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-13 font-medium text-tertiary" htmlFor="company_name">
+                Company name <span className="text-danger-primary">*</span>
+              </label>
+              <InputGroup size="lg">
+                <Input
+                  size="lg"
+                  id="company_name"
+                  name="company_name"
+                  type="text"
+                  placeholder="Company name"
+                  value={formData.company_name}
+                  onChange={(e) => {
+                    const validation = validateCompanyName(e.target.value, false);
+                    if (validation === true || e.target.value === "") {
+                      handleFormChange("company_name", e.target.value);
+                    }
+                  }}
+                  maxLength={80}
+                />
+              </InputGroup>
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-13 font-medium text-tertiary" htmlFor="password">
+                Set a password <span className="text-danger-primary">*</span>
+              </label>
+              <InputGroup size="lg">
+                <Input
+                  size="lg"
+                  id="password"
+                  name="password"
+                  type={showPassword.password ? "text" : "password"}
+                  placeholder="New password"
+                  value={formData.password}
+                  onChange={(e) => handleFormChange("password", e.target.value)}
+                  aria-invalid={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
+                  onFocus={() => setIsPasswordInputFocused(true)}
+                  onBlur={() => setIsPasswordInputFocused(false)}
+                  autoComplete="new-password"
+                />
+                {showPassword.password ? (
+                  <button
+                    type="button"
+                    aria-label="Hide password"
+                    className="flex items-center justify-center text-placeholder"
+                    onClick={() => handleShowPassword("password")}
+                  >
+                    <HideOutline className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    aria-label="Show password"
+                    className="flex items-center justify-center text-placeholder"
+                    onClick={() => handleShowPassword("password")}
+                  >
+                    <ShowOutline className="h-4 w-4" />
+                  </button>
+                )}
+              </InputGroup>
+              {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
+                <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
+              )}
+              <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
+                Confirm password <span className="text-danger-primary">*</span>
+              </label>
+              <InputGroup size="lg">
+                <Input
+                  size="lg"
+                  type={showPassword.retypePassword ? "text" : "password"}
+                  id="confirm_password"
+                  name="confirm_password"
+                  value={formData.confirm_password}
+                  onChange={(e) => handleFormChange("confirm_password", e.target.value)}
+                  placeholder="Confirm password"
+                  onFocus={() => setIsRetryPasswordInputFocused(true)}
+                  onBlur={() => setIsRetryPasswordInputFocused(false)}
+                  autoComplete="new-password"
+                />
+                {showPassword.retypePassword ? (
+                  <button
+                    type="button"
+                    aria-label="Hide password"
+                    className="flex items-center justify-center text-placeholder"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  >
+                    <HideOutline className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    aria-label="Show password"
+                    className="flex items-center justify-center text-placeholder"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  >
+                    <ShowOutline className="h-4 w-4" />
+                  </button>
+                )}
+              </InputGroup>
+              {!!formData.confirm_password &&
+                formData.password !== formData.confirm_password &&
+                renderPasswordMatchError && (
+                  <span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>
+                )}
+            </div>
+
+            <div className="relative flex gap-2">
+              <div>
+                <Checkbox
+                  id="is_telemetry_enabled"
+                  aria-label="Allow Plane to anonymously collect usage events"
+                  onCheckedChange={(checked) => handleFormChange("is_telemetry_enabled", checked)}
+                  checked={formData.is_telemetry_enabled}
+                />
+              </div>
+              <label className="cursor-pointer text-13 font-medium text-tertiary" htmlFor="is_telemetry_enabled">
+                Allow Plane to anonymously collect usage events.{" "}
+                <a
+                  href="https://developers.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-500 hover:text-blue-600 flex-shrink-0 text-13 font-medium"
+                >
+                  See More
+                </a>
+              </label>
+            </div>
+
+            <div className="py-2">
+              <Button
+                type="submit"
+                variant="primary"
+                size="lg"
+                stretch="full"
+                disabled={isButtonDisabled}
+                loading={isSubmitting}
+                label="Continue"
+              />
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/apps/admin/components/workspace/list-item.tsx
+++ b/apps/admin/components/workspace/list-item.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+// plane internal packages
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { NewTabOutline } from "@makeplane/propel/icons";
+import { WEB_BASE_URL } from "@plane/constants";
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useWorkspace } from "@/hooks/store";
+
+type TWorkspaceListItemProps = {
+  workspaceId: string;
+};
+
+export const WorkspaceListItem = observer(function WorkspaceListItem({ 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 gap-2.5 truncate rounded-lg border border-subtle bg-layer-1 p-3 hover:border-subtle-1 hover:bg-layer-1-hover hover:shadow-raised-100"
+      rel="noreferrer"
+    >
+      <div className="flex items-start gap-4">
+        <span
+          className={`relative mt-1 flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 text-11 uppercase ${
+            !workspace?.logo_url && "rounded-lg bg-accent-primary text-on-color"
+          }`}
+        >
+          {workspace?.logo_url && workspace.logo_url !== "" ? (
+            <img
+              src={getFileURL(workspace.logo_url)}
+              className="absolute top-0 left-0 h-full w-full rounded-sm object-cover"
+              alt="Workspace Logo"
+            />
+          ) : (
+            (workspace?.name?.[0] ?? "...")
+          )}
+        </span>
+        <div className="flex flex-col items-start gap-1">
+          <div className="flex w-full flex-wrap items-center gap-2.5">
+            <h3 className={`text-14 font-medium capitalize`}>{workspace.name}</h3>/
+            <Tooltip label="The unique URL of your workspace">
+              <h4 className="text-13 text-tertiary">[{workspace.slug}]</h4>
+            </Tooltip>
+          </div>
+          {workspace.owner.email && (
+            <div className="flex items-center gap-1 text-11">
+              <h3 className="font-medium text-secondary">Owned by:</h3>
+              <h4 className="text-tertiary">{workspace.owner.email}</h4>
+            </div>
+          )}
+          <div className="flex items-center gap-2.5 text-11">
+            {workspace.total_projects !== null && (
+              <span className="flex items-center gap-1">
+                <h3 className="font-medium text-secondary">Total projects:</h3>
+                <h4 className="text-tertiary">{workspace.total_projects}</h4>
+              </span>
+            )}
+            {workspace.total_members !== null && (
+              <>
+                •
+                <span className="flex items-center gap-1">
+                  <h3 className="font-medium text-secondary">Total members:</h3>
+                  <h4 className="text-tertiary">{workspace.total_members}</h4>
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex-shrink-0">
+        <NewTabOutline width={14} height={16} className="text-placeholder group-hover:text-secondary" />
+      </div>
+    </a>
+  );
+});