Update UnifiedNotifications.tsx
This commit is contained in:
NotII
@@ -307,59 +307,148 @@ export default function UnifiedNotifications() {
|
||||
)}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<TabsContent value="all" className="m-0">
|
||||
{totalNotifications === 0 ? (
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">No new notifications</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{/* Messages Section */}
|
||||
{unreadCounts.totalUnread > 0 && (
|
||||
<>
|
||||
<div className="px-3 py-2 text-xs font-medium bg-muted/50">
|
||||
Unread Messages
|
||||
</div>
|
||||
{Object.entries(unreadCounts.chatCounts).slice(0, 3).map(([chatId, count]) => (
|
||||
<DropdownMenuItem
|
||||
key={`chat-${chatId}`}
|
||||
className="p-3 cursor-pointer"
|
||||
onClick={() => handleChatClick(chatId)}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageCircle className="h-4 w-4 text-blue-500" />
|
||||
<div>
|
||||
<p className="font-medium">
|
||||
Customer {chatMetadata[chatId]?.buyerId.slice(-4) || 'Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{count} new {count === 1 ? 'message' : 'messages'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary">{count}</Badge>
|
||||
|
||||
<TabsContent value="all" className="m-0">
|
||||
{totalNotifications === 0 ? (
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">No new notifications</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{/* Messages Section */}
|
||||
{unreadCounts.totalUnread > 0 && (
|
||||
<>
|
||||
<div className="px-3 py-2 text-xs font-medium bg-muted/50">
|
||||
Unread Messages
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
{Object.keys(unreadCounts.chatCounts).length > 3 && (
|
||||
<div className="px-3 py-2 text-xs text-center text-muted-foreground">
|
||||
+ {Object.keys(unreadCounts.chatCounts).length - 3} more unread chats
|
||||
</div>
|
||||
{Object.entries(unreadCounts.chatCounts).slice(0, 3).map(([chatId, count]) => (
|
||||
<DropdownMenuItem
|
||||
key={`chat-${chatId}`}
|
||||
className="p-3 cursor-pointer"
|
||||
onClick={() => handleChatClick(chatId)}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageCircle className="h-4 w-4 text-blue-500" />
|
||||
<div>
|
||||
<p className="font-medium">
|
||||
Customer {chatMetadata[chatId]?.buyerId.slice(-4) || 'Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{count} new {count === 1 ? 'message' : 'messages'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary">{count}</Badge>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
{Object.keys(unreadCounts.chatCounts).length > 3 && (
|
||||
<div className="px-3 py-2 text-xs text-center text-muted-foreground">
|
||||
+ {Object.keys(unreadCounts.chatCounts).length - 3} more unread chats
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 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"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
clearOrderNotifications();
|
||||
}}
|
||||
className="h-6 text-xs"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
{newOrders.slice(0, 3).map((order) => (
|
||||
<DropdownMenuItem
|
||||
key={`order-${order._id}`}
|
||||
className="p-3 cursor-pointer"
|
||||
onClick={() => handleOrderClick(order._id)}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="h-4 w-4 text-green-500" />
|
||||
<div>
|
||||
<p className="font-medium">Order #{order.orderId}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatPrice(order.totalPrice)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className="bg-green-500 hover:bg-green-600">Paid</Badge>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
{newOrders.length > 3 && (
|
||||
<div className="px-3 py-2 text-xs text-center text-muted-foreground">
|
||||
+ {newOrders.length - 3} more new orders
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="messages" className="m-0">
|
||||
{unreadCounts.totalUnread === 0 ? (
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">No unread messages</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{Object.entries(unreadCounts.chatCounts).map(([chatId, count]) => (
|
||||
<DropdownMenuItem
|
||||
key={`chat-tab-${chatId}`}
|
||||
className="p-3 cursor-pointer"
|
||||
onClick={() => handleChatClick(chatId)}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageCircle className="h-4 w-4 text-blue-500" />
|
||||
<div>
|
||||
<p className="font-medium">
|
||||
Customer {chatMetadata[chatId]?.buyerId.slice(-4) || 'Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{count} new {count === 1 ? 'message' : 'messages'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary">{count}</Badge>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={() => router.push('/dashboard/chats')}
|
||||
>
|
||||
View All Chats
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Divider if both types are present */}
|
||||
{unreadCounts.totalUnread > 0 && newOrders.length > 0 && (
|
||||
<DropdownMenuSeparator />
|
||||
)}
|
||||
|
||||
{/* Orders Section */}
|
||||
{newOrders.length > 0 && (
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="orders" className="m-0">
|
||||
{newOrders.length === 0 ? (
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">No new paid orders</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="px-3 py-2 text-xs font-medium bg-muted/50 flex justify-between items-center">
|
||||
<span>New Paid Orders</span>
|
||||
@@ -375,136 +464,42 @@ export default function UnifiedNotifications() {
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
{newOrders.slice(0, 3).map((order) => (
|
||||
<DropdownMenuItem
|
||||
key={`order-${order._id}`}
|
||||
className="p-3 cursor-pointer"
|
||||
onClick={() => handleOrderClick(order._id)}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="h-4 w-4 text-green-500" />
|
||||
<div>
|
||||
<p className="font-medium">Order #{order.orderId}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatPrice(order.totalPrice)}
|
||||
</p>
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{newOrders.map((order) => (
|
||||
<DropdownMenuItem
|
||||
key={`order-tab-${order._id}`}
|
||||
className="p-3 cursor-pointer"
|
||||
onClick={() => handleOrderClick(order._id)}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="h-4 w-4 text-green-500" />
|
||||
<div>
|
||||
<p className="font-medium">Order #{order.orderId}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatPrice(order.totalPrice)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className="bg-green-500 hover:bg-green-600">Paid</Badge>
|
||||
</div>
|
||||
<Badge className="bg-green-500 hover:bg-green-600">Paid</Badge>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
{newOrders.length > 3 && (
|
||||
<div className="px-3 py-2 text-xs text-center text-muted-foreground">
|
||||
+ {newOrders.length - 3} more new orders
|
||||
</div>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={() => router.push('/dashboard/orders')}
|
||||
>
|
||||
View All Orders
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="messages" className="m-0">
|
||||
{unreadCounts.totalUnread === 0 ? (
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">No unread messages</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{Object.entries(unreadCounts.chatCounts).map(([chatId, count]) => (
|
||||
<DropdownMenuItem
|
||||
key={`chat-tab-${chatId}`}
|
||||
className="p-3 cursor-pointer"
|
||||
onClick={() => handleChatClick(chatId)}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageCircle className="h-4 w-4 text-blue-500" />
|
||||
<div>
|
||||
<p className="font-medium">
|
||||
Customer {chatMetadata[chatId]?.buyerId.slice(-4) || 'Unknown'}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{count} new {count === 1 ? 'message' : 'messages'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary">{count}</Badge>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={() => router.push('/dashboard/chats')}
|
||||
>
|
||||
View All Chats
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="orders" className="m-0">
|
||||
{newOrders.length === 0 ? (
|
||||
<div className="p-4 flex items-center justify-center">
|
||||
<p className="text-sm text-muted-foreground">No new paid orders</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<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"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
clearOrderNotifications();
|
||||
}}
|
||||
className="h-6 text-xs"
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{newOrders.map((order) => (
|
||||
<DropdownMenuItem
|
||||
key={`order-tab-${order._id}`}
|
||||
className="p-3 cursor-pointer"
|
||||
onClick={() => handleOrderClick(order._id)}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="h-4 w-4 text-green-500" />
|
||||
<div>
|
||||
<p className="font-medium">Order #{order.orderId}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{formatPrice(order.totalPrice)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className="bg-green-500 hover:bg-green-600">Paid</Badge>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</div>
|
||||
<div className="p-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={() => router.push('/dashboard/orders')}
|
||||
>
|
||||
View All Orders
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user