@djangocfg/layouts 2.1.42 → 2.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.42",
+  "version": "2.1.44",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.42",
-    "@djangocfg/centrifugo": "^2.1.42",
-    "@djangocfg/ui-nextjs": "^2.1.42",
+    "@djangocfg/api": "^2.1.44",
+    "@djangocfg/centrifugo": "^2.1.44",
+    "@djangocfg/ui-nextjs": "^2.1.44",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -107,14 +107,15 @@
     "swr": "^2.3.7",
     "tailwindcss": "^4.1.14",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.1.13"
+    "zod": "^4.1.13",
+    "moment": "^2.30.1"
   },
   "dependencies": {
     "react-ga4": "^2.1.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.42",
+    "@djangocfg/typescript-config": "^2.1.44",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/RedirectPage/RedirectPage.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { useEffect } from 'react';
+
 import { useAuth } from '@djangocfg/api/auth';
-import { useCfgRouter } from '@djangocfg/ui-nextjs/hooks';
 import { Preloader } from '@djangocfg/ui-nextjs/components';
+import { useCfgRouter } from '@djangocfg/ui-nextjs/hooks';
 
 export interface RedirectPageProps {
   /**

package/src/components/core/ClientOnly.tsx

@@ -22,7 +22,8 @@
 
 'use client';
 
-import { useState, useEffect, ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
+
 import { Preloader } from '@djangocfg/ui-nextjs/components';
 
 export interface ClientOnlyProps {

package/src/components/core/LucideIcon.tsx

@@ -17,11 +17,12 @@
 
 'use client';
 
-import React from 'react';
 import * as LucideIcons from 'lucide-react';
-import type { LucideIcon as LucideIconType } from 'lucide-react';
+import React from 'react';
+
 import { cn } from '@djangocfg/ui-nextjs';
 
+import type { LucideIcon as LucideIconType } from 'lucide-react';
 export interface LucideIconProps extends Omit<React.SVGProps<SVGSVGElement>, 'children'> {
   /**
    * Icon name (string) or icon component (LucideIcon)

package/src/components/core/Suspense.tsx

@@ -7,7 +7,7 @@
 
 'use client';
 
-import { Suspense as ReactSuspense, ReactNode } from 'react';
+import { ReactNode, Suspense as ReactSuspense } from 'react';
 
 interface SuspenseProps {
   children: ReactNode;

package/src/components/errors/ErrorBoundary.tsx

@@ -6,7 +6,7 @@
 
 'use client';
 
-import React, { Component, ReactNode, ErrorInfo } from 'react';
+import React, { Component, ErrorInfo, ReactNode } from 'react';
 
 interface ErrorBoundaryProps {
   children: ReactNode;

package/src/components/errors/ErrorLayout.tsx

@@ -18,7 +18,9 @@
 'use client';
 
 import React from 'react';
+
 import { Button } from '@djangocfg/ui-nextjs/components';
+
 import { getErrorContent } from './errorConfig';
 
 export interface ErrorLayoutProps {

package/src/components/errors/ErrorsTracker/components/ErrorButtons.tsx

@@ -6,17 +6,17 @@
 
 'use client';
 
+import { Copy, Terminal } from 'lucide-react';
 import React from 'react';
+
 import { Button, useCopy } from '@djangocfg/ui-nextjs';
-import { Copy, Terminal } from 'lucide-react';
-import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail } from '../types';
+
+import { generateCurlFromError } from '../utils/curl-generator';
 import {
-  formatValidationErrorForClipboard,
-  formatCORSErrorForClipboard,
-  formatNetworkErrorForClipboard,
+    formatCORSErrorForClipboard, formatNetworkErrorForClipboard, formatValidationErrorForClipboard
 } from '../utils/formatters';
-import { generateCurlFromError } from '../utils/curl-generator';
 
+import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail } from '../types';
 export interface ErrorButtonsProps {
   detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail;
 }

package/src/components/errors/ErrorsTracker/components/ErrorToast.tsx

@@ -7,6 +7,10 @@
 'use client';
 
 import React from 'react';
+
+import { extractDomain, formatErrorTitle, formatZodIssues } from '../utils/formatters';
+import { ErrorButtons } from './ErrorButtons';
+
 import type {
   ValidationErrorDetail,
   CORSErrorDetail,
@@ -15,9 +19,6 @@ import type {
   CORSErrorConfig,
   NetworkErrorConfig,
 } from '../types';
-import { formatZodIssues, formatErrorTitle, extractDomain } from '../utils/formatters';
-import { ErrorButtons } from './ErrorButtons';
-
 /**
  * Build validation error description
  */

package/src/components/errors/ErrorsTracker/providers/ErrorTrackingProvider.tsx

@@ -26,8 +26,17 @@
 
 'use client';
 
-import React, { createContext, useContext, useCallback, useEffect, useState, ReactNode } from 'react';
+import React, {
+    createContext, ReactNode, useCallback, useContext, useEffect, useState
+} from 'react';
+
 import { toast } from '@djangocfg/ui-nextjs';
+
+import { createErrorToast } from '../components/ErrorToast';
+import {
+    DEFAULT_CORS_CONFIG, DEFAULT_NETWORK_CONFIG, DEFAULT_VALIDATION_CONFIG, ERROR_EVENTS
+} from '../types';
+
 import type {
   ErrorDetail,
   StoredError,
@@ -40,14 +49,6 @@ import type {
   NetworkErrorDetail,
   ErrorTrackingContextValue,
 } from '../types';
-import {
-  DEFAULT_VALIDATION_CONFIG,
-  DEFAULT_CORS_CONFIG,
-  DEFAULT_NETWORK_CONFIG,
-  ERROR_EVENTS,
-} from '../types';
-import { createErrorToast } from '../components/ErrorToast';
-
 const ErrorTrackingContext = createContext<ErrorTrackingContextValue | undefined>(undefined);
 
 /**

package/src/layouts/AdminLayout/AdminLayout.tsx

@@ -37,7 +37,8 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { PrivateLayout, type PrivateLayoutProps } from '../PrivateLayout/PrivateLayout';
+
+import { PrivateLayout, PrivateLayoutProps} from '../PrivateLayout/PrivateLayout';
 
 export interface AdminLayoutProps extends PrivateLayoutProps {
   children: ReactNode;

package/src/layouts/AppLayout/AppLayout.tsx

@@ -32,10 +32,12 @@
 
 'use client';
 
-import React, { ReactNode, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
-import { Suspense, ClientOnly } from '../../components/core';
+import React, { ReactNode, useMemo } from 'react';
+
+import { ClientOnly, Suspense } from '../../components/core';
 import { BaseApp } from './BaseApp';
+
 import type {
   ThemeConfig,
   AnalyticsConfig,

package/src/layouts/AppLayout/BaseApp.tsx

@@ -44,20 +44,23 @@
 
 'use client';
 
-import { ReactNode } from 'react';
 import dynamic from 'next/dynamic';
+import { ReactNode } from 'react';
 import { SWRConfig } from 'swr';
-import { ThemeProvider, SonnerToaster, TooltipProvider } from '@djangocfg/ui-nextjs';
+
+import { getCentrifugoAuthTokenRetrieve } from '@djangocfg/api';
 import { AuthProvider } from '@djangocfg/api/auth';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
-import { getCentrifugoAuthTokenRetrieve } from '@djangocfg/api';
-import { ErrorTrackingProvider } from '../../components/errors/ErrorsTracker';
-import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
+import { SonnerToaster, ThemeProvider, TooltipProvider } from '@djangocfg/ui-nextjs';
+
 import { PageProgress } from '../../components/core/PageProgress';
+import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
+import { ErrorTrackingProvider } from '../../components/errors/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
-import { PwaProvider, A2HSHint } from '../../snippets/PWAInstall';
-import { DjangoPushProvider, PushPrompt } from '../../snippets/PushNotifications';
 import { AuthDialog } from '../../snippets/AuthDialog';
+import { DjangoPushProvider, PushPrompt } from '../../snippets/PushNotifications';
+import { A2HSHint, PwaProvider } from '../../snippets/PWAInstall';
+
 import type { BaseLayoutProps } from '../types/layout.types';
 
 // Lazy load MCP Chat Widget with dynamic import

package/src/layouts/AuthLayout/AuthHelp.tsx

@@ -1,4 +1,4 @@
-import { Mail, MessageCircle, HelpCircle } from 'lucide-react';
+import { HelpCircle, Mail, MessageCircle } from 'lucide-react';
 import React from 'react';
 
 import { Button } from '@djangocfg/ui-nextjs/components';

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -27,11 +27,11 @@
 
 import React from 'react';
 
+import { Suspense } from '../../components';
 import { AuthProvider, useAuthContext } from './AuthContext';
 import { IdentifierForm } from './IdentifierForm';
-import { OTPForm } from './OTPForm';
 import { OAuthCallback } from './OAuthCallback';
-import { Suspense } from '../../components';
+import { OTPForm } from './OTPForm';
 
 import type { AuthProps } from './types';
 

package/src/layouts/AuthLayout/IdentifierForm.tsx

@@ -1,23 +1,11 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { Mail, Phone, User, Send } from 'lucide-react';
+import { Mail, Phone, Send, User } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
 
 import {
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Checkbox,
-  Input,
-  Label,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-  PhoneInput,
+    Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Input, Label,
+    PhoneInput, Tabs, TabsContent, TabsList, TabsTrigger
 } from '@djangocfg/ui-nextjs/components';
 
 import { useAuthContext } from './AuthContext';

package/src/layouts/AuthLayout/OAuthCallback.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import { AlertCircle, CheckCircle, Loader2 } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
-import { Loader2, AlertCircle, CheckCircle } from 'lucide-react';
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@djangocfg/ui-nextjs/components';
+import React, { useEffect, useState } from 'react';
 
 import { useGithubAuth } from '@djangocfg/api/auth';
+import {
+    Card, CardContent, CardDescription, CardHeader, CardTitle
+} from '@djangocfg/ui-nextjs/components';
 
 export interface OAuthCallbackProps {
   onSuccess?: (user: any, isNewUser: boolean, provider: string) => void;

package/src/layouts/AuthLayout/OAuthProviders.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import React from 'react';
 import { Github, Loader2 } from 'lucide-react';
+import React from 'react';
 
+import { useGithubAuth } from '@djangocfg/api/auth';
 import { Button } from '@djangocfg/ui-nextjs/components';
 
-import { useGithubAuth } from '@djangocfg/api/auth';
 import { useAuthContext } from './AuthContext';
 
 /**

package/src/layouts/AuthLayout/OTPForm.tsx

@@ -1,21 +1,15 @@
 'use client';
 
+import { ArrowLeft, Mail, MessageCircle, RotateCw, ShieldCheck } from 'lucide-react';
 import React from 'react';
-import { Mail, MessageCircle, ArrowLeft, RotateCw, ShieldCheck } from 'lucide-react';
 
 import {
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  OTPInput,
+    Button, Card, CardContent, CardDescription, CardHeader, CardTitle, OTPInput
 } from '@djangocfg/ui-nextjs/components';
 
+import { config } from '../../utils';
 import { useAuthContext } from './AuthContext';
 import { AuthHelp } from './AuthHelp';
-import { config } from '../../utils';
 
 export const OTPForm: React.FC = () => {
   const {

package/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -47,12 +47,16 @@
 'use client';
 
 import React, { ReactNode } from 'react';
-import { SidebarProvider, SidebarInset, Preloader, ButtonLink } from '@djangocfg/ui-nextjs/components';
+
 import { useAuth } from '@djangocfg/api/auth';
-import { PrivateSidebar, PrivateHeader, PrivateContent } from './components';
-import type { LucideIcon as LucideIconType } from 'lucide-react';
+import {
+    ButtonLink, Preloader, SidebarInset, SidebarProvider
+} from '@djangocfg/ui-nextjs/components';
+
 import { UserMenuConfig } from '../types';
+import { PrivateContent, PrivateHeader, PrivateSidebar } from './components';
 
+import type { LucideIcon as LucideIconType } from 'lucide-react';
 export interface SidebarItem {
   label: string;
   href: string;

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

@@ -7,6 +7,7 @@
 'use client';
 
 import React, { ReactNode } from 'react';
+
 import { cn } from '@djangocfg/ui-nextjs/lib';
 
 interface PrivateContentProps {

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

@@ -6,16 +6,15 @@
 
 'use client';
 
-import React from 'react';
 import Link from 'next/link';
-import {
-  Button,
-  Separator,
-  SidebarTrigger,
-} from '@djangocfg/ui-nextjs/components';
-import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+import React from 'react';
+
 import { useAuth } from '@djangocfg/api/auth';
+import { Button, Separator, SidebarTrigger } from '@djangocfg/ui-nextjs/components';
+import { ThemeToggle } from '@djangocfg/ui-nextjs/theme';
+
 import { UserMenu } from '../../_components/UserMenu';
+
 import type { HeaderConfig } from '../PrivateLayout';
 
 interface PrivateHeaderProps {

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

@@ -6,24 +6,18 @@
 
 'use client';
 
-import React from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import React from 'react';
+
 import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
+    Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader,
+    SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, useSidebar
 } from '@djangocfg/ui-nextjs/components';
 import { cn } from '@djangocfg/ui-nextjs/lib';
+
 import { LucideIcon } from '../../../components';
+
 import type { SidebarItem, SidebarConfig } from '../PrivateLayout';
 
 interface PrivateSidebarProps {

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -2,17 +2,12 @@
 'use client';
 
 import React from 'react';
+import moment from 'moment';
 
+import { AccountsProvider, useAuth } from '@djangocfg/api/auth';
 import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  Preloader,
+    Card, CardContent, CardDescription, CardHeader, CardTitle, Preloader
 } from '@djangocfg/ui-nextjs/components';
-import { AccountsProvider } from '@djangocfg/api/auth';
-import { useAuth } from '@djangocfg/api/auth';
 
 import { AvatarSection, ProfileForm } from './components';
 
@@ -37,11 +32,7 @@ const ProfileContent = ({
   const { user, isLoading } = useAuth();
 
   const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
+    return moment.utc(dateString).local().format('MMMM D, YYYY');
   };
 
   React.useEffect(() => {

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

@@ -4,9 +4,9 @@ import { Check, Upload, X } from 'lucide-react';
 import React, { useState } from 'react';
 import { toast } from 'sonner';
 
+import { useAccountsContext, useAuth } from '@djangocfg/api/auth';
 import { Avatar, AvatarFallback, Button } from '@djangocfg/ui-nextjs/components';
-import { useAccountsContext } from '@djangocfg/api/auth';
-import { useAuth } from '@djangocfg/api/auth';
+
 import { profileLogger } from '../../../utils/logger';
 
 export const AvatarSection = () => {
@@ -26,6 +26,10 @@ export const AvatarSection = () => {
       .slice(0, 2);
   };
 
+  const formatFileSize = (bytes: number) => {
+    return (bytes / 1024 / 1024).toFixed(2);
+  };
+
   const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
@@ -142,7 +146,7 @@ export const AvatarSection = () => {
       {avatarFile && (
         <div className="mt-3 text-center">
           <p className="text-xs text-muted-foreground">
-            {avatarFile.name} ({(avatarFile.size / 1024 / 1024).toFixed(2)} MB)
+            {avatarFile.name} ({formatFileSize(avatarFile.size)} MB)
           </p>
         </div>
       )}

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

@@ -3,28 +3,18 @@
 
 import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
-import { profileLogger } from '../../../utils/logger';
 
 import {
-  Button,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Input,
-  Label,
-  PhoneInput,
-} from '@djangocfg/ui-nextjs/components';
-import { 
-  useAccountsContext,
-  PatchedUserProfileUpdateRequestSchema,
-  type PatchedUserProfileUpdateRequest
+    PatchedUserProfileUpdateRequest, PatchedUserProfileUpdateRequestSchema, type 
+    useAccountsContext, useAuth
 } from '@djangocfg/api/auth';
-import { useAuth } from '@djangocfg/api/auth';
+import {
+    Button, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Input, Label, PhoneInput
+} from '@djangocfg/ui-nextjs/components';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { profileLogger } from '../../../utils/logger';
 
 export const ProfileForm = () => {
   const { user } = useAuth();

package/src/layouts/PublicLayout/PublicLayout.tsx

@@ -28,14 +28,12 @@
 
 'use client';
 
-import { ReactNode, useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
-import type { NavigationItem, UserMenuConfig } from '../types';
-import {
-  PublicNavigation,
-  PublicMobileDrawer,
-} from './components';
+import { ReactNode, useEffect, useState } from 'react';
+
+import { PublicMobileDrawer, PublicNavigation } from './components';
 
+import type { NavigationItem, UserMenuConfig } from '../types';
 export interface PublicLayoutProps {
   children: ReactNode;
   /** Logo path or URL */

package/src/layouts/PublicLayout/components/PublicFooter/FooterBottom.tsx

@@ -4,9 +4,11 @@
 
 'use client';
 
-import React from 'react';
 import Link from 'next/link';
+import React from 'react';
+
 import { DjangoCFGLogo } from './DjangoCFGLogo';
+
 import type { FooterLink } from './types';
 
 export interface FooterBottomProps {

package/src/layouts/PublicLayout/components/PublicFooter/FooterMenuSections.tsx

@@ -4,8 +4,9 @@
 
 'use client';
 
-import React from 'react';
 import Link from 'next/link';
+import React from 'react';
+
 import type { FooterMenuSection } from './types';
 
 export interface FooterMenuSectionsProps {

package/src/layouts/PublicLayout/components/PublicFooter/FooterProjectInfo.tsx

@@ -5,9 +5,11 @@
 'use client';
 
 import React from 'react';
-import type { LucideIcon } from 'lucide-react';
+
 import { DjangoCFGLogo } from './DjangoCFGLogo';
 import { FooterSocialLinksComponent } from './FooterSocialLinks';
+
+import type { LucideIcon } from 'lucide-react';
 import type { FooterSocialLinks } from './types';
 
 export interface FooterProjectInfoProps {

package/src/layouts/PublicLayout/components/PublicFooter/FooterSocialLinks.tsx

@@ -4,18 +4,11 @@
 
 'use client';
 
-import React from 'react';
 import {
-  Github,
-  Linkedin,
-  Twitter,
-  MessageCircle,
-  Youtube,
-  Facebook,
-  Instagram,
-  Mail,
-  MessageSquare,
+    Facebook, Github, Instagram, Linkedin, Mail, MessageCircle, MessageSquare, Twitter, Youtube
 } from 'lucide-react';
+import React from 'react';
+
 import type { FooterSocialLinks } from './types';
 
 export interface FooterSocialLinksProps {

package/src/layouts/PublicLayout/components/PublicFooter/PublicFooter.tsx

@@ -7,12 +7,15 @@
 
 'use client';
 
-import React from 'react';
 import Link from 'next/link';
+import React from 'react';
+
 import { useIsMobile } from '@djangocfg/ui-nextjs/hooks';
-import { FooterProjectInfo } from './FooterProjectInfo';
-import { FooterMenuSections } from './FooterMenuSections';
+
 import { FooterBottom } from './FooterBottom';
+import { FooterMenuSections } from './FooterMenuSections';
+import { FooterProjectInfo } from './FooterProjectInfo';
+
 import type { PublicFooterProps } from './types';
 
 export function PublicFooter({