From b43832fa8facb46ae6ea1968196ce2511045208d Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Tue, 8 Oct 2024 11:23:52 +0200
Subject: [PATCH 1/3] chore: menu tweaks

---
 app/(prowler)/providers/page.tsx              |  2 +-
 components/auth/oss/auth-form.tsx             |  2 +-
 components/providers/forms/add-form.tsx       |  5 +-
 components/providers/radio-group-provider.tsx | 67 +++++++++++--------
 components/ui/sidebar/index.ts                | 10 +--
 .../{SidebarItems.tsx => sidebar-items.tsx}   | 22 +++---
 .../sidebar/{Sidebar.tsx => sidebar-tmp.tsx}  |  0
 .../{SidebarWrap.tsx => sidebar-wrap.tsx}     |  6 +-
 .../{TeamAvatar.tsx => team-avatar.tsx}       |  0
 .../{UserAvatar.tsx => user-avatar.tsx}       |  0
 10 files changed, 66 insertions(+), 48 deletions(-)
 rename components/ui/sidebar/{SidebarItems.tsx => sidebar-items.tsx} (97%)
 rename components/ui/sidebar/{Sidebar.tsx => sidebar-tmp.tsx} (100%)
 rename components/ui/sidebar/{SidebarWrap.tsx => sidebar-wrap.tsx} (98%)
 rename components/ui/sidebar/{TeamAvatar.tsx => team-avatar.tsx} (100%)
 rename components/ui/sidebar/{UserAvatar.tsx => user-avatar.tsx} (100%)

diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index b999671859..7ff10fbb5e 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/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(
diff --git a/components/auth/oss/auth-form.tsx b/components/auth/oss/auth-form.tsx
index 451e043c0b..2f4e3700a7 100644
--- a/components/auth/oss/auth-form.tsx
+++ b/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} />
diff --git a/components/providers/forms/add-form.tsx b/components/providers/forms/add-form.tsx
index 4c063c7aef..c721a709c0 100644
--- a/components/providers/forms/add-form.tsx
+++ b/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"
diff --git a/components/providers/radio-group-provider.tsx b/components/providers/radio-group-provider.tsx
index 392be4772d..82ee2edbae 100644
--- a/components/providers/radio-group-provider.tsx
+++ b/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" />
         </>
diff --git a/components/ui/sidebar/index.ts b/components/ui/sidebar/index.ts
index ec61cb2f3b..a12c0b800d 100644
--- a/components/ui/sidebar/index.ts
+++ b/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";
diff --git a/components/ui/sidebar/SidebarItems.tsx b/components/ui/sidebar/sidebar-items.tsx
similarity index 97%
rename from components/ui/sidebar/SidebarItems.tsx
rename to components/ui/sidebar/sidebar-items.tsx
index 497d29544a..dc0ab7b790 100644
--- a/components/ui/sidebar/SidebarItems.tsx
+++ b/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: "#",
diff --git a/components/ui/sidebar/Sidebar.tsx b/components/ui/sidebar/sidebar-tmp.tsx
similarity index 100%
rename from components/ui/sidebar/Sidebar.tsx
rename to components/ui/sidebar/sidebar-tmp.tsx
diff --git a/components/ui/sidebar/SidebarWrap.tsx b/components/ui/sidebar/sidebar-wrap.tsx
similarity index 98%
rename from components/ui/sidebar/SidebarWrap.tsx
rename to components/ui/sidebar/sidebar-wrap.tsx
index 08204b3392..ceacc5d3e1 100644
--- a/components/ui/sidebar/SidebarWrap.tsx
+++ b/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();
diff --git a/components/ui/sidebar/TeamAvatar.tsx b/components/ui/sidebar/team-avatar.tsx
similarity index 100%
rename from components/ui/sidebar/TeamAvatar.tsx
rename to components/ui/sidebar/team-avatar.tsx
diff --git a/components/ui/sidebar/UserAvatar.tsx b/components/ui/sidebar/user-avatar.tsx
similarity index 100%
rename from components/ui/sidebar/UserAvatar.tsx
rename to components/ui/sidebar/user-avatar.tsx

