Fix role-based access control for dashboard admin panel link

Co-authored-by: vinod0m <221896197+vinod0m@users.noreply.github.com>

Author: Copilot

frontend/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { SettingsProvider } from './stores/settingsStore';
 import { AuthProvider, useAuth } from './stores/authStore';
 import { Navigation } from './components/Navigation';
@@ -12,9 +12,24 @@ import './styles.css';
 
 const AppContent: React.FC = () => {
   const { isAuthenticated, isLoading } = useAuth();
+  const [currentHash, setCurrentHash] = useState(window.location.hash.slice(1) || '/');
 
-  // Simple routing based on hash
-  const currentHash = window.location.hash.slice(1) || '/';
+  // Handle hash changes without page reload
+  useEffect(() => {
+    const handleHashChange = () => {
+      setCurrentHash(window.location.hash.slice(1) || '/');
+    };
+    
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
+  // Redirect to dashboard when authenticated and on login/register pages
+  useEffect(() => {
+    if (isAuthenticated && (currentHash === '/login' || currentHash === '/register')) {
+      window.location.hash = '/dashboard';
+    }
+  }, [isAuthenticated, currentHash]);
 
   const renderPage = () => {
     if (isLoading) {
@@ -59,17 +74,6 @@ const AppContent: React.FC = () => {
     }
   };
 
-  // Update navigation links to use hash routing
-  React.useEffect(() => {
-    const handleHashChange = () => {
-      // Force re-render when hash changes
-      window.location.reload();
-    };
-    
-    window.addEventListener('hashchange', handleHashChange);
-    return () => window.removeEventListener('hashchange', handleHashChange);
-  }, []);
-
   return (
     <SettingsProvider>
       <div className="min-h-screen bg-gray-50">

frontend/components/Dashboard.tsx

@@ -27,7 +27,7 @@ const RoleBadge: React.FC<{ role: Role }> = ({ role }) => {
 };
 
 export const Dashboard: React.FC = () => {
-  const { user, logout, isLoading } = useAuth();
+  const { user, logout, isLoading, hasRole } = useAuth();
 
   if (!user) {
     return null;
@@ -120,12 +120,14 @@ export const Dashboard: React.FC = () => {
 
         <div className="px-6 py-4">
           <div className="flex flex-wrap gap-4">
-            <a
-              href="#/admin"
-              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            >
-              Admin Panel
-            </a>
+            {hasRole('admin') && (
+              <a
+                href="#/admin"
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                Admin Panel
+              </a>
+            )}
 
             <button
               onClick={handleRefreshProfile}