From 7ddcd7afb6eb3b28cda7bca02b121424c88482ff Mon Sep 17 00:00:00 2001
From: g <g@paki.email>
Date: Mon, 12 Jan 2026 08:03:19 +0000
Subject: [PATCH] Update UI styles and dashboard product display

Refined color scheme in AnimatedStatsSection to use indigo instead of pink, and improved gradient backgrounds. In dashboard/content.tsx, updated TopProduct price to support arrays and display revenue per product. UnifiedNotifications received minor style and layout adjustments for better consistency and usability.
---
 app/page.tsx                                  |  2 +-
 components/animated-stats-section.tsx         | 28 +++++------
 components/dashboard/content.tsx              | 11 ++--
 .../notifications/UnifiedNotifications.tsx    | 50 +++++++++----------
 4 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index ec2b261..733e6d8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -13,7 +13,7 @@ export default async function Home() {
     const stats = await getPlatformStatsServer();
 
     return (
-      <div className="flex flex-col min-h-screen bg-black text-white">
+      <div className="relative flex flex-col min-h-screen bg-black text-white">
         <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-transparent pointer-events-none scale-100" />
         <HomeNavbar />
 
diff --git a/components/animated-stats-section.tsx b/components/animated-stats-section.tsx
index c7eafdd..d84616d 100644
--- a/components/animated-stats-section.tsx
+++ b/components/animated-stats-section.tsx
@@ -20,12 +20,12 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
   return (
     <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
       <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
-        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
         <div className="relative flex flex-col items-center">
-          <Package className="h-6 w-6 text-[#D53F8C]" />
+          <Package className="h-6 w-6 text-indigo-500" />
           <div className="mt-4 text-3xl font-bold text-white">
-            <AnimatedCounter 
-              value={stats.orders.completed} 
+            <AnimatedCounter
+              value={stats.orders.completed}
               duration={2000}
               suffix="+"
             />
@@ -38,14 +38,14 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
           </p>
         </div>
       </div>
-      
+
       <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
-        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
         <div className="relative flex flex-col items-center">
-          <Users className="h-6 w-6 text-[#D53F8C]" />
+          <Users className="h-6 w-6 text-indigo-500" />
           <div className="mt-4 text-3xl font-bold text-white">
-            <AnimatedCounter 
-              value={stats.vendors.total} 
+            <AnimatedCounter
+              value={stats.vendors.total}
               duration={2000}
               suffix="+"
             />
@@ -58,14 +58,14 @@ export function AnimatedStatsSection({ stats }: AnimatedStatsProps) {
           </p>
         </div>
       </div>
-      
+
       <div className="group relative overflow-hidden flex flex-col items-center text-center rounded-xl bg-gradient-to-b from-zinc-900/50 to-black border border-[#1C1C1C] p-6">
-        <div className="absolute inset-0 bg-[#D53F8C]/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+        <div className="absolute inset-0 bg-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
         <div className="relative flex flex-col items-center">
-          <CreditCard className="h-6 w-6 text-[#D53F8C]" />
+          <CreditCard className="h-6 w-6 text-indigo-500" />
           <div className="mt-4 text-3xl font-bold text-white">
-            <AnimatedCounter 
-              value={stats.transactions.volume} 
+            <AnimatedCounter
+              value={stats.transactions.volume}
               duration={2500}
               formatter={formatCurrency}
             />
diff --git a/components/dashboard/content.tsx b/components/dashboard/content.tsx
index f8f9c62..50ca07b 100644
--- a/components/dashboard/content.tsx
+++ b/components/dashboard/content.tsx
@@ -25,7 +25,7 @@ interface ContentProps {
 interface TopProduct {
   id: string;
   name: string;
-  price: number;
+  price: number | number[];
   image: string;
   count: number;
   revenue: number;
@@ -73,7 +73,7 @@ export default function Content({ username, orderStats }: ContentProps) {
           <h1 className="text-4xl font-bold tracking-tight text-foreground">
             {greeting}, <span className="text-primary">{username}</span>!
           </h1>
-          <p className="text-muted-foreground mt-2 max-w-2xl text-lg">
+          <p className="text-muted-foreground mt-2 text-lg">
             "{randomQuote.text}" — <span className="font-medium">{randomQuote.author}</span>
           </p>
         </div>
@@ -181,14 +181,13 @@ export default function Content({ username, orderStats }: ContentProps) {
                       <div className="flex-grow min-w-0">
                         <h4 className="font-semibold text-lg truncate group-hover:text-primary transition-colors">{product.name}</h4>
                         <div className="flex items-center gap-3 mt-0.5">
-                          <span className="text-sm text-muted-foreground font-medium">£{(Number(product.price) || 0).toFixed(2)}</span>
-                          <span className="h-1 w-1 rounded-full bg-muted-foreground/30" />
-                          <span className="text-xs text-muted-foreground">ID: {product.id.slice(-6)}</span>
+                          <span className="text-sm text-muted-foreground font-medium">£{(Number(Array.isArray(product.price) ? product.price[0] : product.price) || 0).toFixed(2)}</span>
                         </div>
                       </div>
                       <div className="text-right">
                         <div className="text-xl font-bold">{product.count}</div>
-                        <div className="text-xs text-muted-foreground font-medium uppercase tracking-tighter">Units Sold</div>
+                        <div className="text-xs text-muted-foreground font-medium uppercase tracking-tighter mb-1">Units Sold</div>
+                        <div className="text-sm font-semibold text-primary">£{product.revenue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
                       </div>
                     </motion.div>
                   ))}
diff --git a/components/notifications/UnifiedNotifications.tsx b/components/notifications/UnifiedNotifications.tsx
index 1a8cfe0..c19eb6d 100644
--- a/components/notifications/UnifiedNotifications.tsx
+++ b/components/notifications/UnifiedNotifications.tsx
@@ -18,7 +18,7 @@ import { useNotifications } from "@/lib/notification-context";
 export default function UnifiedNotifications() {
   const router = useRouter();
   const [activeTab, setActiveTab] = useState<string>("all");
-  
+
   // Get notification state from context
   const {
     unreadCounts,
@@ -33,11 +33,11 @@ export default function UnifiedNotifications() {
   const handleChatClick = (chatId: string) => {
     router.push(`/dashboard/chats/${chatId}`);
   };
-  
+
   const handleOrderClick = (orderId: string) => {
     router.push(`/dashboard/orders/${orderId}`);
   };
-  
+
   // Format the price as currency
   const formatPrice = (price: number) => {
     return `£${price.toFixed(2)}`;
@@ -49,8 +49,8 @@ export default function UnifiedNotifications() {
         <Button variant="ghost" size="icon" className="relative" disabled={loading}>
           <BellRing className="h-5 w-5" />
           {totalNotifications > 0 && (
-            <Badge 
-              variant="destructive" 
+            <Badge
+              variant="destructive"
               className="absolute -top-1 -right-1 px-1.5 py-0.5 text-xs"
             >
               {totalNotifications}
@@ -58,12 +58,12 @@ export default function UnifiedNotifications() {
           )}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-80">
+      <DropdownMenuContent align="end" className="w-80" collisionPadding={10}>
         <div className="p-2 border-b">
           <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
             <TabsList className="grid w-full grid-cols-3">
               <TabsTrigger value="all" className="text-xs">
-                All 
+                All
                 {totalNotifications > 0 && (
                   <Badge variant="secondary" className="ml-1">
                     {totalNotifications}
@@ -87,7 +87,7 @@ export default function UnifiedNotifications() {
                 )}
               </TabsTrigger>
             </TabsList>
-            
+
             <TabsContent value="all" className="m-0">
               {totalNotifications === 0 ? (
                 <div className="p-4 flex items-center justify-center">
@@ -102,7 +102,7 @@ export default function UnifiedNotifications() {
                         Unread Messages
                       </div>
                       {Object.entries(unreadCounts.chatCounts).slice(0, 3).map(([chatId, count]) => (
-                        <DropdownMenuItem 
+                        <DropdownMenuItem
                           key={`chat-${chatId}`}
                           className="p-3 cursor-pointer"
                           onClick={() => handleChatClick(chatId)}
@@ -130,15 +130,15 @@ export default function UnifiedNotifications() {
                       )}
                     </>
                   )}
-                  
+
                   {/* Orders Section */}
                   {newOrders.length > 0 && (
                     <>
                       <div className="px-3 py-2 text-xs font-medium bg-muted/50 flex justify-between items-center">
                         <span>New Paid Orders</span>
-                        <Button 
-                          variant="ghost" 
-                          size="sm" 
+                        <Button
+                          variant="ghost"
+                          size="sm"
                           onClick={(e) => {
                             e.stopPropagation();
                             clearOrderNotifications();
@@ -149,7 +149,7 @@ export default function UnifiedNotifications() {
                         </Button>
                       </div>
                       {newOrders.slice(0, 3).map((order) => (
-                        <DropdownMenuItem 
+                        <DropdownMenuItem
                           key={`order-${order._id}`}
                           className="p-3 cursor-pointer"
                           onClick={() => handleOrderClick(order._id)}
@@ -178,7 +178,7 @@ export default function UnifiedNotifications() {
                 </div>
               )}
             </TabsContent>
-            
+
             <TabsContent value="messages" className="m-0">
               {unreadCounts.totalUnread === 0 ? (
                 <div className="p-4 flex items-center justify-center">
@@ -188,7 +188,7 @@ export default function UnifiedNotifications() {
                 <>
                   <div className="max-h-96 overflow-y-auto">
                     {Object.entries(unreadCounts.chatCounts).map(([chatId, count]) => (
-                      <DropdownMenuItem 
+                      <DropdownMenuItem
                         key={`chat-tab-${chatId}`}
                         className="p-3 cursor-pointer"
                         onClick={() => handleChatClick(chatId)}
@@ -211,8 +211,8 @@ export default function UnifiedNotifications() {
                     ))}
                   </div>
                   <div className="p-2 border-t">
-                    <Button 
-                      variant="outline" 
+                    <Button
+                      variant="outline"
                       className="w-full"
                       onClick={() => router.push('/dashboard/chats')}
                     >
@@ -222,7 +222,7 @@ export default function UnifiedNotifications() {
                 </>
               )}
             </TabsContent>
-            
+
             <TabsContent value="orders" className="m-0">
               {newOrders.length === 0 ? (
                 <div className="p-4 flex items-center justify-center">
@@ -232,9 +232,9 @@ export default function UnifiedNotifications() {
                 <>
                   <div className="px-3 py-2 text-xs font-medium bg-muted/50 flex justify-between items-center">
                     <span>New Paid Orders</span>
-                    <Button 
-                      variant="ghost" 
-                      size="sm" 
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       onClick={(e) => {
                         e.stopPropagation();
                         clearOrderNotifications();
@@ -246,7 +246,7 @@ export default function UnifiedNotifications() {
                   </div>
                   <div className="max-h-96 overflow-y-auto">
                     {newOrders.map((order) => (
-                      <DropdownMenuItem 
+                      <DropdownMenuItem
                         key={`order-tab-${order._id}`}
                         className="p-3 cursor-pointer"
                         onClick={() => handleOrderClick(order._id)}
@@ -267,8 +267,8 @@ export default function UnifiedNotifications() {
                     ))}
                   </div>
                   <div className="p-2 border-t">
-                    <Button 
-                      variant="outline" 
+                    <Button
+                      variant="outline"
                       className="w-full"
                       onClick={() => router.push('/dashboard/orders')}
                     >