@djangocfg/layouts 2.1.48 → 2.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.48",
+  "version": "2.1.50",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,12 +92,13 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.48",
-    "@djangocfg/centrifugo": "^2.1.48",
-    "@djangocfg/ui-nextjs": "^2.1.48",
+    "@djangocfg/api": "^2.1.50",
+    "@djangocfg/centrifugo": "^2.1.50",
+    "@djangocfg/ui-nextjs": "^2.1.50",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
+    "moment": "^2.30.1",
     "next": ">=15.0.0",
     "p-retry": "^7.0.0",
     "react": "^19.1.0",
@@ -107,15 +108,15 @@
     "swr": "^2.3.7",
     "tailwindcss": "^4.1.14",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.1.13",
-    "moment": "^2.30.1"
+    "zod": "^4.1.13"
   },
   "dependencies": {
+    "nextjs-toploader": "^3.9.17",
     "react-ga4": "^2.1.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.48",
+    "@djangocfg/typescript-config": "^2.1.50",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
@@ -126,4 +127,3 @@
     "access": "public"
   }
 }
-

package/src/components/core/index.ts

@@ -7,6 +7,5 @@ export type { ClientOnlyProps } from './ClientOnly';
 export { JsonLd } from './JsonLd';
 export { LucideIcon } from './LucideIcon';
 export type { LucideIconProps } from './LucideIcon';
-export { PageProgress } from './PageProgress';
 export { Suspense } from './Suspense';
 

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

@@ -13,18 +13,21 @@ import { Button, useCopy } from '@djangocfg/ui-nextjs';
 
 import { generateCurlFromError } from '../utils/curl-generator';
 import {
-    formatCORSErrorForClipboard, formatNetworkErrorForClipboard, formatValidationErrorForClipboard
+    formatCentrifugoErrorForClipboard,
+    formatCORSErrorForClipboard,
+    formatNetworkErrorForClipboard,
+    formatValidationErrorForClipboard
 } from '../utils/formatters';
 
-import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail } from '../types';
+import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail, CentrifugoErrorDetail } from '../types';
 export interface ErrorButtonsProps {
-  detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail;
+  detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail;
 }
 
 /**
  * Format error for clipboard based on type
  */
