@djangocfg/layouts 1.2.22 → 1.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.22",
+  "version": "1.2.24",
   "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.24",
+    "@djangocfg/og-image": "^1.2.24",
+    "@djangocfg/ui": "^1.2.24",
     "@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.24",
     "@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-04T07:41:20.959Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.22"
+    "version": "1.2.24"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.22"
+    "version": "1.2.24"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.22"
+    "version": "1.2.24"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.22"
+    "version": "1.2.24"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.22"
+    "version": "1.2.24"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.22"
+    "version": "1.2.24"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.22"
+    "version": "1.2.24"
   }
 ];
 

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/forms.config.tsx

@@ -5,6 +5,7 @@
 import React from 'react';
 import {
   Button,
+  DownloadButton,
   Input,
   Checkbox,
   Label,
@@ -73,6 +74,106 @@ export const FORM_COMPONENTS: ComponentConfig[] = [
       </div>
     ),
   },
+  {
+    name: 'DownloadButton',
+    category: 'forms',
+    description: 'Button with download functionality, status indicators, and authentication support',
+    importPath: `import { DownloadButton } from '@djangocfg/ui';`,
+    example: `// Simple download
+<DownloadButton
+  url="/api/files/report.pdf"
+  filename="monthly-report.pdf"
+>
+  Download Report
+</DownloadButton>
+
+// With callbacks
+<DownloadButton
+  url="/api/export/users"
+  method="POST"
+  body={{ format: "csv" }}
+  onDownloadStart={() => console.log("Starting...")}
+  onDownloadComplete={(filename) => console.log("Done:", filename)}
+  onDownloadError={(error) => console.error("Error:", error)}
+>
+  Export Users
+</DownloadButton>
+
+// Different variants
+<DownloadButton url="/api/data" variant="outline" size="sm">
+  Download Data
+</DownloadButton>`,
+    preview: (
+      <div className="space-y-4">
+        {/* Basic example */}
+        <div className="space-y-2">
+          <p className="text-sm font-medium">Basic Download:</p>
+          <DownloadButton
+            url="https://jsonplaceholder.typicode.com/posts/1"
+            filename="example-data.json"
+          >
+            Download Example
+          </DownloadButton>
+        </div>
+
+        {/* Variants */}
+        <div className="space-y-2">
+          <p className="text-sm font-medium">Variants:</p>
+          <div className="flex flex-wrap gap-2">
+            <DownloadButton
+              url="https://jsonplaceholder.typicode.com/posts/1"
+              filename="data.json"
+              variant="default"
+            >
+              Default
+            </DownloadButton>
+            <DownloadButton
+              url="https://jsonplaceholder.typicode.com/posts/1"
+              filename="data.json"
+              variant="outline"
+            >
+              Outline
+            </DownloadButton>
+            <DownloadButton
+              url="https://jsonplaceholder.typicode.com/posts/1"
+              filename="data.json"
+              variant="secondary"
+            >
+              Secondary
+            </DownloadButton>
+          </div>
+        </div>
+
+        {/* Sizes */}
+        <div className="space-y-2">
+          <p className="text-sm font-medium">Sizes:</p>
+          <div className="flex flex-wrap items-center gap-2">
+            <DownloadButton
+              url="https://jsonplaceholder.typicode.com/posts/1"
+              filename="data.json"
+              size="sm"
+            >
+              Small
+            </DownloadButton>
+            <DownloadButton
+              url="https://jsonplaceholder.typicode.com/posts/1"
+              filename="data.json"
+              size="default"
+            >
+              Default
+            </DownloadButton>
+            <DownloadButton
+              url="https://jsonplaceholder.typicode.com/posts/1"
+              filename="data.json"
+              size="lg"
+            >
+              Large
+            </DownloadButton>
+          </div>
+        </div>
+      </div>
+    ),
+  },
   {
     name: 'Input',
     category: 'forms',

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)}
       />
     ),