add pending approvals count to sidebar

src/components/LayoutSidebar.tsx

@@ -14,7 +14,9 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 import { useUserContext } from "@app/hooks/useUserContext";
 import { cn } from "@app/lib/cn";
+import { approvalQueries } from "@app/lib/queries";
 import { build } from "@server/build";
+import { useQuery } from "@tanstack/react-query";
 import { ListUserOrgsResponse } from "@server/routers/org";
 import { ExternalLink, Server } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -57,6 +59,26 @@ export function LayoutSidebar({
     const { env } = useEnvContext();
     const t = useTranslations();
 
+    // Fetch pending approval count if we have an orgId and it's not an admin page
+    const shouldFetchApprovalCount =
+        Boolean(orgId) && !isAdminPage && build !== "oss";
+    const approvalCountQuery = orgId
+        ? approvalQueries.pendingCount(orgId)
+        : {
+              queryKey: ["APPROVALS", "", "COUNT", "pending"] as const,
+              queryFn: async () => 0
+          };
+    const { data: pendingApprovalCount } = useQuery({
+        ...approvalCountQuery,
+        enabled: shouldFetchApprovalCount
+    });
+
+    // Map notification counts by navigation item title
+    const notificationCounts: Record<string, number | undefined> = {};
+    if (pendingApprovalCount !== undefined && pendingApprovalCount > 0) {
+        notificationCounts["sidebarApprovals"] = pendingApprovalCount;
+    }
+
     const setSidebarStateCookie = (collapsed: boolean) => {
         if (typeof window !== "undefined") {
             const isSecure = window.location.protocol === "https:";
@@ -157,6 +179,7 @@ export function LayoutSidebar({
                     <SidebarNav
                         sections={navItems}
                         isCollapsed={isSidebarCollapsed}
+                        notificationCounts={notificationCounts}
                     />
                 </div>
                 {/* Fade gradient at bottom to indicate scrollable content */}

src/components/SidebarNav.tsx

@@ -46,6 +46,7 @@ export interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
     disabled?: boolean;
     onItemClick?: () => void;
     isCollapsed?: boolean;
+    notificationCounts?: Record<string, number | undefined>;
 }
 
 type CollapsibleNavItemProps = {
@@ -59,6 +60,7 @@ type CollapsibleNavItemProps = {
     t: (key: string) => string;
     build: string;
     isUnlocked: () => boolean;
+    getNotificationCount: (item: SidebarNavItem) => number | undefined;
 };
 
 function CollapsibleNavItem({
@@ -71,8 +73,10 @@ function CollapsibleNavItem({
     renderNavItem,
     t,
     build,
-    isUnlocked
+    isUnlocked,
+    getNotificationCount
 }: CollapsibleNavItemProps) {
+    const notificationCount = getNotificationCount(item);
     const storageKey = `pangolin-sidebar-expanded-${item.title}`;
 
     // Get initial state from localStorage or use isChildActive
@@ -139,6 +143,14 @@ function CollapsibleNavItem({
                         )}
                     </div>
                     <div className="flex items-center gap-1.5 flex-shrink-0 ml-2">
+                        {notificationCount !== undefined &&
+                            notificationCount > 0 && (
+                                <Badge
+                                    variant="secondary"
+                                >
+                                    {notificationCount > 99 ? "99+" : notificationCount}
+                                </Badge>
+                            )}
                         {build === "enterprise" &&
                             item.showEE &&
                             !isUnlocked() && (
@@ -177,6 +189,7 @@ export function SidebarNav({
     disabled = false,
     onItemClick,
     isCollapsed = false,
+    notificationCounts,
     ...props
 }: SidebarNavProps) {
     const pathname = usePathname();
@@ -191,6 +204,11 @@ export function SidebarNav({
     const { user } = useUserContext();
     const t = useTranslations();
 
+    function getNotificationCount(item: SidebarNavItem): number | undefined {
+        if (!notificationCounts) return undefined;
+        return notificationCounts[item.title];
+    }
+
     function hydrateHref(val?: string): string | undefined {
         if (!val) return undefined;
         return val
@@ -247,16 +265,19 @@ export function SidebarNav({
                     t={t}
                     build={build}
                     isUnlocked={isUnlocked}
+                    getNotificationCount={getNotificationCount}
                 />
             );
         }
 
+        const notificationCount = getNotificationCount(item);
+
         // Regular item without nested items
         const itemContent = hydratedHref ? (
             <Link
                 href={isDisabled ? "#" : hydratedHref}
                 className={cn(
-                    "flex items-center rounded-md transition-colors",
+                    "flex items-center rounded-md transition-colors relative",
                     isCollapsed
                         ? "px-2 py-2 justify-center"
                         : level === 0
@@ -297,18 +318,40 @@ export function SidebarNav({
                                 </span>
                             )}
                         </div>
-                        {build === "enterprise" &&
-                            item.showEE &&
-                            !isUnlocked() && (
-                                <Badge
-                                    variant="outlinePrimary"
-                                    className="flex-shrink-0"
-                                >
-                                    {t("licenseBadge")}
-                                </Badge>
-                            )}
+                        <div className="flex items-center gap-1.5 flex-shrink-0">
+                            {notificationCount !== undefined &&
+                                notificationCount > 0 && (
+                                    <Badge
+                                        variant="secondary"
+                                    >
+                                        {notificationCount > 99
+                                            ? "99+"
+                                            : notificationCount}
+                                    </Badge>
+                                )}
+                            {build === "enterprise" &&
+                                item.showEE &&
+                                !isUnlocked() && (
+                                    <Badge
+                                        variant="outlinePrimary"
+                                        className="flex-shrink-0"
+                                    >
+                                        {t("licenseBadge")}
+                                    </Badge>
+                                )}
+                        </div>
                     </>
                 )}
+                {isCollapsed &&
+                    notificationCount !== undefined &&
+                    notificationCount > 0 && (
+                        <Badge
+                            variant="default"
+                            className="absolute -top-1 -right-1 h-5 min-w-5 px-1.5 flex items-center justify-center text-xs bg-primary text-primary-foreground"
+                        >
+                            {notificationCount > 99 ? "99+" : notificationCount}
+                        </Badge>
+                    )}
             </Link>
         ) : (
             <div
@@ -332,14 +375,27 @@ export function SidebarNav({
                         </span>
                     )}
                 </div>
-                {build === "enterprise" && item.showEE && !isUnlocked() && (
-                    <Badge
-                        variant="outlinePrimary"
-                        className="flex-shrink-0 ml-2"
-                    >
-                        {t("licenseBadge")}
-                    </Badge>
-                )}
+                <div className="flex items-center gap-1.5 flex-shrink-0 ml-2">
+                    {notificationCount !== undefined &&
+                        notificationCount > 0 && (
+                            <Badge
+                                variant="default"
+                                className="flex-shrink-0 bg-primary text-primary-foreground"
+                            >
+                                {notificationCount > 99
+                                    ? "99+"
+                                    : notificationCount}
+                            </Badge>
+                        )}
+                    {build === "enterprise" && item.showEE && !isUnlocked() && (
+                        <Badge
+                            variant="outlinePrimary"
+                            className="flex-shrink-0"
+                        >
+                            {t("licenseBadge")}
+                        </Badge>
+                    )}
+                </div>
             </div>
         );
 

src/lib/queries.ts

@@ -377,5 +377,17 @@ export const approvalQueries = {
                 });
                 return res.data.data;
             }
+        }),
+    pendingCount: (orgId: string) =>
+        queryOptions({
+            queryKey: ["APPROVALS", orgId, "COUNT", "pending"] as const,
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
+                    AxiosResponse<{ count: number }>
+                >(`/org/${orgId}/approvals/count?approvalState=pending`, {
+                    signal
+                });
+                return res.data.data.count;
+            }
         })
 };