feat: rbac roles

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/keys-table-action.popover.tsx

@@ -17,6 +17,7 @@ export type MenuItem = {
   disabled?: boolean;
   divider?: boolean;
   ActionComponent?: FC<ActionComponentProps>;
+  prefetch?: () => Promise<void>;
 };
 
 type BaseTableActionPopoverProps = PropsWithChildren<{
@@ -32,22 +33,46 @@ export const KeysTableActionPopover = ({
   const [enabledItem, setEnabledItem] = useState<string>();
   const [open, setOpen] = useState(false);
   const [focusIndex, setFocusIndex] = useState(0);
+  const [prefetchedItems, setPrefetchedItems] = useState<Set<string>>(new Set());
   const menuItems = useRef<HTMLDivElement[]>([]);
 
   useEffect(() => {
     if (open) {
+      // Prefetch all items that need prefetching and haven't been prefetched yet
+      items
+        .filter((item) => item.prefetch && !prefetchedItems.has(item.id))
+        .forEach(async (item) => {
+          try {
+            await item.prefetch?.();
+            setPrefetchedItems((prev) => new Set(prev).add(item.id));
+          } catch (error) {
+            console.error(`Failed to prefetch data for ${item.id}:`, error);
+          }
+        });
+
       const firstEnabledIndex = items.findIndex((item) => !item.disabled);
       setFocusIndex(firstEnabledIndex >= 0 ? firstEnabledIndex : 0);
       if (firstEnabledIndex >= 0) {
         menuItems.current[firstEnabledIndex]?.focus();
       }
     }
-  }, [open, items]);
+  }, [open, items, prefetchedItems]);
 
   const handleActionSelection = (value: string) => {
     setEnabledItem(value);
   };
 
+  const handleItemHover = async (item: MenuItem) => {
+    if (item.prefetch && !prefetchedItems.has(item.id)) {
+      try {
+        await item.prefetch();
+        setPrefetchedItems((prev) => new Set([...prev, item.id]));
+      } catch (error) {
+        console.error(`Failed to prefetch data for ${item.id}:`, error);
+      }
+    }
+  };
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger onClick={(e) => e.stopPropagation()}>
@@ -107,6 +132,7 @@ export const KeysTableActionPopover = ({
                     item.disabled && "cursor-not-allowed opacity-50",
                     item.className,
                   )}
+                  onMouseEnter={() => handleItemHover(item)}
                   onClick={(e) => {
                     if (!item.disabled) {
                       item.onClick?.(e);

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/selection-controls/index.tsx

@@ -213,7 +213,7 @@ const AnimatedDigit = ({ digit, index }: { digit: string; index: number }) => {
   );
 };
 
-const AnimatedCounter = ({ value }: { value: number }) => {
+export const AnimatedCounter = ({ value }: { value: number }) => {
   const digits = value.toString().split("");
 
   return (

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx

@@ -249,7 +249,6 @@ export const KeysList = ({
           );
         },
       },
-
       {
         key: "action",
         header: "",