From e19172d2bb2804eff3cb7fbf3ed6adaa7caf9cdf Mon Sep 17 00:00:00 2001
From: RKWojs <rkwojs@gmail.com>
Date: Mon, 6 Oct 2025 16:07:17 +0200
Subject: [PATCH] feat: Restrict notifications feature to admin users only in
 navigation

---
 src/components/ui/Navigation.js | 90 +++++++++++++++++----------------
 1 file changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/components/ui/Navigation.js b/src/components/ui/Navigation.js
index a31eb1e..79d6008 100644
--- a/src/components/ui/Navigation.js
+++ b/src/components/ui/Navigation.js
@@ -96,36 +96,38 @@ const Navigation = () => {
 							<div className="text-blue-100">{t('navigation.loading')}</div>
 						) : session ? (
 							<>
-								{/* Notifications */}
-								<div className="relative" ref={notificationsRef}>
-									<button
-										onClick={() => setIsNotificationsOpen(!isNotificationsOpen)}
-										className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors relative"
-									>
-										<svg className="w-6 h-6" fill="currentColor" stroke="none" viewBox="0 0 640 640">
-											<path d="M320 64C306.7 64 296 74.7 296 88L296 97.7C214.6 109.3 152 179.4 152 264L152 278.5C152 316.2 142 353.2 123 385.8L101.1 423.2C97.8 429 96 435.5 96 442.2C96 463.1 112.9 480 133.8 480L506.2 480C527.1 480 544 463.1 544 442.2C544 435.5 542.2 428.9 538.9 423.2L517 385.7C498 353.1 488 316.1 488 278.4L488 263.9C488 179.3 425.4 109.2 344 97.6L344 87.9C344 74.6 333.3 63.9 320 63.9zM488.4 432L151.5 432L164.4 409.9C187.7 370 200 324.6 200 278.5L200 264C200 197.7 253.7 144 320 144C386.3 144 440 197.7 440 264L440 278.5C440 324.7 452.3 370 475.5 409.9L488.4 432zM252.1 528C262 556 288.7 576 320 576C351.3 576 378 556 387.9 528L252.1 528z" />
-										</svg>
-										{/* Notification badge */}
-										<span className="absolute -top-1 -right-1 h-4 w-4 bg-gray-400 dark:bg-gray-500 text-white text-xs rounded-full flex items-center justify-center">
-											0
-										</span>
-									</button>
+								{/* Notifications - Admin only for now */}
+								{session?.user?.role === 'admin' && (
+									<div className="relative" ref={notificationsRef}>
+										<button
+											onClick={() => setIsNotificationsOpen(!isNotificationsOpen)}
+											className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors relative"
+										>
+											<svg className="w-6 h-6" fill="currentColor" stroke="none" viewBox="0 0 640 640">
+												<path d="M320 64C306.7 64 296 74.7 296 88L296 97.7C214.6 109.3 152 179.4 152 264L152 278.5C152 316.2 142 353.2 123 385.8L101.1 423.2C97.8 429 96 435.5 96 442.2C96 463.1 112.9 480 133.8 480L506.2 480C527.1 480 544 463.1 544 442.2C544 435.5 542.2 428.9 538.9 423.2L517 385.7C498 353.1 488 316.1 488 278.4L488 263.9C488 179.3 425.4 109.2 344 97.6L344 87.9C344 74.6 333.3 63.9 320 63.9zM488.4 432L151.5 432L164.4 409.9C187.7 370 200 324.6 200 278.5L200 264C200 197.7 253.7 144 320 144C386.3 144 440 197.7 440 264L440 278.5C440 324.7 452.3 370 475.5 409.9L488.4 432zM252.1 528C262 556 288.7 576 320 576C351.3 576 378 556 387.9 528L252.1 528z" />
+											</svg>
+											{/* Notification badge */}
+											<span className="absolute -top-1 -right-1 h-4 w-4 bg-gray-400 dark:bg-gray-500 text-white text-xs rounded-full flex items-center justify-center">
+												0
+											</span>
+										</button>
 
-									{/* Notifications Dropdown */}
-									{isNotificationsOpen && (
-										<div className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
-											<div className="p-4 border-b border-gray-200 dark:border-gray-700">
-												<h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('notifications.title')}</h3>
-											</div>
-											<div className="max-h-96 overflow-y-auto">
-												<div className="p-4 text-center text-gray-500 dark:text-gray-400">
-													<p className="text-sm">{t('notifications.noNotifications')}</p>
-													<p className="text-xs mt-1">{t('notifications.placeholder')}</p>
+										{/* Notifications Dropdown */}
+										{isNotificationsOpen && (
+											<div className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+												<div className="p-4 border-b border-gray-200 dark:border-gray-700">
+													<h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('notifications.title')}</h3>
+												</div>
+												<div className="max-h-96 overflow-y-auto">
+													<div className="p-4 text-center text-gray-500 dark:text-gray-400">
+														<p className="text-sm">{t('notifications.noNotifications')}</p>
+														<p className="text-xs mt-1">{t('notifications.placeholder')}</p>
+													</div>
 												</div>
 											</div>
-										</div>
-									)}
-								</div>
+										)}
+									</div>
+								)}
 
 								{/* User Info */}
 								<div className="hidden md:flex items-center space-x-3">
