Add scheduling-remote service to docker-compose and enhance camera error handling

- Introduced a new service for scheduling-remote in docker-compose.yml, allowing for better management of scheduling functionalities.
- Enhanced error handling in CameraMonitor and CameraStreamer classes to improve robustness during camera initialization and streaming processes.
- Updated various components in the management dashboard to support dark mode and improve user experience with consistent styling.
- Implemented feature flags for enabling/disabling modules, including the new scheduling module.

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

@@ -7,7 +7,8 @@ import { ExperimentManagement } from './ExperimentManagement'
 import { DataEntry } from './DataEntry'
 // VisionSystem is now loaded as a microfrontend - see RemoteVisionSystem below
 // import { VisionSystem } from './VisionSystem'
-import { Scheduling } from './Scheduling'
+// Scheduling is now loaded as a microfrontend - see RemoteScheduling below
+// import { Scheduling } from './Scheduling'
 import React, { Suspense } from 'react'
 import { loadRemoteComponent } from '../lib/loadRemote'
 import { ErrorBoundary } from './ErrorBoundary'
@@ -172,6 +173,13 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
     LocalVisionSystemPlaceholder as any
   ) as unknown as React.ComponentType
 
+  const LocalSchedulingPlaceholder = () => (<div className="p-6">Scheduling module not enabled.</div>)
+  const RemoteScheduling = loadRemoteComponent(
+    isFeatureEnabled('enableSchedulingModule'),
+    () => import('schedulingRemote/App'),
+    LocalSchedulingPlaceholder as any
+  ) as unknown as React.ComponentType<{ user: User; currentRoute: string }>
+
   const renderCurrentView = () => {
     if (!user) return null
 
@@ -216,7 +224,13 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
           </ErrorBoundary>
         )
       case 'scheduling':
-        return <Scheduling user={user} currentRoute={currentRoute} />
+        return (
+          <ErrorBoundary fallback={<div className="p-6">Failed to load scheduling module. Please try again.</div>}>
+            <Suspense fallback={<div className="p-6">Loading scheduling module...</div>}>
+              <RemoteScheduling user={user} currentRoute={currentRoute} />
+            </Suspense>
+          </ErrorBoundary>
+        )
       case 'video-library':
         return (
           <ErrorBoundary fallback={<div className="p-6">Failed to load video module. Please try again.</div>}>
@@ -234,7 +248,7 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
         <div className="text-center">
           <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500 mx-auto"></div>
           <p className="mt-4 text-gray-600 dark:text-gray-400">Loading dashboard...</p>
@@ -245,7 +259,7 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
 
   if (error) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
         <div className="max-w-md w-full">
           <div className="rounded-2xl bg-error-50 border border-error-200 p-4 dark:bg-error-500/15 dark:border-error-500/20">
             <div className="text-sm text-error-700 dark:text-error-500">{error}</div>
@@ -263,7 +277,7 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
 
   if (!user) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
         <div className="text-center">
           <div className="text-gray-600 dark:text-gray-400">No user data available</div>
           <button
@@ -298,7 +312,7 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
         )}
       </div>
       <div
-        className={`flex-1 transition-all duration-300 ease-in-out ${isExpanded || isHovered ? "lg:ml-[290px]" : "lg:ml-[90px]"
+        className={`flex-1 transition-all duration-300 ease-in-out bg-gray-50 dark:bg-gray-900 ${isExpanded || isHovered ? "lg:ml-[290px]" : "lg:ml-[90px]"
           } ${isMobileOpen ? "ml-0" : ""}`}
       >
         <TopNavbar