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