front end feature to showing pending connection request in sidebar.

frontend/src/components/ui/shared/Sidebar.tsx

@@ -13,6 +13,7 @@ import {
   CreditCard,
 } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
+import { usePendingConnectionsCount } from '@/lib/hooks/usePendingConnectionsCount';
 import { canAccessAppointmentsSection, canViewTab } from '@/components/shared/permissions';
 import {
   counterpartOrganizationType,
@@ -32,6 +33,7 @@ const menu = [
 function Sidebar() {
   const pathname = usePathname();
   const { currentOrganization } = useAuth();
+  const pendingConnectionsCount = usePendingConnectionsCount();
   const counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
   const organizationsTabIcon = organizationTypeIcon(
     counterpartOrganizationType(currentOrganization?.type),
@@ -75,6 +77,8 @@ function Sidebar() {
         {visibleMenu.map((item) => {
           const Icon = item.icon;
           const isActive = pathname === item.path;
+          const showPendingBadge =
+            item.path === '/organizations' && pendingConnectionsCount > 0;
 
           return (
             <Link
@@ -88,7 +92,15 @@ function Sidebar() {
               }`}
             >
               <Icon className="w-[18px] h-[18px] icon-flat" />
-              <span className="text-sm">{item.name}</span>
+              <span className="text-sm flex-1">{item.name}</span>
+              {showPendingBadge && (
+                <span
+                  className="min-w-[1.25rem] rounded-full bg-badge-warning-bg px-1.5 py-0.5 text-center text-xs font-medium tabular-nums text-badge-warning-fg border border-badge-warning-border"
+                  aria-label={`${pendingConnectionsCount} pending connection requests`}
+                >
+                  {pendingConnectionsCount}
+                </span>
+              )}
             </Link>
           );
         })}