From 3d533b56ef0f12c96c69d5dd9b472a31758a7ac8 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Tue, 8 Oct 2024 11:24:31 +0200
Subject: [PATCH 2/3] chore: rename sidebar component

---
 components/ui/sidebar/index.ts                         | 2 +-
 components/ui/sidebar/sidebar-items.tsx                | 2 +-
 components/ui/sidebar/sidebar-wrap.tsx                 | 2 +-
 components/ui/sidebar/{sidebar-tmp.tsx => sidebar.tsx} | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename components/ui/sidebar/{sidebar-tmp.tsx => sidebar.tsx} (100%)

diff --git a/components/ui/sidebar/index.ts b/components/ui/sidebar/index.ts
index a12c0b800d..04abc63cc4 100644
--- a/components/ui/sidebar/index.ts
+++ b/components/ui/sidebar/index.ts
@@ -1,5 +1,5 @@
+export * from "./sidebar";
 export * from "./sidebar-items";
-export * from "./sidebar-tmp";
 export * from "./sidebar-wrap";
 export * from "./team-avatar";
 export * from "./user-avatar";
diff --git a/components/ui/sidebar/sidebar-items.tsx b/components/ui/sidebar/sidebar-items.tsx
index dc0ab7b790..3888e0e82a 100644
--- a/components/ui/sidebar/sidebar-items.tsx
+++ b/components/ui/sidebar/sidebar-items.tsx
@@ -1,7 +1,7 @@
 import { Icon } from "@iconify/react";
 import { Chip } from "@nextui-org/react";
 
