woohoo?!

components/dashboard/content.tsx

@@ -5,17 +5,85 @@ import OrderStats from "./order-stats"
 import { getGreeting } from "@/lib/utils"
 import { statsConfig } from "@/config/dashboard"
 import type { OrderStatsData } from "@/lib/types"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { ShoppingCart } from "lucide-react"
 
 interface ContentProps {
   username: string
   orderStats: OrderStatsData
 }
 
+interface TopProduct {
+  id: string;
+  name: string;
+  price: number;
+  image: string;
+  count: number;
+  revenue: number;
+}
+
 export default function Content({ username, orderStats }: ContentProps) {
   const [greeting, setGreeting] = useState("")
+  const [topProducts, setTopProducts] = useState<TopProduct[]>([])
+  const [isLoading, setIsLoading] = useState(true)
 
   useEffect(() => {
     setGreeting(getGreeting())
+    
+    // Fetch top products for the vendor
+    const fetchTopProducts = async () => {
+      try {
+        // Check if we're in development or production
+        const isDev = process.env.NODE_ENV === 'development';
+        // Use the internal API URL seen in the console
+        const apiBaseUrl = 'https://internal-api.inboxi.ng/api';
+        
+        console.log('Using API URL:', apiBaseUrl);
+        
+        // Get the auth token from cookies
+        const cookies = document.cookie.split(';');
+        console.log('Cookies:', cookies);
+        const tokenCookie = cookies.find(cookie => cookie.trim().startsWith('Authorization='));
+        let token = '';
+        
+        if (tokenCookie) {
+          // Extract just the token value after "Authorization="
+          token = tokenCookie.trim().substring(14); // 'Authorization='.length is 14
+          
+          // Fix any potential malformed token (seen in your screenshot)
+          if (token.startsWith('ization=')) {
+            token = token.substring(9); // Remove the 'ization=' prefix if present
+          }
+        }
+        
+        console.log('Using token:', token);
+        
+        const headers = {
+          'Authorization': `Bearer ${token}`
+        };
+        console.log('Request headers:', headers);
+        
+        const response = await fetch(`${apiBaseUrl}/orders/top-products`, {
+          credentials: 'include',
+          headers
+        });
+        
+        if (response.ok) {
+          const data = await response.json();
+          setTopProducts(data);
+        } else {
+          const errorText = await response.text();
+          console.error(`Failed to fetch top products: ${response.status} ${response.statusText}`);
+          console.error('Error details:', errorText);
+        }
+      } catch (error) {
+        console.error("Error fetching top products:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    fetchTopProducts();
   }, [])
 
   return (
@@ -34,6 +102,66 @@ export default function Content({ username, orderStats }: ContentProps) {
           />
         ))}
       </div>
+
+      {/* Best Selling Products Section */}
+      <div className="mt-8">
+        <Card>
+          <CardHeader>
+            <CardTitle>Your Best Selling Products</CardTitle>
+            <CardDescription>Products with the highest sales from your store</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {isLoading ? (
+              <div className="space-y-4">
+                {[...Array(5)].map((_, i) => (
+                  <div key={i} className="flex items-center gap-4">
+                    <div className="h-12 w-12 rounded-md bg-muted animate-pulse"></div>
+                    <div className="space-y-2 flex-1">
+                      <div className="h-4 bg-muted rounded animate-pulse w-2/3"></div>
+                      <div className="h-3 bg-muted rounded animate-pulse w-1/3"></div>
+                    </div>
+                    <div className="h-4 bg-muted rounded animate-pulse w-16"></div>
+                  </div>
+                ))}
+              </div>
+            ) : topProducts.length > 0 ? (
+              <div className="space-y-4">
+                {topProducts.map(product => (
+                  <div key={product.id} className="flex items-center justify-between border-b pb-3">
+                    <div className="flex items-center gap-3">
+                      <div className="h-12 w-12 rounded-md bg-muted flex items-center justify-center">
+                        {product.image ? (
+                          <img src={product.image} alt={product.name} className="h-10 w-10 object-cover rounded-md" />
+                        ) : (
+                          <ShoppingCart className="h-5 w-5 text-muted-foreground" />
+                        )}
+                      </div>
+                      <div>
+                        <p className="font-medium">{product.name}</p>
+                        <p className="text-sm text-muted-foreground">
+                          ${product.price.toLocaleString('en-US', { minimumFractionDigits: 2 })}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p className="font-bold">{product.count} sold</p>
+                      <p className="text-sm text-muted-foreground">
+                        ${product.revenue?.toLocaleString('en-US', { minimumFractionDigits: 2 }) || '-'}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="py-12 text-center text-muted-foreground">
+                <ShoppingCart className="mx-auto h-12 w-12 mb-4 text-muted" />
+                <p>No sales data available yet</p>
+                <p className="text-sm">Your best-selling products will appear here once you have orders</p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
     </div>
   )
 }

package-lock.json

@@ -44,6 +44,7 @@
         "embla-carousel-react": "8.5.1",
         "form-data": "^4.0.2",
         "input-otp": "1.4.1",
+        "jwt-decode": "^4.0.0",
         "lucide-react": "^0.454.0",
         "next": "14.2.16",
         "next-themes": "latest",
@@ -3960,6 +3961,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/jwt-decode": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",

package.json

@@ -45,6 +45,7 @@
     "embla-carousel-react": "8.5.1",
     "form-data": "^4.0.2",
     "input-otp": "1.4.1",
+    "jwt-decode": "^4.0.0",
     "lucide-react": "^0.454.0",
     "next": "14.2.16",
     "next-themes": "latest",