chore: menu tweaks

app/(prowler)/providers/page.tsx

@@ -43,7 +43,7 @@ const SSRDataTable = async ({
   searchParams: SearchParamsProps;
 }) => {
   const page = parseInt(searchParams.page?.toString() || "1", 10);
-  const sort = searchParams.sort?.toString() || "-inserted_at";
+  const sort = searchParams.sort?.toString();
 
   // Extract all filter parameters
   const filters = Object.fromEntries(

components/auth/oss/auth-form.tsx

@@ -116,7 +116,7 @@ export const AuthForm = ({ type }: { type: string }) => {
         {/* Background Pattern */}
         <div className="absolute h-full w-full bg-[radial-gradient(#94a3b8_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_10%,transparent_80%)]"></div>
 
-        <div className="dark:bg-prowler-black-900/90 relative z-10 flex w-full max-w-sm flex-col gap-4 rounded-large bg-white/90 px-8 py-10 shadow-small md:max-w-md">
+        <div className="relative z-10 flex w-full max-w-sm flex-col gap-4 rounded-large bg-white/90 px-8 py-10 shadow-small dark:bg-prowler-black-900/90 md:max-w-md">
           {/* Prowler Logo */}
           <div className="absolute -top-[100px] left-1/2 z-10 flex h-fit w-fit -translate-x-1/2">
             <ProwlerExtended width={300} />

components/providers/forms/add-form.tsx

@@ -67,7 +67,10 @@ export const AddForm = ({
         onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-4"
       >
-        <RadioGroupProvider control={form.control} />
+        <RadioGroupProvider
+          control={form.control}
+          isInvalid={!!form.formState.errors.providerType}
+        />
         <CustomInput
           control={form.control}
           name="providerId"

components/providers/radio-group-provider.tsx

@@ -22,7 +22,7 @@ export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
   const {
     Component,
     children,
-    description,
+    // description,
     getBaseProps,
     getWrapperProps,
     getInputProps,
@@ -37,7 +37,7 @@ export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
       className={cn(
         "group inline-flex flex-row-reverse items-center justify-between tap-highlight-transparent hover:opacity-70 active:opacity-50",
         "max-w-full cursor-pointer gap-4 rounded-lg border-2 border-default p-4",
-        "data-[selected=true]:border-primary",
+        "data-[selected=true]:border-primar w-full",
       )}
     >
       <VisuallyHidden>
@@ -48,11 +48,11 @@ export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
       </span>
       <div {...getLabelWrapperProps()}>
         {children && <span {...getLabelProps()}>{children}</span>}
-        {description && (
+        {/* {description && (
           <span className="text-small text-foreground opacity-70">
             {description}
           </span>
-        )}
+        )} */}
       </div>
     </Component>
   );
@@ -60,10 +60,12 @@ export const CustomRadio: React.FC<CustomRadioProps> = (props) => {
 
 interface RadioGroupProviderProps {
   control: Control<z.infer<typeof addProviderFormSchema>>;
+  isInvalid: boolean;
 }
 
 export const RadioGroupProvider: React.FC<RadioGroupProviderProps> = ({
   control,
+  isInvalid,
 }) => {
   return (
     <Controller
@@ -71,31 +73,38 @@ export const RadioGroupProvider: React.FC<RadioGroupProviderProps> = ({
       control={control}
       render={({ field }) => (
         <>
-          <RadioGroup label="Select one provider" {...field}>
-            <CustomRadio description="Amazon Web Services" value="aws">
-              <div className="flex items-center">
-                <AWSProviderBadge size={26} />
-                <span className="ml-2">AWS</span>
-              </div>
-            </CustomRadio>
-            <CustomRadio description="Google Cloud Platform" value="gcp">
-              <div className="flex items-center">
-                <GCPProviderBadge size={26} />
-                <span className="ml-2">GCP</span>
-              </div>
-            </CustomRadio>
-            <CustomRadio description="Microsoft Azure" value="azure">
-              <div className="flex items-center">
-                <AzureProviderBadge size={26} />
-                <span className="ml-2">Azure</span>
-              </div>
-            </CustomRadio>
-            <CustomRadio description="Kubernetes" value="kubernetes">
-              <div className="flex items-center">
-                <KS8ProviderBadge size={26} />
-                <span className="ml-2">Kubernetes</span>
-              </div>
-            </CustomRadio>
+          <RadioGroup
+            className="flex flex-wrap"
+            label="Select one provider"
+            isInvalid={isInvalid}
+            {...field}
+          >
+            <div className="grid grid-cols-2 gap-4">
+              <CustomRadio description="Amazon Web Services" value="aws">
+                <div className="flex items-center">
+                  <AWSProviderBadge size={26} />
+                  <span className="ml-2">AWS</span>
+                </div>
+              </CustomRadio>
+              <CustomRadio description="Google Cloud Platform" value="gcp">
+                <div className="flex items-center">
+                  <GCPProviderBadge size={26} />
+                  <span className="ml-2">GCP</span>
+                </div>
+              </CustomRadio>
+              <CustomRadio description="Microsoft Azure" value="azure">
+                <div className="flex items-center">
+                  <AzureProviderBadge size={26} />
+                  <span className="ml-2">Azure</span>
+                </div>
+              </CustomRadio>
+              <CustomRadio description="Kubernetes" value="kubernetes">
+                <div className="flex items-center">
+                  <KS8ProviderBadge size={26} />
+                  <span className="ml-2">Kubernetes</span>
+                </div>
+              </CustomRadio>
+            </div>
           </RadioGroup>
           <FormMessage className="text-system-error dark:text-system-error" />
         </>

components/ui/sidebar/index.ts

@@ -1,5 +1,5 @@
-export * from "./Sidebar";
-export * from "./SidebarItems";
-export * from "./SidebarWrap";
-export * from "./TeamAvatar";
-export * from "./UserAvatar";
+export * from "./sidebar-items";
+export * from "./sidebar-tmp";
+export * from "./sidebar-wrap";
+export * from "./team-avatar";
+export * from "./user-avatar";

components/ui/sidebar/sidebar-items.tsx

@@ -1,8 +1,8 @@
 import { Icon } from "@iconify/react";
 import { Chip } from "@nextui-org/react";
 
-import { SidebarItem, SidebarItemType } from "./Sidebar";
-import { TeamAvatar } from "./TeamAvatar";
+import { SidebarItem, SidebarItemType } from "./sidebar-tmp";
+import { TeamAvatar } from "./team-avatar";
 
 /**
  * Please check the https://nextui.org/docs/guide/routing to have a seamless router integration
@@ -119,6 +119,12 @@ export const sectionItems: SidebarItem[] = [
     key: "scan",
     title: "Scan",
     items: [
+      {
+        key: "scanners",
+        href: "#",
+        icon: "lucide:scan-search",
+        title: "Scanners",
+      },
       {
         key: "findings",
         href: "/findings",
@@ -142,12 +148,6 @@ export const sectionItems: SidebarItem[] = [
           },
         ],
       },
-      {
-        key: "tasks",
-        href: "#",
-        icon: "solar:checklist-minimalistic-outline",
-        title: "Tasks",
-      },
     ],
   },
   {
@@ -206,6 +206,12 @@ export const sectionItemsWithTeams: SidebarItem[] = [
         title: "Users",
         icon: "ci:users",
       },
+      {
+        key: "tasks",
+        href: "#",
+        icon: "solar:checklist-minimalistic-outline",
+        title: "Tasks",
+      },
       // {
       //   key: "memberships",
       //   href: "#",

components/ui/sidebar/sidebar-wrap.tsx

@@ -17,9 +17,9 @@ import {
   ProwlerShort,
 } from "../../icons/prowler/ProwlerIcons";
 import { ThemeSwitch } from "../../ThemeSwitch";
-import Sidebar from "./Sidebar";
-import { sectionItemsWithTeams } from "./SidebarItems";
-import { UserAvatar } from "./UserAvatar";
+import Sidebar from "./sidebar-tmp";
+import { sectionItemsWithTeams } from "./sidebar-items";
+import { UserAvatar } from "./user-avatar";
 
 export const SidebarWrap = () => {
   const pathname = usePathname();