@djangocfg/layouts 2.1.108 → 2.1.110

package/src/layouts/PrivateLayout/components/PrivateSidebar.tsx

@@ -18,7 +18,7 @@ import { cn } from '@djangocfg/ui-core/lib';
 
 import { LucideIcon } from '../../../components';
 
-import type { SidebarItem, SidebarConfig } from '../PrivateLayout';
+import type { SidebarItem, SidebarConfig, SidebarGroupConfig } from '../PrivateLayout';
 
 interface PrivateSidebarProps {
   sidebar: SidebarConfig;
@@ -29,18 +29,71 @@ export function PrivateSidebar({ sidebar }: PrivateSidebarProps) {
   const { state, isMobile } = useSidebar();
   const homeHref = sidebar.homeHref || '/';
 
+  // Get all items for active detection
+  const allItems = React.useMemo(() => {
+    return sidebar.groups.flatMap((g) => g.items);
+  }, [sidebar.groups]);
+
   const isActive = (href: string) => {
     const matches = pathname === href || pathname.startsWith(href + '/');
     if (!matches) return false;
 
     // Check if there's a more specific (longer) path that also matches
-    return !sidebar.items.some(otherItem =>
-      otherItem.href !== href &&
-      otherItem.href.startsWith(href + '/') &&
-      (pathname === otherItem.href || pathname.startsWith(otherItem.href + '/'))
+    return !allItems.some(
+      (otherItem) =>
+        otherItem.href !== href &&
+        otherItem.href.startsWith(href + '/') &&
+        (pathname === otherItem.href ||
+          pathname.startsWith(otherItem.href + '/'))
+    );
+  };
+
+  // Render a single menu item
+  const renderMenuItem = (item: SidebarItem) => {
+    const active = isActive(item.href);
+
+    return (
+      <SidebarMenuItem key={item.href}>
+        <SidebarMenuButton
+          asChild
+          isActive={active}
+          tooltip={item.label}
+          size={isMobile ? 'lg' : 'default'}
+        >
+          <Link href={item.href}>
+            {item.icon && (
+              <LucideIcon
+                icon={typeof item.icon === 'string' ? item.icon : item.icon}
+                className={isMobile ? 'h-5 w-5' : 'h-4 w-4'}
+              />
+            )}
+            <span className={isMobile ? 'text-base' : ''}>{item.label}</span>
+            {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
     );
   };
 
+  // Render groups
+  const renderContent = () => {
+    return sidebar.groups.map((group) => {
+      // Skip dynamic groups with no items
+      if (group.dynamic && group.items.length === 0) {
+        return null;
+      }
+
+      return (
+        <SidebarGroup key={group.label}>
+          <SidebarGroupLabel className="font-medium text-[10px]">{group.label}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>{group.items.map(renderMenuItem)}</SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      );
+    });
+  };
+
   return (
     <Sidebar collapsible="icon">
       <SidebarHeader>
@@ -88,47 +141,7 @@ export function PrivateSidebar({ sidebar }: PrivateSidebarProps) {
         </div>
       </SidebarHeader>
 
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {sidebar.items.map((item) => {
-                const active = isActive(item.href);
-
-                return (
-                  <SidebarMenuItem key={item.href}>
-                    <SidebarMenuButton
-                      asChild
-                      isActive={active}
-                      tooltip={item.label}
-                      size={isMobile ? 'lg' : 'default'}
-                    >
-                      <Link href={item.href}>
-                        {item.icon && (
-                          <LucideIcon
-                            icon={
-                              typeof item.icon === 'string'
-                                ? item.icon
-                                : item.icon
-                            }
-                            className={isMobile ? 'h-5 w-5' : 'h-4 w-4'}
-                          />
-                        )}
-                        <span className={isMobile ? 'text-base' : ''}>
-                          {item.label}
-                        </span>
-                        {item.badge && (
-                          <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
-                        )}
-                      </Link>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
+      <SidebarContent>{renderContent()}</SidebarContent>
     </Sidebar>
   );
 }

package/src/layouts/PrivateLayout/index.ts

@@ -3,5 +3,5 @@
  */
 
 export { PrivateLayout } from './PrivateLayout';
-export type { PrivateLayoutProps, SidebarItem, SidebarConfig, HeaderConfig } from './PrivateLayout';
+export type { PrivateLayoutProps, SidebarItem, SidebarGroupConfig, SidebarConfig, HeaderConfig } from './PrivateLayout';
 

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -28,7 +28,7 @@ import {
 } from '@djangocfg/ui-core/components';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import { TwoFactorSetup } from '../AuthLayout/components/TwoFactorSetup';
+import { SetupStep } from '../AuthLayout/components/steps/SetupStep';
 import { profileLogger } from '../../utils/logger';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -314,7 +314,7 @@ const ProfileContent = ({
   if (show2FASetup) {
     return (
       <div className="container mx-auto px-4 py-8 max-w-lg">
-        <TwoFactorSetup
+        <SetupStep
           onComplete={() => {
             setShow2FASetup(false);
             fetch2FAStatus();

package/src/layouts/ProfileLayout/components/TwoFactorSection.tsx

@@ -22,7 +22,7 @@ import {
   OTPInput,
 } from '@djangocfg/ui-core/components';
 
-import { TwoFactorSetup } from '../../AuthLayout/components/TwoFactorSetup';
+import { SetupStep } from '../../AuthLayout/components/steps/SetupStep';
 
 type ViewState = 'status' | 'setup' | 'disable';
 
@@ -102,7 +102,7 @@ export const TwoFactorSection: React.FC = () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <TwoFactorSetup
+          <SetupStep
             onComplete={handleSetupComplete}
             onSkip={handleSetupSkip}
           />

package/src/layouts/AuthLayout/components/AuthHelp.tsx

@@ -1,114 +0,0 @@
-import { HelpCircle, Mail, MessageCircle } from 'lucide-react';
-import React from 'react';
-
-import { Button } from '@djangocfg/ui-core/components';
-
-import { useAuthFormContext } from '../context';
-
-import type { AuthHelpProps } from '../types';
-
-export const AuthHelp: React.FC<AuthHelpProps> = ({
-  className = '',
-  variant = 'default',
-}) => {
-  const { supportUrl, channel } = useAuthFormContext();
-
-  const getChannelIcon = () => {
-    return channel === 'phone' ? (
-      <MessageCircle className="w-4 h-4 text-muted-foreground" />
-    ) : (
-      <Mail className="w-4 h-4 text-muted-foreground" />
-    );
-  };
-
-  const getHelpText = () => {
-    return channel === 'phone' ? 'Check WhatsApp/SMS' : 'Check spam folder';
-  };
-
-  const getDetailedHelp = () => {
-    if (channel === 'phone') {
-      return {
-        title: "Didn't receive the code?",
-        tips: [
-          '• Check your WhatsApp messages',
-          '• Look for SMS messages',
-          '• Ensure you have signal/internet',
-          '• Wait a few minutes for delivery',
-        ],
-      };
-    } else {
-      return {
-        title: "Didn't receive the email?",
-        tips: [
-          '• Check your spam or junk folder',
-          '• Make sure you entered the correct email address',
-          '• Wait a few minutes for the email to arrive',
-        ],
-      };
-    }
-  };
-
-  if (variant === 'compact') {
-    return (
-      <div
-        className={`flex items-center justify-between p-3 bg-muted/30 rounded-sm border border-border ${className}`}
-      >
-        <div className="flex items-center gap-2">
-          {getChannelIcon()}
-          <span className="text-sm text-muted-foreground">{getHelpText()}</span>
-        </div>
-        {supportUrl && (
-          <Button
-            asChild
-            variant="ghost"
-            size="sm"
-            className="text-xs"
-          >
-            <a href={supportUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1">
-              <HelpCircle className="w-3 h-3" />
-              Need help?
-            </a>
-          </Button>
-        )}
-      </div>
-    );
-  }
-
-  const helpData = getDetailedHelp();
-
-  return (
-    <div
-      className={`flex flex-col gap-3 p-3 bg-muted/30 rounded-sm border border-border ${className}`}
-    >
-      <div className="flex items-start gap-3">
-        {getChannelIcon()}
-        <div className="flex flex-col gap-1">
-          <h4 className="text-sm font-medium text-foreground">{helpData.title}</h4>
-          <div className="flex flex-col gap-0.5 text-xs text-muted-foreground">
-            {helpData.tips.map((tip, index) => (
-              <p key={index}>{tip}</p>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {supportUrl && (
-        <div className="flex items-center justify-between pt-2 border-t border-border">
-          <span className="text-xs text-muted-foreground">Still having trouble?</span>
-          <Button
-            asChild
-            variant="ghost"
-            size="sm"
-            className="text-xs h-7 px-2"
-          >
-            <a href={supportUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1">
-              <HelpCircle className="w-3 h-3" />
-              Get Help
-            </a>
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
-

package/src/layouts/AuthLayout/components/AuthSuccess.tsx

@@ -1,101 +0,0 @@
-/**
- * Auth Success Component
- *
- * Full-screen success layout shown after successful authentication.
- * Displays a centered logo with a subtle animation, then redirects.
- */
-
-'use client';
-
-import React, { useEffect, useState } from 'react';
-
-import { useCfgRouter } from '@djangocfg/api/auth';
-
-import { useAuthFormContext } from '../context';
-
-export interface AuthSuccessProps {
-  className?: string;
-  /** Delay before redirect in ms (default: 1500) */
-  redirectDelay?: number;
-}
-
-export const AuthSuccess: React.FC<AuthSuccessProps> = ({ className, redirectDelay = 1500 }) => {
-  const { logoUrl, redirectUrl } = useAuthFormContext();
-  const router = useCfgRouter();
-  const [isVisible, setIsVisible] = useState(false);
-
-  useEffect(() => {
-    // Trigger animation after mount
-    const animTimer = setTimeout(() => setIsVisible(true), 50);
-
-    // Redirect after delay
-    const redirectTimer = setTimeout(() => {
-      const finalUrl = redirectUrl || '/dashboard';
-      router.hardPush(finalUrl);
-    }, redirectDelay);
-
-    return () => {
-      clearTimeout(animTimer);
-      clearTimeout(redirectTimer);
-    };
-  }, [redirectUrl, redirectDelay, router]);
-
-  if (!logoUrl) {
-    // Fallback: simple checkmark if no logo provided
-    return (
-      <div className={`fixed inset-0 flex items-center justify-center bg-background z-50 ${className || ''}`}>
-        <div
-          className={`transition-all duration-700 ease-out ${
-            isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
-          }`}
-        >
-          <div className="w-24 h-24 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-            <svg
-              className="w-12 h-12 text-green-600 dark:text-green-400"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`fixed inset-0 flex items-center justify-center bg-background z-50 ${className || ''}`}>
-      <div
-        className={`transition-all duration-700 ease-out ${
-          isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-90'
-        }`}
-      >
-        {/* Logo container with max size and animation */}
-        <div className="relative">
-          {/* Subtle glow effect */}
-          <div
-            className={`absolute inset-0 blur-3xl transition-opacity duration-1000 ${
-              isVisible ? 'opacity-20' : 'opacity-0'
-            }`}
-            style={{
-              background: 'radial-gradient(circle, currentColor 0%, transparent 70%)',
-            }}
-          />
-
-          {/* Logo image */}
-          <img
-            src={logoUrl}
-            alt="Success"
-            className="relative w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 object-contain"
-          />
-        </div>
-      </div>
-    </div>
-  );
-};