Merge branch 'dev' into auth-providers-clients

src/components/SidebarNav.tsx

@@ -6,6 +6,8 @@ import { useParams, usePathname } from "next/navigation";
 import { cn } from "@app/lib/cn";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useUserContext } from "@app/hooks/useUserContext";
+import { Badge } from "@app/components/ui/badge";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 
 export interface SidebarNavItem {
     href: string;
@@ -13,6 +15,7 @@ export interface SidebarNavItem {
     icon?: React.ReactNode;
     children?: SidebarNavItem[];
     autoExpand?: boolean;
+    showProfessional?: boolean;
 }
 
 export interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
@@ -36,6 +39,7 @@ export function SidebarNav({
     const userId = params.userId as string;
     const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
     const clientId = params.clientId as string;
+    const { licenseStatus, isUnlocked } = useLicenseStatusContext();
 
     const { user } = useUserContext();
 
@@ -97,7 +101,9 @@ export function SidebarNav({
             const isActive = pathname.startsWith(hydratedHref);
             const hasChildren = item.children && item.children.length > 0;
             const isExpanded = expandedItems.has(hydratedHref);
-            const indent = level * 16; // Base indent for each level
+            const indent = level * 28; // Base indent for each level
+            const isProfessional = item.showProfessional && !isUnlocked();
+            const isDisabled = disabled || isProfessional;
 
             return (
                 <div key={hydratedHref}>
@@ -112,34 +118,51 @@ export function SidebarNav({
                             )}
                         >
                             <Link
-                                href={hydratedHref}
+                                href={isProfessional ? "#" : hydratedHref}
                                 className={cn(
                                     "flex items-center w-full px-3 py-2",
                                     isActive
                                         ? "text-primary font-medium"
                                         : "text-muted-foreground group-hover:text-foreground",
-                                    disabled && "cursor-not-allowed opacity-60"
+                                    isDisabled && "cursor-not-allowed"
                                 )}
                                 onClick={(e) => {
-                                    if (disabled) {
+                                    if (isDisabled) {
                                         e.preventDefault();
                                     } else if (onItemClick) {
                                         onItemClick();
                                     }
                                 }}
-                                tabIndex={disabled ? -1 : undefined}
-                                aria-disabled={disabled}
+                                tabIndex={isDisabled ? -1 : undefined}
+                                aria-disabled={isDisabled}
                             >
-                                {item.icon && (
-                                    <span className="mr-3">{item.icon}</span>
+                                <div
+                                    className={cn(
+                                        "flex items-center",
+                                        isDisabled && "opacity-60"
+                                    )}
+                                >
+                                    {item.icon && (
+                                        <span className="mr-3">
+                                            {item.icon}
+                                        </span>
+                                    )}
+                                    {item.title}
+                                </div>
+                                {isProfessional && (
+                                    <Badge
+                                        variant="outlinePrimary"
+                                        className="ml-2"
+                                    >
+                                        Professional
+                                    </Badge>
                                 )}
-                                {item.title}
                             </Link>
                             {hasChildren && (
                                 <button
                                     onClick={() => toggleItem(hydratedHref)}
                                     className="p-2 rounded-md text-muted-foreground hover:text-foreground cursor-pointer"
-                                    disabled={disabled}
+                                    disabled={isDisabled}
                                 >
                                     {isExpanded ? (
                                         <ChevronDown className="h-5 w-5" />