From 9e194da309644495b382306c5e261e255d6e83eb Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Mon, 17 Nov 2025 17:19:11 +0100
Subject: [PATCH] bug: loginform + header navigation adjusted

---
 src/app/components/nav/Header.tsx      |  65 ++++++++++----
 src/app/login/components/LoginForm.tsx | 115 ++++++++++++-------------
 2 files changed, 101 insertions(+), 79 deletions(-)

diff --git a/src/app/components/nav/Header.tsx b/src/app/components/nav/Header.tsx
index b91b427..f9d7faa 100644
--- a/src/app/components/nav/Header.tsx
+++ b/src/app/components/nav/Header.tsx
@@ -54,6 +54,8 @@ export default function Header() {
 
   // NEW: permission flag
   const [hasReferralPerm, setHasReferralPerm] = useState(false)
+  // NEW: admin management dropdown state
+  const [adminMgmtOpen, setAdminMgmtOpen] = useState(false)
 
   const handleLogout = async () => {
     try {
@@ -405,31 +407,58 @@ export default function Header() {
               >
                 Dashboard
               </button>
-              <button
-                onClick={() => { console.log('🧭 Admin: navigate to /admin/user-management'); router.push('/admin/user-management') }}
-                className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
-              >
-                User Management
-              </button>
+              {/* MOVED: User Verify now before Management */}
               <button
                 onClick={() => { console.log('🧭 Admin: navigate to /admin/user-verify'); router.push('/admin/user-verify') }}
                 className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
               >
                 User Verify
               </button>
-              <button
-                onClick={() => { console.log('🧭 Admin: navigate to /admin/matrix-management'); router.push('/admin/matrix-management') }}
-                className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
+              {/* Management dropdown (unchanged) */}
+              <div
+                className="relative"
+                onMouseLeave={() => setAdminMgmtOpen(false)}
               >
-                Matrix Management
-              </button>
-              {/* Contract Management only for admin */}
-              <button
-                onClick={() => { console.log('🧭 Admin: navigate to /admin/contract-management'); router.push('/admin/contract-management') }}
-                className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
-              >
-                Contract Management
-              </button>
+                <button
+                  onClick={() => setAdminMgmtOpen(o => !o)}
+                  className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A] flex items-center gap-1"
+                >
+                  Management
+                  <ChevronDownIcon
+                    className={`h-4 w-4 transition-transform ${adminMgmtOpen ? 'rotate-180' : ''}`}
+                  />
+                </button>
+                {adminMgmtOpen && (
+                  <div className="absolute left-1/2 -translate-x-1/2 mt-2 min-w-[15rem] rounded-md bg-white shadow-lg ring-1 ring-black/10 z-50">
+                    <div className="py-2">
+                      <button
+                        onClick={() => { router.push('/admin/user-management'); setAdminMgmtOpen(false); }}
+                        className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
+                      >
+                        User Management
+                      </button>
+                      <button
+                        onClick={() => { router.push('/admin/matrix-management'); setAdminMgmtOpen(false); }}
+                        className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
+                      >
+                        Matrix Management
+                      </button>
+                      <button
+                        onClick={() => { router.push('/admin/contract-management'); setAdminMgmtOpen(false); }}
+                        className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
+                      >
+                        Contract Management
+                      </button>
+                      <button
+                        onClick={() => { router.push('/admin/subscriptions'); setAdminMgmtOpen(false); }}
+                        className="w-full text-left px-4 py-2 text-sm text-[#0F1D37] hover:bg-[#F5F3EE]"
+                      >
+                        Coffee Subscription Management
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/app/login/components/LoginForm.tsx b/src/app/login/components/LoginForm.tsx
index 5c8f4c9..2b2b23b 100644
--- a/src/app/login/components/LoginForm.tsx
+++ b/src/app/login/components/LoginForm.tsx
@@ -13,30 +13,27 @@ export default function LoginForm() {
     password: '',
     rememberMe: false
   })
+  const [viewportWidth, setViewportWidth] = useState<number>(
+    typeof window !== 'undefined' ? window.innerWidth : 1200
+  )
   const router = useRouter()
   const { login, error, setError, loading } = useLogin()
   
   // Responsive ball visibility
   useEffect(() => {
-    const handleResize = () => {
-      setShowBall(window.innerWidth >= 768)
-    }
-    handleResize()
+    const handleResizeBall = () => setShowBall(window.innerWidth >= 768)
+    handleResizeBall()
+    window.addEventListener('resize', handleResizeBall)
+    return () => window.removeEventListener('resize', handleResizeBall)
+  }, [])
+
+  // Track viewport width for dynamic scaling
+  useEffect(() => {
+    const handleResize = () => setViewportWidth(window.innerWidth)
     window.addEventListener('resize', handleResize)
     return () => window.removeEventListener('resize', handleResize)
   }, [])
 
-  // Prevent body scrolling when component mounts
-  useEffect(() => {
-    document.body.style.overflow = 'hidden'
-    document.documentElement.style.overflow = 'hidden'
-    
-    return () => {
-      document.body.style.overflow = 'unset'
-      document.documentElement.style.overflow = 'unset'
-    }
-  }, [])
-  
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value, type, checked } = e.target
     setFormData(prev => ({
@@ -82,63 +79,59 @@ export default function LoginForm() {
     })
   }
   
-  const screenWidth = typeof window !== 'undefined' ? window.innerWidth : 1200
-  const isMobile = screenWidth < 768
-  const isTablet = screenWidth >= 768 && screenWidth <= 1024
-  const isSmallLaptop = screenWidth > 1024 && screenWidth <= 1366
-  
-  // Calculate responsive values
-  const getFormWidth = () => {
-    if (isMobile) return '98vw'
-    if (isTablet) return '85vw'
-    if (isSmallLaptop) return '50vw'
-    return '40vw'
-  }
-  
-  const getFormScale = () => {
-    if (isMobile) return undefined
-    if (isTablet) return 'scale(0.95)'
-    if (isSmallLaptop) return 'scale(0.9)'
-    return 'scale(0.85)'
-  }
-  
-  const getFormMaxWidth = () => {
-    if (isMobile) return 'none'
-    if (isTablet) return '600px'
-    if (isSmallLaptop) return '650px'
-    return '700px'
-  }
+  // Dynamic breakpoints
+  const isMobile = viewportWidth < 640
+  const isTablet = viewportWidth >= 640 && viewportWidth < 1024
+  const isSmallLaptop = viewportWidth >= 1024 && viewportWidth < 1366
+
+  // Dynamic width & scale
+  const formWidth = isMobile
+    ? '98vw'
+    : isTablet
+      ? '85vw'
+      : isSmallLaptop
+        ? '50vw'
+        : '40vw'
+
+  const formMaxWidth = isMobile
+    ? 'none'
+    : isTablet
+      ? '620px'
+      : isSmallLaptop
+        ? '660px'
+        : '720px'
+
+  const formScale = (() => {
+    if (isMobile) return 1
+    if (isTablet) return 0.95
+    if (isSmallLaptop) return 0.9
+    if (viewportWidth >= 1366 && viewportWidth < 1680) return 0.85
+    return 0.82
+  })()
 
   return (
     <div
-      className="w-full flex justify-center items-center relative"
+      className="w-full flex justify-center items-start relative"
       style={{
-        minHeight: '100vh',
-        height: '100vh',
-        overflowY: 'hidden',
-        overflowX: 'hidden',
-        paddingTop: isMobile ? '0.25rem' : '5rem',
-        paddingBottom: isMobile ? '2.5rem' : '2.5rem',
+        // Removed fixed 100vh + overflow hidden to allow scrolling
+        minHeight: 'auto',
+        paddingTop: isMobile ? '0.75rem' : '4rem',
+        paddingBottom: '3rem',
         backgroundImage: 'url(/images/misc/marble_bluegoldwhite_BG.jpg)',
         backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat'
+        backgroundPosition: 'center'
       }}
     >
       <div
         className="bg-white rounded-2xl shadow-2xl flex flex-col items-center relative border-t-4 border-[#8D6B1D]"
         style={{
-          width: getFormWidth(),
-          maxWidth: getFormMaxWidth(),
-          minWidth: isMobile ? '0' : '400px',
-          minHeight: isMobile ? '320px' : '320px',
-          padding: isMobile ? '0.5rem' : '2rem',
-          marginTop: isMobile ? '0.5rem' : undefined,
-          transform: getFormScale(),
-          transformOrigin: 'top center',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'flex-start'
+          width: formWidth,
+            maxWidth: formMaxWidth,
+            minWidth: isMobile ? '0' : '400px',
+            padding: isMobile ? '0.75rem' : '2rem',
+            marginTop: isMobile ? '0.5rem' : undefined,
+            transform: formScale !== 1 ? `scale(${formScale})` : undefined,
+            transformOrigin: 'top center'
         }}
       >
         {/* Animated Ball - Desktop Only */}