fix: Refine admin dashboard presentation

package.json

@@ -53,6 +53,7 @@
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
     "@stripe/react-stripe-js": "^3",
@@ -73,6 +74,7 @@
     "prism-react-renderer": "^2.3.1",
     "qs-esm": "8.0.1",
     "react": "19.2.6",
+    "react-day-picker": "^10.0.1",
     "react-dom": "19.2.6",
     "react-hook-form": "7.71.1",
     "sharp": "0.35.4",

src/components/admin/AdminNavigationProgress/index.scss

@@ -0,0 +1,34 @@
+.admin-navigation-progress {
+  position: fixed;
+  z-index: 1100;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  overflow: hidden;
+  background: var(--theme-elevation-100);
+  pointer-events: none;
+
+  span {
+    display: block;
+    width: 38%;
+    height: 100%;
+    background: var(--theme-elevation-900);
+    transform: translateX(-110%);
+    animation: admin-request-progress 900ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
+  }
+}
+
+@keyframes admin-request-progress {
+  0% { transform: translateX(-110%); }
+  55% { transform: translateX(115%); }
+  100% { transform: translateX(265%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .admin-navigation-progress span {
+    width: 100%;
+    transform: none;
+    animation: none;
+  }
+}

src/components/admin/AdminNavigationProgress/index.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import './index.scss'
+
+type ProgressContext = {
+  start: () => void
+}
+
+const AdminNavigationProgressContext = createContext<ProgressContext>({ start: () => undefined })
+
+export const useAdminNavigationProgress = () => useContext(AdminNavigationProgressContext)
+
+export const AdminNavigationProgress: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [loadingFrom, setLoadingFrom] = useState<string | null>(null)
+  const safetyTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const navigationKey = `${pathname}?${searchParams.toString()}`
+  const isLoading = loadingFrom === navigationKey
+
+  const start = useCallback(() => {
+    if (safetyTimer.current) clearTimeout(safetyTimer.current)
+    setLoadingFrom(navigationKey)
+    safetyTimer.current = setTimeout(() => setLoadingFrom(null), 15_000)
+  }, [navigationKey])
+  const context = useMemo(() => ({ start }), [start])
+
+  useEffect(() => () => {
+    if (safetyTimer.current) clearTimeout(safetyTimer.current)
+  }, [])
+
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey
+      ) {
+        return
+      }
+
+      const target = event.target
+      if (!(target instanceof Element)) return
+
+      const anchor = target.closest<HTMLAnchorElement>('a[href]')
+      if (!anchor || anchor.download || (anchor.target && anchor.target !== '_self')) return
+
+      const destination = new URL(anchor.href, window.location.href)
+      if (destination.origin !== window.location.origin || !destination.pathname.startsWith('/admin')) {
+        return
+      }
+
+      const current = `${window.location.pathname}${window.location.search}`
+      const next = `${destination.pathname}${destination.search}`
+      if (next !== current) start()
+    }
+
+    document.addEventListener('click', handleClick, true)
+    return () => document.removeEventListener('click', handleClick, true)
+  }, [start])
+
+  return (
+    <AdminNavigationProgressContext.Provider value={context}>
+      {isLoading && (
+        <div
+          aria-label="Loading admin page"
+          className="admin-navigation-progress"
+          role="progressbar"
+        >
+          <span />
+        </div>
+      )}
+      {children}
+    </AdminNavigationProgressContext.Provider>
+  )
+}

src/components/admin/AdminStyles/index.tsx

@@ -1,5 +1,9 @@
+'use client'
+
 import React from 'react'
 
+import { AdminNavigationProgress } from '../AdminNavigationProgress'
+
 import './nav-icons.scss'
 import './fields.scss'
 import './media-grid.scss'
@@ -12,5 +16,5 @@ import './media-grid.scss'
  * sheet loads on every admin screen, including login.
  */
 export const AdminStyles: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
-  return <>{children}</>
+  return <AdminNavigationProgress>{children}</AdminNavigationProgress>
 }