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("Welcome back!", { duration: 2000 });
-        toast.success("Login successful");
-        
-        // Set success state for animation
         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'}`}>
+    <motion.div
-      <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' : ''}`}>
+      initial={{ opacity: 0, y: 20 }}
-        <div className="text-center">
+      animate={{ opacity: 1, y: 0 }}
-          <h2 className="mt-6 text-3xl font-bold text-gray-900 dark:text-white">Welcome back</h2>
+      transition={{ duration: 0.5 }}
-          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Please sign in to your account</p>
+      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">
+            <div className="space-y-2">
-              <Label htmlFor="username">Username</Label>
+              <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">
+            <div className="space-y-2">
-              <Label htmlFor="password">Password</Label>
+              <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 
+          <Button
-            type="submit" 
+            type="submit"
-            className={`w-full animate-in fade-in-50 duration-500 delay-300 ${loginSuccess ? 'bg-green-600 hover:bg-green-700' : ''}`} 
+            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">
+              <span className="flex items-center justify-center gap-2">
-                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                <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">
+        <div className="mt-8 pt-6 border-t border-white/10 text-center">
-          Don't have an account?{" "}
+          <p className="text-sm text-zinc-400">
-          <Link href="/auth/register" className="text-blue-600 hover:underline dark:text-blue-400">
+            Don't have an account?{" "}
-            Sign up
+            <Link
-          </Link>
+              href="/auth/register"
-        </p>
+              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>
   );
 } 

app/auth/login/page.tsx

@@ -2,28 +2,42 @@
 
 import React, { Suspense, lazy } from "react";
 
+
 // Use lazy loading for the form component
 const LoginForm = lazy(() => import('./components/LoginForm'));
 
-// Simple loading state for the Suspense boundary
+// Background Component
+const AuthBackground = () => (
+  <div className="absolute inset-0 overflow-hidden pointer-events-none">
+    <div className="absolute inset-0 bg-black" />
+    <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-500/20 via-purple-500/10 to-transparent" />
+    <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl opacity-50 animate-pulse" />
+    <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl opacity-50 animate-pulse delay-1000" />
+  </div>
+);
+
+// Loading State
 function LoginLoading() {
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
+    <div className="w-full max-w-md p-8 space-y-8 bg-black/40 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl text-center relative z-10">
-      <div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg text-center">
+      <div className="mt-6 flex flex-col items-center justify-center">
-        <div className="mt-6 flex flex-col items-center justify-center">
+        <div className="w-12 h-12 border-4 border-t-indigo-500 border-b-transparent border-l-transparent border-r-transparent rounded-full animate-spin"></div>
-          <div className="w-12 h-12 border-4 border-t-blue-500 border-b-transparent border-l-transparent border-r-transparent rounded-full animate-spin"></div>
+        <p className="mt-4 text-zinc-400">Loading secure login...</p>
-          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading login form...</p>
-        </div>
       </div>
     </div>
   );
 }
 
-// Main page component that uses Suspense
+// Main page component
 export default function LoginPage() {
   return (
-    <Suspense fallback={<LoginLoading />}>
+    <div className="relative flex items-center justify-center min-h-screen overflow-hidden">
-      <LoginForm />
+      <AuthBackground />
-    </Suspense>
+      <div className="flex flex-col items-center w-full px-4">
+        <Suspense fallback={<LoginLoading />}>
+          <LoginForm />
+        </Suspense>
+      </div>
+    </div>
   );
 }

app/auth/register/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { fetchData } from "@/lib/api";
+
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
@@ -7,111 +7,159 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Loader2, ArrowRight } from "lucide-react";
+import { motion } from "framer-motion";
+import { toast } from "@/hooks/use-toast";
+
+// Matches LoginPage background
+const AuthBackground = () => (
+  <div className="absolute inset-0 overflow-hidden pointer-events-none">
+    <div className="absolute inset-0 bg-black" />
+    <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-500/20 via-purple-500/10 to-transparent" />
+    <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl opacity-50 animate-pulse" />
+    <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl opacity-50 animate-pulse delay-1000" />
+  </div>
+);
 
 export default function RegisterPage() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [invitationCode, setInvitationCode] = useState("");
