Enhance scheduling features in management dashboard

- Added new scheduling functionality with a dedicated Scheduling component to manage availability and experiment scheduling.
- Integrated react-big-calendar for visual calendar representation of availability slots.
- Updated Dashboard and DashboardLayout components to handle current route and pass it to child components.
- Implemented route handling for scheduling sub-routes to improve user navigation.
- Added new dependencies: moment and react-big-calendar for date handling and calendar UI.
- Improved user experience with dynamic URL updates based on selected scheduling views.

management-dashboard-web-app/src/components/DashboardLayout.tsx

@@ -12,9 +12,10 @@ import { userManagement, type User } from '../lib/supabase'
 
 interface DashboardLayoutProps {
   onLogout: () => void
+  currentRoute: string
 }
 
-export function DashboardLayout({ onLogout }: DashboardLayoutProps) {
+export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps) {
   const [user, setUser] = useState<User | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -59,11 +60,15 @@ export function DashboardLayout({ onLogout }: DashboardLayoutProps) {
     return true
   }
 
-  // Handle view change with persistence
+  // Handle view change with persistence and URL updates
   const handleViewChange = (view: string) => {
     if (validViews.includes(view) && hasAccessToView(view)) {
       setCurrentView(view)
       saveCurrentView(view)
+
+      // Update URL
+      const newPath = view === 'dashboard' ? '/' : `/${view}`
+      window.history.pushState({}, '', newPath)
     }
   }
 
@@ -85,6 +90,29 @@ export function DashboardLayout({ onLogout }: DashboardLayoutProps) {
     }
   }, [user])
 
+  // Handle route changes for scheduling sub-routes
+  useEffect(() => {
+    if (currentRoute.startsWith('/scheduling')) {
+      setCurrentView('scheduling')
+    } else if (currentRoute === '/') {
+      // Handle root route - use saved view or default to dashboard
+      if (user) {
+        const savedView = getSavedView()
+        if (hasAccessToView(savedView)) {
+          setCurrentView(savedView)
+        } else {
+          setCurrentView('dashboard')
+        }
+      }
+    } else {
+      // Handle other routes by extracting the view name
+      const routeView = currentRoute.substring(1) // Remove leading slash
+      if (validViews.includes(routeView) && hasAccessToView(routeView)) {
+        setCurrentView(routeView)
+      }
+    }
+  }, [currentRoute, user])
+
   const fetchUserProfile = async () => {
     try {
       setLoading(true)
@@ -163,7 +191,7 @@ export function DashboardLayout({ onLogout }: DashboardLayoutProps) {
       case 'vision-system':
         return <VisionSystem />
       case 'scheduling':
-        return <Scheduling user={user} />
+        return <Scheduling user={user} currentRoute={currentRoute} />
       case 'video-library':
         return <VideoStreamingPage />
       default: