Redesign auth pages and enhance analytics UI with motion

Refactored login and registration pages for a modern, consistent look with animated backgrounds and improved form feedback. Enhanced analytics dashboard and metrics cards with framer-motion animations and visual polish. Updated MotionWrapper for flexible motion props and improved transitions. Minor UI/UX improvements and code cleanup throughout auth and analytics components.

app/auth/login/components/LoginForm.tsx

@@ -1,3 +1,4 @@
+
 "use client"
 
 import { useState, useEffect, useRef } from "react";
@@ -7,7 +8,8 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
-import { Loader2 } from "lucide-react";
+import { Loader2, ArrowRight } from "lucide-react";
+import { motion } from "framer-motion";
 
 export default function LoginForm() {
   const [username, setUsername] = useState("");
@@ -25,7 +27,7 @@ export default function LoginForm() {
       .split("; ")
       .find((row) => row.startsWith("Authorization="))
       ?.split("=")[1];
-      
+
     if (authToken) {
       router.push("/dashboard");
     }
@@ -45,13 +47,12 @@ export default function LoginForm() {
     setIsLoading(true);
 
     try {
-      // Using fetch directly with the proxy path
       const response = await fetch("/api/auth/login", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ username, password }),
       });
-      
+
       let data;
       try {
         data = await response.json();
@@ -63,95 +64,106 @@ export default function LoginForm() {
         setIsLoading(false);
         return;
       }
-      
+
       if (response.ok && data.token) {
-        // Store the token in both cookie and localStorage for redundancy
         document.cookie = `Authorization=${data.token}; path=/; Secure; SameSite=Strict; max-age=10800`;
         localStorage.setItem("Authorization", data.token);
-        
-        // Show success notification
-        toast.success("Login successful");
-        
-        // Set success state for animation
+
+        toast.success("Welcome back!", { duration: 2000 });
         setLoginSuccess(true);
-        
-        // Try Next.js router navigation
+
         router.push(redirectUrl);
-        
-        // Set up a fallback manual redirect if Next.js navigation doesn't work
         redirectTimeoutRef.current = setTimeout(() => {
           window.location.href = redirectUrl;
-        }, 1500); // Wait 1.5 seconds before trying manual redirect
+        }, 1500);
       } else {
-        // Handle HTTP error responses
         const errorMessage = data.error || data.message || data.details || "Invalid credentials";
-        toast.error("Login Failed", {
+        toast.error("Access Denied", {
           description: errorMessage,
         });
-        console.error("Login error response:", { status: response.status, data });
         setIsLoading(false);
       }
     } catch (error) {
       toast.error("Connection Error", {
-        description: "Unable to connect to the server. Please check your internet connection and try again.",
+        description: "Unable to connect to server.",
       });
-      console.error("Login network error:", error);
       setIsLoading(false);
     }
   }
 
   return (
-    <div className={`flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12] transition-opacity duration-300 ${loginSuccess ? 'opacity-0' : 'opacity-100'}`}>
-      <div className={`w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg transition-all duration-300 ${loginSuccess ? 'scale-95 opacity-0' : 'scale-100 opacity-100'} ${isLoading && !loginSuccess ? 'animate-pulse' : ''}`}>
-        <div className="text-center">
-          <h2 className="mt-6 text-3xl font-bold text-gray-900 dark:text-white">Welcome back</h2>
-          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Please sign in to your account</p>
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="w-full max-w-md relative z-10"
+    >
+      <div className={`
+        overflow-hidden rounded-2xl border border-white/10 shadow-2xl transition-all duration-300
+        bg-black/40 backdrop-blur-xl
+        p-8
+        ${loginSuccess ? 'scale-[0.98] opacity-80' : 'scale-100 opacity-100'}
+      `}>
+        <div className="text-center mb-8">
+          <h2 className="text-2xl font-bold text-white tracking-tight">Welcome back</h2>
+          <p className="mt-2 text-sm text-zinc-400">Enter your credentials to access the dashboard</p>
         </div>
 
-        <form className="mt-8 space-y-6" onSubmit={handleLogin}>
+        <form className="space-y-6" onSubmit={handleLogin}>
           <div className="space-y-4">
-            <div className="animate-in fade-in duration-500">
-              <Label htmlFor="username">Username</Label>
+            <div className="space-y-2">
+              <Label htmlFor="username" className="text-zinc-300">Username</Label>
               <Input
                 id="username"
-                name="username"
                 type="text"
                 autoComplete="username"
                 required
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
-                className="mt-1"
+                className="bg-white/5 border-white/10 text-white placeholder:text-zinc-500 focus:border-indigo-500/50 focus:ring-indigo-500/20 transition-all duration-300"
+                placeholder="Enter your username"
                 disabled={isLoading || loginSuccess}
               />
             </div>
-            <div className="animate-in fade-in duration-500 delay-150">
-              <Label htmlFor="password">Password</Label>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="password" className="text-zinc-300">Password</Label>
+                <Link href="/auth/reset-password" className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors">
+                  Forgot password?
+                </Link>
+              </div>
               <Input
                 id="password"
-                name="password"
                 type="password"
                 autoComplete="current-password"
                 required
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="mt-1"
+                className="bg-white/5 border-white/10 text-white placeholder:text-zinc-500 focus:border-indigo-500/50 focus:ring-indigo-500/20 transition-all duration-300"
+                placeholder="Enter your password"
                 disabled={isLoading || loginSuccess}
               />
             </div>
           </div>
 
-          <Button 
-            type="submit" 
-            className={`w-full animate-in fade-in-50 duration-500 delay-300 ${loginSuccess ? 'bg-green-600 hover:bg-green-700' : ''}`} 
+          <Button
+            type="submit"
+            className={`
+              w-full h-11 font-medium text-sm transition-all duration-300
+              ${loginSuccess
+                ? 'bg-green-500/90 hover:bg-green-500 text-white'
+                : 'bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white shadow-lg shadow-indigo-500/25'}
+            `}
             disabled={isLoading || loginSuccess}
           >
             {isLoading ? (
-              <span className="flex items-center justify-center">
-                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              <span className="flex items-center justify-center gap-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
                 Signing in...
               </span>
             ) : loginSuccess ? (
-              <span className="flex items-center justify-center">
+              <span className="flex items-center justify-center gap-2">
+                <ArrowRight className="h-4 w-4" />
                 Redirecting...
               </span>
             ) : (
@@ -160,13 +172,18 @@ export default function LoginForm() {
           </Button>
         </form>
 
-        <p className="mt-10 text-sm text-center text-gray-600 dark:text-gray-400 animate-in fade-in duration-500 delay-500">
-          Don't have an account?{" "}
-          <Link href="/auth/register" className="text-blue-600 hover:underline dark:text-blue-400">
-            Sign up
-          </Link>
-        </p>
+        <div className="mt-8 pt-6 border-t border-white/10 text-center">
+          <p className="text-sm text-zinc-400">
+            Don't have an account?{" "}
+            <Link
+              href="/auth/register"
+              className="text-indigo-400 hover:text-indigo-300 font-medium transition-colors inline-flex items-center gap-1"
+            >
+              Sign up <ArrowRight className="w-3 h-3" />
+            </Link>
+          </p>
+        </div>
       </div>
-    </div>
+    </motion.div>
   );
 }