-  const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const router = useRouter();
 
   async function handleRegister(e: React.FormEvent) {
     e.preventDefault();
-    setError("");
     setLoading(true);
 
-    const res = await fetchData(
+    try {
-      `/api/auth/register`,
+      const res = await fetch(`/api/auth/register`, {
-      {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ username, password, invitationCode }),
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        toast({
+          title: "Account Created! 🎉",
+          description: "Welcome to Ember Market. Redirecting to login...",
+          variant: "default",
+        });
+        setTimeout(() => router.push("/auth/login"), 1500);
+      } else {
+        toast({
+          title: "Registration Failed",
+          description: data.error || "Please check your details.",
+          variant: "destructive",
+        });
+        setLoading(false);
       }
-    );
+    } catch (error) {
-
+      toast({
-    const data = await res;
+        title: "Error",
-
+        description: "Something went wrong. Please try again.",
-    if (res) {
+        variant: "destructive",
-      console.log("Registered successfully:", data);
+      });
-      router.push("/auth/login");
+      setLoading(false);
-    } else {
-      setError(data.error || "Registration failed");
     }
-
-    setLoading(false);
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-[#0F0F12]">
+    <div className="relative flex items-center justify-center min-h-screen overflow-hidden">
-      <div className="w-full max-w-md p-8 space-y-8 bg-white dark:bg-[#1F1F23] rounded-xl shadow-lg">
+      <AuthBackground />
-        <div className="text-center">
-          <h2 className="mt-6 text-3xl font-bold text-gray-900 dark:text-white">
-            Create an Account
-          </h2>
-          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
-            Sign up to start selling
-          </p>
-        </div>
 
-        {error && <p className="text-red-500 text-sm text-center">{error}</p>}
+      <div className="flex flex-col items-center w-full px-4 text-center z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="w-full max-w-md"
+        >
+          <div className="overflow-hidden rounded-2xl border border-white/10 shadow-2xl bg-black/40 backdrop-blur-xl p-8">
+            <div className="text-center mb-8">
+              <h2 className="text-xl font-semibold text-white">Create your account</h2>
+              <p className="mt-2 text-sm text-zinc-400">Start managing your store today</p>
+            </div>
 
-        <form className="mt-8 space-y-6" onSubmit={handleRegister}>
+            <form className="space-y-5" onSubmit={handleRegister}>
-          <div className="space-y-4">
+              <div className="space-y-4 text-left">
-            <div>
+                <div className="space-y-2">
-              <Label htmlFor="username">Username</Label>
+                  <Label htmlFor="username" className="text-zinc-300">Username</Label>
-              <Input
+                  <Input
-                id="username"
+                    id="username"
-                name="username"
+                    name="username"
-                type="text"
+                    type="text"
-                autoComplete="username"
+                    autoComplete="username"
-                required
+                    required
-                value={username}
+                    value={username}
-                onChange={(e) => setUsername(e.target.value)}
+                    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="Choose a username"
-            </div>
+                    disabled={loading}
-            <div>
+                  />
-              <Label htmlFor="password">Password</Label>
+                </div>
-              <Input
+                <div className="space-y-2">
-                id="password"
+                  <Label htmlFor="password" className="text-zinc-300">Password</Label>
-                name="password"
+                  <Input
-                type="password"
+                    id="password"
-                autoComplete="new-password"
+                    name="password"
-                required
+                    type="password"
-                value={password}
+                    autoComplete="new-password"
-                onChange={(e) => setPassword(e.target.value)}
+                    required
-                className="mt-1"
+                    value={password}
-              />
+                    onChange={(e) => setPassword(e.target.value)}
-            </div>
+                    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"
-            <div>
+                    placeholder="Create a strong password"
-              <Label htmlFor="invitationCode">Invitation Code</Label>
+                    disabled={loading}
-              <Input
+                  />
-                id="invitationCode"
+                </div>
-                name="invitationCode"
+                <div className="space-y-2">
-                type="text"
+                  <Label htmlFor="invitationCode" className="text-zinc-300">Invitation Code</Label>
-                required
+                  <Input
-                value={invitationCode}
+                    id="invitationCode"
-                onChange={(e) => setInvitationCode(e.target.value)}
+                    name="invitationCode"
-                className="mt-1"
+                    type="text"
-              />
+                    required
+                    value={invitationCode}
+                    onChange={(e) => setInvitationCode(e.target.value)}
+                    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 invite code"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full h-11 font-medium 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 transition-all duration-300"
+                disabled={loading}
+              >
+                {loading ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Creating account...
+                  </span>
+                ) : (
+                  "Create Account"
+                )}
+              </Button>
+            </form>
+
+            <div className="mt-8 pt-6 border-t border-white/10 text-center">
+              <p className="text-sm text-zinc-400">
+                Already have an account?{" "}
+                <Link
+                  href="/auth/login"
+                  className="text-indigo-400 hover:text-indigo-300 font-medium transition-colors inline-flex items-center gap-1"
+                >
+                  Sign in <ArrowRight className="w-3 h-3" />
+                </Link>
+              </p>
             </div>
           </div>
-
+        </motion.div>
-          <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? "Registering..." : "Sign Up"}
-          </Button>
-        </form>
-
-        <p className="mt-6 text-sm text-center text-gray-600 dark:text-gray-400">
-          Already have an account?{" "}
-          <Link
-            href="/auth/login"
-            className="text-blue-600 hover:underline dark:text-blue-400"
-          >
-            Sign in
-          </Link>
-        </p>
       </div>
     </div>
   );