@@ -220,22 +222,24 @@ const Navigation = () => {
 									</div>
 								</Link>
 								<div className="flex items-center space-x-2">
-									{/* Mobile Notifications */}
-									<button
-										onClick={() => {
-											setIsNotificationsOpen(!isNotificationsOpen);
-											setIsMobileMenuOpen(false);
-										}}
-										className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors relative"
-									>
-										<svg className="w-5 h-5" fill="currentColor" stroke="none" viewBox="0 0 640 640">
-											<path d="M320 64C306.7 64 296 74.7 296 88L296 97.7C214.6 109.3 152 179.4 152 264L152 278.5C152 316.2 142 353.2 123 385.8L101.1 423.2C97.8 429 96 435.5 96 442.2C96 463.1 112.9 480 133.8 480L506.2 480C527.1 480 544 463.1 544 442.2C544 435.5 542.2 428.9 538.9 423.2L517 385.7C498 353.1 488 316.1 488 278.4L488 263.9C488 179.3 425.4 109.2 344 97.6L344 87.9C344 74.6 333.3 63.9 320 63.9zM488.4 432L151.5 432L164.4 409.9C187.7 370 200 324.6 200 278.5L200 264C200 197.7 253.7 144 320 144C386.3 144 440 197.7 440 264L440 278.5C440 324.7 452.3 370 475.5 409.9L488.4 432zM252.1 528C262 556 288.7 576 320 576C351.3 576 378 556 387.9 528L252.1 528z" />
-										</svg>
-										{/* Notification badge */}
-										<span className="absolute -top-1 -right-1 h-3 w-3 bg-gray-400 dark:bg-gray-500 text-white text-xs rounded-full flex items-center justify-center">
-											0
-										</span>
-									</button>
+									{/* Mobile Notifications - Admin only for now */}
+									{session?.user?.role === 'admin' && (
+										<button
+											onClick={() => {
+												setIsNotificationsOpen(!isNotificationsOpen);
+												setIsMobileMenuOpen(false);
+											}}
+											className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors relative"
+										>
+											<svg className="w-5 h-5" fill="currentColor" stroke="none" viewBox="0 0 640 640">
+												<path d="M320 64C306.7 64 296 74.7 296 88L296 97.7C214.6 109.3 152 179.4 152 264L152 278.5C152 316.2 142 353.2 123 385.8L101.1 423.2C97.8 429 96 435.5 96 442.2C96 463.1 112.9 480 133.8 480L506.2 480C527.1 480 544 463.1 544 442.2C544 435.5 542.2 428.9 538.9 423.2L517 385.7C498 353.1 488 316.1 488 278.4L488 263.9C488 179.3 425.4 109.2 344 97.6L344 87.9C344 74.6 333.3 63.9 320 63.9zM488.4 432L151.5 432L164.4 409.9C187.7 370 200 324.6 200 278.5L200 264C200 197.7 253.7 144 320 144C386.3 144 440 197.7 440 264L440 278.5C440 324.7 452.3 370 475.5 409.9L488.4 432zM252.1 528C262 556 288.7 576 320 576C351.3 576 378 556 387.9 528L252.1 528z" />
+											</svg>
+											{/* Notification badge */}
+											<span className="absolute -top-1 -right-1 h-3 w-3 bg-gray-400 dark:bg-gray-500 text-white text-xs rounded-full flex items-center justify-center">
+												0
+											</span>
+										</button>
+									)}
 									<button
 										onClick={() => {
 											setIsMobileMenuOpen(false);