From 4bb2c471f111e0ee458a9858dd5ef645a926b2f1 Mon Sep 17 00:00:00 2001
From: "Pablo F.G" <pablo.fernandez@prowler.com>
Date: Wed, 24 Jun 2026 11:42:11 +0200
Subject: [PATCH] refactor(ui): apply React 19 and styling guideline fixes

- Replace forwardRef/useMemo/useCallback usages flagged in review
- Drop default React import in invitation page
- Use cn() instead of clsx in ThemeSwitch
- Narrow eslint.config ignore list to explicit config files
---
 .../invitations/(send-invite)/new/page.tsx    |   2 +-
 ui/components/ThemeSwitch.tsx                 |   6 +-
 .../invitations/workflow/vertical-steps.tsx   | 379 +++++++++---------
 .../roles/workflow/vertical-steps.tsx         | 379 +++++++++---------
 ui/components/ui/accordion/Accordion.tsx      |  54 ++-
 ui/components/ui/action-card/ActionCard.tsx   |   6 +-
 ui/eslint.config.ts                           |   6 +-
 7 files changed, 413 insertions(+), 419 deletions(-)

diff --git a/ui/app/(prowler)/invitations/(send-invite)/new/page.tsx b/ui/app/(prowler)/invitations/(send-invite)/new/page.tsx
index 69485ba603..d0372c4f4b 100644
--- a/ui/app/(prowler)/invitations/(send-invite)/new/page.tsx
+++ b/ui/app/(prowler)/invitations/(send-invite)/new/page.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 
 import { getRoles } from "@/actions/roles";
 import { SkeletonInvitationInfo } from "@/components/invitations/workflow";
diff --git a/ui/components/ThemeSwitch.tsx b/ui/components/ThemeSwitch.tsx
index eae18202c9..430e33893a 100644
--- a/ui/components/ThemeSwitch.tsx
+++ b/ui/components/ThemeSwitch.tsx
@@ -4,7 +4,6 @@ import type { SwitchProps } from "@heroui/switch";
 import { useSwitch } from "@heroui/switch";
 import { useIsSSR } from "@react-aria/ssr";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
-import { clsx } from "clsx";
 import { useTheme } from "next-themes";
 import { FC } from "react";
 
@@ -13,6 +12,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/shadcn/tooltip";
+import { cn } from "@/lib/utils";
 
 import { MoonFilledIcon, SunFilledIcon } from "./icons";
 
