Prwlr 4167 table component (#13)

* feat: now the import works as expected

* feat: now the import works as expected

* feat: create a CustomTable component

app/(prowler)/compliance/page.tsx

@@ -5,7 +5,7 @@ import { Header } from "@/components";
 export default function Compliance() {
   return (
     <>
-      <Header title="Compliance" icon="tabler:zoom-scan" />
+      <Header title="Compliance" icon="fluent-mdl2:compliance-audit" />
 
       <p>Hi hi from Compliance page</p>
     </>

app/(prowler)/findings/page.tsx

@@ -5,7 +5,7 @@ import { Header } from "@/components";
 export default function Findings() {
   return (
     <>
-      <Header title="Findings" icon="tabler:zoom-scan" />
+      <Header title="Findings" icon="ph:list-checks-duotone" />
 
       <p>Hi hi from Findings page</p>
     </>

app/(prowler)/integration/page.tsx

@@ -5,7 +5,7 @@ import { Header } from "@/components";
 export default function Integration() {
   return (
     <>
-      <Header title="Integration" icon="tabler:zoom-scan" />
+      <Header title="Integration" icon="tabler:puzzle" />
 
       <p>Hi hi from Integration page</p>
     </>

app/(prowler)/layout.tsx

@@ -45,7 +45,7 @@ export default function RootLayout({
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
           <div className="flex items-center h-dvh w-full justify-center overflow-hidden">
             <SidebarWrap />
-            <main className="w-full flex-1 flex-col p-4 mb-auto">
+            <main className="w-full h-full flex-1 flex-col p-4 mb-auto overflow-y-auto">
               {children}
             </main>
           </div>

app/(prowler)/page.tsx

@@ -5,7 +5,7 @@ import { Header } from "@/components";
 export default function Home() {
   return (
     <>
-      <Header title="Scan Overview" icon="tabler:zoom-scan" />
+      <Header title="Scan Overview" icon="solar:pie-chart-2-outline" />
 
       <p>Hi hi from Overview page</p>
     </>

app/(prowler)/providers/page.tsx

@@ -1,13 +1,30 @@
+import { Spacer } from "@nextui-org/react";
 import React from "react";
 
-import { Header } from "@/components";
+import { CustomTable, Header } from "@/components";
+
+const visibleColumns: string[] = [
+  "account",
+  "group",
+  "scan_status",
+  "last_scan",
+  "next_scan",
+  "resources",
+  "added",
+  "actions",
+];
 
 export default function Providers() {
   return (
     <>
-      <Header title="Providers" icon="tabler:zoom-scan" />
-
-      <p>Hi hi from Providers page</p>
+      <Header title="Providers" icon="fluent:cloud-sync-24-regular" />
+      <Spacer />
+      <CustomTable
+        initialVisibleColumns={visibleColumns}
+        initialRowsPerPage={10}
+        selectionMode={"none"}
+      />
+      <Spacer />
     </>
   );
 }

app/(prowler)/services/page.tsx

@@ -5,7 +5,10 @@ import { Header } from "@/components";
 export default function Services() {
   return (
     <>
-      <Header title="Services" icon="tabler:zoom-scan" />
+      <Header
+        title="Services"
+        icon="material-symbols:linked-services-outline"
+      />
 
       <p>Hi hi from Services page</p>
     </>

components/index.ts

@@ -1,2 +1,3 @@
 export * from "./ui/header/Header";
 export * from "./ui/sidebar";
+export * from "./ui/table/CustomTable";

components/ui/sidebar/SidebarItems.tsx

@@ -97,7 +97,7 @@ export const sectionItems: SidebarItem[] = [
       {
         key: "overview",
         href: "/",
-        icon: "solar:home-2-linear",
+        icon: "solar:pie-chart-2-outline",
         title: "Overview",
       },
       // {
@@ -129,13 +129,13 @@ export const sectionItems: SidebarItem[] = [
       {
         key: "services",
         href: "/services",
-        icon: "solar:users-group-two-rounded-outline",
+        icon: "material-symbols:linked-services-outline",
         title: "Services",
       },
       {
         key: "compliance",
         href: "/compliance",
-        icon: "solar:sort-by-time-linear",
+        icon: "fluent-mdl2:compliance-audit",
         title: "Compliance",
         endContent: (
           <Chip size="sm" variant="flat">
@@ -153,7 +153,7 @@ export const sectionItems: SidebarItem[] = [
         key: "findings",
         href: "/findings",
         title: "Findings",
-        icon: "solar:pie-chart-2-outline",
+        icon: "ph:list-checks-duotone",
         items: [
           {
             key: "shareholders",
@@ -181,7 +181,7 @@ export const sectionItems: SidebarItem[] = [
       {
         key: "providers",
         href: "/providers",
-        icon: "solar:gift-linear",
+        icon: "fluent:cloud-sync-24-regular",
         title: "Providers",
         endContent: (
           <Chip size="sm" variant="flat">
@@ -192,7 +192,7 @@ export const sectionItems: SidebarItem[] = [
       {
         key: "integration",
         href: "/integration",
-        icon: "solar:bill-list-outline",
+        icon: "tabler:puzzle",
         title: "Integration",
       },
       {

components/ui/table/CustomTable.tsx

@@ -0,0 +1,406 @@
+"use client";
+
+import {
+  Button,
+  Chip,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+  // Input,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  User,
+} from "@nextui-org/react";
+import React from "react";
+
+import {
+  columns,
+  Provider,
+  providers,
+  statusColorMap,
+  statusOptions,
+} from "../../../app/(prowler)/providers/data";
+import {
+  // ChevronDownIcon,
+  PlusIcon,
+  // SearchIcon,
+  VerticalDotsIcon,
+} from "../../icons/Icons";
+
+interface CustomTableProps {
+  initialVisibleColumns: string[];
+  initialRowsPerPage?: number;
+  selectionMode: "single" | "multiple" | "none";
+}
+
+type SortDirection = "ascending" | "descending";
+
+interface SortDescriptor {
+  column: string;
+  direction: SortDirection;
+}
+
+export const CustomTable: React.FC<CustomTableProps> = ({
+  initialVisibleColumns,
+  initialRowsPerPage = 5,
+  selectionMode = "none",
+}) => {
+  const [filterValue, setFilterValue] = React.useState("");
+  // const [selectedKeys, setSelectedKeys] = React.useState(new Set([]));
+  const selectedKeys = new Set([]);
+
+  // const [visibleColumns, setVisibleColumns] = React.useState<
+  //   string | Set<string>
+  // >(new Set(initialVisibleColumns));
+
+  const visibleColumns = new Set(initialVisibleColumns);
+
+  // const [statusFilter, setStatusFilter] = React.useState("all");
+  const statusFilter: string = "all";
+
+  const [rowsPerPage, setRowsPerPage] = React.useState(initialRowsPerPage);
+
+  // const [sortDescriptor, setSortDescriptor] = React.useState<SortDescriptor>({
+  //   column: "age",
+  //   direction: "ascending",
+  // });
+
+  const sortDescriptor: SortDescriptor = {
+    column: "age",
+    direction: "ascending",
+  };
+
+  const [page, setPage] = React.useState(1);
+
+  const pages = Math.ceil(providers.length / rowsPerPage);
+
+  const hasSearchFilter = Boolean(filterValue);
+
+  const headerColumns = React.useMemo(() => {
+    // if (visibleColumns === "all") return columns;
+
+    return columns.filter((column) =>
+      Array.from(visibleColumns).includes(column.uid),
+    );
+  }, [visibleColumns]);
+
+  const filteredItems = React.useMemo(() => {
+    let filteredUsers = [...providers];
+
+    if (hasSearchFilter) {
+      filteredUsers = filteredUsers.filter((provider) =>
+        provider.account.toLowerCase().includes(filterValue.toLowerCase()),
+      );
+    }
+    if (
+      statusFilter !== "all" &&
+      Array.from(statusFilter).length !== statusOptions.length
+    ) {
+      filteredUsers = filteredUsers.filter((provider) =>
+        Array.from(statusFilter).includes(provider.group),
+      );
+    }
+
+    return filteredUsers;
+  }, [providers, filterValue, statusFilter]);
+
+  const items = React.useMemo(() => {
+    const start = (page - 1) * rowsPerPage;
+    const end = start + rowsPerPage;
+
+    return filteredItems.slice(start, end);
+  }, [page, filteredItems, rowsPerPage]);
+
+  const sortedItems = React.useMemo(() => {
+    // The type "any" for a and b will removed in the next iteration.
+    return [...items].sort((a: any, b: any) => {
+      const first = a[sortDescriptor.column];
+      const second = b[sortDescriptor.column];
+      const cmp: number = first < second ? -1 : first > second ? 1 : 0;
+
+      return sortDescriptor.direction === "descending" ? -cmp : cmp;
+    });
+  }, [sortDescriptor, items]);
+
+  const renderCell = React.useCallback(
+    (provider: Provider, columnKey: keyof Provider) => {
+      // eslint-disable-next-line security/detect-object-injection
+      const cellValue = provider[columnKey];
+
+      switch (columnKey) {
+        case "account":
+          return (
+            <User
+              classNames={{
+                description: "text-default-500",
+              }}
+              description={provider.provider_id}
+              name={cellValue}
+            />
+          );
+        case "group":
+          return (
+            <div className="flex flex-col">
+              <p className="text-bold text-small capitalize">{cellValue}</p>
+              <p className="text-bold text-tiny capitalize text-default-500">
+                {provider.group}
+              </p>
+            </div>
+          );
+        case "scan_status":
+          return (
+            <Chip
+              className="capitalize border-none gap-1 text-default-600"
+              color={statusColorMap[provider.scan_status]}
+              size="sm"
+              variant="flat"
+            >
+              {cellValue}
+            </Chip>
+          );
+        case "actions":
+          return (
+            <div className="relative flex justify-end items-center gap-2">
+              <Dropdown className="bg-background border-1 border-default-200">
+                <DropdownTrigger>
+                  <Button isIconOnly radius="full" size="sm" variant="light">
+                    <VerticalDotsIcon className="text-default-400" />
+                  </Button>
+                </DropdownTrigger>
+                <DropdownMenu>
+                  <DropdownItem>Manage</DropdownItem>
+                  <DropdownItem>Delete</DropdownItem>
+                </DropdownMenu>
+              </Dropdown>
+            </div>
+          );
+        default:
+          return cellValue;
+      }
+    },
+    [],
+  );
+
+  const onRowsPerPageChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      setRowsPerPage(Number(e.target.value));
+      setPage(1);
+    },
+    [],
+  );
+
+  const onSearchChange = React.useCallback((value: string) => {
+    if (value) {
+      setFilterValue(value);
+      setPage(1);
+    } else {
+      setFilterValue("");
+    }
+  }, []);
+
+  const topContent = React.useMemo(() => {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-end gap-3 items-end">
+          {/* <Input
+            isClearable
+            classNames={{
+              base: "w-full sm:max-w-[44%]",
+              inputWrapper: "border-1",
+            }}
+            placeholder="Search by name..."
+            size="sm"
+            startContent={<SearchIcon className="text-default-300" />}
+            value={filterValue}
+            variant="bordered"
+            onClear={() => setFilterValue("")}
+            onValueChange={onSearchChange}
+          /> */}
+          <div className="flex gap-3">
+            {/* <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button
+                  endContent={<ChevronDownIcon className="text-small" />}
+                  size="sm"
+                  variant="flat"
+                >
+                  Status
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={statusFilter}
+                selectionMode="multiple"
+                onSelectionChange={setStatusFilter}
+              >
+                {statusOptions.map((status) => (
+                  <DropdownItem key={status.uid} className="capitalize">
+                    {capitalize(status.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button
+                  endContent={<ChevronDownIcon className="text-small" />}
+                  size="sm"
+                  variant="flat"
+                >
+                  Columns
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={visibleColumns}
+                selectionMode="multiple"
+                onSelectionChange={setVisibleColumns}
+              >
+                {columns.map((column) => (
+                  <DropdownItem key={column.uid} className="capitalize">
+                    {capitalize(column.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown> */}
+            <Button
+              className="bg-foreground text-background"
+              endContent={<PlusIcon />}
+              size="sm"
+            >
+              Add New
+            </Button>
+          </div>
+        </div>
+        <div className="flex justify-between items-center">
+          <span className="text-default-400 text-small">
+            Total {providers.length} entries
+          </span>
+          {items.length < initialRowsPerPage && <div>hi hi que pasa</div>}
+          <label className="flex items-center text-default-400 text-small">
+            Rows per page:
+            <select
+              className="bg-transparent outline-none text-default-400 text-small"
+              onChange={onRowsPerPageChange}
+              defaultValue={initialRowsPerPage}
+            >
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+            </select>
+          </label>
+        </div>
+      </div>
+    );
+  }, [
+    filterValue,
+    statusFilter,
+    visibleColumns,
+    onSearchChange,
+    onRowsPerPageChange,
+    providers.length,
+    hasSearchFilter,
+  ]);
+
+  const bottomContent = React.useMemo(() => {
+    return (
+      <div className="py-2 px-2 flex justify-between items-center">
+        <Pagination
+          showControls
+          classNames={{
+            cursor: "bg-foreground text-background",
+          }}
+          color="default"
+          isDisabled={hasSearchFilter}
+          page={page}
+          total={pages}
+          variant="light"
+          onChange={setPage}
+        />
+        {/* {selectionMode !== "none" && (
+          <span className="text-small text-default-400">
+            {selectedKeys === "all"
+              ? "All items selected"
+              : `${selectedKeys.size} of ${items.length} selected`}
+          </span>
+        )} */}
+      </div>
+    );
+  }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
+
+  const classNames = React.useMemo(
+    () => ({
+      wrapper: ["max-h-[382px]", "max-w-3xl"],
+      th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
+      td: [
+        // changing the rows border radius
+        // first
+        "group-data-[first=true]:first:before:rounded-none",
+        "group-data-[first=true]:last:before:rounded-none",
+        // middle
+        "group-data-[middle=true]:before:rounded-none",
+        // last
+        "group-data-[last=true]:first:before:rounded-none",
+        "group-data-[last=true]:last:before:rounded-none",
+      ],
+    }),
+    [],
+  );
+
+  return (
+    <Table
+      isCompact
+      removeWrapper
+      aria-label="Example table with custom cells, pagination and sorting"
+      bottomContent={bottomContent}
+      bottomContentPlacement="outside"
+      checkboxesProps={{
+        classNames: {
+          wrapper: "after:bg-foreground after:text-background text-background",
+        },
+      }}
+      classNames={classNames}
+      selectedKeys={selectedKeys}
+      selectionMode={selectionMode}
+      sortDescriptor={sortDescriptor}
+      topContent={topContent}
+      topContentPlacement="outside"
+      // onSelectionChange={setSelectedKeys}
+      // onSortChange={setSortDescriptor}
+    >
+      <TableHeader columns={headerColumns}>
+        {(column) => (
+          <TableColumn
+            key={column.uid}
+            align={column.uid === "actions" ? "center" : "start"}
+            allowsSorting={column.sortable}
+          >
+            {column.name}
+          </TableColumn>
+        )}
+      </TableHeader>
+      <TableBody emptyContent={"No entries found"} items={sortedItems}>
+        {(item) => {
+          return (
+            <TableRow key={item.id}>
+              {(columnKey) => (
+                // @ts-expect-error: Disable type checking for this line
+                <TableCell>{renderCell(item, columnKey)}</TableCell>
+              )}
+            </TableRow>
+          );
+        }}
+      </TableBody>
+    </Table>
+  );
+};

utils/capitalize.ts

@@ -0,0 +1,3 @@
+export function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}