other

app/dashboard/page.tsx

@@ -1,6 +1,9 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import Dashboard from "@/components/dashboard/dashboard";
 import Content from "@/components/dashboard/content";
-import { fetchServer } from '@/lib/server-service';
+import { fetchClient } from '@/lib/client-service';
 
 // ✅ Corrected Vendor Type
 interface Vendor {
@@ -22,13 +25,43 @@ interface OrderStats {
   cancelledOrders: number;
 }
 
-export default async function DashboardPage() {
-  const [userResponse, orderStats] = await Promise.all([
-    fetchServer<User>("/auth/me"),
-    fetchServer<OrderStats>("/orders/stats"),
-  ]);
+export default function DashboardPage() {
+  const [vendor, setVendor] = useState<Vendor | null>(null);
+  const [orderStats, setOrderStats] = useState<OrderStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const vendor = userResponse.vendor; 
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        
+        // Fetch data from API using relative URLs and client-side fetch
+        const [userResponse, stats] = await Promise.all([
+          fetchClient<User>("auth/me"),
+          fetchClient<OrderStats>("orders/stats"),
+        ]);
+
+        setVendor(userResponse.vendor);
+        setOrderStats(stats);
+      } catch (err) {
+        console.error('Error fetching dashboard data:', err);
+        setError('Failed to load dashboard data');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return <Dashboard><div>Loading dashboard...</div></Dashboard>;
+  }
+
+  if (error || !vendor || !orderStats) {
+    return <Dashboard><div>Error: {error || 'Failed to load data'}</div></Dashboard>;
+  }
 
   return (
     <Dashboard>