@@ -50,7 +50,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
       <TooltipTrigger asChild>
         <Component
           {...getBaseProps({
-            className: clsx(
+            className: cn(
               "px-px transition-opacity hover:opacity-80 cursor-pointer",
               className,
               classNames?.base,
@@ -63,7 +63,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({
           <div
             {...getWrapperProps()}
             className={slots.wrapper({
-              class: clsx(
+              class: cn(
                 [
                   "h-auto w-auto",
                   "bg-transparent",
diff --git a/ui/components/invitations/workflow/vertical-steps.tsx b/ui/components/invitations/workflow/vertical-steps.tsx
index ce66a3749f..4bf97dd87e 100644
--- a/ui/components/invitations/workflow/vertical-steps.tsx
+++ b/ui/components/invitations/workflow/vertical-steps.tsx
@@ -3,8 +3,7 @@
 import { cn } from "@heroui/theme";
 import { useControlledState } from "@react-stately/utils";
 import { domAnimation, LazyMotion, m } from "framer-motion";
-import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
-import { forwardRef, useMemo } from "react";
+import type { ComponentProps, HTMLAttributes, ReactNode, Ref } from "react";
 
 export type VerticalStepProps = {
   className?: string;
@@ -59,6 +58,10 @@ export interface VerticalStepsProps extends HTMLAttributes<HTMLButtonElement> {
    * Callback function when the step index changes.
    */
   onStepChange?: (stepIndex: number) => void;
+  /**
+   * The ref forwarded to the step buttons.
+   */
+  ref?: Ref<HTMLButtonElement>;
 }
 
 function CheckIcon(props: ComponentProps<"svg">) {
@@ -87,205 +90,199 @@ function CheckIcon(props: ComponentProps<"svg">) {
   );
 }
 
-export const VerticalSteps = forwardRef<HTMLButtonElement, VerticalStepsProps>(
-  (
-    {
-      color = "primary",
-      steps = [],
-      defaultStep = 0,
-      onStepChange,
-      currentStep: currentStepProp,
-      hideProgressBars = false,
-      stepClassName,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const [currentStep, setCurrentStep] = useControlledState(
-      currentStepProp,
-      defaultStep,
-      onStepChange,
-    );
+export const VerticalSteps = ({
+  color = "primary",
+  steps = [],
+  defaultStep = 0,
+  onStepChange,
+  currentStep: currentStepProp,
+  hideProgressBars = false,
+  stepClassName,
+  className,
+  ref,
+  ...props
+}: VerticalStepsProps) => {
+  const [currentStep, setCurrentStep] = useControlledState(
+    currentStepProp,
+    defaultStep,
+    onStepChange,
+  );
 
-    const colors = useMemo(() => {
-      let userColor;
-      let fgColor;
+  const colors = (() => {
+    let userColor;
+    let fgColor;
 
-      const colorsVars = [
-        "[--active-fg-color:var(--step-fg-color)]",
-        "[--active-border-color:var(--step-color)]",
-        "[--active-color:var(--step-color)]",
-        "[--complete-background-color:var(--step-color)]",
-        "[--complete-border-color:var(--step-color)]",
-        "[--inactive-border-color:hsl(var(--heroui-default-300))]",
-        "[--inactive-color:hsl(var(--heroui-default-300))]",
-      ];
+    const colorsVars = [
+      "[--active-fg-color:var(--step-fg-color)]",
+      "[--active-border-color:var(--step-color)]",
+      "[--active-color:var(--step-color)]",
+      "[--complete-background-color:var(--step-color)]",
+      "[--complete-border-color:var(--step-color)]",
+      "[--inactive-border-color:hsl(var(--heroui-default-300))]",
+      "[--inactive-color:hsl(var(--heroui-default-300))]",
+    ];
 
-      switch (color) {
-        case "primary":
-          userColor = "[--step-color:var(--bg-button-primary)]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
-          break;
-        case "secondary":
-          userColor = "[--step-color:hsl(var(--heroui-secondary))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]";
-          break;
-        case "success":
-          userColor = "[--step-color:hsl(var(--heroui-success))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-success-foreground))]";
-          break;
-        case "warning":
-          userColor = "[--step-color:hsl(var(--heroui-warning))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-warning-foreground))]";
-          break;
-        case "danger":
-          userColor = "[--step-color:hsl(var(--heroui-error))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-error-foreground))]";
-          break;
-        case "default":
-          userColor = "[--step-color:hsl(var(--heroui-default))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-default-foreground))]";
-          break;
-        default:
-          userColor = "[--step-color:hsl(var(--heroui-primary))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
-          break;
-      }
+    switch (color) {
+      case "primary":
+        userColor = "[--step-color:var(--bg-button-primary)]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
+        break;
+      case "secondary":
+        userColor = "[--step-color:hsl(var(--heroui-secondary))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]";
+        break;
+      case "success":
+        userColor = "[--step-color:hsl(var(--heroui-success))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-success-foreground))]";
+        break;
+      case "warning":
+        userColor = "[--step-color:hsl(var(--heroui-warning))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-warning-foreground))]";
+        break;
+      case "danger":
+        userColor = "[--step-color:hsl(var(--heroui-error))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-error-foreground))]";
+        break;
+      case "default":
+        userColor = "[--step-color:hsl(var(--heroui-default))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-default-foreground))]";
+        break;
+      default:
+        userColor = "[--step-color:hsl(var(--heroui-primary))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
+        break;
+    }
 
-      if (!className?.includes("--step-fg-color")) colorsVars.unshift(fgColor);
-      if (!className?.includes("--step-color")) colorsVars.unshift(userColor);
-      if (!className?.includes("--inactive-bar-color"))
-        colorsVars.push(
-          "[--inactive-bar-color:hsl(var(--heroui-default-300))]",
-        );
+    if (!className?.includes("--step-fg-color")) colorsVars.unshift(fgColor);
+    if (!className?.includes("--step-color")) colorsVars.unshift(userColor);
+    if (!className?.includes("--inactive-bar-color"))
+      colorsVars.push("[--inactive-bar-color:hsl(var(--heroui-default-300))]");
 
-      return colorsVars;
-    }, [color, className]);
+    return colorsVars;
+  })();
 
-    return (
-      <nav aria-label="Progress" className="max-w-fit">
-        <ol className={cn("flex flex-col gap-y-3", colors, className)}>
-          {steps?.map((step, stepIdx) => {
-            const status =
-              currentStep === stepIdx
-                ? "active"
-                : currentStep < stepIdx
-                  ? "inactive"
-                  : "complete";
+  return (
+    <nav aria-label="Progress" className="max-w-fit">
+      <ol className={cn("flex flex-col gap-y-3", colors, className)}>
+        {steps?.map((step, stepIdx) => {
+          const status =
+            currentStep === stepIdx
+              ? "active"
+              : currentStep < stepIdx
+                ? "inactive"
+                : "complete";
 
-            return (
-              <li key={stepIdx} className="relative">
-                <div className="flex w-full max-w-full items-center">
-                  <button
-                    key={stepIdx}
-                    ref={ref}
-                    aria-current={status === "active" ? "step" : undefined}
-                    className={cn(
-                      "group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5",
-                      stepClassName,
-                    )}
-                    onClick={() => setCurrentStep(stepIdx)}
-                    {...props}
-                  >
-                    <div className="flex h-full items-center">
-                      <LazyMotion features={domAnimation}>
-                        <div className="relative">
-                          <m.div
-                            animate={status}
-                            className={cn(
-                              "border-medium text-large text-default-foreground relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold",
-                              {
-                                "shadow-lg": status === "complete",
-                              },
+          return (
+            <li key={stepIdx} className="relative">
+              <div className="flex w-full max-w-full items-center">
+                <button
+                  key={stepIdx}
+                  ref={ref}
+                  aria-current={status === "active" ? "step" : undefined}
+                  className={cn(
+                    "group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5",
+                    stepClassName,
+                  )}
+                  onClick={() => setCurrentStep(stepIdx)}
+                  {...props}
+                >
+                  <div className="flex h-full items-center">
+                    <LazyMotion features={domAnimation}>
+                      <div className="relative">
+                        <m.div
+                          animate={status}
+                          className={cn(
+                            "border-medium text-large text-default-foreground relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold",
+                            {
+                              "shadow-lg": status === "complete",
+                            },
+                          )}
+                          data-status={status}
+                          initial={false}
+                          transition={{ duration: 0.25 }}
+                          variants={{
+                            inactive: {
+                              backgroundColor: "transparent",
+                              borderColor: "var(--inactive-border-color)",
+                              color: "var(--inactive-color)",
+                            },
+                            active: {
+                              backgroundColor: "transparent",
+                              borderColor: "var(--active-border-color)",
+                              color: "var(--active-color)",
+                            },
+                            complete: {
+                              backgroundColor:
+                                "var(--complete-background-color)",
+                              borderColor: "var(--complete-border-color)",
+                            },
+                          }}
+                        >
+                          <div className="flex items-center justify-center">
+                            {status === "complete" ? (
+                              <CheckIcon className="h-6 w-6 text-(--active-fg-color)" />
+                            ) : (
+                              <span>{stepIdx + 1}</span>
                             )}
-                            data-status={status}
-                            initial={false}
-                            transition={{ duration: 0.25 }}
-                            variants={{
-                              inactive: {
-                                backgroundColor: "transparent",
-                                borderColor: "var(--inactive-border-color)",
-                                color: "var(--inactive-color)",
-                              },
-                              active: {
-                                backgroundColor: "transparent",
-                                borderColor: "var(--active-border-color)",
-                                color: "var(--active-color)",
-                              },
-                              complete: {
-                                backgroundColor:
-                                  "var(--complete-background-color)",
-                                borderColor: "var(--complete-border-color)",
-                              },
-                            }}
-                          >
-                            <div className="flex items-center justify-center">
-                              {status === "complete" ? (
-                                <CheckIcon className="h-6 w-6 text-(--active-fg-color)" />
-                              ) : (
-                                <span>{stepIdx + 1}</span>
-                              )}
-                            </div>
-                          </m.div>
-                        </div>
-                      </LazyMotion>
-                    </div>
-                    <div className="flex-1 text-left">
-                      <div>
-                        <div
-                          className={cn(
-                            "text-medium text-default-foreground font-medium transition-[color,opacity] duration-300 group-active:opacity-70",
-                            {
-                              "text-default-500": status === "inactive",
-                            },
-                          )}
-                        >
-                          {step.title}
-                        </div>
-                        <div
-                          className={cn(
-                            "text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70",
-                            {
-                              "text-default-500": status === "inactive",
-                            },
-                          )}
-                        >
-                          {step.description}
-                        </div>
+                          </div>
+                        </m.div>
+                      </div>
+                    </LazyMotion>
+                  </div>
+                  <div className="flex-1 text-left">
+                    <div>
+                      <div
+                        className={cn(
+                          "text-medium text-default-foreground font-medium transition-[color,opacity] duration-300 group-active:opacity-70",
+                          {
+                            "text-default-500": status === "inactive",
+                          },
+                        )}
+                      >
+                        {step.title}
+                      </div>
+                      <div
+                        className={cn(
+                          "text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70",
+                          {
+                            "text-default-500": status === "inactive",
+                          },
+                        )}
+                      >
+                        {step.description}
                       </div>
                     </div>
-                  </button>
-                </div>
-                {stepIdx < steps.length - 1 && !hideProgressBars && (
-                  <div
-                    aria-hidden="true"
-                    className={cn(
-                      "pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4",
-                    )}
-                    style={{
-                      // @ts-expect-error
-                      "--idx": stepIdx,
-                    }}
-                  >
-                    <div
-                      className={cn(
-                        "relative h-full w-0.5 bg-(--inactive-bar-color) transition-colors duration-300",
-                        "after:absolute after:block after:h-0 after:w-full after:bg-(--active-border-color) after:transition-[height] after:duration-300 after:content-['']",
-                        {
-                          "after:h-full": stepIdx < currentStep,
-                        },
-                      )}
-                    />
                   </div>
-                )}
-              </li>
-            );
-          })}
-        </ol>
-      </nav>
-    );
-  },
-);
+                </button>
+              </div>
+              {stepIdx < steps.length - 1 && !hideProgressBars && (
+                <div
+                  aria-hidden="true"
+                  className={cn(
+                    "pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4",
+                  )}
+                  style={{
+                    // @ts-expect-error
+                    "--idx": stepIdx,
+                  }}
+                >
+                  <div
+                    className={cn(
+                      "relative h-full w-0.5 bg-(--inactive-bar-color) transition-colors duration-300",
+                      "after:absolute after:block after:h-0 after:w-full after:bg-(--active-border-color) after:transition-[height] after:duration-300 after:content-['']",
+                      {
+                        "after:h-full": stepIdx < currentStep,
+                      },
+                    )}
+                  />
+                </div>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
 
 VerticalSteps.displayName = "VerticalSteps";
diff --git a/ui/components/roles/workflow/vertical-steps.tsx b/ui/components/roles/workflow/vertical-steps.tsx
index f5ce30aea6..c6e242ab22 100644
--- a/ui/components/roles/workflow/vertical-steps.tsx
+++ b/ui/components/roles/workflow/vertical-steps.tsx
@@ -3,8 +3,7 @@
 import { cn } from "@heroui/theme";
 import { useControlledState } from "@react-stately/utils";
 import { domAnimation, LazyMotion, m } from "framer-motion";
-import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
-import { forwardRef, useMemo } from "react";
+import type { ComponentProps, HTMLAttributes, ReactNode, Ref } from "react";
 
 export type VerticalStepProps = {
   className?: string;
@@ -59,6 +58,10 @@ export interface VerticalStepsProps extends HTMLAttributes<HTMLButtonElement> {
    * Callback function when the step index changes.
    */
   onStepChange?: (stepIndex: number) => void;
+  /**
+   * The ref forwarded to the step buttons.
+   */
+  ref?: Ref<HTMLButtonElement>;
 }
 
 function CheckIcon(props: ComponentProps<"svg">) {
@@ -87,205 +90,199 @@ function CheckIcon(props: ComponentProps<"svg">) {
   );
 }
 
-export const VerticalSteps = forwardRef<HTMLButtonElement, VerticalStepsProps>(
-  (
-    {
-      color = "primary",
-      steps = [],
-      defaultStep = 0,
-      onStepChange,
-      currentStep: currentStepProp,
-      hideProgressBars = false,
-      stepClassName,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const [currentStep, setCurrentStep] = useControlledState(
-      currentStepProp,
-      defaultStep,
-      onStepChange,
-    );
+export const VerticalSteps = ({
+  color = "primary",
+  steps = [],
+  defaultStep = 0,
+  onStepChange,
+  currentStep: currentStepProp,
+  hideProgressBars = false,
+  stepClassName,
+  className,
+  ref,
+  ...props
+}: VerticalStepsProps) => {
+  const [currentStep, setCurrentStep] = useControlledState(
+    currentStepProp,
+    defaultStep,
+    onStepChange,
+  );
 
-    const colors = useMemo(() => {
-      let userColor;
-      let fgColor;
+  const colors = (() => {
+    let userColor;
+    let fgColor;
 
-      const colorsVars = [
-        "[--active-fg-color:var(--step-fg-color)]",
-        "[--active-border-color:var(--step-color)]",
-        "[--active-color:var(--step-color)]",
-        "[--complete-background-color:var(--step-color)]",
-        "[--complete-border-color:var(--step-color)]",
-        "[--inactive-border-color:hsl(var(--heroui-default-300))]",
-        "[--inactive-color:hsl(var(--heroui-default-300))]",
-      ];
+    const colorsVars = [
+      "[--active-fg-color:var(--step-fg-color)]",
+      "[--active-border-color:var(--step-color)]",
+      "[--active-color:var(--step-color)]",
+      "[--complete-background-color:var(--step-color)]",
+      "[--complete-border-color:var(--step-color)]",
+      "[--inactive-border-color:hsl(var(--heroui-default-300))]",
+      "[--inactive-color:hsl(var(--heroui-default-300))]",
+    ];
 
-      switch (color) {
-        case "primary":
-          userColor = "[--step-color:hsl(var(--heroui-primary))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
-          break;
-        case "secondary":
-          userColor = "[--step-color:hsl(var(--heroui-secondary))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]";
-          break;
-        case "success":
-          userColor = "[--step-color:hsl(var(--heroui-success))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-success-foreground))]";
-          break;
-        case "warning":
-          userColor = "[--step-color:hsl(var(--heroui-warning))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-warning-foreground))]";
-          break;
-        case "danger":
-          userColor = "[--step-color:hsl(var(--heroui-error))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-error-foreground))]";
-          break;
-        case "default":
-          userColor = "[--step-color:hsl(var(--heroui-default))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-default-foreground))]";
-          break;
-        default:
-          userColor = "[--step-color:hsl(var(--heroui-primary))]";
-          fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
-          break;
-      }
+    switch (color) {
+      case "primary":
+        userColor = "[--step-color:hsl(var(--heroui-primary))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
+        break;
+      case "secondary":
+        userColor = "[--step-color:hsl(var(--heroui-secondary))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]";
+        break;
+      case "success":
+        userColor = "[--step-color:hsl(var(--heroui-success))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-success-foreground))]";
+        break;
+      case "warning":
+        userColor = "[--step-color:hsl(var(--heroui-warning))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-warning-foreground))]";
+        break;
+      case "danger":
+        userColor = "[--step-color:hsl(var(--heroui-error))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-error-foreground))]";
+        break;
+      case "default":
+        userColor = "[--step-color:hsl(var(--heroui-default))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-default-foreground))]";
+        break;
+      default:
+        userColor = "[--step-color:hsl(var(--heroui-primary))]";
+        fgColor = "[--step-fg-color:hsl(var(--heroui-primary-foreground))]";
+        break;
+    }
 
-      if (!className?.includes("--step-fg-color")) colorsVars.unshift(fgColor);
-      if (!className?.includes("--step-color")) colorsVars.unshift(userColor);
-      if (!className?.includes("--inactive-bar-color"))
-        colorsVars.push(
-          "[--inactive-bar-color:hsl(var(--heroui-default-300))]",
-        );
+    if (!className?.includes("--step-fg-color")) colorsVars.unshift(fgColor);
+    if (!className?.includes("--step-color")) colorsVars.unshift(userColor);
+    if (!className?.includes("--inactive-bar-color"))
+      colorsVars.push("[--inactive-bar-color:hsl(var(--heroui-default-300))]");
 
-      return colorsVars;
-    }, [color, className]);
+    return colorsVars;
+  })();
 
-    return (
-      <nav aria-label="Progress" className="max-w-fit">
-        <ol className={cn("flex flex-col gap-y-3", colors, className)}>
-          {steps?.map((step, stepIdx) => {
-            const status =
-              currentStep === stepIdx
-                ? "active"
-                : currentStep < stepIdx
-                  ? "inactive"
-                  : "complete";
+  return (
+    <nav aria-label="Progress" className="max-w-fit">
+      <ol className={cn("flex flex-col gap-y-3", colors, className)}>
+        {steps?.map((step, stepIdx) => {
+          const status =
+            currentStep === stepIdx
+              ? "active"
+              : currentStep < stepIdx
+                ? "inactive"
+                : "complete";
 
-            return (
-              <li key={stepIdx} className="relative">
-                <div className="flex w-full max-w-full items-center">
-                  <button
-                    key={stepIdx}
-                    ref={ref}
-                    aria-current={status === "active" ? "step" : undefined}
-                    className={cn(
-                      "group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5",
-                      stepClassName,
-                    )}
-                    onClick={() => setCurrentStep(stepIdx)}
-                    {...props}
-                  >
-                    <div className="flex h-full items-center">
-                      <LazyMotion features={domAnimation}>
-                        <div className="relative">
-                          <m.div
-                            animate={status}
-                            className={cn(
-                              "border-medium text-large text-default-foreground relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold",
-                              {
-                                "shadow-lg": status === "complete",
-                              },
+          return (
+            <li key={stepIdx} className="relative">
+              <div className="flex w-full max-w-full items-center">
+                <button
+                  key={stepIdx}
+                  ref={ref}
+                  aria-current={status === "active" ? "step" : undefined}
+                  className={cn(
+                    "group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5",
+                    stepClassName,
+                  )}
+                  onClick={() => setCurrentStep(stepIdx)}
+                  {...props}
+                >
+                  <div className="flex h-full items-center">
+                    <LazyMotion features={domAnimation}>
+                      <div className="relative">
+                        <m.div
+                          animate={status}
+                          className={cn(
+                            "border-medium text-large text-default-foreground relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold",
+                            {
+                              "shadow-lg": status === "complete",
+                            },
+                          )}
+                          data-status={status}
+                          initial={false}
+                          transition={{ duration: 0.25 }}
+                          variants={{
+                            inactive: {
+                              backgroundColor: "transparent",
+                              borderColor: "var(--inactive-border-color)",
+                              color: "var(--inactive-color)",
+                            },
+                            active: {
+                              backgroundColor: "transparent",
+                              borderColor: "var(--active-border-color)",
+                              color: "var(--active-color)",
+                            },
+                            complete: {
+                              backgroundColor:
+                                "var(--complete-background-color)",
+                              borderColor: "var(--complete-border-color)",
+                            },
+                          }}
+                        >
+                          <div className="flex items-center justify-center">
+                            {status === "complete" ? (
+                              <CheckIcon className="h-6 w-6 text-(--active-fg-color)" />
+                            ) : (
+                              <span>{stepIdx + 1}</span>
                             )}
-                            data-status={status}
-                            initial={false}
-                            transition={{ duration: 0.25 }}
-                            variants={{
-                              inactive: {
-                                backgroundColor: "transparent",
-                                borderColor: "var(--inactive-border-color)",
-                                color: "var(--inactive-color)",
-                              },
-                              active: {
-                                backgroundColor: "transparent",
-                                borderColor: "var(--active-border-color)",
-                                color: "var(--active-color)",
-                              },
-                              complete: {
-                                backgroundColor:
-                                  "var(--complete-background-color)",
-                                borderColor: "var(--complete-border-color)",
-                              },
-                            }}
-                          >
-                            <div className="flex items-center justify-center">
-                              {status === "complete" ? (
-                                <CheckIcon className="h-6 w-6 text-(--active-fg-color)" />
-                              ) : (
-                                <span>{stepIdx + 1}</span>
-                              )}
-                            </div>
-                          </m.div>
-                        </div>
-                      </LazyMotion>
-                    </div>
-                    <div className="flex-1 text-left">
-                      <div>
-                        <div
-                          className={cn(
-                            "text-medium text-default-foreground font-medium transition-[color,opacity] duration-300 group-active:opacity-70",
-                            {
-                              "text-default-500": status === "inactive",
-                            },
-                          )}
-                        >
-                          {step.title}
-                        </div>
-                        <div
-                          className={cn(
-                            "text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70",
-                            {
-                              "text-default-500": status === "inactive",
-                            },
-                          )}
-                        >
-                          {step.description}
-                        </div>
+                          </div>
+                        </m.div>
+                      </div>
+                    </LazyMotion>
+                  </div>
+                  <div className="flex-1 text-left">
+                    <div>
+                      <div
+                        className={cn(
+                          "text-medium text-default-foreground font-medium transition-[color,opacity] duration-300 group-active:opacity-70",
+                          {
+                            "text-default-500": status === "inactive",
+                          },
+                        )}
+                      >
+                        {step.title}
+                      </div>
+                      <div
+                        className={cn(
+                          "text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70",
+                          {
+                            "text-default-500": status === "inactive",
+                          },
+                        )}
+                      >
+                        {step.description}
                       </div>
                     </div>
-                  </button>
-                </div>
-                {stepIdx < steps.length - 1 && !hideProgressBars && (
-                  <div
-                    aria-hidden="true"
-                    className={cn(
-                      "pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4",
-                    )}
-                    style={{
-                      // @ts-expect-error
-                      "--idx": stepIdx,
-                    }}
-                  >
-                    <div
-                      className={cn(
-                        "relative h-full w-0.5 bg-(--inactive-bar-color) transition-colors duration-300",
-                        "after:absolute after:block after:h-0 after:w-full after:bg-(--active-border-color) after:transition-[height] after:duration-300 after:content-['']",
-                        {
-                          "after:h-full": stepIdx < currentStep,
-                        },
-                      )}
-                    />
                   </div>
-                )}
-              </li>
-            );
-          })}
-        </ol>
-      </nav>
-    );
-  },
-);
+                </button>
+              </div>
+              {stepIdx < steps.length - 1 && !hideProgressBars && (
+                <div
+                  aria-hidden="true"
+                  className={cn(
+                    "pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4",
+                  )}
+                  style={{
+                    // @ts-expect-error
+                    "--idx": stepIdx,
+                  }}
+                >
+                  <div
+                    className={cn(
+                      "relative h-full w-0.5 bg-(--inactive-bar-color) transition-colors duration-300",
+                      "after:absolute after:block after:h-0 after:w-full after:bg-(--active-border-color) after:transition-[height] after:duration-300 after:content-['']",
+                      {
+                        "after:h-full": stepIdx < currentStep,
+                      },
+                    )}
+                  />
+                </div>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
 
 VerticalSteps.displayName = "VerticalSteps";
diff --git a/ui/components/ui/accordion/Accordion.tsx b/ui/components/ui/accordion/Accordion.tsx
index 7d69e7e0f7..91999fff77 100644
--- a/ui/components/ui/accordion/Accordion.tsx
+++ b/ui/components/ui/accordion/Accordion.tsx
@@ -3,7 +3,7 @@
 import { Accordion as NextUIAccordion, AccordionItem } from "@heroui/accordion";
 import type { Selection } from "@react-types/shared";
 import { ChevronDown } from "lucide-react";
-import { Children, ReactNode, useCallback, useMemo, useState } from "react";
+import { Children, ReactNode, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
@@ -84,39 +84,35 @@ export const Accordion = ({
   );
 
   // Use selectedKeys if controlled, otherwise use internal state
-  const expandedKeys = useMemo(
-    () => (isControlled ? new Set(selectedKeys) : internalExpandedKeys),
-    [isControlled, selectedKeys, internalExpandedKeys],
-  );
+  const expandedKeys = isControlled
+    ? new Set(selectedKeys)
+    : internalExpandedKeys;
 
-  const handleSelectionChange = useCallback(
-    (keys: Selection) => {
-      const keysArray = Array.from(keys as Set<string>);
+  const handleSelectionChange = (keys: Selection) => {
+    const keysArray = Array.from(keys as Set<string>);
 
-      // If controlled mode, call parent callback
-      if (isControlled && onSelectionChange) {
-        onSelectionChange(keysArray);
-      } else {
-        // If uncontrolled, update internal state
-        setInternalExpandedKeys(keys);
-      }
+    // If controlled mode, call parent callback
+    if (isControlled && onSelectionChange) {
+      onSelectionChange(keysArray);
+    } else {
+      // If uncontrolled, update internal state
+      setInternalExpandedKeys(keys);
+    }
 
-      // Handle onItemExpand for backward compatibility
-      if (onItemExpand && keys !== expandedKeys) {
-        const currentKeys = Array.from(expandedKeys as Set<string>);
-        const newKeys = keysArray;
+    // Handle onItemExpand for backward compatibility
+    if (onItemExpand && keys !== expandedKeys) {
+      const currentKeys = Array.from(expandedKeys as Set<string>);
+      const newKeys = keysArray;
 
-        const newlyExpandedKeys = newKeys.filter(
-          (key) => !currentKeys.includes(key),
-        );
+      const newlyExpandedKeys = newKeys.filter(
+        (key) => !currentKeys.includes(key),
+      );
 
-        newlyExpandedKeys.forEach((key) => {
-          onItemExpand(key);
-        });
-      }
-    },
-    [expandedKeys, onItemExpand, isControlled, onSelectionChange],
-  );
+      newlyExpandedKeys.forEach((key) => {
+        onItemExpand(key);
+      });
+    }
+  };
 
   return (
     <NextUIAccordion
diff --git a/ui/components/ui/action-card/ActionCard.tsx b/ui/components/ui/action-card/ActionCard.tsx
index d571fb8e3d..ce00d60c6a 100644
--- a/ui/components/ui/action-card/ActionCard.tsx
+++ b/ui/components/ui/action-card/ActionCard.tsx
@@ -3,7 +3,7 @@
 import type { CardProps } from "@heroui/card";
 import { Card, CardBody } from "@heroui/card";
 import { Icon } from "@iconify/react";
-import { forwardRef, useMemo } from "react";
+import { forwardRef } from "react";
 
 import { cn } from "@/lib";
 
@@ -16,7 +16,7 @@ export type ActionCardProps = CardProps & {
 
 export const ActionCard = forwardRef<HTMLDivElement, ActionCardProps>(
   ({ color, title, icon, description, children, className, ...props }, ref) => {
-    const colors = useMemo(() => {
+    const colors = (() => {
       switch (color) {
         case "success":
           return {
@@ -50,7 +50,7 @@ export const ActionCard = forwardRef<HTMLDivElement, ActionCardProps>(
             icon: "text-default-500",
           };
       }
-    }, [color]);
+    })();
 
     return (
       <Card
diff --git a/ui/eslint.config.ts b/ui/eslint.config.ts
index 300606458d..cff90ac4ee 100644
--- a/ui/eslint.config.ts
+++ b/ui/eslint.config.ts
@@ -22,7 +22,11 @@ export default tseslint.config(
       "scripts/**",
       "*.config.js",
       "*.config.mjs",
-      "*.config.ts",
+      "auth.config.ts",
+      "eslint.config.ts",
+      "knip.config.ts",
+      "playwright.config.ts",
+      "vitest.config.ts",
       ".DS_Store",
       "node_modules/**",
       "coverage/**",