-import { SidebarItem, SidebarItemType } from "./sidebar-tmp";
+import { SidebarItem, SidebarItemType } from "./sidebar";
 import { TeamAvatar } from "./team-avatar";
 
 /**
diff --git a/components/ui/sidebar/sidebar-wrap.tsx b/components/ui/sidebar/sidebar-wrap.tsx
index ceacc5d3e1..f458929815 100644
--- a/components/ui/sidebar/sidebar-wrap.tsx
+++ b/components/ui/sidebar/sidebar-wrap.tsx
@@ -17,7 +17,7 @@ import {
   ProwlerShort,
 } from "../../icons/prowler/ProwlerIcons";
 import { ThemeSwitch } from "../../ThemeSwitch";
-import Sidebar from "./sidebar-tmp";
+import Sidebar from "./sidebar";
 import { sectionItemsWithTeams } from "./sidebar-items";
 import { UserAvatar } from "./user-avatar";
 
diff --git a/components/ui/sidebar/sidebar-tmp.tsx b/components/ui/sidebar/sidebar.tsx
similarity index 100%
rename from components/ui/sidebar/sidebar-tmp.tsx
rename to components/ui/sidebar/sidebar.tsx

From b3c2f3a3fcf55671c13cd9bfb1a4d587d95d014c Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Tue, 8 Oct 2024 12:05:29 +0200
Subject: [PATCH 3/3] chore: tsx tweaks

---
 app/(prowler)/providers/page.tsx          |  4 +-
 app/(prowler)/scan/page.tsx               | 61 +++++++++++++++++++++++
 components/filters/data-filters.ts        | 11 +++-
 components/icons/prowler/ProwlerIcons.tsx |  2 +-
 components/ui/sidebar/sidebar-items.tsx   | 21 +-------
 components/ui/sidebar/sidebar-wrap.tsx    | 54 ++++++++++++++------
 6 files changed, 115 insertions(+), 38 deletions(-)
 create mode 100644 app/(prowler)/scan/page.tsx

diff --git a/app/(prowler)/providers/page.tsx b/app/(prowler)/providers/page.tsx
index 7ff10fbb5e..a2553da2ba 100644
--- a/app/(prowler)/providers/page.tsx
+++ b/app/(prowler)/providers/page.tsx
@@ -2,7 +2,7 @@ import { Spacer } from "@nextui-org/react";
 import { Suspense } from "react";
 
 import { getProviders } from "@/actions/providers";
-import { FilterControls, filtersProviders } from "@/components/filters";
+import { FilterControls, filterProviders } from "@/components/filters";
 import { AddProvider } from "@/components/providers";
 import {
   ColumnsProvider,
@@ -24,7 +24,7 @@ export default async function Providers({
       <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
 
       <Spacer y={4} />
-      <FilterControls search providers customFilters={filtersProviders} />
+      <FilterControls search providers customFilters={filterProviders} />
       <Spacer y={4} />
 
       <AddProvider />
diff --git a/app/(prowler)/scan/page.tsx b/app/(prowler)/scan/page.tsx
new file mode 100644
index 0000000000..e87b094ec5
--- /dev/null
+++ b/app/(prowler)/scan/page.tsx
@@ -0,0 +1,61 @@
+import { Spacer } from "@nextui-org/react";
+import { Suspense } from "react";
+
+// import { getProviders } from "@/actions/providers";
+import { FilterControls, filterScans } from "@/components/filters";
+import {
+  // ColumnsProvider,
+  // DataTableProvider,
+  SkeletonTableProvider,
+} from "@/components/providers/table";
+import { Header } from "@/components/ui";
+import { SearchParamsProps } from "@/types";
+
+export default async function Scan({
+  searchParams,
+}: {
+  searchParams: SearchParamsProps;
+}) {
+  const searchParamsKey = JSON.stringify(searchParams || {});
+
+  return (
+    <>
+      <Header title="Scanners" icon="lucide:scan-search" />
+
+      <Spacer y={4} />
+      <FilterControls search date providers customFilters={filterScans} />
+      <Spacer y={4} />
+
+      <Suspense key={searchParamsKey} fallback={<SkeletonTableProvider />}>
+        {/* <SSRDataTable searchParams={searchParams} /> */}
+      </Suspense>
+    </>
+  );
+}
+
+// const SSRDataTable = async ({
+//   searchParams,
+// }: {
+//   searchParams: SearchParamsProps;
+// }) => {
+//   const page = parseInt(searchParams.page?.toString() || "1", 10);
+//   const sort = searchParams.sort?.toString();
+
+//   // Extract all filter parameters
+//   const filters = Object.fromEntries(
+//     Object.entries(searchParams).filter(([key]) => key.startsWith("filter[")),
+//   );
+
+//   // Extract query from filters
+//   const query = (filters["filter[search]"] as string) || "";
+
+//   const providersData = await getProviders({ query, page, sort, filters });
+
+//   return (
+//     <DataTableProvider
+//       columns={ColumnsProvider}
+//       data={providersData?.data || []}
+//       metadata={providersData?.meta}
+//     />
+//   );
+// };
diff --git a/components/filters/data-filters.ts b/components/filters/data-filters.ts
index df1e01cea0..ca01c9b509 100644
--- a/components/filters/data-filters.ts
+++ b/components/filters/data-filters.ts
@@ -1,4 +1,13 @@
-export const filtersProviders = [
+export const filterProviders = [
+  {
+    key: "connected",
+    labelCheckboxGroup: "Connection",
+    values: ["false", "true"],
+  },
+  // Add more filter categories as needed
+];
+
+export const filterScans = [
   {
     key: "connected",
     labelCheckboxGroup: "Connection",
diff --git a/components/icons/prowler/ProwlerIcons.tsx b/components/icons/prowler/ProwlerIcons.tsx
index 425788e88b..ae0b989e6b 100644
--- a/components/icons/prowler/ProwlerIcons.tsx
+++ b/components/icons/prowler/ProwlerIcons.tsx
@@ -4,7 +4,7 @@ import { IconSvgProps } from "../../../types/index";
 
 export const ProwlerExtended: React.FC<IconSvgProps> = ({
   size,
-  width = 164,
+  width = 216,
   height,
   ...props
 }) => {
diff --git a/components/ui/sidebar/sidebar-items.tsx b/components/ui/sidebar/sidebar-items.tsx
index 3888e0e82a..7aa97ace94 100644
--- a/components/ui/sidebar/sidebar-items.tsx
+++ b/components/ui/sidebar/sidebar-items.tsx
@@ -120,8 +120,8 @@ export const sectionItems: SidebarItem[] = [
     title: "Scan",
     items: [
       {
-        key: "scanners",
-        href: "#",
+        key: "scan",
+        href: "/scan",
         icon: "lucide:scan-search",
         title: "Scanners",
       },
@@ -130,23 +130,6 @@ export const sectionItems: SidebarItem[] = [
         href: "/findings",
         title: "Findings",
         icon: "ph:list-checks-duotone",
-        items: [
-          {
-            key: "shareholders",
-            href: "#",
-            title: "Shareholders",
-          },
-          {
-            key: "note_holders",
-            href: "#",
-            title: "Note Holders",
-          },
-          {
-            key: "transactions_log",
-            href: "#",
-            title: "Transactions Log",
-          },
-        ],
       },
     ],
   },
diff --git a/components/ui/sidebar/sidebar-wrap.tsx b/components/ui/sidebar/sidebar-wrap.tsx
index f458929815..52434a6e1b 100644
--- a/components/ui/sidebar/sidebar-wrap.tsx
+++ b/components/ui/sidebar/sidebar-wrap.tsx
@@ -10,6 +10,7 @@ import React, { Suspense, useCallback } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
 import { logOut } from "@/actions/auth";
+import { AddIcon } from "@/components/icons";
 import { useUIStore } from "@/store";
 
 import {
@@ -17,6 +18,7 @@ import {
   ProwlerShort,
 } from "../../icons/prowler/ProwlerIcons";
 import { ThemeSwitch } from "../../ThemeSwitch";
+import { CustomButton } from "../custom";
 import Sidebar from "./sidebar";
 import { sectionItemsWithTeams } from "./sidebar-items";
 import { UserAvatar } from "./user-avatar";
@@ -50,9 +52,12 @@ export const SidebarWrap = () => {
       )}
     >
       <div
-        className={clsx("flex items-center justify-center gap-3 px-3", {
-          "gap-0": isCompact,
-        })}
+        className={clsx(
+          "flex w-full flex-col items-center justify-center gap-y-4 px-3",
+          {
+            "gap-0": isCompact,
+          },
+        )}
       >
         <div
           className={clsx({
@@ -64,24 +69,43 @@ export const SidebarWrap = () => {
         <div
           className={clsx({
             hidden: isCompact,
+            "!mt-0": !isCompact,
           })}
         >
           <ProwlerExtended />
         </div>
+        <Link href={"/profile"}>
+          <Suspense fallback={<p>Loading...</p>}>
+            <UserAvatar
+              userName={session?.user.name ?? "Guest"}
+              position={session?.user.companyName ?? "Company Name"}
+              isCompact={isCompact}
+            />
+          </Suspense>
+        </Link>
+
+        <div
+          className={clsx({
+            hidden: isCompact,
+            "w-full": !isCompact,
+          })}
+        >
+          <Link href={"/scan"}>
+            <CustomButton
+              className="w-full"
+              ariaLabel="Launch Scan"
+              variant="solid"
+              color="action"
+              size="md"
+              endContent={<AddIcon size={20} />}
+            >
+              Launch Scan
+            </CustomButton>
+          </Link>
+        </div>
       </div>
-      <Spacer y={8} />
 
-      <Link href={"/profile"}>
-        <Suspense fallback={<p>Loading...</p>}>
-          <UserAvatar
-            userName={session?.user.name ?? "Guest"}
-            position={session?.user.companyName ?? "Company Name"}
-            isCompact={isCompact}
-          />
-        </Suspense>
-      </Link>
-
-      <ScrollShadow hideScrollBar className="-mr-6 h-full max-h-full py-6 pr-6">
+      <ScrollShadow hideScrollBar className="-mr-6 h-full max-h-full py-4 pr-6">
         <Sidebar
           defaultSelectedKey="overview"
           isCompact={isCompact}