Merge pull request #3 from NotII/upgrade-nextjs

Upgrade nextjs

app/auth/login/components/LoginForm.tsx

@@ -1,17 +1,20 @@
 "use client"
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 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";
 
 export default function LoginForm() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [loginSuccess, setLoginSuccess] = useState(false);
+  const redirectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const router = useRouter();
   const searchParams = useSearchParams();
   const redirectUrl = searchParams.get("redirectUrl") || "/dashboard";
@@ -28,6 +31,15 @@ export default function LoginForm() {
     }
   }, [router]);
 
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (redirectTimeoutRef.current) {
+        clearTimeout(redirectTimeoutRef.current);
+      }
+    };
+  }, []);
+
   async function handleLogin(e: React.FormEvent) {
     e.preventDefault();
     setIsLoading(true);
@@ -57,10 +69,19 @@ export default function LoginForm() {
         document.cookie = `Authorization=${data.token}; path=/; Secure; SameSite=Strict; max-age=604800`;
         localStorage.setItem("Authorization", data.token);
         
+        // Show success notification
         toast.success("Login successful");
         
-        // Redirect to dashboard or the original redirect URL
+        // 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
       } else {
         // Handle HTTP error responses
         const errorMessage = data.error || data.message || data.details || "Invalid credentials";
@@ -68,20 +89,20 @@ export default function LoginForm() {
           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.",
       });
       console.error("Login network error:", error);
-    } finally {
       setIsLoading(false);
     }
   }
 
   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-white dark:bg-[#1F1F23] rounded-xl shadow-lg">
+    <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>
@@ -89,7 +110,7 @@ export default function LoginForm() {
 
         <form className="mt-8 space-y-6" onSubmit={handleLogin}>
           <div className="space-y-4">
-            <div>
+            <div className="animate-in fade-in duration-500">
               <Label htmlFor="username">Username</Label>
               <Input
                 id="username"
@@ -100,9 +121,10 @@ export default function LoginForm() {
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
                 className="mt-1"
+                disabled={isLoading || loginSuccess}
               />
             </div>
-            <div>
+            <div className="animate-in fade-in duration-500 delay-150">
               <Label htmlFor="password">Password</Label>
               <Input
                 id="password"
@@ -113,16 +135,32 @@ export default function LoginForm() {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className="mt-1"
+                disabled={isLoading || loginSuccess}
               />
             </div>
           </div>
 
-          <Button type="submit" className="w-full" disabled={isLoading}>
-            {isLoading ? "Signing in..." : "Sign in"}
+          <Button 
+            type="submit" 
+            className={`w-full animate-in fade-in-50 duration-500 delay-300 ${loginSuccess ? 'bg-green-600 hover:bg-green-700' : ''}`} 
+            disabled={isLoading || loginSuccess}
+          >
+            {isLoading ? (
+              <span className="flex items-center justify-center">
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Signing in...
+              </span>
+            ) : loginSuccess ? (
+              <span className="flex items-center justify-center">
+                Redirecting...
+              </span>
+            ) : (
+              "Sign in"
+            )}
           </Button>
         </form>
 
-        <p className="mt-10 text-sm text-center text-gray-600 dark:text-gray-400">
+        <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

app/dashboard/chats/[id]/loading.tsx

@@ -0,0 +1,100 @@
+import Layout from "@/components/layout/layout";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Loader2 } from "lucide-react";
+
+export default function ChatDetailLoading() {
+  return (
+    <Layout>
+      <div className="space-y-6 animate-in fade-in duration-300">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-10 w-10 rounded-full" />
+            <Skeleton className="h-7 w-48" />
+          </div>
+          <Skeleton className="h-9 w-24" />
+        </div>
+
+        {/* Chat window */}
+        <div className="border rounded-lg h-[calc(100vh-12rem)] flex flex-col relative">
+          {/* Chat messages area */}
+          <div className="flex-1 p-4 overflow-hidden">
+            <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
+              <div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-sm p-6 rounded-lg">
+                <Loader2 className="h-10 w-10 animate-spin text-primary mb-3" />
+                <p className="text-lg font-medium">Loading messages...</p>
+              </div>
+            </div>
+            
+            <div className="space-y-6 opacity-30">
+              {/* Customer messages */}
+              <div className="flex justify-end mb-4">
+                <div className="space-y-2 max-w-[80%]">
+                  <div className="flex items-center justify-end gap-2">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-8 w-8 rounded-full" />
+                  </div>
+                  <div className="bg-primary/10 rounded-lg p-3 rounded-tr-none">
+                    <Skeleton className="h-4 w-64" />
+                  </div>
+                </div>
+              </div>
+              
+              {/* Vendor messages */}
+              <div className="flex mb-4">
+                <div className="space-y-2 max-w-[80%]">
+                  <div className="flex items-center gap-2">
+                    <Skeleton className="h-8 w-8 rounded-full" />
+                    <Skeleton className="h-4 w-24" />
+                  </div>
+                  <div className="bg-card rounded-lg p-3 rounded-tl-none">
+                    <Skeleton className="h-4 w-48" />
+                    <Skeleton className="h-4 w-32 mt-2" />
+                  </div>
+                </div>
+              </div>
+              
+              {/* Customer messages */}
+              <div className="flex justify-end mb-4">
+                <div className="space-y-2 max-w-[80%]">
+                  <div className="flex items-center justify-end gap-2">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-8 w-8 rounded-full" />
+                  </div>
+                  <div className="bg-primary/10 rounded-lg p-3 rounded-tr-none">
+                    <Skeleton className="h-4 w-40" />
+                    <Skeleton className="h-4 w-56 mt-2" />
+                  </div>
+                </div>
+              </div>
+              
+              {/* Vendor messages */}
+              <div className="flex mb-4">
+                <div className="space-y-2 max-w-[80%]">
+                  <div className="flex items-center gap-2">
+                    <Skeleton className="h-8 w-8 rounded-full" />
+                    <Skeleton className="h-4 w-24" />
+                  </div>
+                  <div className="bg-card rounded-lg p-3 rounded-tl-none">
+                    <Skeleton className="h-4 w-64" />
+                    <Skeleton className="h-4 w-40 mt-2" />
+                    <Skeleton className="h-4 w-48 mt-2" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          {/* Chat input area */}
+          <div className="p-4 border-t">
+            <div className="flex gap-2">
+              <Skeleton className="h-10 flex-1 rounded-lg" />
+              <Skeleton className="h-10 w-10 rounded-lg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+} 

app/dashboard/chats/loading.tsx

@@ -0,0 +1,15 @@
+import Layout from "@/components/layout/layout";
+import PageLoading from "@/components/dashboard/page-loading";
+
+export default function ChatsLoading() {
+  return (
+    <Layout>
+      <PageLoading 
+        title="Loading conversations..." 
+        subtitle="Please wait while we fetch your chat messages"
+        layout="list"
+        itemsCount={7}
+      />
+    </Layout>
+  );
+} 

app/dashboard/loading.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import Layout from "@/components/layout/layout";
+import { Loader2 } from "lucide-react";
+
+export default function DashboardLoading() {
+  return (
+    <Layout>
+      <div className="space-y-6 animate-in fade-in duration-500">
+        {/* Header skeleton with greeting & quote */}
+        <div>
+          <Skeleton className="h-8 w-72 mb-2" />
+          <Skeleton className="h-4 w-96" />
+        </div>
+
+        {/* Order statistics skeletons */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {[...Array(4)].map((_, i) => (
+            <Card key={i} className="border-border/40 shadow-sm">
+              <CardHeader className="pb-2">
+                <CardDescription>
+                  <Skeleton className="h-4 w-24" />
+                </CardDescription>
+                <div className="flex justify-between items-center">
+                  <CardTitle>
+                    <Skeleton className="h-7 w-16" />
+                  </CardTitle>
+                  <Skeleton className="h-8 w-8 rounded-full" />
+                </div>
+              </CardHeader>
+            </Card>
+          ))}
+        </div>
+
+        {/* Best selling products skeleton */}
+        <Card className="border-border/40 shadow-sm mt-8 relative">
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-[2px] p-6 rounded-lg">
+              <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
+              <p className="text-lg font-medium">Loading dashboard data...</p>
+            </div>
+          </div>
+          
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <div>
+              <CardTitle>
+                <Skeleton className="h-6 w-52" />
+              </CardTitle>
+              <CardDescription>
+                <Skeleton className="h-4 w-80 mt-1" />
+              </CardDescription>
+            </div>
+          </CardHeader>
+          
+          <CardContent className="opacity-30">
+            <div className="space-y-4">
+              {[...Array(5)].map((_, i) => (
+                <div key={i} className="flex items-center gap-4">
+                  <Skeleton className="h-12 w-12 rounded-md" />
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 w-40" />
+                    <Skeleton className="h-4 w-20" />
+                  </div>
+                  <div className="ml-auto text-right">
+                    <Skeleton className="h-4 w-16 ml-auto" />
+                    <Skeleton className="h-4 w-16 ml-auto mt-2" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </Layout>
+  );
+} 

app/dashboard/orders/[id]/loading.tsx

@@ -0,0 +1,105 @@
+import Layout from "@/components/layout/layout";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Loader2 } from "lucide-react";
+
+export default function OrderDetailLoading() {
+  return (
+    <Layout>
+      <div className="space-y-6 animate-in fade-in duration-300">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-9 w-9 rounded-full" />
+            <Skeleton className="h-8 w-48" />
+          </div>
+          <Skeleton className="h-9 w-24" />
+        </div>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {/* Order Info Card */}
+          <Card className="relative overflow-hidden md:col-span-1">
+            <CardHeader>
+              <CardTitle>
+                <Skeleton className="h-6 w-36" />
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {[...Array(6)].map((_, i) => (
+                <div key={i} className="flex justify-between">
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-4 w-32" />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* Customer Info Card */}
+          <Card className="relative overflow-hidden md:col-span-1">
+            <CardHeader>
+              <CardTitle>
+                <Skeleton className="h-6 w-36" />
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {[...Array(4)].map((_, i) => (
+                <div key={i} className="flex justify-between">
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-4 w-32" />
+                </div>
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* Order Items Card */}
+          <Card className="relative overflow-hidden md:col-span-2">
+            <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
+              <div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-sm p-6 rounded-lg">
+                <Loader2 className="h-10 w-10 animate-spin text-primary mb-3" />
+                <p className="text-lg font-medium">Loading order details...</p>
+              </div>
+            </div>
+            
+            <CardHeader>
+              <CardTitle>
+                <Skeleton className="h-6 w-36" />
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="opacity-30">
+              <div className="space-y-4">
+                {[...Array(3)].map((_, i) => (
+                  <div key={i} className="flex items-center gap-4 p-3 border rounded-lg">
+                    <Skeleton className="h-14 w-14 rounded-md" />
+                    <div className="space-y-2 flex-1">
+                      <Skeleton className="h-5 w-full max-w-[200px]" />
+                      <Skeleton className="h-4 w-32" />
+                    </div>
+                    <div className="text-right">
+                      <Skeleton className="h-5 w-20 ml-auto" />
+                      <Skeleton className="h-4 w-16 ml-auto mt-2" />
+                    </div>
+                  </div>
+                ))}
+              </div>
+              
+              <div className="border-t mt-6 pt-4">
+                <div className="space-y-2">
+                  {[...Array(3)].map((_, i) => (
+                    <div key={i} className="flex justify-between">
+                      <Skeleton className="h-4 w-28" />
+                      <Skeleton className="h-4 w-20" />
+                    </div>
+                  ))}
+                  <div className="flex justify-between pt-2 border-t mt-2">
+                    <Skeleton className="h-6 w-32" />
+                    <Skeleton className="h-6 w-24" />
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Layout>
+  );
+} 

app/dashboard/orders/loading.tsx

@@ -0,0 +1,15 @@
+import Layout from "@/components/layout/layout";
+import PageLoading from "@/components/dashboard/page-loading";
+
+export default function OrdersLoading() {
+  return (
+    <Layout>
+      <PageLoading 
+        title="Loading orders..." 
+        subtitle="Please wait while we fetch your order history"
+        layout="table"
+        itemsCount={10}
+      />
+    </Layout>
+  );
+} 

app/dashboard/products/loading.tsx

@@ -0,0 +1,15 @@
+import Layout from "@/components/layout/layout";
+import PageLoading from "@/components/dashboard/page-loading";
+
+export default function ProductsLoading() {
+  return (
+    <Layout>
+      <PageLoading 
+        title="Loading products..." 
+        subtitle="Please wait while we fetch your store's product data"
+        layout="grid"
+        itemsCount={8}
+      />
+    </Layout>
+  );
+} 

components/dashboard/page-loading.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card } from "@/components/ui/card";
+import { Loader2 } from "lucide-react";
+
+interface PageLoadingProps {
+  title?: string;
+  subtitle?: string;
+  itemsCount?: number;
+  layout?: 'list' | 'grid' | 'table';
+}
+
+export default function PageLoading({
+  title = "Loading data...",
+  subtitle,
+  itemsCount = 5,
+  layout = 'list'
+}: PageLoadingProps) {
+  return (
+    <div className="space-y-6 animate-in fade-in duration-300">
+      {/* Header skeleton */}
+      <div className="flex items-center justify-between">
+        <div>
+          <Skeleton className="h-8 w-72 mb-2" />
+          {subtitle && <Skeleton className="h-4 w-96" />}
+        </div>
+        <Skeleton className="h-10 w-28" />
+      </div>
+
+      {/* Main content skeleton */}
+      <Card className="relative overflow-hidden">
+        <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
+          <div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-[2px] p-6 rounded-lg shadow-sm">
+            <Loader2 className="h-10 w-10 animate-spin text-primary mb-3" />
+            <p className="text-lg font-medium">{title}</p>
+            {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
+          </div>
+        </div>
+        
+        {layout === 'list' && (
+          <div className="p-6 space-y-4 opacity-30">
+            {[...Array(itemsCount)].map((_, i) => (
+              <div key={i} className="flex items-center gap-4 p-3 border-b last:border-0">
+                <Skeleton className="h-12 w-12 rounded-md" />
+                <div className="space-y-2 flex-1">
+                  <Skeleton className="h-4 w-full max-w-[280px]" />
+                  <Skeleton className="h-4 w-20" />
+                </div>
+                <div className="ml-auto text-right flex gap-2">
+                  <Skeleton className="h-9 w-9 rounded-md" />
+                  <Skeleton className="h-9 w-9 rounded-md" />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        
+        {layout === 'grid' && (
+          <div className="p-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 opacity-30">
+            {[...Array(itemsCount)].map((_, i) => (
+              <Card key={i} className="p-4">
+                <Skeleton className="h-32 w-full rounded-md mb-3" />
+                <Skeleton className="h-5 w-3/4 mb-2" />
+                <Skeleton className="h-4 w-1/2 mb-3" />
+                <div className="flex justify-between items-center mt-2">
+                  <Skeleton className="h-6 w-16" />
+                  <Skeleton className="h-8 w-8 rounded-full" />
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+        
+        {layout === 'table' && (
+          <div className="w-full opacity-30">
+            <div className="border-b px-6 py-4">
+              <div className="flex gap-4">
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-4 w-32" />
+              </div>
+            </div>
+            
+            <div className="divide-y">
+              {[...Array(itemsCount)].map((_, i) => (
+                <div key={i} className="px-6 py-4">
+                  <div className="flex justify-between items-center">
+                    <div className="space-y-2 flex-1">
+                      <Skeleton className="h-4 w-40" />
+                      <Skeleton className="h-4 w-24" />
+                    </div>
+                    <div className="space-y-2 flex-1">
+                      <Skeleton className="h-4 w-32" />
+                      <Skeleton className="h-4 w-20" />
+                    </div>
+                    <div className="space-y-2 flex-1">
+                      <Skeleton className="h-4 w-28" />
+                    </div>
+                    <div className="flex gap-2">
+                      <Skeleton className="h-8 w-8 rounded-md" />
+                      <Skeleton className="h-8 w-8 rounded-md" />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+} 

lib/client-utils.ts

@@ -64,12 +64,6 @@ export async function clientFetch<T = any>(url: string, options: RequestInit = {
     if (!res.ok) {
       const errorData = await res.json().catch(() => ({}));
       const errorMessage = errorData.message || errorData.error || `Request failed: ${res.status} ${res.statusText}`;
-      console.error('API Error:', {
-        status: res.status,
-        url: fullUrl,
-        response: errorData,
-        method: options.method || 'GET'
-      });
       throw new Error(errorMessage);
     }
 

next.config.mjs

@@ -24,10 +24,8 @@ const nextConfig = {
         },
       ];
     },
-    // Build optimization settings for Next.js 15+
-    swcMinify: true,
     // Reduce memory usage during builds
-    onDemandEntries: {
+    onDemandEntries: {  
       // Period (in ms) where the server will keep pages in the buffer
       maxInactiveAge: 15 * 1000,
       // Number of pages that should be kept simultaneously without being disposed