g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

28
components/animated-stats-section.tsx
View File

@@ -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}
/>

11
components/dashboard/content.tsx
View File

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

50
components/notifications/UnifiedNotifications.tsx
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')}
>