diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx index 0b0b164..ec43b6a 100644 --- a/src/components/DashboardLayout.tsx +++ b/src/components/DashboardLayout.tsx @@ -1,5 +1,6 @@ import { useState, useEffect } from 'react' import { Sidebar } from './Sidebar' +import { TopNavbar } from './TopNavbar' import { DashboardHome } from './DashboardHome' import { UserManagement } from './UserManagement' import { userManagement, type User } from '../lib/supabase' @@ -147,16 +148,18 @@ export function DashboardLayout({ onLogout }: DashboardLayoutProps) { } return ( -
+
-
- {renderCurrentView()} -
+
+ +
+ {renderCurrentView()} +
+
) } diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 5154aee..ad7db69 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -5,47 +5,67 @@ interface SidebarProps { user: User currentView: string onViewChange: (view: string) => void - onLogout: () => void } interface MenuItem { id: string name: string - icon: string + icon: JSX.Element requiredRoles?: string[] } -export function Sidebar({ user, currentView, onViewChange, onLogout }: SidebarProps) { +export function Sidebar({ user, currentView, onViewChange }: SidebarProps) { const [isCollapsed, setIsCollapsed] = useState(false) const menuItems: MenuItem[] = [ { id: 'dashboard', name: 'Dashboard', - icon: '๐Ÿ ', + icon: ( + + + + + ), }, { id: 'user-management', name: 'User Management', - icon: '๐Ÿ‘ฅ', + icon: ( + + + + ), requiredRoles: ['admin'] }, { id: 'experiments', name: 'Experiments', - icon: '๐Ÿงช', + icon: ( + + + + ), requiredRoles: ['admin', 'conductor'] }, { id: 'analytics', name: 'Analytics', - icon: '๐Ÿ“Š', + icon: ( + + + + ), requiredRoles: ['admin', 'conductor', 'analyst'] }, { id: 'data-entry', name: 'Data Entry', - icon: '๐Ÿ“', + icon: ( + + + + ), requiredRoles: ['admin', 'conductor', 'data recorder'] } ] @@ -55,75 +75,36 @@ export function Sidebar({ user, currentView, onViewChange, onLogout }: SidebarPr return item.requiredRoles.some(role => user.roles.includes(role as any)) } - const getRoleBadgeColor = (role: string) => { - switch (role) { - case 'admin': - return 'bg-red-100 text-red-800' - case 'conductor': - return 'bg-blue-100 text-blue-800' - case 'analyst': - return 'bg-green-100 text-green-800' - case 'data recorder': - return 'bg-purple-100 text-purple-800' - default: - return 'bg-gray-100 text-gray-800' - } - } - return ( -
+
{/* Header */} -
+
{!isCollapsed && (
-

RBAC System

-

Admin Dashboard

+

RBAC System

+

Admin Dashboard

)}
- {/* User Info */} -
- {!isCollapsed ? ( -
-
{user.email}
-
- {user.roles.map((role) => ( - - {role.charAt(0).toUpperCase() + role.slice(1)} - - ))} -
-
- Status: - {user.status} - -
-
- ) : ( -
-
- {user.email.charAt(0).toUpperCase()} -
-
- )} -
- {/* Navigation Menu */} - - {/* Footer Actions */} -
- -
) } diff --git a/src/components/TopNavbar.tsx b/src/components/TopNavbar.tsx new file mode 100644 index 0000000..1fe5e4b --- /dev/null +++ b/src/components/TopNavbar.tsx @@ -0,0 +1,152 @@ +import { useState } from 'react' +import type { User } from '../lib/supabase' + +interface TopNavbarProps { + user: User + onLogout: () => void + currentView?: string +} + +export function TopNavbar({ user, onLogout, currentView = 'dashboard' }: TopNavbarProps) { + const [isUserMenuOpen, setIsUserMenuOpen] = useState(false) + + const getPageTitle = (view: string) => { + switch (view) { + case 'dashboard': + return 'Dashboard' + case 'user-management': + return 'User Management' + case 'experiments': + return 'Experiments' + case 'analytics': + return 'Analytics' + case 'data-entry': + return 'Data Entry' + default: + return 'Dashboard' + } + } + + const getRoleBadgeColor = (role: string) => { + switch (role) { + case 'admin': + return 'bg-red-100 text-red-800' + case 'conductor': + return 'bg-blue-100 text-blue-800' + case 'analyst': + return 'bg-green-100 text-green-800' + case 'data recorder': + return 'bg-purple-100 text-purple-800' + default: + return 'bg-gray-100 text-gray-800' + } + } + + return ( +
+
+ {/* Left side - could add breadcrumbs or page title here */} +
+

{getPageTitle(currentView)}

+
+ + {/* Right side - User menu */} +
+ {/* User info and avatar */} +
+ + + {/* Dropdown menu */} + {isUserMenuOpen && ( +
+
+
+
+ {user.email.charAt(0).toUpperCase()} +
+
+
+ {user.email} +
+
+ Status: + {user.status} + +
+
+
+ + {/* User roles */} +
+
Roles:
+
+ {user.roles.map((role) => ( + + {role.charAt(0).toUpperCase() + role.slice(1)} + + ))} +
+
+
+ +
+ +
+
+ )} +
+
+
+ + {/* Click outside to close dropdown */} + {isUserMenuOpen && ( +
setIsUserMenuOpen(false)} + /> + )} +
+ ) +}