fix: eslint issues and reconfiguring (#3891)

* fix: eslint fixes

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>

CONTRIBUTING.md

@@ -50,7 +50,6 @@ chmod +x setup.sh
 docker compose -f docker-compose-local.yml up
 ```
 
-
 ## Missing a Feature?
 
 If a feature is missing, you can directly _request_ a new one [here](https://github.com/makeplane/plane/issues/new?assignees=&labels=feature&template=feature_request.yml&title=%F0%9F%9A%80+Feature%3A+). You also can do the same by choosing "🚀 Feature" when raising a [New Issue](https://github.com/makeplane/plane/issues/new/choose) on our GitHub Repository.

ENV_SETUP.md

@@ -53,7 +53,6 @@ NGINX_PORT=80
 NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
 ```
 
-
 ## {PROJECT_FOLDER}/apiserver/.env
 
 ​

README.md

@@ -44,8 +44,6 @@ Meet [Plane](https://plane.so). An open-source software development tool to mana
 
 > Plane is still in its early days, not everything will be perfect yet, and hiccups may happen. Please let us know of any suggestions, ideas, or bugs that you encounter on our [Discord](https://discord.com/invite/A92xrEGCge) or GitHub issues, and we will use your feedback to improve on our upcoming releases.
 
-
-
 ## ⚡ Installation
 
 The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account where we offer a hosted solution for users.
@@ -53,7 +51,7 @@ The easiest way to get started with Plane is by creating a [Plane Cloud](https:/
 If you want more control over your data prefer to self-host Plane, please refer to our [deployment documentation](https://docs.plane.so/docker-compose).
 
 | Installation Methods | Documentation Link                                                                                                                                           |
-|-----------------|----------------------------------------------------------------------------------------------------------|
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://docs.plane.so/docker-compose)         |
 | Kubernetes           | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://docs.plane.so/kubernetes) |
 
@@ -74,9 +72,7 @@ If you want more control over your data prefer to self-host Plane, please refer
 
 - **Analytics**: Get insights into all your Plane data in real-time. Visualize issue data to spot trends, remove blockers, and progress your work.
 
-- **Drive** (*coming soon*): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.
+- **Drive** (_coming soon_): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.
-
-
 
 ## 🛠️ Contributors Quick Start
 
@@ -119,6 +115,7 @@ The Plane community can be found on [GitHub Discussions](https://github.com/orgs
 Ask questions, report bugs, join discussions, voice ideas, make feature requests, or share your projects.
 
 ### Repo Activity
+
 ![Plane Repo Activity](https://repobeats.axiom.co/api/embed/2523c6ed2f77c082b7908c33e2ab208981d76c39.svg "Repobeats analytics image")
 
 ## 📸 Screenshots
@@ -188,6 +185,7 @@ Email squawk@plane.so to disclose any security vulnerabilities.
 ## ❤️ Contribute
 
 There are many ways to contribute to Plane, including:
+
 - Submitting [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) and [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+) for various components.
 - Reviewing [the documentation](https://docs.plane.so/) and submitting [pull requests](https://github.com/makeplane/plane), from fixing typos to adding new features.
 - Speaking or writing about Plane or any other ecosystem integration and [letting us know](https://discord.com/invite/A92xrEGCge)!

deploy/1-click/README.md

@@ -31,11 +31,11 @@ curl -fsSL https://raw.githubusercontent.com/makeplane/plane/preview/deploy/1-cl
 ```
 
 NOTE: `Preview` builds do not support ARM64/AARCH64 CPU architecture
+
 </details>
 
 --
 
-
 Expect this after a successful install
 
 ![Install Output](images/install.png)
@@ -51,12 +51,15 @@ Plane App is available via the command `plane-app`. Running the command `plane-a
 ![Plane Help](images/help.png)
 
 <ins>Basic Operations</ins>:
+
 1. Start Server using `plane-app start`
 1. Stop Server using `plane-app stop`
 1. Restart Server using `plane-app restart`
 
 <ins>Advanced Operations</ins>:
+
 1. Configure Plane using `plane-app --configure`. This will give you options to modify
+
    - NGINX Port (default 80)
    - Domain Name (default is the local server public IP address)
    - File Upload Size (default 5MB)
@@ -73,6 +76,7 @@ Plane App is available via the command `plane-app`. Running the command `plane-a
 1. Plane App can be reinstalled using `plane-app --install`.
 
 <ins>Application Data is stored in the mentioned folders</ins>:
+
 1. DB Data: /opt/plane/data/postgres
 1. Redis Data: /opt/plane/data/redis
 1. Minio Data: /opt/plane/data/minio

packages/editor/core/package.json

@@ -59,8 +59,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
-    "eslint-config-next": "13.2.4",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
     "tsconfig": "*",

packages/editor/document-editor/package.json

@@ -37,7 +37,6 @@
     "@tiptap/extension-placeholder": "^2.1.13",
     "@tiptap/pm": "^2.1.13",
     "@tiptap/suggestion": "^2.1.13",
-    "eslint-config-next": "13.2.4",
     "lucide-react": "^0.309.0",
     "react-popper": "^2.3.0",
     "tippy.js": "^6.3.7",
@@ -47,7 +46,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "8.36.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
     "tsconfig": "*",

packages/editor/document-editor/src/ui/components/content-browser.tsx

@@ -15,7 +15,7 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
   const handleOnClick = (marking: IMarking) => {
     scrollSummary(editor, marking);
     if (setSidePeekVisible) setSidePeekVisible(false);
-  }
+  };
 
   return (
     <div className="flex h-full flex-col overflow-hidden">

packages/editor/document-editor/src/ui/components/summary-popover.tsx

@@ -33,7 +33,8 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       <button
         type="button"
         ref={setReferenceElement}
-        className={`grid h-7 w-7 place-items-center rounded ${sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
+        className={`grid h-7 w-7 place-items-center rounded ${
+          sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
         }`}
         onClick={() => setSidePeekVisible(!sidePeekVisible)}
       >

packages/editor/document-editor/src/ui/extensions/index.tsx

@@ -26,4 +26,3 @@ export const DocumentEditorExtensions = (
   }),
   IssueWidgetPlaceholder(),
 ];
-

packages/editor/extensions/package.json

@@ -33,7 +33,6 @@
     "@tiptap/pm": "^2.1.13",
     "@tiptap/react": "^2.1.13",
     "@tiptap/suggestion": "^2.1.13",
-    "eslint-config-next": "13.2.4",
     "lucide-react": "^0.294.0",
     "tippy.js": "^6.3.7"
   },
@@ -41,7 +40,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "8.36.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
     "tsconfig": "*",

packages/editor/lite-text-editor/package.json

@@ -36,10 +36,9 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",
-    "eslint-config-custom": "*",
     "tsconfig": "*",
     "tsup": "^7.2.0",
     "typescript": "4.9.5"

packages/editor/rich-text-editor/package.json

@@ -39,7 +39,7 @@
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
     "postcss": "^8.4.29",
     "react": "^18.2.0",
     "tailwind-config-custom": "*",

packages/eslint-config-custom/index.js

@@ -1,22 +1,43 @@
 module.exports = {
-  extends: ["next", "turbo", "prettier"],
+  extends: [
+    "next",
+    "turbo",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+  ],
   parser: "@typescript-eslint/parser",
-  plugins: ["react", "@typescript-eslint"],
+  parserOptions: {
+    ecmaVersion: 2021, // Or the ECMAScript version you are using
+    sourceType: "module", // Or 'script' if you're using CommonJS or other modules
+  },
+  plugins: ["react", "@typescript-eslint", "import"],
   settings: {
     next: {
       rootDir: ["web/", "space/", "packages/*/"],
     },
   },
   rules: {
-    "@next/next/no-html-link-for-pages": "off",
-    "react/jsx-key": "off",
     "prefer-const": "error",
     "no-irregular-whitespace": "error",
     "no-trailing-spaces": "error",
     "no-duplicate-imports": "error",
     "arrow-body-style": ["error", "as-needed"],
-    "react/self-closing-comp": ["error", { component: true, html: true }],
+    "@next/next/no-html-link-for-pages": "off",
     "@next/next/no-img-element": "off",
-    "@typescript-eslint/no-unused-vars": ["warn"],
+    "react/jsx-key": "error",
+    "react/self-closing-comp": ["error", { component: true, html: true }],
+    "react/jsx-boolean-value": "error",
+    "react/jsx-no-duplicate-props": "error",
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-useless-empty-export": "error",
+    "@typescript-eslint/prefer-ts-expect-error": "error",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        selector: ["function", "variable"],
+        format: ["camelCase", "snake_case", "UPPER_CASE", "PascalCase"],
+      },
+    ],
   },
 };

packages/eslint-config-custom/package.json

@@ -4,18 +4,16 @@
   "version": "0.16.0",
   "main": "index.js",
   "license": "MIT",
+  "devDependencies": {},
   "dependencies": {
-    "eslint": "^7.23.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "eslint-config-next": "13.0.0",
+    "@typescript-eslint/parser": "^7.1.1",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.57.0",
-    "eslint-config-turbo": "latest",
+    "eslint-config-next": "^14.1.0",
-    "eslint-plugin-react": "7.31.8"
+    "eslint-config-prettier": "^9.1.0",
-  },
+    "eslint-config-turbo": "^1.12.4",
-  "devDependencies": {
+    "eslint-plugin-import": "^2.29.1",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "eslint-plugin-react": "^7.33.2",
-    "typescript": "^4.7.4"
+    "typescript": "^5.3.3"
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }

packages/types/src/pages.d.ts

@@ -1,5 +1,10 @@
 // types
-import { TIssue, IIssueLabel, IWorkspaceLite, IProjectLite } from "@plane/types";
+import {
+  TIssue,
+  IIssueLabel,
+  IWorkspaceLite,
+  IProjectLite,
+} from "@plane/types";
 
 export interface IPage {
   access: number;

packages/types/src/state.d.ts

@@ -1,6 +1,11 @@
 import { IProject, IProjectLite, IWorkspaceLite } from "@plane/types";
 
-export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
+export type TStateGroups =
+  | "backlog"
+  | "unstarted"
+  | "started"
+  | "completed"
+  | "cancelled";
 
 export interface IState {
   readonly id: string;

packages/types/src/views.d.ts

@@ -1,4 +1,8 @@
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "./view-props";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+} from "./view-props";
 
 export interface IProjectView {
   id: string;

packages/ui/src/badge/helper.tsx

@@ -122,14 +122,14 @@ export const badgeStyling: IBadgeStyling = {
 };
 
 export const getBadgeStyling = (variant: TBadgeVariant, size: TBadgeSizes, disabled: boolean = false): string => {
-  let _variant: string = ``;
+  let tempVariant: string = ``;
   const currentVariant = badgeStyling[variant];
 
-  _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover}`;
+  tempVariant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover}`;
 
-  let _size: string = ``;
+  let tempSize: string = ``;
-  if (size) _size = badgeSizeStyling[size];
+  if (size) tempSize = badgeSizeStyling[size];
-  return `${_variant} ${_size}`;
+  return `${tempVariant} ${tempSize}`;
 };
 
 export const getIconStyling = (size: TBadgeSizes): string => {

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -29,13 +29,10 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
             <React.Fragment key={index}>
               {index > 0 && !isSmallScreen && (
                 <div className="flex items-center gap-2.5">
-                  <ChevronRight
+                  <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
-                    className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
-                    aria-hidden="true"
-                  />
                 </div>
               )}
-              <div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? 'hidden sm:flex' : 'flex'}`}>
+              <div className={`flex items-center gap-2.5 ${isSmallScreen && index > 0 ? "hidden sm:flex" : "flex"}`}>
                 {child}
               </div>
             </React.Fragment>
@@ -46,7 +43,11 @@ const Breadcrumbs = ({ children, onBack }: BreadcrumbsProps) => {
       {isSmallScreen && childrenArray.length > 1 && (
         <>
           <div className="flex items-center gap-2.5">
-            {onBack && <span onClick={onBack} className="text-custom-text-200">...</span>}
+            {onBack && (
+              <span onClick={onBack} className="text-custom-text-200">
+                ...
+              </span>
+            )}
             <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
           </div>
           <div className="flex items-center gap-2.5">{childrenArray[childrenArray.length - 1]}</div>

packages/ui/src/button/helper.tsx

@@ -100,16 +100,16 @@ export const buttonStyling: IButtonStyling = {
 };
 
 export const getButtonStyling = (variant: TButtonVariant, size: TButtonSizes, disabled: boolean = false): string => {
-  let _variant: string = ``;
+  let tempVariant: string = ``;
   const currentVariant = buttonStyling[variant];
 
-  _variant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
+  tempVariant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
     currentVariant.pressed
   }`;
 
-  let _size: string = ``;
+  let tempSize: string = ``;
-  if (size) _size = buttonSizeStyling[size];
+  if (size) tempSize = buttonSizeStyling[size];
-  return `${_variant} ${_size}`;
+  return `${tempVariant} ${tempSize}`;
 };
 
 export const getIconStyling = (size: TButtonSizes): string => {

packages/ui/src/control-link/control-link.tsx

@@ -12,7 +12,7 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
   const { href, onClick, children, target = "_self", disabled = false, ...rest } = props;
   const LEFT_CLICK_EVENT_CODE = 0;
 
-  const _onClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+  const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     const clickCondition = (event.metaKey || event.ctrlKey) && event.button === LEFT_CLICK_EVENT_CODE;
     if (!clickCondition) {
       event.preventDefault();
@@ -23,7 +23,7 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
   if (disabled) return <>{children}</>;
 
   return (
-    <a href={href} target={target} onClick={_onClick} {...rest}>
+    <a href={href} target={target} onClick={handleOnClick} {...rest}>
       {children}
     </a>
   );

space/components/ui/dropdown.tsx

@@ -67,13 +67,13 @@ const DropdownList: React.FC<DropDownListProps> = (props) => {
 
 const DropdownItem: React.FC<DropdownItemProps> = (props) => {
   const { item } = props;
-  const { display, children, as: as_, href, onClick, isSelected } = item;
+  const { display, children, as: itemAs, href, onClick, isSelected } = item;
 
   const [open, setOpen] = useState(false);
 
   return (
     <div className="group relative flex w-full gap-x-6 rounded-lg p-1">
-      {(!as_ || as_ === "button" || as_ === "div") && (
+      {(!itemAs || itemAs === "button" || itemAs === "div") && (
         <button
           type="button"
           onClick={() => {
@@ -94,7 +94,7 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
         </button>
       )}
 
-      {as_ === "link" && <Link href={href || "#"}>{display}</Link>}
+      {itemAs === "link" && <Link href={href || "#"}>{display}</Link>}
 
       {children && <DropdownList open={open} handleClose={() => setOpen(false)} items={children} />}
     </div>

space/lib/mobx/store-provider.tsx

@@ -9,10 +9,10 @@ let rootStore: RootStore = new RootStore();
 export const MobxStoreContext = createContext<RootStore>(rootStore);
 
 const initializeStore = () => {
-  const _rootStore: RootStore = rootStore ?? new RootStore();
+  const singletonRootStore: RootStore = rootStore ?? new RootStore();
-  if (typeof window === "undefined") return _rootStore;
+  if (typeof window === "undefined") return singletonRootStore;
-  if (!rootStore) rootStore = _rootStore;
+  if (!rootStore) rootStore = singletonRootStore;
-  return _rootStore;
+  return singletonRootStore;
 };
 
 export const MobxStoreProvider = ({ children }: any) => {

space/package.json

@@ -49,9 +49,7 @@
     "@types/react-dom": "^18.2.17",
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "eslint": "8.34.0",
     "eslint-config-custom": "*",
-    "eslint-config-next": "13.2.1",
     "tailwind-config-custom": "*",
     "tsconfig": "*"
   }

web/.eslintrc.js

@@ -1,4 +1,103 @@
 module.exports = {
   root: true,
   extends: ["custom"],
+  parser: "@typescript-eslint/parser",
+  settings: {
+    "import/resolver": {
+      typescript: {},
+      node: {
+        moduleDirectory: ["node_modules", "."],
+      },
+    },
+  },
+  rules: {
+    // "import/order": [
+    //   "error",
+    //   {
+    //     groups: ["builtin", "external", "internal", "parent", "sibling"],
+    //     pathGroups: [
+    //       {
+    //         pattern: "react",
+    //         group: "external",
+    //         position: "before",
+    //       },
+    //       {
+    //         pattern: "@headlessui/**",
+    //         group: "external",
+    //         position: "after",
+    //       },
+    //       {
+    //         pattern: "lucide-react",
+    //         group: "external",
+    //         position: "after",
+    //       },
+    //       {
+    //         pattern: "@plane/ui",
+    //         group: "external",
+    //         position: "after",
+    //       },
+    //       {
+    //         pattern: "components/**",
+    //         group: "internal",
+    //         position: "before",
+    //       },
+    //       {
+    //         pattern: "constants/**",
+    //         group: "internal",
+    //         position: "before",
+    //       },
+    //       {
+    //         pattern: "contexts/**",
+    //         group: "internal",
+    //         position: "before",
+    //       },
+    //       {
+    //         pattern: "helpers/**",
+    //         group: "internal",
+    //         position: "before",
+    //       },
+    //       {
+    //         pattern: "hooks/**",
+    //         group: "internal",
+    //         position: "before",
+    //       },
+    //       {
+    //         pattern: "layouts/**",
+    //         group: "internal",
+    //         position: "before",
+    //       },
+    //       {
+    //         pattern: "lib/**",
+    //         group: "internal",
+    //         position: "before",
+    //       },
+    //       {
+    //         pattern: "services/**",
+    //         group: "internal",
+    //         position: "before",
+    //       },
+    //       {
+    //         pattern: "store/**",
+    //         group: "internal",
+    //         position: "before",
+    //       },
+    //       {
+    //         pattern: "@plane/types",
+    //         group: "internal",
+    //         position: "after",
+    //       },
+    //       {
+    //         pattern: "lib/types",
+    //         group: "internal",
+    //         position: "after",
+    //       },
+    //     ],
+    //     pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
+    //     alphabetize: {
+    //       order: "asc",
+    //       caseInsensitive: true,
+    //     },
+    //   },
+    // ],
+  },
 };

web/components/account/deactivate-account-modal.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import { useTheme } from "next-themes";
+import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 import { Trash2 } from "lucide-react";
-import { mutate } from "swr";
 // hooks
-import { useUser } from "hooks/store";
 // ui
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { useUser } from "hooks/store";
 
 type Props = {
   isOpen: boolean;
@@ -86,9 +86,9 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                 <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                   <div className="">
                     <div className="flex items-start gap-x-4">
-                      <div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
+                      <div className="mt-3 grid place-items-center rounded-full bg-red-500/20 p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
                         <Trash2
-                          className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600"
+                          className="h-4 w-4 text-red-600 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
                           aria-hidden="true"
                         />
                       </div>

web/components/account/o-auth/o-auth-options.tsx

@@ -1,12 +1,10 @@
 import { observer } from "mobx-react-lite";
 // services
-import { AuthService } from "services/auth.service";
+import { TOAST_TYPE, setToast } from "@plane/ui";
-// hooks
+import { GitHubSignInButton, GoogleSignInButton } from "components/account";
 import { useApplication } from "hooks/store";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { GitHubSignInButton, GoogleSignInButton } from "components/account";
 
 type Props = {
   handleSignInRedirection: () => Promise<void>;

web/components/account/sign-in-forms/optional-set-password.tsx

@@ -157,7 +157,7 @@ export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
               </div>
             )}
           />
-          <p className="text-onboarding-text-200 text-xs mt-2 pb-3">
+          <p className="mt-2 pb-3 text-xs text-onboarding-text-200">
             Whatever you choose now will be your account{"'"}s password until you change it.
           </p>
         </div>

web/components/account/sign-in-forms/password.tsx

@@ -1,22 +1,22 @@
 import React, { useState } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff, XCircle } from "lucide-react";
 // services
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { ESignInSteps, ForgotPasswordPopover } from "components/account";
+import { FORGOT_PASSWORD, SIGN_IN_WITH_PASSWORD } from "constants/event-tracker";
+import { checkEmailValidity } from "helpers/string.helper";
+import { useApplication, useEventTracker } from "hooks/store";
 import { AuthService } from "services/auth.service";
 // hooks
-import { useApplication, useEventTracker } from "hooks/store";
 // components
-import { ESignInSteps, ForgotPasswordPopover } from "components/account";
 // ui
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IPasswordSignInData } from "@plane/types";
 // constants
-import { FORGOT_PASSWORD, SIGN_IN_WITH_PASSWORD } from "constants/event-tracker";
 
 type Props = {
   email: string;

web/components/account/sign-in-forms/root.tsx

@@ -1,11 +1,7 @@
 import React, { useEffect, useState } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 // hooks
-import { useApplication, useEventTracker } from "hooks/store";
-import useSignInRedirection from "hooks/use-sign-in-redirection";
-// components
-import { LatestFeatureBlock } from "components/common";
 import {
   SignInEmailForm,
   SignInUniqueCodeForm,
@@ -13,8 +9,12 @@ import {
   OAuthOptions,
   SignInOptionalSetPasswordForm,
 } from "components/account";
-// constants
+import { LatestFeatureBlock } from "components/common";
 import { NAVIGATE_TO_SIGNUP } from "constants/event-tracker";
+import { useApplication, useEventTracker } from "hooks/store";
+import useSignInRedirection from "hooks/use-sign-in-redirection";
+// components
+// constants
 
 export enum ESignInSteps {
   EMAIL = "EMAIL",

web/components/account/sign-in-forms/unique-code.tsx

@@ -2,19 +2,21 @@ import React, { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { CODE_VERIFIED } from "constants/event-tracker";
+import { checkEmailValidity } from "helpers/string.helper";
+import { useEventTracker } from "hooks/store";
+
+import useTimer from "hooks/use-timer";
 import { AuthService } from "services/auth.service";
 import { UserService } from "services/user.service";
 // hooks
-import useTimer from "hooks/use-timer";
-import { useEventTracker } from "hooks/store";
 // ui
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData, IMagicSignInData } from "@plane/types";
 // constants
-import { CODE_VERIFIED } from "constants/event-tracker";
 
 type Props = {
   email: string;

web/components/account/sign-up-forms/email.tsx

@@ -1,13 +1,13 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
-import { observer } from "mobx-react-lite";
 // services
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { checkEmailValidity } from "helpers/string.helper";
 import { AuthService } from "services/auth.service";
 // ui
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData } from "@plane/types";
 

web/components/account/sign-up-forms/optional-set-password.tsx

@@ -1,19 +1,19 @@
 import React, { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // services
+import { Eye, EyeOff } from "lucide-react";
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+import { ESignUpSteps } from "components/account";
+import { PASSWORD_CREATE_SKIPPED, SETUP_PASSWORD } from "constants/event-tracker";
+import { checkEmailValidity } from "helpers/string.helper";
+import { useEventTracker } from "hooks/store";
 import { AuthService } from "services/auth.service";
 // hooks
-import { useEventTracker } from "hooks/store";
 // ui
-import { Button, Input, TOAST_TYPE, setToast  } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // components
-import { ESignUpSteps } from "components/account";
 // constants
-import { PASSWORD_CREATE_SELECTED, PASSWORD_CREATE_SKIPPED, SETUP_PASSWORD } from "constants/event-tracker";
 // icons
-import { Eye, EyeOff } from "lucide-react";
 
 type Props = {
   email: string;
@@ -162,7 +162,7 @@ export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
               </div>
             )}
           />
-          <p className="text-onboarding-text-200 text-xs mt-2 pb-3">
+          <p className="mt-2 pb-3 text-xs text-onboarding-text-200">
             This password will continue to be your account{"'"}s password.
           </p>
         </div>

web/components/account/sign-up-forms/password.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
+import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff, XCircle } from "lucide-react";
 // services
-import { AuthService } from "services/auth.service";
 // ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { checkEmailValidity } from "helpers/string.helper";
+import { AuthService } from "services/auth.service";
 // types
 import { IPasswordSignInData } from "@plane/types";
 
@@ -134,7 +134,7 @@ export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
               </div>
             )}
           />
-          <p className="text-onboarding-text-200 text-xs mt-2 pb-3">
+          <p className="mt-2 pb-3 text-xs text-onboarding-text-200">
             This password will continue to be your account{"'"}s password.
           </p>
         </div>

web/components/account/sign-up-forms/root.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useEventTracker } from "hooks/store";
+import Link from "next/link";
-import useSignInRedirection from "hooks/use-sign-in-redirection";
-// components
 import {
   OAuthOptions,
   SignUpEmailForm,
@@ -11,9 +9,11 @@ import {
   SignUpPasswordForm,
   SignUpUniqueCodeForm,
 } from "components/account";
-import Link from "next/link";
-// constants
 import { NAVIGATE_TO_SIGNIN } from "constants/event-tracker";
+import { useApplication, useEventTracker } from "hooks/store";
+import useSignInRedirection from "hooks/use-sign-in-redirection";
+// components
+// constants
 
 export enum ESignUpSteps {
   EMAIL = "EMAIL",

web/components/account/sign-up-forms/unique-code.tsx

@@ -3,19 +3,20 @@ import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
 // services
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { CODE_VERIFIED } from "constants/event-tracker";
+import { checkEmailValidity } from "helpers/string.helper";
+import { useEventTracker } from "hooks/store";
+import useTimer from "hooks/use-timer";
 import { AuthService } from "services/auth.service";
 import { UserService } from "services/user.service";
 // hooks
-import useTimer from "hooks/use-timer";
-import { useEventTracker } from "hooks/store";
 // ui
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { checkEmailValidity } from "helpers/string.helper";
 // types
 import { IEmailCheckData, IMagicSignInData } from "@plane/types";
 // constants
-import { CODE_VERIFIED } from "constants/event-tracker";
 
 type Props = {
   email: string;

web/components/analytics/custom-analytics/custom-analytics.tsx

@@ -1,17 +1,17 @@
-import { useRouter } from "next/router";
-import useSWR from "swr";
-import { useForm } from "react-hook-form";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import useSWR from "swr";
 // services
-import { AnalyticsService } from "services/analytics.service";
 // components
 import { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSidebar } from "components/analytics";
 // types
-import { IAnalyticsParams } from "@plane/types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
 import { cn } from "helpers/common.helper";
 import { useApplication } from "hooks/store";
+import { AnalyticsService } from "services/analytics.service";
+import { IAnalyticsParams } from "@plane/types";
 
 type Props = {
   additionalParams?: Partial<IAnalyticsParams>;

web/components/analytics/custom-analytics/graph/index.tsx

@@ -1,15 +1,15 @@
 // nivo
 import { BarDatum } from "@nivo/bar";
 // components
-import { CustomTooltip } from "./custom-tooltip";
 import { Tooltip } from "@plane/ui";
 // ui
 import { BarGraph } from "components/ui";
 // helpers
-import { findStringWithMostCharacters } from "helpers/array.helper";
 import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
+import { findStringWithMostCharacters } from "helpers/array.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse } from "@plane/types";
+import { CustomTooltip } from "./custom-tooltip";
 
 type Props = {
   analytics: IAnalyticsResponse;

web/components/analytics/custom-analytics/main-content.tsx

@@ -2,15 +2,15 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 
 // components
+import { Button, Loader } from "@plane/ui";
 import { AnalyticsGraph, AnalyticsTable } from "components/analytics";
 // ui
-import { Button, Loader } from "@plane/ui";
 // helpers
+import { ANALYTICS } from "constants/fetch-keys";
 import { convertResponseToBarGraphData } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse } from "@plane/types";
 // fetch-keys
-import { ANALYTICS } from "constants/fetch-keys";
 
 type Props = {
   analytics: IAnalyticsResponse | undefined;

web/components/analytics/custom-analytics/select-bar.tsx

@@ -1,9 +1,9 @@
 import { observer } from "mobx-react-lite";
 import { Control, Controller, UseFormSetValue } from "react-hook-form";
 // hooks
+import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
 import { useProject } from "hooks/store";
 // components
-import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
 // types
 import { IAnalyticsParams } from "@plane/types";
 
@@ -22,8 +22,9 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-1 sm:grid-cols-3" : "grid-cols-2"} ${fullScreen ? "md:py-5 lg:grid-cols-4" : ""
+      className={`grid items-center gap-4 px-5 py-2.5 ${
-        }`}
+        isProjectLevel ? "grid-cols-1 sm:grid-cols-3" : "grid-cols-2"
+      } ${fullScreen ? "md:py-5 lg:grid-cols-4" : ""}`}
     >
       {!isProjectLevel && (
         <div>

web/components/analytics/custom-analytics/select/project.tsx

@@ -1,8 +1,8 @@
 import { observer } from "mobx-react-lite";
 // hooks
+import { CustomSearchSelect } from "@plane/ui";
 import { useProject } from "hooks/store";
 // ui
-import { CustomSearchSelect } from "@plane/ui";
 
 type Props = {
   value: string[] | undefined;

web/components/analytics/custom-analytics/select/segment.tsx

@@ -3,9 +3,9 @@ import { useRouter } from "next/router";
 // ui
 import { CustomSelect } from "@plane/ui";
 // types
+import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
 import { IAnalyticsParams, TXAxisValues } from "@plane/types";
 // constants
-import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   value: TXAxisValues | null | undefined;

web/components/analytics/custom-analytics/select/x-axis.tsx

@@ -3,9 +3,9 @@ import { useRouter } from "next/router";
 // ui
 import { CustomSelect } from "@plane/ui";
 // types
+import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
 import { IAnalyticsParams, TXAxisValues } from "@plane/types";
 // constants
-import { ANALYTICS_X_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   value: TXAxisValues;

web/components/analytics/custom-analytics/select/y-axis.tsx

@@ -1,9 +1,9 @@
 // ui
 import { CustomSelect } from "@plane/ui";
 // types
+import { ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
 import { TYAxisValues } from "@plane/types";
 // constants
-import { ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   value: TYAxisValues;

web/components/analytics/custom-analytics/sidebar/projects-list.tsx

@@ -1,11 +1,11 @@
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject } from "hooks/store";
 // icons
 import { Contrast, LayoutGrid, Users } from "lucide-react";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 import { truncateText } from "helpers/string.helper";
+import { useProject } from "hooks/store";
 
 type Props = {
   projectIds: string[];

web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx

@@ -1,12 +1,12 @@
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
+import { NETWORK_CHOICES } from "constants/project";
+import { renderFormattedDate } from "helpers/date-time.helper";
+import { renderEmoji } from "helpers/emoji.helper";
 import { useCycle, useMember, useModule, useProject } from "hooks/store";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
-import { renderFormattedDate } from "helpers/date-time.helper";
 // constants
-import { NETWORK_CHOICES } from "constants/project";
 
 export const CustomAnalyticsSidebarHeader = observer(() => {
   const router = useRouter();

web/components/analytics/custom-analytics/sidebar/sidebar.tsx

@@ -1,24 +1,24 @@
 import { useEffect } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { mutate } from "swr";
 // services
-import { AnalyticsService } from "services/analytics.service";
 // hooks
-import { useCycle, useModule, useProject, useUser, useWorkspace } from "hooks/store";
 // components
-import { CustomAnalyticsSidebarHeader, CustomAnalyticsSidebarProjectsList } from "components/analytics";
 // ui
+import { CalendarDays, Download, RefreshCw } from "lucide-react";
 import { Button, LayersIcon, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
-import { CalendarDays, Download, RefreshCw } from "lucide-react";
+import { CustomAnalyticsSidebarHeader, CustomAnalyticsSidebarProjectsList } from "components/analytics";
 // helpers
-import { renderFormattedDate } from "helpers/date-time.helper";
 // types
-import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IWorkspace } from "@plane/types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
 import { cn } from "helpers/common.helper";
+import { renderFormattedDate } from "helpers/date-time.helper";
+import { useCycle, useModule, useProject, useUser, useWorkspace } from "hooks/store";
+import { AnalyticsService } from "services/analytics.service";
+import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IWorkspace } from "@plane/types";
 
 type Props = {
   analytics: IAnalyticsResponse | undefined;
@@ -143,7 +143,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
   return (
     <div
       className={cn(
-        "relative h-full flex w-full gap-2 justify-between items-start px-5 py-4 bg-custom-sidebar-background-100",
+        "relative flex h-full w-full items-start justify-between gap-2 bg-custom-sidebar-background-100 px-5 py-4",
         !isProjectLevel ? "flex-col" : ""
       )}
     >
@@ -176,10 +176,10 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
         </>
       </div>
 
-      <div className="flex flex-wrap items-center gap-2 justify-end">
+      <div className="flex flex-wrap items-center justify-end gap-2">
         <Button
           variant="neutral-primary"
-          prependIcon={<RefreshCw className="h-3 md:h-3.5 w-3 md:w-3.5" />}
+          prependIcon={<RefreshCw className="h-3 w-3 md:h-3.5 md:w-3.5" />}
           onClick={() => {
             if (!workspaceSlug) return;
 

web/components/analytics/custom-analytics/table.tsx

@@ -3,11 +3,11 @@ import { BarDatum } from "@nivo/bar";
 // icons
 import { PriorityIcon } from "@plane/ui";
 // helpers
+import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
 import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "@plane/types";
 // constants
-import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   analytics: IAnalyticsResponse;

web/components/analytics/project-modal/main-content.tsx

@@ -4,9 +4,9 @@ import { Tab } from "@headlessui/react";
 // components
 import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
 // types
+import { ANALYTICS_TABS } from "constants/analytics";
 import { ICycle, IModule, IProject } from "@plane/types";
 // constants
-import { ANALYTICS_TABS } from "constants/analytics";
 
 type Props = {
   fullScreen: boolean;
@@ -25,10 +25,13 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
           <Tab
             key={tab.key}
             className={({ selected }) =>
-              `rounded-0 w-full md:w-max md:rounded-3xl border-b md:border border-custom-border-200 focus:outline-none px-0 md:px-4 py-2 text-xs hover:bg-custom-background-80 ${selected ? "border-custom-primary-100 text-custom-primary-100 md:bg-custom-background-80 md:text-custom-text-200 md:border-custom-border-200" : "border-transparent"
+              `rounded-0 w-full md:w-max md:rounded-3xl border-b md:border border-custom-border-200 focus:outline-none px-0 md:px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                selected
+                  ? "border-custom-primary-100 text-custom-primary-100 md:bg-custom-background-80 md:text-custom-text-200 md:border-custom-border-200"
+                  : "border-transparent"
               }`
             }
-            onClick={() => { }}
+            onClick={() => {}}
           >
             {tab.title}
           </Tab>

web/components/analytics/project-modal/modal.tsx

@@ -38,11 +38,13 @@ export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
         >
           <Dialog.Panel className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
             <div
-              className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${fullScreen ? "w-full p-2" : "w-full sm:w-full md:w-1/2"
+              className={`fixed right-0 top-0 z-20 h-full bg-custom-background-100 shadow-custom-shadow-md ${
+                fullScreen ? "w-full p-2" : "w-full sm:w-full md:w-1/2"
               }`}
             >
               <div
-                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${fullScreen ? "rounded-lg border" : "border-l"
+                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
+                  fullScreen ? "rounded-lg border" : "border-l"
                 }`}
               >
                 <ProjectAnalyticsModalHeader

web/components/analytics/scope-and-demand/demand.tsx

@@ -1,9 +1,9 @@
 // icons
 import { Triangle } from "lucide-react";
 // types
+import { STATE_GROUPS } from "constants/state";
 import { IDefaultAnalyticsResponse, TStateGroups } from "@plane/types";
 // constants
-import { STATE_GROUPS } from "constants/state";
 
 type Props = {
   defaultAnalytics: IDefaultAnalyticsResponse;

web/components/analytics/scope-and-demand/scope-and-demand.tsx

@@ -3,13 +3,13 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import { AnalyticsService } from "services/analytics.service";
 // components
+import { Button, Loader } from "@plane/ui";
 import { AnalyticsDemand, AnalyticsLeaderBoard, AnalyticsScope, AnalyticsYearWiseIssues } from "components/analytics";
 // ui
-import { Button, Loader } from "@plane/ui";
 // fetch-keys
 import { DEFAULT_ANALYTICS } from "constants/fetch-keys";
+import { AnalyticsService } from "services/analytics.service";
 
 type Props = {
   fullScreen?: boolean;

web/components/analytics/scope-and-demand/year-wise-issues.tsx

@@ -1,11 +1,11 @@
 // ui
 import { LineGraph, ProfileEmptyState } from "components/ui";
 // image
+import { MONTHS_LIST } from "constants/calendar";
 import emptyGraph from "public/empty-state/empty_graph.svg";
 // types
 import { IDefaultAnalyticsResponse } from "@plane/types";
 // constants
-import { MONTHS_LIST } from "constants/calendar";
 
 type Props = {
   defaultAnalytics: IDefaultAnalyticsResponse;

web/components/api-token/delete-token-modal.tsx

@@ -3,13 +3,13 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // services
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { API_TOKENS_LIST } from "constants/fetch-keys";
 import { APITokenService } from "services/api_token.service";
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // types
 import { IApiToken } from "@plane/types";
 // fetch-keys
-import { API_TOKENS_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;

web/components/api-token/modal/create-token-modal.tsx

@@ -3,18 +3,19 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // services
+import { TOAST_TYPE, setToast } from "@plane/ui";
+
+import { CreateApiTokenForm, GeneratedTokenDetails } from "components/api-token";
+import { API_TOKENS_LIST } from "constants/fetch-keys";
+import { renderFormattedDate } from "helpers/date-time.helper";
+import { csvDownload } from "helpers/download.helper";
 import { APITokenService } from "services/api_token.service";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { CreateApiTokenForm, GeneratedTokenDetails } from "components/api-token";
 // helpers
-import { csvDownload } from "helpers/download.helper";
-import { renderFormattedDate } from "helpers/date-time.helper";
 // types
 import { IApiToken } from "@plane/types";
 // fetch-keys
-import { API_TOKENS_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;

web/components/api-token/token-list-item.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { XCircle } from "lucide-react";
 // components
+import { Tooltip } from "@plane/ui";
 import { DeleteApiTokenModal } from "components/api-token";
 // ui
-import { Tooltip } from "@plane/ui";
 // helpers
 import { renderFormattedDate, calculateTimeAgo } from "helpers/date-time.helper";
 // types

web/components/auth-screens/not-authorized-view.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
 // hooks
 import { useUser } from "hooks/store";
 // layouts

web/components/auth-screens/project/join-project.tsx

@@ -2,11 +2,11 @@ import { useState } from "react";
 import Image from "next/image";
 import { useRouter } from "next/router";
 // hooks
+import { ClipboardList } from "lucide-react";
+import { Button } from "@plane/ui";
 import { useProject, useUser } from "hooks/store";
 // ui
-import { Button } from "@plane/ui";
 // icons
-import { ClipboardList } from "lucide-react";
 // images
 import JoinProjectImg from "public/auth/project-not-authorized.svg";
 

web/components/auth-screens/workspace/not-a-member.tsx

@@ -1,9 +1,9 @@
 import Link from "next/link";
 
 // layouts
+import { Button } from "@plane/ui";
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { Button } from "@plane/ui";
 
 export const NotAWorkspaceMember = () => (
   <DefaultLayout>

web/components/automation/auto-archive-automation.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
-import { useProject, useUser } from "hooks/store";
 // component
+import { ArchiveRestore } from "lucide-react";
 import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui";
 import { SelectMonthModal } from "components/automation";
 // icon
-import { ArchiveRestore } from "lucide-react";
 // constants
 import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "constants/project";
+import { useProject, useUser } from "hooks/store";
 // types
 import { IProject } from "@plane/types";
 

web/components/automation/auto-close-automation.tsx

@@ -1,16 +1,16 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
+import { ArchiveX } from "lucide-react";
+import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } from "@plane/ui";
+import { SelectMonthModal } from "components/automation";
+import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "constants/project";
 import { useProject, useProjectState, useUser } from "hooks/store";
 // component
-import { SelectMonthModal } from "components/automation";
-import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } from "@plane/ui";
 // icons
-import { ArchiveX } from "lucide-react";
 // types
 import { IProject } from "@plane/types";
 // constants
-import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "constants/project";
 
 type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;

web/components/breadcrumbs/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { useRouter } from "next/router";
 import Link from "next/link";
+import { useRouter } from "next/router";
 // icons
 import { MoveLeft } from "lucide-react";
 

web/components/command-palette/actions/help-actions.tsx

@@ -1,9 +1,9 @@
 import { Command } from "cmdk";
 import { FileText, GithubIcon, MessageSquare, Rocket } from "lucide-react";
 // hooks
+import { DiscordIcon } from "@plane/ui";
 import { useApplication } from "hooks/store";
 // ui
-import { DiscordIcon } from "@plane/ui";
 
 type Props = {
   closePalette: () => void;

web/components/command-palette/actions/issue-actions/actions-list.tsx

@@ -1,16 +1,16 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2 } from "lucide-react";
 // hooks
+import { DoubleCircleIcon, UserGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { EIssuesStoreType } from "constants/issue";
+import { copyTextToClipboard } from "helpers/string.helper";
 import { useApplication, useUser, useIssues } from "hooks/store";
 // ui
-import { DoubleCircleIcon, UserGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import { TIssue } from "@plane/types";
-import { EIssuesStoreType } from "constants/issue";
 
 type Props = {
   closePalette: () => void;

web/components/command-palette/actions/issue-actions/change-assignee.tsx

@@ -1,14 +1,14 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Check } from "lucide-react";
 // mobx store
+import { Avatar } from "@plane/ui";
+import { EIssuesStoreType } from "constants/issue";
 import { useIssues, useMember } from "hooks/store";
 // ui
-import { Avatar } from "@plane/ui";
 // types
 import { TIssue } from "@plane/types";
-import { EIssuesStoreType } from "constants/issue";
 
 type Props = {
   closePalette: () => void;

web/components/command-palette/actions/issue-actions/change-priority.tsx

@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { Check } from "lucide-react";
 // mobx store
+import { PriorityIcon } from "@plane/ui";
+import { EIssuesStoreType, ISSUE_PRIORITIES } from "constants/issue";
 import { useIssues } from "hooks/store";
 // ui
-import { PriorityIcon } from "@plane/ui";
 // types
 import { TIssue, TIssuePriorities } from "@plane/types";
 // constants
-import { EIssuesStoreType, ISSUE_PRIORITIES } from "constants/issue";
 
 type Props = {
   closePalette: () => void;

web/components/command-palette/actions/issue-actions/change-state.tsx

@@ -1,15 +1,15 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
 import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
+import { Check } from "lucide-react";
+import { Spinner, StateGroupIcon } from "@plane/ui";
+import { EIssuesStoreType } from "constants/issue";
 import { useProjectState, useIssues } from "hooks/store";
 // ui
-import { Spinner, StateGroupIcon } from "@plane/ui";
 // icons
-import { Check } from "lucide-react";
 // types
 import { TIssue } from "@plane/types";
-import { EIssuesStoreType } from "constants/issue";
 
 type Props = {
   closePalette: () => void;

web/components/command-palette/actions/project-actions.tsx

@@ -1,9 +1,9 @@
 import { Command } from "cmdk";
 import { ContrastIcon, FileText } from "lucide-react";
 // hooks
+import { DiceIcon, PhotoFilterIcon } from "@plane/ui";
 import { useApplication, useEventTracker } from "hooks/store";
 // ui
-import { DiceIcon, PhotoFilterIcon } from "@plane/ui";
 
 type Props = {
   closePalette: () => void;

web/components/command-palette/actions/search-results.tsx

@@ -1,5 +1,5 @@
-import { useRouter } from "next/router";
 import { Command } from "cmdk";
+import { useRouter } from "next/router";
 // helpers
 import { commandGroups } from "components/command-palette";
 // types

web/components/command-palette/actions/theme-actions.tsx

@@ -1,14 +1,14 @@
 import React, { FC, useEffect, useState } from "react";
 import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
 import { Settings } from "lucide-react";
-import { observer } from "mobx-react-lite";
 // hooks
+import { TOAST_TYPE, setToast } from "@plane/ui";
+import { THEME_OPTIONS } from "constants/themes";
 import { useUser } from "hooks/store";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { THEME_OPTIONS } from "constants/themes";
 
 type Props = {
   closePalette: () => void;

web/components/command-palette/actions/workspace-settings-actions.tsx

@@ -1,10 +1,10 @@
-import { useRouter } from "next/router";
 import { Command } from "cmdk";
 // hooks
-import { useUser } from "hooks/store";
 import Link from "next/link";
+import { useRouter } from "next/router";
 // constants
 import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
+import { useUser } from "hooks/store";
 
 type Props = {
   closePalette: () => void;

web/components/command-palette/command-modal.tsx

@@ -1,18 +1,12 @@
 import React, { useEffect, useState } from "react";
+import { Command } from "cmdk";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { Command } from "cmdk";
 import { Dialog, Transition } from "@headlessui/react";
-import { observer } from "mobx-react-lite";
 import { FolderPlus, Search, Settings } from "lucide-react";
 // hooks
-import { useApplication, useEventTracker, useProject } from "hooks/store";
+import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
-// services
-import { WorkspaceService } from "services/workspace.service";
-import { IssueService } from "services/issue";
-// hooks
-import useDebounce from "hooks/use-debounce";
-// components
 import {
   CommandPaletteThemeActions,
   ChangeIssueAssignee,
@@ -24,11 +18,17 @@ import {
   CommandPaletteWorkspaceSettingsActions,
   CommandPaletteSearchResults,
 } from "components/command-palette";
-import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+import { useApplication, useEventTracker, useProject } from "hooks/store";
+// services
+import useDebounce from "hooks/use-debounce";
+import { IssueService } from "services/issue";
+import { WorkspaceService } from "services/workspace.service";
+// hooks
+// components
 // types
 import { IWorkspaceSearchResults } from "@plane/types";
 // fetch-keys
-import { ISSUE_DETAILS } from "constants/fetch-keys";
 
 // services
 const workspaceService = new WorkspaceService();

web/components/command-palette/command-palette.tsx

@@ -1,27 +1,28 @@
 import React, { useCallback, useEffect, FC } from "react";
+import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { observer } from "mobx-react-lite";
 // hooks
-import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
-// ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
+
 import { CommandModal, ShortcutsModal } from "components/command-palette";
+// ui
+// components
 import { BulkDeleteIssuesModal } from "components/core";
 import { CycleCreateUpdateModal } from "components/cycles";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { CreateUpdateModuleModal } from "components/modules";
+import { CreateUpdatePageModal } from "components/pages";
 import { CreateProjectModal } from "components/project";
 import { CreateUpdateProjectViewModal } from "components/views";
-import { CreateUpdatePageModal } from "components/pages";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
 // services
-import { IssueService } from "services/issue";
 // fetch keys
 import { ISSUE_DETAILS } from "constants/fetch-keys";
 import { EIssuesStoreType } from "constants/issue";
+import { copyTextToClipboard } from "helpers/string.helper";
+import { useApplication, useEventTracker, useIssues, useUser } from "hooks/store";
+import { IssueService } from "services/issue";
 
 // services
 const issueService = new IssueService();

web/components/command-palette/helpers.tsx

@@ -1,6 +1,6 @@
 // types
-import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
 import { Briefcase, FileText, LayoutGrid } from "lucide-react";
+import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
 import {
   IWorkspaceDefaultSearchResult,
   IWorkspaceIssueSearchResult,

web/components/command-palette/shortcuts-modal/modal.tsx

@@ -2,9 +2,9 @@ import { FC, useState, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { Search, X } from "lucide-react";
 // components
+import { Input } from "@plane/ui";
 import { ShortcutCommandsList } from "components/command-palette";
 // ui
-import { Input } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;

web/components/common/breadcrumb-link.tsx

@@ -1,5 +1,5 @@
-import { Tooltip } from "@plane/ui";
 import Link from "next/link";
+import { Tooltip } from "@plane/ui";
 
 type Props = {
   label?: string;

web/components/common/product-updates-modal.tsx

@@ -3,14 +3,14 @@ import useSWR from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import { WorkspaceService } from "services/workspace.service";
 // components
-import { MarkdownRenderer } from "components/ui";
-import { Loader } from "@plane/ui";
-// icons
 import { X } from "lucide-react";
+import { Loader } from "@plane/ui";
+import { MarkdownRenderer } from "components/ui";
+// icons
 // helpers
 import { renderFormattedDate } from "helpers/date-time.helper";
+import { WorkspaceService } from "services/workspace.service";
 
 type Props = {
   isOpen: boolean;

web/components/core/activity.tsx

@@ -1,10 +1,8 @@
-import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // store hooks
-import { useEstimate, useLabel } from "hooks/store";
 // icons
-import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui";
 import {
   TagIcon,
   CopyPlus,
@@ -20,9 +18,11 @@ import {
   MessageSquareIcon,
   UsersIcon,
 } from "lucide-react";
+import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui";
 // helpers
 import { renderFormattedDate } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
+import { useEstimate, useLabel } from "hooks/store";
 // types
 import { IIssueActivity } from "@plane/types";
 

web/components/core/filters/date-filter-modal.tsx

@@ -1,14 +1,14 @@
 import { Fragment } from "react";
-import { Controller, useForm } from "react-hook-form";
 import { DayPicker } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
 import { X } from "lucide-react";
 // components
-import { DateFilterSelect } from "./date-filter-select";
 // ui
 import { Button } from "@plane/ui";
 // helpers
 import { renderFormattedPayloadDate, renderFormattedDate } from "helpers/date-time.helper";
+import { DateFilterSelect } from "./date-filter-select";
 
 type Props = {
   title: string;
@@ -37,7 +37,8 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
   const handleFormSubmit = (formData: TFormValues) => {
     const { filterType, date1, date2 } = formData;
 
-    if (filterType === "range") onSelect([`${renderFormattedPayloadDate(date1)};after`, `${renderFormattedPayloadDate(date2)};before`]);
+    if (filterType === "range")
+      onSelect([`${renderFormattedPayloadDate(date1)};after`, `${renderFormattedPayloadDate(date2)};before`]);
     else onSelect([`${renderFormattedPayloadDate(date1)};${filterType}`]);
 
     handleClose();
@@ -92,9 +93,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                           defaultMonth={value ? new Date(value) : undefined}
                           onSelect={(date) => onChange(date)}
                           mode="single"
-                          disabled={[
+                          disabled={[{ after: new Date(watch("date2")) }]}
-                            { after: new Date(watch("date2")) }
-                          ]}
                           className="border border-custom-border-200 p-3 rounded-md"
                         />
                       )}
@@ -109,9 +108,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                             defaultMonth={value ? new Date(value) : undefined}
                             onSelect={(date) => onChange(date)}
                             mode="single"
-                            disabled={[
+                            disabled={[{ before: new Date(watch("date1")) }]}
-                              { before: new Date(watch("date1")) }
-                            ]}
                             className="border border-custom-border-200 p-3 rounded-md"
                           />
                         )}

web/components/core/image-picker-popover.tsx

@@ -1,22 +1,22 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
+import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import useSWR from "swr";
 import { useDropzone } from "react-dropzone";
-import { Tab, Popover } from "@headlessui/react";
 import { Control, Controller } from "react-hook-form";
+import useSWR from "swr";
+import { Tab, Popover } from "@headlessui/react";
 // hooks
+import { Button, Input, Loader } from "@plane/ui";
+import { MAX_FILE_SIZE } from "constants/common";
 import { useApplication, useWorkspace } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
 // services
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import { FileService } from "services/file.service";
 // hooks
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
-import { Button, Input, Loader } from "@plane/ui";
 // constants
-import { MAX_FILE_SIZE } from "constants/common";
 
 const tabOptions = [
   {

web/components/core/modals/bulk-delete-issues-modal.tsx

@@ -1,25 +1,26 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { SubmitHandler, useForm } from "react-hook-form";
+import useSWR from "swr";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
+import { Search } from "lucide-react";
+import { Button, LayersIcon, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+import { EIssuesStoreType } from "constants/issue";
+import { useIssues, useProject } from "hooks/store";
 import { IssueService } from "services/issue";
 // ui
-import { Button, LayersIcon, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
-import { Search } from "lucide-react";
 // types
 import { IUser, TIssue } from "@plane/types";
 // fetch keys
-import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 // store hooks
-import { useIssues, useProject } from "hooks/store";
 // components
 import { BulkDeleteIssuesModalItem } from "./bulk-delete-issues-modal-item";
 // constants
-import { EIssuesStoreType } from "constants/issue";
 
 type FormInput = {
   delete_issue_ids: string[];

web/components/core/modals/existing-issues-list-modal.tsx

@@ -2,10 +2,12 @@ import React, { useEffect, useState } from "react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { Rocket, Search, X } from "lucide-react";
 // services
-import { ProjectService } from "services/project";
-import useDebounce from "hooks/use-debounce";
-// ui
 import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+
+import useDebounce from "hooks/use-debounce";
+
+import { ProjectService } from "services/project";
+// ui
 // types
 import { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
 
@@ -180,7 +182,10 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                     )}
                   </div>
 
-                  <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto vertical-scrollbar scrollbar-md">
+                  <Combobox.Options
+                    static
+                    className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto"
+                  >
                     {searchTerm !== "" && (
                       <h5 className="mx-2 text-[0.825rem] text-custom-text-200">
                         Search results for{" "}

web/components/core/modals/gpt-assistant-popover.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useState, useRef, Fragment } from "react";
+import { Placement } from "@popperjs/core";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form"; // services
-import { AIService } from "services/ai.service";
-// hooks
 import { usePopper } from "react-popper";
+import { RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
+import { Popover, Transition } from "@headlessui/react";
+// hooks
 // ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
-import { Popover, Transition } from "@headlessui/react";
 // types
-import { Placement } from "@popperjs/core";
+import { AIService } from "services/ai.service";
 
 type Props = {
   isOpen: boolean;
@@ -192,7 +192,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
       >
         <Popover.Panel
           as="div"
-          className={`fixed z-10 flex flex-col w-full max-w-full min-w-[50rem] space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${className}`}
+          className={`fixed z-10 flex w-full min-w-[50rem] max-w-full flex-col space-y-4 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${className}`}
           ref={setPopperElement}
           style={styles.popper}
           {...attributes.popper}
@@ -211,7 +211,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
               </div>
             )}
             {response !== "" && (
-              <div className="page-block-section text-sm max-h-[8rem]">
+              <div className="page-block-section max-h-[8rem] text-sm">
                 Response:
                 <RichReadOnlyEditorWithRef
                   value={`<p>${response}</p>`}

web/components/core/modals/user-image-upload-modal.tsx

@@ -3,15 +3,16 @@ import { observer } from "mobx-react-lite";
 import { useDropzone } from "react-dropzone";
 import { Transition, Dialog } from "@headlessui/react";
 // hooks
+import { UserCircle2 } from "lucide-react";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+
+import { MAX_FILE_SIZE } from "constants/common";
 import { useApplication } from "hooks/store";
 // services
 import { FileService } from "services/file.service";
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
-import { UserCircle2 } from "lucide-react";
 // constants
-import { MAX_FILE_SIZE } from "constants/common";
 
 type Props = {
   handleDelete?: () => void;

web/components/core/modals/workspace-image-upload-modal.tsx

@@ -1,18 +1,18 @@
 import React, { useState } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 import { useDropzone } from "react-dropzone";
 import { Transition, Dialog } from "@headlessui/react";
 // hooks
+import { UserCircle2 } from "lucide-react";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+import { MAX_FILE_SIZE } from "constants/common";
 import { useApplication, useWorkspace } from "hooks/store";
 // services
 import { FileService } from "services/file.service";
 // ui
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
-import { UserCircle2 } from "lucide-react";
 // constants
-import { MAX_FILE_SIZE } from "constants/common";
 
 type Props = {
   handleRemove?: () => void;

web/components/core/render-if-visible-HOC.tsx

@@ -1,10 +1,10 @@
-import { cn } from "helpers/common.helper";
 import React, { useState, useRef, useEffect, ReactNode, MutableRefObject } from "react";
+import { cn } from "helpers/common.helper";
 
 type Props = {
   defaultHeight?: string;
   verticalOffset?: number;
-  horizonatlOffset?: number;
+  horizontalOffset?: number;
   root?: MutableRefObject<HTMLElement | null>;
   children: ReactNode;
   as?: keyof JSX.IntrinsicElements;
@@ -20,7 +20,7 @@ const RenderIfVisible: React.FC<Props> = (props) => {
     defaultHeight = "300px",
     root,
     verticalOffset = 50,
-    horizonatlOffset = 0,
+    horizontalOffset = 0,
     as = "div",
     children,
     classNames = "",
@@ -52,17 +52,18 @@ const RenderIfVisible: React.FC<Props> = (props) => {
         },
         {
           root: root?.current,
-          rootMargin: `${verticalOffset}% ${horizonatlOffset}% ${verticalOffset}% ${horizonatlOffset}%`,
+          rootMargin: `${verticalOffset}% ${horizontalOffset}% ${verticalOffset}% ${horizontalOffset}%`,
         }
       );
       observer.observe(intersectionRef.current);
       return () => {
         if (intersectionRef.current) {
+          // eslint-disable-next-line react-hooks/exhaustive-deps
           observer.unobserve(intersectionRef.current);
         }
       };
     }
-  }, [root?.current, intersectionRef, children, changingReference]);
+  }, [intersectionRef, children, changingReference, root, verticalOffset, horizontalOffset]);
 
   //Set height after render
   useEffect(() => {

web/components/core/sidebar/links-list.tsx

@@ -1,15 +1,14 @@
-// ui
+import { observer } from "mobx-react";
-import { ExternalLinkIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // icons
 import { Pencil, Trash2, LinkIcon } from "lucide-react";
+// ui
+import { ExternalLinkIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { calculateTimeAgo } from "helpers/date-time.helper";
+// hooks
+import { useMember } from "hooks/store";
 // types
 import { ILinkDetails, UserAuth } from "@plane/types";
-// hooks
-import { observer } from "mobx-react";
-import { useMeasure } from "@nivo/core";
-import { useMember } from "hooks/store";
 
 type Props = {
   links: ILinkDetails[];

web/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
+import { observer } from "mobx-react";
 import { Menu } from "lucide-react";
 import { useApplication } from "hooks/store";
-import { observer } from "mobx-react";
 
 type Props = {
   onClick?: () => void;

web/components/core/sidebar/sidebar-progress-stats.tsx

@@ -4,14 +4,14 @@ import Image from "next/image";
 // headless ui
 import { Tab } from "@headlessui/react";
 // hooks
+import { Avatar, StateGroupIcon } from "@plane/ui";
+import { SingleProgressStats } from "components/core";
 import useLocalStorage from "hooks/use-local-storage";
 // images
 import emptyLabel from "public/empty-state/empty_label.svg";
 import emptyMembers from "public/empty-state/empty_members.svg";
 // components
-import { SingleProgressStats } from "components/core";
 // ui
-import { Avatar, StateGroupIcon } from "@plane/ui";
 // types
 import {
   IModule,

web/components/core/theme/color-picker-input.tsx

@@ -1,5 +1,6 @@
 import { FC, Fragment } from "react";
 // react-form
+import { ColorResult, SketchPicker } from "react-color";
 import {
   Control,
   Controller,
@@ -11,12 +12,11 @@ import {
   UseFormWatch,
 } from "react-hook-form";
 // react-color
-import { ColorResult, SketchPicker } from "react-color";
 // component
 import { Popover, Transition } from "@headlessui/react";
+import { Palette } from "lucide-react";
 import { Input } from "@plane/ui";
 // icons
-import { Palette } from "lucide-react";
 // types
 import { IUserTheme } from "@plane/types";
 

web/components/core/theme/custom-theme-selector.tsx

@@ -1,10 +1,10 @@
 import { observer } from "mobx-react-lite";
-import { Controller, useForm } from "react-hook-form";
 import { useTheme } from "next-themes";
+import { Controller, useForm } from "react-hook-form";
 // hooks
+import { Button, InputColorPicker } from "@plane/ui";
 import { useUser } from "hooks/store";
 // ui
-import { Button, InputColorPicker } from "@plane/ui";
 // types
 import { IUserTheme } from "@plane/types";
 

web/components/core/theme/theme-switch.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
 // constants
+import { CustomSelect } from "@plane/ui";
 import { THEME_OPTIONS, I_THEME_OPTION } from "constants/themes";
 // ui
-import { CustomSelect } from "@plane/ui";
 
 type Props = {
   value: I_THEME_OPTION | null;

web/components/cycles/active-cycle-details.tsx

@@ -1,8 +1,8 @@
 import { MouseEvent } from "react";
-import Link from "next/link";
 import { observer } from "mobx-react-lite";
-import useSWR from "swr";
+import Link from "next/link";
 import { useTheme } from "next-themes";
+import useSWR from "swr";
 // hooks
 import { useCycle, useIssues, useMember, useProject, useUser } from "hooks/store";
 // ui
@@ -183,7 +183,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                   </Tooltip>
                 </span>
                 <span className="flex items-center gap-1">
-                  <span className="flex gap-1 whitespace-nowrap rounded-sm text-sm px-3 py-0.5 bg-amber-500/10 text-amber-500">
+                  <span className="flex gap-1 whitespace-nowrap rounded-sm bg-amber-500/10 px-3 py-0.5 text-sm text-amber-500">
                     {`${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`}
                   </span>
                   {activeCycle.is_favorite ? (
@@ -303,9 +303,9 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
         </div>
       </div>
       <div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
-        <div className="flex flex-col gap-3 p-4 max-h-60 overflow-hidden">
+        <div className="flex max-h-60 flex-col gap-3 overflow-hidden p-4">
           <div className="text-custom-primary">High Priority Issues</div>
-          <div className="flex flex-col h-full gap-2.5 overflow-y-scroll rounded-md">
+          <div className="flex h-full flex-col gap-2.5 overflow-y-scroll rounded-md">
             {activeCycleIssues ? (
               activeCycleIssues.length > 0 ? (
                 activeCycleIssues.map((issue: any) => (
@@ -329,17 +329,17 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                         <span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
                       </Tooltip>
                     </div>
-                    <div className="flex items-center gap-1.5 flex-shrink-0">
+                    <div className="flex flex-shrink-0 items-center gap-1.5">
                       <StateDropdown
                         value={issue.state_id ?? undefined}
                         onChange={() => {}}
                         projectId={projectId?.toString() ?? ""}
-                        disabled={true}
+                        disabled
                         buttonVariant="background-with-text"
                       />
                       {issue.target_date && (
                         <Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)}>
-                          <div className="h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80 cursor-not-allowed">
+                          <div className="flex h-full cursor-not-allowed items-center gap-1.5 rounded bg-custom-background-80 px-2 py-0.5 text-xs">
                             <CalendarCheck className="h-3 w-3 flex-shrink-0" />
                             <span className="text-xs">{renderFormattedDateWithoutYear(issue.target_date)}</span>
                           </div>
@@ -349,7 +349,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                   </Link>
                 ))
               ) : (
-                <div className="flex items-center justify-center h-full text-sm text-custom-text-200">
+                <div className="flex h-full items-center justify-center text-sm text-custom-text-200">
                   There are no high priority issues present in this cycle.
                 </div>
               )
@@ -362,7 +362,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
             )}
           </div>
         </div>
-        <div className="flex flex-col  border-custom-border-200 p-4 max-h-60">
+        <div className="flex max-h-60  flex-col border-custom-border-200 p-4">
           <div className="flex items-start justify-between gap-4 py-1.5 text-xs">
             <div className="flex items-center gap-3 text-custom-text-100">
               <div className="flex items-center justify-center gap-1">

web/components/cycles/active-cycle-stats.tsx

@@ -1,11 +1,11 @@
 import React, { Fragment } from "react";
 import { Tab } from "@headlessui/react";
 // hooks
+import { Avatar } from "@plane/ui";
+import { SingleProgressStats } from "components/core";
 import useLocalStorage from "hooks/use-local-storage";
 // components
-import { SingleProgressStats } from "components/core";
 // ui
-import { Avatar } from "@plane/ui";
 // types
 import { ICycle } from "@plane/types";
 

web/components/cycles/cycle-mobile-header.tsx

@@ -1,16 +1,16 @@
 import { useCallback, useState } from "react";
 import router from "next/router";
 //components
-import { CustomMenu } from "@plane/ui";
 // icons
 import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
 // hooks
-import { useIssues, useCycle, useProjectState, useLabel, useMember } from "hooks/store";
 // constants
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "constants/issue";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT, ISSUE_LAYOUTS } from "constants/issue";
+import { useIssues, useCycle, useProjectState, useLabel, useMember } from "hooks/store";
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 
 export const CycleMobileHeader = () => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
@@ -100,6 +100,7 @@ export const CycleMobileHeader = () => {
         >
           {layouts.map((layout, index) => (
             <CustomMenu.MenuItem
+              key={ISSUE_LAYOUTS[index].key}
               onClick={() => {
                 handleLayoutChange(ISSUE_LAYOUTS[index].key);
               }}

web/components/cycles/cycle-peek-overview.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
-import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
 import { useCycle } from "hooks/store";
 // components

web/components/cycles/cycles-board-card.tsx

@@ -1,12 +1,10 @@
 import { FC, MouseEvent, useState } from "react";
-import { useRouter } from "next/router";
-import Link from "next/link";
 import { observer } from "mobx-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
 // hooks
-import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
 // components
-import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
-// ui
 import {
   Avatar,
   AvatarGroup,
@@ -18,15 +16,17 @@ import {
   setToast,
   setPromiseToast,
 } from "@plane/ui";
+import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
+// ui
 // icons
-import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
 // helpers
+import { CYCLE_STATUS } from "constants/cycle";
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
+import { EUserWorkspaceRoles } from "constants/workspace";
 import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 // constants
-import { CYCLE_STATUS } from "constants/cycle";
+import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
-import { EUserWorkspaceRoles } from "constants/workspace";
-import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
 //.types
 import { TCycleGroups } from "@plane/types";
 

web/components/cycles/cycles-board.tsx

@@ -2,12 +2,12 @@ import { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
 // hooks
-import { useUser } from "hooks/store";
 // components
 import { CyclePeekOverview, CyclesBoardCard } from "components/cycles";
 import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // constants
 import { CYCLE_EMPTY_STATE_DETAILS } from "constants/empty-state";
+import { useUser } from "hooks/store";
 
 export interface ICyclesBoard {
   cycleIds: string[];

web/components/cycles/cycles-list-item.tsx

@@ -1,12 +1,9 @@
 import { FC, MouseEvent, useState } from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { observer } from "mobx-react";
 // hooks
-import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
+import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
-// components
-import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
-// ui
 import {
   CustomMenu,
   Tooltip,
@@ -18,17 +15,20 @@ import {
   setToast,
   setPromiseToast,
 } from "@plane/ui";
-// icons
+import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles";
-import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
+import { CYCLE_STATUS } from "constants/cycle";
-// helpers
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
+import { EUserWorkspaceRoles } from "constants/workspace";
 import { findHowManyDaysLeft, renderFormattedDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
+import { useEventTracker, useCycle, useUser, useMember } from "hooks/store";
+// components
+// ui
+// icons
+// helpers
 // constants
-import { CYCLE_STATUS } from "constants/cycle";
-import { EUserWorkspaceRoles } from "constants/workspace";
 // types
 import { TCycleGroups } from "@plane/types";
-import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "constants/event-tracker";
 
 type TCyclesListItem = {
   cycleId: string;
@@ -227,7 +227,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
                 </Tooltip>
               </div>
 
-              <button onClick={openCycleOverview} className="flex-shrink-0 z-[5] invisible group-hover:visible">
+              <button onClick={openCycleOverview} className="invisible z-[5] flex-shrink-0 group-hover:visible">
                 <Info className="h-4 w-4 text-custom-text-400" />
               </button>
             </div>

web/components/cycles/cycles-list.tsx

@@ -2,14 +2,14 @@ import { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { useTheme } from "next-themes";
 // hooks
-import { useUser } from "hooks/store";
 // components
+import { Loader } from "@plane/ui";
 import { CyclePeekOverview, CyclesListItem } from "components/cycles";
 import { EmptyState, getEmptyStateImagePath } from "components/empty-state";
 // ui
-import { Loader } from "@plane/ui";
 // constants
 import { CYCLE_EMPTY_STATE_DETAILS } from "constants/empty-state";
+import { useUser } from "hooks/store";
 
 export interface ICyclesList {
   cycleIds: string[];