Update UI styles and dashboard product display
All checks were successful
Build Frontend / build (push) Successful in 1m10s

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.
This commit is contained in:
g
2026-01-12 08:03:19 +00:00
parent 3ffb64cf9a
commit 7ddcd7afb6
4 changed files with 45 additions and 46 deletions

View File

@@ -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')}
>