fix: resolve loading bar conflict with route guard in settings pages

Author: x0sina

dashboard/public/statics/locales/ru.json

@@ -822,7 +822,7 @@
   "userDialog.onHoldExpireDuration": "Продолжительность срока действия",
   "userDialog.onHoldExpireDurationPlaceholder": "например, 7",
   "userDialog.optional": "необязательно",
-  "userDialog.periodicUsageReset": "Период сброса трафика",
+  "userDialog.periodicUsageReset": "Периодич. сброс",
   "userDialog.protocols": "Протоколы",
   "userDialog.relative": "Относительно",
   "userDialog.resetStrategyAnnually": "Ежегодно",

dashboard/src/components/common/date-picker.tsx

@@ -366,9 +366,9 @@ export function DatePicker({
                 <div className="hidden lg:flex items-center gap-1.5 flex-wrap border-t p-3">
                   {[
                     { label: '7d', days: 7 },
-                    { label: '30d', days: 30 },
-                    { label: '60d', days: 60 },
-                    { label: '90d', days: 90 },
+                    { label: '1m', days: 30 },
+                    { label: '2m', days: 60 },
+                    { label: '3m', days: 90 },
                     { label: '1y', days: 365 },
                   ].map(({ label, days }) => {
                     const handleShortcut = () => {

dashboard/src/components/dialogs/user-modal.tsx

@@ -150,6 +150,7 @@ const ExpiryDateField = ({
     { label: '1m', days: 30 },
     { label: '2m', days: 60 },
     { label: '3m', days: 90 },
+    { label: '6m', days: 180 },
     { label: '1y', days: 365 },
   ]
 

dashboard/src/components/layout/route-guard.tsx

@@ -1,15 +1,19 @@
 import { useAdmin } from '@/hooks/use-admin'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { useLocation, useNavigate } from 'react-router'
 
 export default function RouteGuard({ children }: { children: React.ReactNode }) {
   const { admin } = useAdmin()
   const location = useLocation()
   const navigate = useNavigate()
   const is_sudo = admin?.is_sudo || false
+  const hasNavigatedRef = useRef(false)
 
   useEffect(() => {
-    if (!admin) return // Wait for admin data to load
+    if (!admin) {
+      hasNavigatedRef.current = false
+      return // Wait for admin data to load
+    }
 
     if (!is_sudo) {
       const currentPath = location.pathname
@@ -20,6 +24,12 @@ export default function RouteGuard({ children }: { children: React.ReactNode })
 
       // If current route is allowed, don't redirect
       if (isAllowedRoute) {
+        hasNavigatedRef.current = false
+        return
+      }
+
+      // Prevent multiple navigations for the same route change
+      if (hasNavigatedRef.current) {
         return
       }
 
@@ -28,12 +38,14 @@ export default function RouteGuard({ children }: { children: React.ReactNode })
       const isRestrictedRoute = restrictedRoutes.some(route => currentPath.startsWith(route))
 
       if (isRestrictedRoute) {
+        hasNavigatedRef.current = true
         navigate('/users', { replace: true })
         return
       }
 
       // Handle settings routes
       if (currentPath === '/settings') {
+        hasNavigatedRef.current = true
         navigate('/settings/theme', { replace: true })
         return
       }
@@ -43,11 +55,19 @@ export default function RouteGuard({ children }: { children: React.ReactNode })
 
       if (restrictedSettingsRoutes.includes(currentPath)) {
         // Redirecting non-sudo admin from restricted settings
+        hasNavigatedRef.current = true
         navigate('/settings/theme', { replace: true })
         return
       }
+    } else {
+      hasNavigatedRef.current = false
     }
   }, [admin, is_sudo, location.pathname, navigate])
 
+  // Reset navigation flag when pathname changes (after navigation completes)
+  useEffect(() => {
+    hasNavigatedRef.current = false
+  }, [location.pathname])
+
   return <>{children}</>
 }

dashboard/src/components/layout/top-loading-bar.tsx

@@ -133,7 +133,17 @@ function TopLoadingBar({ height = 3, color, shadow = true, className = '' }: Top
 
     lastLocation = currentPath
 
-    if (!shouldIgnoreRoute(pathname) && ref.current) {
+    if (shouldIgnoreRoute(pathname)) {
+      // For ignored routes, ensure any existing loading bar is completed immediately
+      if (ref.current) {
+        ref.current.complete()
+      }
+      // Clear any pending timeout
+      if (maxTimeoutRef.current) {
+        clearTimeout(maxTimeoutRef.current)
+        maxTimeoutRef.current = undefined
+      }
+    } else if (ref.current) {
       // Start loading bar on route change with continuous animation
       ref.current.continuousStart()