-function formatErrorForClipboard(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail): string {
+function formatErrorForClipboard(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail): string {
   switch (detail.type) {
     case 'validation':
       return formatValidationErrorForClipboard(detail);
@@ -32,6 +35,8 @@ function formatErrorForClipboard(detail: ValidationErrorDetail | CORSErrorDetail
       return formatCORSErrorForClipboard(detail);
     case 'network':
       return formatNetworkErrorForClipboard(detail);
+    case 'centrifugo':
+      return formatCentrifugoErrorForClipboard(detail);
     default:
       return JSON.stringify(detail, null, 2);
   }
@@ -40,7 +45,7 @@ function formatErrorForClipboard(detail: ValidationErrorDetail | CORSErrorDetail
 /**
  * Check if error supports cURL generation
  */
-function supportsCurl(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail): boolean {
+function supportsCurl(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail): boolean {
   return detail.type === 'validation';
 }
 

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

@@ -15,9 +15,11 @@ import type {
   ValidationErrorDetail,
   CORSErrorDetail,
   NetworkErrorDetail,
+  CentrifugoErrorDetail,
   ValidationErrorConfig,
   CORSErrorConfig,
   NetworkErrorConfig,
+  CentrifugoErrorConfig,
 } from '../types';
 /**
  * Build validation error description
@@ -133,12 +135,46 @@ function buildNetworkDescription(
   );
 }
 
+/**
+ * Build centrifugo error description
+ */
+function buildCentrifugoDescription(
+  detail: CentrifugoErrorDetail,
+  config: Required<CentrifugoErrorConfig>
+): React.ReactNode {
+  const parts: string[] = [];
+
+  // Add method info
+  if (config.showMethod) {
+    parts.push(`RPC: ${detail.method}`);
+  }
+
+  // Add error code
+  if (config.showCode && detail.code !== undefined) {
+    parts.push(`Code: ${detail.code}`);
+  }
+
+  return (
+    <div className="flex flex-col gap-2 text-sm">
+      {parts.length > 0 && (
+        <div className="font-mono text-xs opacity-90">
+          {parts.join(' • ')}
+        </div>
+      )}
+
+      <div className="opacity-90">{detail.error}</div>
+
+      <ErrorButtons detail={detail} />
+    </div>
+  );
+}
+
 /**
  * Create toast options for any error type
  */
 export function createErrorToast(
-  detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail,
-  config: Required<ValidationErrorConfig | CORSErrorConfig | NetworkErrorConfig>
+  detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail,
+  config: Required<ValidationErrorConfig | CORSErrorConfig | NetworkErrorConfig | CentrifugoErrorConfig>
 ) {
   let description: React.ReactNode;
 
@@ -147,6 +183,8 @@ export function createErrorToast(
     description = buildValidationDescription(detail, config as Required<ValidationErrorConfig>);
   } else if (detail.type === 'cors') {
     description = buildCORSDescription(detail, config as Required<CORSErrorConfig>);
+  } else if (detail.type === 'centrifugo') {
+    description = buildCentrifugoDescription(detail, config as Required<CentrifugoErrorConfig>);
   } else {
     description = buildNetworkDescription(detail, config as Required<NetworkErrorConfig>);
   }

package/src/components/errors/ErrorsTracker/index.ts

@@ -1,7 +1,7 @@
 /**
  * Error Tracking - Unified error tracking for all error types
  *
- * Single provider and hook for validation, CORS, and network errors
+ * Single provider and hook for validation, CORS, network, and Centrifugo errors
  */
 
 // Main provider and hook
@@ -14,11 +14,13 @@ export type {
   ValidationErrorDetail,
   CORSErrorDetail,
   NetworkErrorDetail,
+  CentrifugoErrorDetail,
   StoredError,
   ErrorTrackingConfig,
   ValidationErrorConfig,
   CORSErrorConfig,
   NetworkErrorConfig,
+  CentrifugoErrorConfig,
   ErrorTrackingContextValue,
 } from './types';
 
@@ -32,6 +34,7 @@ export {
   formatValidationErrorForClipboard,
   formatCORSErrorForClipboard,
   formatNetworkErrorForClipboard,
+  formatCentrifugoErrorForClipboard,
   formatErrorTitle,
   extractDomain,
 } from './utils/formatters';

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

@@ -34,7 +34,11 @@ import { toast } from 'sonner';
 
 import { createErrorToast } from '../components/ErrorToast';
 import {
-    DEFAULT_CORS_CONFIG, DEFAULT_NETWORK_CONFIG, DEFAULT_VALIDATION_CONFIG, ERROR_EVENTS
+    DEFAULT_CENTRIFUGO_CONFIG,
+    DEFAULT_CORS_CONFIG,
+    DEFAULT_NETWORK_CONFIG,
+    DEFAULT_VALIDATION_CONFIG,
+    ERROR_EVENTS
 } from '../types';
 
 import type {
@@ -44,9 +48,11 @@ import type {
   ValidationErrorConfig,
   CORSErrorConfig,
   NetworkErrorConfig,
+  CentrifugoErrorConfig,
   ValidationErrorDetail,
   CORSErrorDetail,
   NetworkErrorDetail,
+  CentrifugoErrorDetail,
   ErrorTrackingContextValue,
 } from '../types';
 const ErrorTrackingContext = createContext<ErrorTrackingContextValue | undefined>(undefined);
@@ -64,6 +70,7 @@ export interface ErrorTrackingProviderProps {
   validation?: Partial<ValidationErrorConfig>;
   cors?: Partial<CORSErrorConfig>;
   network?: Partial<NetworkErrorConfig>;
+  centrifugo?: Partial<CentrifugoErrorConfig>;
   onError?: (error: ErrorDetail) => boolean | void;
 }
 
@@ -77,6 +84,7 @@ export function ErrorTrackingProvider({
   validation: userValidationConfig,
   cors: userCorsConfig,
   network: userNetworkConfig,
+  centrifugo: userCentrifugoConfig,
   onError,
 }: ErrorTrackingProviderProps) {
   const [errors, setErrors] = useState<StoredError[]>([]);
@@ -97,6 +105,11 @@ export function ErrorTrackingProvider({
     ...userNetworkConfig,
   };
 
+  const centrifugoConfig: Required<CentrifugoErrorConfig> = {
+    ...DEFAULT_CENTRIFUGO_CONFIG,
+    ...userCentrifugoConfig,
+  };
+
   /**
    * Clear all errors
    */
@@ -122,7 +135,7 @@ export function ErrorTrackingProvider({
    * Handle any error event
    */
   const handleError = useCallback(
-    (detail: ErrorDetail, config: Required<ValidationErrorConfig | CORSErrorConfig | NetworkErrorConfig>) => {
+    (detail: ErrorDetail, config: Required<ValidationErrorConfig | CORSErrorConfig | NetworkErrorConfig | CentrifugoErrorConfig>) => {
       // Create stored error with ID
       const storedError: StoredError = {
         ...detail,
@@ -201,24 +214,40 @@ export function ErrorTrackingProvider({
       handlers.push({ event: ERROR_EVENTS.NETWORK, handler });
     }
 
+    // Centrifugo errors
+    if (centrifugoConfig.enabled) {
+      const handler = (event: Event) => {
+        if (!(event instanceof CustomEvent)) return;
+        const detail: CentrifugoErrorDetail = {
+          ...event.detail,
+          type: 'centrifugo' as const,
+        };
+        handleError(detail, centrifugoConfig);
+      };
+      window.addEventListener(ERROR_EVENTS.CENTRIFUGO, handler);
+      handlers.push({ event: ERROR_EVENTS.CENTRIFUGO, handler });
+    }
+
     // Cleanup
     return () => {
       handlers.forEach(({ event, handler }) => {
         window.removeEventListener(event, handler);
       });
     };
-  }, [handleError, validationConfig, corsConfig, networkConfig]);
+  }, [handleError, validationConfig, corsConfig, networkConfig, centrifugoConfig]);
 
   // Filter errors by type
   const validationErrors = errors.filter((e) => e.type === 'validation') as StoredError<ValidationErrorDetail>[];
   const corsErrors = errors.filter((e) => e.type === 'cors') as StoredError<CORSErrorDetail>[];
   const networkErrors = errors.filter((e) => e.type === 'network') as StoredError<NetworkErrorDetail>[];
+  const centrifugoErrors = errors.filter((e) => e.type === 'centrifugo') as StoredError<CentrifugoErrorDetail>[];
 
   const value: ErrorTrackingContextValue = {
     errors,
     validationErrors,
     corsErrors,
     networkErrors,
+    centrifugoErrors,
     clearErrors,
     clearErrorsByType,
     clearError,
@@ -228,6 +257,7 @@ export function ErrorTrackingProvider({
       validation: validationConfig,
       cors: corsConfig,
       network: networkConfig,
+      centrifugo: centrifugoConfig,
     },
   };
 

package/src/components/errors/ErrorsTracker/types.ts

@@ -59,10 +59,25 @@ export interface NetworkErrorDetail extends BaseErrorDetail {
   statusCode?: number;
 }
 
+/**
+ * Centrifugo error detail (from centrifugo-error event)
+ */
+export interface CentrifugoErrorDetail extends BaseErrorDetail {
+  type: 'centrifugo';
+  /** RPC method that failed */
+  method: string;
+  /** Error message */
+  error: string;
+  /** Error code from Centrifugo */
+  code?: number;
+  /** Additional data sent with the request */
+  data?: any;
+}
+
 /**
  * Union type of all error details
  */
-export type ErrorDetail = ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail;
+export type ErrorDetail = ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail;
 
 /**
  * Stored error with unique ID
@@ -170,6 +185,23 @@ export interface NetworkErrorConfig extends ErrorTypeConfig {
   showStatusCode?: boolean;
 }
 
+/**
+ * Centrifugo error specific config
+ */
+export interface CentrifugoErrorConfig extends ErrorTypeConfig {
+  /**
+   * Show RPC method in toast
+   * @default true
+   */
+  showMethod?: boolean;
+
+  /**
+   * Show error code in toast
+   * @default true
+   */
+  showCode?: boolean;
+}
+
 /**
  * Complete error tracking configuration
  */
@@ -189,6 +221,11 @@ export interface ErrorTrackingConfig {
    */
   network?: NetworkErrorConfig;
 
+  /**
+   * Centrifugo error tracking configuration
+   */
+  centrifugo?: CentrifugoErrorConfig;
+
   /**
    * Custom error handler (called before toast for all errors)
    * Return false to prevent default toast notification
@@ -212,11 +249,14 @@ export interface ErrorTrackingContextValue {
   /** Network errors only */
   networkErrors: StoredError<NetworkErrorDetail>[];
 
+  /** Centrifugo errors only */
+  centrifugoErrors: StoredError<CentrifugoErrorDetail>[];
+
   /** Clear all errors */
   clearErrors: () => void;
 
   /** Clear errors by type */
-  clearErrorsByType: (type: 'validation' | 'cors' | 'network') => void;
+  clearErrorsByType: (type: 'validation' | 'cors' | 'network' | 'centrifugo') => void;
 
   /** Clear specific error by ID */
   clearError: (id: string) => void;
@@ -232,6 +272,7 @@ export interface ErrorTrackingContextValue {
     validation: Required<ValidationErrorConfig>;
     cors: Required<CORSErrorConfig>;
     network: Required<NetworkErrorConfig>;
+    centrifugo: Required<CentrifugoErrorConfig>;
   };
 }
 
@@ -242,6 +283,7 @@ export const ERROR_EVENTS = {
   VALIDATION: 'zod-validation-error',
   CORS: 'cors-error',
   NETWORK: 'network-error',
+  CENTRIFUGO: 'centrifugo-error',
 } as const;
 
 /**
@@ -276,3 +318,10 @@ export const DEFAULT_NETWORK_CONFIG: Required<NetworkErrorConfig> = {
   showMethod: true,
   showStatusCode: true,
 };
+
+export const DEFAULT_CENTRIFUGO_CONFIG: Required<CentrifugoErrorConfig> = {
+  ...DEFAULT_ERROR_CONFIG,
+  duration: 0, // Don't auto-dismiss centrifugo errors
+  showMethod: true,
+  showCode: true,
+};

package/src/components/errors/ErrorsTracker/utils/formatters.ts

@@ -5,7 +5,7 @@
  */
 
 import type { ZodError } from 'zod';
-import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail } from '../types';
+import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail, CentrifugoErrorDetail } from '../types';
 
 /**
  * Format Zod error issues for display
@@ -83,6 +83,22 @@ export function formatNetworkErrorForClipboard(detail: NetworkErrorDetail): stri
   return JSON.stringify(errorData, null, 2);
 }
 
+/**
+ * Format centrifugo error for clipboard
+ */
+export function formatCentrifugoErrorForClipboard(detail: CentrifugoErrorDetail): string {
+  const errorData = {
+    type: 'centrifugo',
+    timestamp: detail.timestamp.toISOString(),
+    method: detail.method,
+    error: detail.error,
+    ...(detail.code !== undefined && { code: detail.code }),
+    ...(detail.data && { data: detail.data }),
+  };
+
+  return JSON.stringify(errorData, null, 2);
+}
+
 /**
  * Extract domain from URL
  */
@@ -98,7 +114,7 @@ export function extractDomain(url: string): string {
 /**
  * Format error title based on type
  */
-export function formatErrorTitle(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail): string {
+export function formatErrorTitle(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail): string {
   switch (detail.type) {
     case 'validation':
       return `❌ Validation Error in ${detail.operation}`;
@@ -108,6 +124,10 @@ export function formatErrorTitle(detail: ValidationErrorDetail | CORSErrorDetail
       return detail.statusCode
         ? `⚠️ Network Error (${detail.statusCode})`
         : '⚠️ Network Error';
+    case 'centrifugo':
+      return detail.code !== undefined
+        ? `🔌 Centrifugo Error (${detail.code})`
+        : '🔌 Centrifugo Error';
     default:
       return '❌ Error';
   }

package/src/index.ts

@@ -28,6 +28,10 @@
 // Layout components
 export * from './layouts';
 
+// Re-export useRouter from nextjs-toploader for progress bar support
+// Use this instead of 'next/navigation' useRouter for router.push() to trigger progress
+export { useRouter } from 'nextjs-toploader/app';
+
 // Snippets - Reusable UI components (includes Analytics)
 export * from './snippets';
 

package/src/layouts/AppLayout/BaseApp.tsx

@@ -45,6 +45,7 @@
 'use client';
 
 import dynamic from 'next/dynamic';
+import NextTopLoader from 'nextjs-toploader';
 import { ReactNode } from 'react';
 import { SWRConfig } from 'swr';
 
@@ -52,8 +53,6 @@ import { getCentrifugoAuthTokenRetrieve } from '@djangocfg/api';
 import { AuthProvider } from '@djangocfg/api/auth';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
 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';
@@ -143,7 +142,12 @@ export function BaseApp({
                       onError={errorTracking?.onError}
                     >
                       {children}
-                      <PageProgress />
+                      <NextTopLoader
+                        color="hsl(var(--primary))"
+                        height={3}
+                        showSpinner={false}
+                        shadow="0 0 10px hsl(var(--primary)), 0 0 5px hsl(var(--primary))"
+                      />
                       <SonnerToaster />
 
                       {/* PWA Install Hint */}

package/src/snippets/PushNotifications/components/PushPrompt.tsx

@@ -10,6 +10,7 @@
 import { Bell, X } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 
+import { useAuth } from '@djangocfg/api/auth';
 import { Button } from '@djangocfg/ui-nextjs';
 
 import { usePushNotifications } from '../hooks/usePushNotifications';
@@ -60,6 +61,7 @@ export function PushPrompt({
   onEnabled,
   onDismissed,
 }: PushPromptProps) {
+  const { isAuthenticated, isLoading: isAuthLoading } = useAuth();
   const { isSupported, permission, isSubscribed, subscribe } = usePushNotifications({
     vapidPublicKey,
     subscribeEndpoint,
@@ -70,6 +72,11 @@ export function PushPrompt({
 
   // Check if should show
   useEffect(() => {
+    // Wait for auth to complete, don't show for unauthenticated users
+    if (isAuthLoading || !isAuthenticated) {
+      return;
+    }
+
     if (!isSupported || isSubscribed || permission === 'denied') {
       return;
     }
@@ -89,7 +96,7 @@ export function PushPrompt({
     // Show after delay
     const timer = setTimeout(() => setShow(true), delayMs);
     return () => clearTimeout(timer);
-  }, [isSupported, isSubscribed, permission, requirePWA, resetAfterDays, delayMs]);
+  }, [isAuthLoading, isAuthenticated, isSupported, isSubscribed, permission, requirePWA, resetAfterDays, delayMs]);
 
   const handleEnable = async () => {
     setEnabling(true);

package/src/components/core/PageProgress.tsx

@@ -1,127 +0,0 @@
-/**
- * PageProgress - Loading progress bar
- * 
- * Shows a progress bar at the top of the page during route transitions
- */
-
-'use client';
-
-import { usePathname } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
-
-export function PageProgress() {
-  const pathname = usePathname();
-  const [loading, setLoading] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [mounted, setMounted] = useState(false);
-  const progressTimer = useRef<NodeJS.Timeout | null>(null);
-  const prevPathname = useRef<string | null>(null);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Simulate realistic progress
-  const startFakeProgress = () => {
-    // Clear any existing timer
-    if (progressTimer.current) {
-      clearInterval(progressTimer.current);
-    }
-
-    setProgress(0);
-
-    // Quickly go to 20% to show immediate feedback
-    setTimeout(() => setProgress(20), 50);
-
-    // Then slowly increase to 90% (never reach 100% until actually complete)
-    progressTimer.current = setInterval(() => {
-      setProgress((prevProgress) => {
-        if (prevProgress >= 90) {
-          if (progressTimer.current) {
-            clearInterval(progressTimer.current);
-          }
-          return 90;
-        }
-
-        // Slow down as we get closer to 90%
-        const increment = 90 - prevProgress;
-        return prevProgress + (increment / 10);
-      });
-    }, 300);
-  };
-
-  const completeProgress = () => {
-    // Clear any existing timer
-    if (progressTimer.current) {
-      clearInterval(progressTimer.current);
-      progressTimer.current = null;
-    }
-
-    // Jump to 100% and then hide after showing completion
-    setProgress(100);
-    setTimeout(() => {
-      setLoading(false);
-      setTimeout(() => {
-        setProgress(0);
-      }, 300); // Wait for fade out animation
-    }, 500); // Show 100% for half a second
-  };
-
-  // Track pathname changes (App Router equivalent of routeChangeStart/Complete)
-  useEffect(() => {
-    // Skip on initial mount
-    if (prevPathname.current === null) {
-      prevPathname.current = pathname;
-      return;
-    }
-
-    // Only trigger if pathname actually changed
-    if (prevPathname.current !== pathname) {
-      setLoading(true);
-      startFakeProgress();
-      
-      // Complete progress after a short delay (simulating route change)
-      const timeout = setTimeout(() => {
-        completeProgress();
-        prevPathname.current = pathname;
-      }, 100);
-
-      return () => {
-        clearTimeout(timeout);
-        if (progressTimer.current) {
-          clearInterval(progressTimer.current);
-        }
-      };
-    }
-  }, [pathname]);
-
-  if (!mounted) {
-    return null;
-  }
-
-  return (
-    <div
-      data-page-progress="root"
-      data-loading={loading}
-      data-progress={progress}
-      className={`fixed top-0 left-0 w-full transition-opacity duration-300 ${
-        loading ? 'opacity-100' : 'opacity-0'
-      }`}
-      style={{
-        zIndex: 99999,
-        height: '3px',
-      }}
-    >
-      <div
-        className="h-full transition-all duration-200 ease-linear"
-        style={{
-          width: `${progress}%`,
-          background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%)',
-          boxShadow: '0 0 10px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.4), 0 0 30px rgba(59, 130, 246, 0.2)',
-          filter: 'drop-shadow(0 0 8px rgba(59, 130, 246, 0.8))',
-        }}
-      />
-    </div>
-  );
-}
-