components/analytics/AnalyticsDashboard.tsx

@@ -46,6 +46,8 @@ import { DateRangePicker } from "@/components/ui/date-picker";
 import { DateRange } from "react-day-picker";
 import { addDays, startOfDay, endOfDay } from "date-fns";
 import type { DateRange as ProfitDateRange } from "@/lib/services/profit-analytics-service";
+import { MotionWrapper } from "@/components/ui/motion-wrapper";
+import { motion } from "framer-motion";
 
 // Lazy load chart components - already handled individually below
 
@@ -195,7 +197,7 @@ export default function AnalyticsDashboard({
   ];
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-10">
       {/* Header with Privacy Toggle */}
       <div className="flex items-center justify-between">
         <div>
@@ -241,197 +243,215 @@ export default function AnalyticsDashboard({
       </div>
 
       {/* Key Metrics Cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
+      <MotionWrapper className="space-y-10">
-        {isLoading
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 lg:gap-8">
-          ? [...Array(4)].map((_, i) => <MetricsCardSkeleton key={i} />)
+          {isLoading
-          : metrics.map((metric) => (
+            ? [...Array(4)].map((_, i) => <MetricsCardSkeleton key={i} />)
+            : metrics.map((metric) => (
               <MetricsCard key={metric.title} {...metric} />
             ))}
-      </div>
-
-      {/* Completion Rate Card */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Activity className="h-5 w-5" />
-            Order Completion Rate
-          </CardTitle>
-          <CardDescription>
-            Percentage of orders that have been successfully completed
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <div className="flex items-center gap-4">
-              <div className="h-12 w-16 bg-muted/20 rounded animate-pulse" />
-              <div className="flex-1">
-                <div className="w-full bg-muted/20 rounded-full h-2 animate-pulse" />
-              </div>
-              <div className="h-6 w-16 bg-muted/20 rounded animate-pulse" />
-            </div>
-          ) : (
-            <div className="flex items-center gap-4">
-              <div className="text-3xl font-bold">
-                {hideNumbers ? "**%" : `${data.orders.completionRate}%`}
-              </div>
-              <div className="flex-1">
-                <div className="w-full bg-secondary rounded-full h-2">
-                  <div
-                    className="bg-primary h-2 rounded-full transition-all duration-300"
-                    style={{
-                      width: hideNumbers
-                        ? "0%"
-                        : `${data.orders.completionRate}%`,
-                    }}
-                  />
-                </div>
-              </div>
-              <Badge variant="secondary">
-                {hideNumbers
-                  ? "** / **"
-                  : `${data.orders.completed} / ${data.orders.total}`}
-              </Badge>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Time Period Selector */}
-      <div className="flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between">
-        <div>
-          <h3 className="text-lg font-semibold">Time Period</h3>
-          <p className="text-sm text-muted-foreground">
-            Revenue, Profit, and Orders tabs use time filtering. Products and
-            Customers show all-time data.
-          </p>
         </div>
-        <Select value={timeRange} onValueChange={setTimeRange}>
-          <SelectTrigger className="w-32">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="7">Last 7 days</SelectItem>
-            <SelectItem value="30">Last 30 days</SelectItem>
-            <SelectItem value="90">Last 90 days</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
 
-      {/* Analytics Tabs */}
+        {/* Completion Rate Card */}
-      <div className="space-y-6">
+        <motion.div>
-        <Tabs defaultValue="growth" className="space-y-6">
+          <Card className="hover:shadow-xl hover:border-indigo-500/30 transition-all duration-300">
-          <TabsList className="grid w-full grid-cols-2 sm:grid-cols-3 lg:grid-cols-7">
+            <CardHeader>
-            <TabsTrigger value="growth" className="flex items-center gap-2">
+              <CardTitle className="flex items-center gap-2">
-              <Activity className="h-4 w-4" />
+                <Activity className="h-5 w-5" />
-              Growth
+                Order Completion Rate
-            </TabsTrigger>
+              </CardTitle>
-            <TabsTrigger value="revenue" className="flex items-center gap-2">
+              <CardDescription>
-              <TrendingUp className="h-4 w-4" />
+                Percentage of orders that have been successfully completed
-              Revenue
+              </CardDescription>
-            </TabsTrigger>
+            </CardHeader>
-            <TabsTrigger value="profit" className="flex items-center gap-2">
+            <CardContent>
-              <Calculator className="h-4 w-4" />
+              {isLoading ? (
-              Profit
+                <div className="flex items-center gap-4">
-            </TabsTrigger>
+                  <div className="h-12 w-16 bg-muted/20 rounded animate-pulse" />
-            <TabsTrigger value="products" className="flex items-center gap-2">
+                  <div className="flex-1">
-              <Package className="h-4 w-4" />
+                    <div className="w-full bg-muted/20 rounded-full h-2 animate-pulse" />
-              Products
+                  </div>
-            </TabsTrigger>
+                  <div className="h-6 w-16 bg-muted/20 rounded animate-pulse" />
-            <TabsTrigger value="customers" className="flex items-center gap-2">
-              <Users className="h-4 w-4" />
-              Customers
-            </TabsTrigger>
-            <TabsTrigger value="orders" className="flex items-center gap-2">
-              <BarChart3 className="h-4 w-4" />
-              Orders
-            </TabsTrigger>
-            <TabsTrigger value="predictions" className="flex items-center gap-2">
-              <TrendingUp className="h-4 w-4" />
-              Predictions
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="growth" className="space-y-6">
-            <Suspense fallback={<ChartSkeleton />}>
-              <GrowthAnalyticsChart hideNumbers={hideNumbers} />
-            </Suspense>
-          </TabsContent>
-
-          <TabsContent value="revenue" className="space-y-6">
-            <Suspense fallback={<ChartSkeleton />}>
-              <RevenueChart timeRange={timeRange} hideNumbers={hideNumbers} />
-            </Suspense>
-          </TabsContent>
-
-          <TabsContent value="profit" className="space-y-6">
-            {/* Date Range Selector for Profit Calculator */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-lg">Date Range</CardTitle>
-                <CardDescription>
-                  Select a custom date range for profit calculations
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
-                  <DateRangePicker
-                    dateRange={profitDateRange}
-                    onDateRangeChange={setProfitDateRange}
-                    placeholder="Select date range"
-                    showPresets={true}
-                    className="w-full sm:w-auto"
-                  />
-                  {profitDateRange?.from && profitDateRange?.to && (
-                    <div className="text-sm text-muted-foreground flex items-center">
-                      <span>
-                        {profitDateRange.from.toLocaleDateString()} -{" "}
-                        {profitDateRange.to.toLocaleDateString()}
-                      </span>
-                    </div>
-                  )}
                 </div>
-              </CardContent>
+              ) : (
-            </Card>
+                <div className="flex items-center gap-4">
-            <Suspense fallback={<ChartSkeleton />}>
+                  <div className="text-3xl font-bold">
-              <ProfitAnalyticsChart
+                    {hideNumbers ? "**%" : `${data.orders.completionRate}%`}
-                dateRange={
+                  </div>
-                  profitDateRange?.from && profitDateRange?.to
+                  <div className="flex-1">
-                    ? {
+                    <div className="w-full bg-secondary rounded-full h-2">
-                        from: profitDateRange.from,
+                      <div
-                        to: profitDateRange.to,
+                        className="bg-primary h-2 rounded-full transition-all duration-300"
-                      }
+                        style={{
-                    : undefined
+                          width: hideNumbers
-                }
+                            ? "0%"
-                hideNumbers={hideNumbers}
+                            : `${data.orders.completionRate}%`,
-              />
+                        }}
-            </Suspense>
+                      />
-          </TabsContent>
+                    </div>
+                  </div>
+                  <Badge variant="secondary">
+                    {hideNumbers
+                      ? "** / **"
+                      : `${data.orders.completed} / ${data.orders.total}`}
+                  </Badge>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </motion.div>
 
-          <TabsContent value="products" className="space-y-6">
+        {/* Time Period Selector */}
-            <Suspense fallback={<ChartSkeleton />}>
+        <div className="flex flex-col sm:flex-row gap-4 sm:items-center sm:justify-between">
-              <ProductPerformanceChart />
+          <div>
-            </Suspense>
+            <h3 className="text-lg font-semibold">Time Period</h3>
-          </TabsContent>
+            <p className="text-sm text-muted-foreground">
+              Revenue, Profit, and Orders tabs use time filtering. Products and
+              Customers show all-time data.
+            </p>
+          </div>
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger className="w-32">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7">Last 7 days</SelectItem>
+              <SelectItem value="30">Last 30 days</SelectItem>
+              <SelectItem value="90">Last 90 days</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
 
-          <TabsContent value="customers" className="space-y-6">
+        {/* Analytics Tabs */}
-            <Suspense fallback={<ChartSkeleton />}>
+        <div className="space-y-8">
-              <CustomerInsightsChart />
+          <Tabs defaultValue="growth" className="space-y-8">
-            </Suspense>
+            <TabsList className="grid w-full grid-cols-2 sm:grid-cols-3 lg:grid-cols-7">
-          </TabsContent>
+              <TabsTrigger value="growth" className="flex items-center gap-2">
+                <Activity className="h-4 w-4" />
+                Growth
+              </TabsTrigger>
+              <TabsTrigger value="revenue" className="flex items-center gap-2">
+                <TrendingUp className="h-4 w-4" />
+                Revenue
+              </TabsTrigger>
+              <TabsTrigger value="profit" className="flex items-center gap-2">
+                <Calculator className="h-4 w-4" />
+                Profit
+              </TabsTrigger>
+              <TabsTrigger value="products" className="flex items-center gap-2">
+                <Package className="h-4 w-4" />
+                Products
+              </TabsTrigger>
+              <TabsTrigger value="customers" className="flex items-center gap-2">
+                <Users className="h-4 w-4" />
+                Customers
+              </TabsTrigger>
+              <TabsTrigger value="orders" className="flex items-center gap-2">
+                <BarChart3 className="h-4 w-4" />
+                Orders
+              </TabsTrigger>
+              <TabsTrigger value="predictions" className="flex items-center gap-2">
+                <TrendingUp className="h-4 w-4" />
+                Predictions
+              </TabsTrigger>
+            </TabsList>
 
-          <TabsContent value="orders" className="space-y-6">
+            <TabsContent value="growth" className="space-y-6">
-            <Suspense fallback={<ChartSkeleton />}>
+              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
-              <OrderAnalyticsChart timeRange={timeRange} />
+                <Suspense fallback={<ChartSkeleton />}>
-            </Suspense>
+                  <GrowthAnalyticsChart hideNumbers={hideNumbers} />
-          </TabsContent>
+                </Suspense>
+              </motion.div>
+            </TabsContent>
 
-          <TabsContent value="predictions" className="space-y-6">
+            <TabsContent value="revenue" className="space-y-6">
-            <Suspense fallback={<ChartSkeleton />}>
+              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
-              <PredictionsChart timeRange={parseInt(timeRange)} />
+                <Suspense fallback={<ChartSkeleton />}>
-            </Suspense>
+                  <RevenueChart timeRange={timeRange} hideNumbers={hideNumbers} />
-          </TabsContent>
+                </Suspense>
-        </Tabs>
+              </motion.div>
-      </div>
+            </TabsContent>
+
+            <TabsContent value="profit" className="space-y-6">
+              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
+                {/* Date Range Selector for Profit Calculator */}
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg">Date Range</CardTitle>
+                    <CardDescription>
+                      Select a custom date range for profit calculations
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
+                      <DateRangePicker
+                        dateRange={profitDateRange}
+                        onDateRangeChange={setProfitDateRange}
+                        placeholder="Select date range"
+                        showPresets={true}
+                        className="w-full sm:w-auto"
+                      />
+                      {profitDateRange?.from && profitDateRange?.to && (
+                        <div className="text-sm text-muted-foreground flex items-center">
+                          <span>
+                            {profitDateRange.from.toLocaleDateString()} -{" "}
+                            {profitDateRange.to.toLocaleDateString()}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+                <Suspense fallback={<ChartSkeleton />}>
+                  <ProfitAnalyticsChart
+                    dateRange={
+                      profitDateRange?.from && profitDateRange?.to
+                        ? {
+                          from: profitDateRange.from,
+                          to: profitDateRange.to,
+                        }
+                        : undefined
+                    }
+                    hideNumbers={hideNumbers}
+                  />
+                </Suspense>
+              </motion.div>
+            </TabsContent>
+
+            <TabsContent value="products" className="space-y-6">
+              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
+                <Suspense fallback={<ChartSkeleton />}>
+                  <ProductPerformanceChart />
+                </Suspense>
+              </motion.div>
+            </TabsContent>
+
+            <TabsContent value="customers" className="space-y-6">
+              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
+                <Suspense fallback={<ChartSkeleton />}>
+                  <CustomerInsightsChart />
+                </Suspense>
+              </motion.div>
+            </TabsContent>
+
+            <TabsContent value="orders" className="space-y-6">
+              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
+                <Suspense fallback={<ChartSkeleton />}>
+                  <OrderAnalyticsChart timeRange={timeRange} />
+                </Suspense>
+              </motion.div>
+            </TabsContent>
+
+            <TabsContent value="predictions" className="space-y-6">
+              <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
+                <Suspense fallback={<ChartSkeleton />}>
+                  <PredictionsChart timeRange={parseInt(timeRange)} />
+                </Suspense>
+              </motion.div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </MotionWrapper>
     </div>
   );
 }

components/analytics/MetricsCard.tsx

@@ -3,6 +3,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { TrendingUp, TrendingDown, Minus } from "lucide-react";
 import { LucideIcon } from "lucide-react";
+import { motion } from "framer-motion";
 
 interface MetricsCardProps {
   title: string;
@@ -13,13 +14,13 @@ interface MetricsCardProps {
   trendValue: string;
 }
 
-export default function MetricsCard({ 
+export default function MetricsCard({
-  title, 
+  title,
-  value, 
+  value,
-  description, 
+  description,
-  icon: Icon, 
+  icon: Icon,
-  trend, 
+  trend,
-  trendValue 
+  trendValue
 }: MetricsCardProps) {
   const getTrendIcon = () => {
     switch (trend) {
@@ -44,23 +45,25 @@ export default function MetricsCard({
   };
 
   return (
-    <Card>
+    <motion.div>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      <Card className="hover:shadow-xl hover:border-indigo-500/30 transition-all duration-300">
-        <CardTitle className="text-sm font-medium text-muted-foreground">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          {title}
+          <CardTitle className="text-sm font-medium text-muted-foreground">
-        </CardTitle>
+            {title}
-        <Icon className="h-4 w-4 text-muted-foreground" />
+          </CardTitle>
-      </CardHeader>
+          <Icon className="h-4 w-4 text-muted-foreground" />
-      <CardContent>
+        </CardHeader>
-        <div className="text-2xl font-bold">{value}</div>
+        <CardContent>
-        <p className="text-xs text-muted-foreground mt-1">{description}</p>
+          <div className="text-2xl font-bold">{value}</div>
-        <div className="flex items-center gap-1 mt-2">
+          <p className="text-xs text-muted-foreground mt-1">{description}</p>
-          {getTrendIcon()}
+          <div className="flex items-center gap-1 mt-2">
-          <span className={`text-xs ${getTrendColor()}`}>
+            {getTrendIcon()}
-            {trendValue}
+            <span className={`text-xs ${getTrendColor()}`}>
-          </span>
+              {trendValue}
-        </div>
+            </span>
-      </CardContent>
+          </div>
-    </Card>
+        </CardContent>
+      </Card>
+    </motion.div>
   );
-} 
+}

components/ui/motion-wrapper.tsx

@@ -1,15 +1,30 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, HTMLMotionProps } from "framer-motion";
+import { cn } from "@/lib/utils";
+import { forwardRef } from "react";
 
-export function MotionWrapper({ children }: { children: React.ReactNode }) {
+interface MotionWrapperProps extends HTMLMotionProps<"div"> {
-    return (
+    children: React.ReactNode;
-        <motion.div
+    className?: string;
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, staggerChildren: 0.1 }}
-        >
-            {children}
-        </motion.div>
-    );
 }
+
+export const MotionWrapper = forwardRef<HTMLDivElement, MotionWrapperProps>(
+    ({ children, className, ...props }, ref) => {
+        return (
+            <motion.div
+                ref={ref}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.4, ease: "easeOut" }}
+                className={cn(className)}
+                {...props}
+            >
+                {children}
+            </motion.div>
+        );
+    }
+);
+
+MotionWrapper.displayName = "MotionWrapper";

public/git-info.json

@@ -1,4 +1,4 @@
 {
-  "commitHash": "624bfa5",
+  "commitHash": "02ba4b0",
-  "buildTime": "2026-01-12T02:42:11.944Z"
+  "buildTime": "2026-01-12T03:57:23.436Z"
 }