@djangocfg/layouts 1.2.22 → 1.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.22",
+  "version": "1.2.23",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,9 +53,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.22",
-    "@djangocfg/og-image": "^1.2.22",
-    "@djangocfg/ui": "^1.2.22",
+    "@djangocfg/api": "^1.2.23",
+    "@djangocfg/og-image": "^1.2.23",
+    "@djangocfg/ui": "^1.2.23",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -76,7 +76,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.22",
+    "@djangocfg/typescript-config": "^1.2.23",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -16,36 +16,36 @@ export interface PackageInfo {
 /**
  * Package versions registry
  * Auto-synced from package.json files
- * Last updated: 2025-11-03T06:46:24.174Z
+ * Last updated: 2025-11-03T14:50:13.997Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.22"
+    "version": "1.2.23"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.22"
+    "version": "1.2.23"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.22"
+    "version": "1.2.23"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.22"
+    "version": "1.2.23"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.22"
+    "version": "1.2.23"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.22"
+    "version": "1.2.23"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.22"
+    "version": "1.2.23"
   }
 ];
 

package/src/layouts/AppLayout/layouts/AdminLayout/AdminLayout.tsx

@@ -83,8 +83,8 @@ export function AdminLayout({
   enableParentSync = true
 }: AdminLayoutProps) {
   const [isMounted, setIsMounted] = React.useState(false);
-  const { user, isLoading, loadCurrentProfile } = useAuth();
-  // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading);
+  const { user, isLoading, isAuthenticated, loadCurrentProfile } = useAuth();
+  // console.log('[AdminLayout] Rendering with user:', user, 'isLoading:', isLoading, 'isAuthenticated:', isAuthenticated);
 
   // Track mount state to prevent hydration mismatch
   React.useEffect(() => {
@@ -117,33 +117,44 @@ export function AdminLayout({
 
   // console.log('[AdminLayout] isEmbedded:', isEmbedded);
 
+  // Minimalist loading component
+  const LoadingState = () => (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="flex items-center gap-2 text-muted-foreground">
+        <div className="w-2 h-2 bg-current rounded-full animate-pulse" style={{ animationDelay: '0ms' }} />
+        <div className="w-2 h-2 bg-current rounded-full animate-pulse" style={{ animationDelay: '150ms' }} />
+        <div className="w-2 h-2 bg-current rounded-full animate-pulse" style={{ animationDelay: '300ms' }} />
+        <span className="ml-2">Loading...</span>
+      </div>
+    </div>
+  );
+
   // During SSR and initial render, show loading to prevent hydration mismatch
   if (!isMounted) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background">
-        <div className="text-muted-foreground">Loading admin panel...</div>
-      </div>
-    );
+    return <LoadingState />;
   }
 
   // Show loading while auth is initializing (waiting for tokens from parent or profile loading)
-  if (isLoading) {
-    // console.log('[AdminLayout] Showing loading state - isLoading:', isLoading);
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background">
-        <div className="text-muted-foreground">Loading admin panel...</div>
-      </div>
-    );
+  // OR if user object is not loaded yet (null/undefined)
+  // OR if authentication status is not yet determined
+  if (isLoading || !user || !isAuthenticated) {
+    // console.log('[AdminLayout] Showing loading state - isLoading:', isLoading, 'user:', user, 'isAuthenticated:', isAuthenticated);
+    return <LoadingState />;
   }
 
   // Check if user has staff or superuser privileges
-  const hasAdminAccess = user?.is_staff || user?.is_superuser;
-  // console.log('[AdminLayout] user:', user, 'hasAdminAccess:', hasAdminAccess, 'is_staff:', user?.is_staff, 'is_superuser:', user?.is_superuser);
-
-  // Only render AdminLayout features for staff/superuser
+  // At this point, we KNOW that:
+  // 1. User is loaded (not null)
+  // 2. User is authenticated
+  // 3. Auth process is complete
+  const hasAdminAccess = user.is_staff || user.is_superuser;
+  // console.log('[AdminLayout] user:', user, 'hasAdminAccess:', hasAdminAccess, 'is_staff:', user.is_staff, 'is_superuser:', user.is_superuser);
+
+  // Only show "Access Denied" when we are CERTAIN user doesn't have permissions
+  // This prevents showing the message during auth/loading states
   if (!hasAdminAccess) {
-    console.warn('[AdminLayout] Access denied - user does not have admin access');
-    // console.log('[AdminLayout] User details:', JSON.stringify(user, null, 2));
+    // Only show this when user is fully authenticated but lacks permissions
+    // console.log('[AdminLayout] Authenticated user lacks admin permissions');
     return (
       <div className="min-h-screen flex items-center justify-center bg-background">
         <div className="text-center space-y-4 p-8">

package/src/layouts/UILayout/config/components/navigation.config.tsx

@@ -318,25 +318,28 @@ export const NAVIGATION_COMPONENTS: ComponentConfig[] = [
     category: 'navigation',
     description: 'Client-side pagination component for static builds with callback support',
     importPath: `import { StaticPagination } from '@djangocfg/ui';`,
-    example: `const [currentPage, setCurrentPage] = useState(1);
+    example: `import { useDRFPagination } from '@djangocfg/ui';
+
+const pagination = useDRFPagination(1, 10);
+const { data } = useMyAPI(pagination.params);
 
 <StaticPagination
-  currentPage={currentPage}
-  totalPages={10}
-  totalItems={100}
-  itemsPerPage={10}
-  hasNextPage={currentPage < 10}
-  hasPreviousPage={currentPage > 1}
-  onPageChange={(page) => setCurrentPage(page)}
+  data={data}
+  onPageChange={pagination.setPage}
 />`,
     preview: (
       <StaticPagination
-        currentPage={2}
-        totalPages={10}
-        totalItems={100}
-        itemsPerPage={10}
-        hasNextPage={true}
-        hasPreviousPage={true}
+        data={{
+          count: 100,
+          page: 2,
+          pages: 10,
+          page_size: 10,
+          has_next: true,
+          has_previous: true,
+          next_page: 3,
+          previous_page: 1,
+          results: [],
+        }}
         onPageChange={(page) => console.log('Page changed to:', page)}
       />
     ),