Add pending approval filter

Author: heisbrot

src/components/ui/NotificationCountBadge.tsx

@@ -4,16 +4,17 @@ import * as React from "react";
 type Props = {
   count?: number;
 };
-export const NotificationCountBadge = ({ count = 0 }: Props) => {
+export const NotificationCountBadge = ({ count = 22 }: Props) => {
+  count = 1;
   return count ? (
     <div
       className={cn(
-        count <= 9 ? "w-5 h-5" : "py-2.5 px-2",
-        "relative bg-netbird flex items-center justify-center rounded-full text-white  !leading-[0]  text-xs font-semibold",
+        count <= 9 ? "w-4 h-4" : "py-2 px-1.5",
+        "relative bg-netbird flex items-center justify-center rounded-full text-white  !leading-[0]  text-[0.6rem] font-semibold",
       )}
     >
       <span className="animate-ping absolute left-0 inline-flex h-full w-full rounded-full bg-netbird opacity-20"></span>
-      {count || 0}
+      <span className={"relative -left-[0.5px]"}>{count || 0}</span>
     </div>
   ) : null;
 };

src/modules/users/UsersTable.tsx

@@ -6,6 +6,7 @@ import DataTableHeader from "@components/table/DataTableHeader";
 import DataTableRefreshButton from "@components/table/DataTableRefreshButton";
 import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
 import GetStartedTest from "@components/ui/GetStartedTest";
+import { NotificationCountBadge } from "@components/ui/NotificationCountBadge";
 import { ColumnDef, SortingState } from "@tanstack/react-table";
 import useFetchApi from "@utils/api";
 import { isLocalDev, isNetBirdHosted } from "@utils/netbird";
@@ -88,6 +89,12 @@ export const UsersTableColumns: ColumnDef<User>[] = [
       />
     ),
   },
+  {
+    id: "approval_required",
+    accessorKey: "approval_required",
+    sortingFn: "basic",
+    accessorFn: (u) => u?.pending_approval,
+  },
   {
     accessorKey: "id",
     header: "",
@@ -127,6 +134,8 @@ export default function UsersTable({
   );
 
   const router = useRouter();
+  const pendingApprovalCount =
+    users?.filter((u) => u.pending_approval).length || 0;
 
   return (
     <DataTable
@@ -139,6 +148,7 @@ export default function UsersTable({
       data={users}
       columnVisibility={{
         is_current: false,
+        approval_required: false,
       }}
       onRowClick={(row) => {
         router.push(`/team/user?id=${row.original.id}`);
@@ -187,6 +197,34 @@ export default function UsersTable({
     >
       {(table) => (
         <>
+          {pendingApprovalCount > 0 && (
+            <Button
+              disabled={users?.length == 0}
+              onClick={() => {
+                table.setPageIndex(0);
+                let current =
+                  table.getColumn("approval_required")?.getFilterValue() ===
+                  undefined
+                    ? true
+                    : undefined;
+
+                table.setColumnFilters([
+                  {
+                    id: "approval_required",
+                    value: current,
+                  },
+                ]);
+              }}
+              variant={
+                table.getColumn("approval_required")?.getFilterValue() === true
+                  ? "tertiary"
+                  : "secondary"
+              }
+            >
+              Pending Approvals
+              <NotificationCountBadge count={pendingApprovalCount} />
+            </Button>
+          )}
           <DataTableRowsPerPage table={table} disabled={users?.length == 0} />
           <DataTableRefreshButton
             isDisabled={users?.length == 0}