can successfully add new users

src/components/DashboardLayout.tsx

@@ -0,0 +1,162 @@
+import { useState, useEffect } from 'react'
+import { Sidebar } from './Sidebar'
+import { DashboardHome } from './DashboardHome'
+import { UserManagement } from './UserManagement'
+import { userManagement, type User } from '../lib/supabase'
+
+interface DashboardLayoutProps {
+  onLogout: () => void
+}
+
+export function DashboardLayout({ onLogout }: DashboardLayoutProps) {
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [currentView, setCurrentView] = useState('dashboard')
+
+  useEffect(() => {
+    fetchUserProfile()
+  }, [])
+
+  const fetchUserProfile = async () => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      const currentUser = await userManagement.getCurrentUser()
+      if (currentUser) {
+        setUser(currentUser)
+      } else {
+        setError('No authenticated user found')
+      }
+    } catch (err) {
+      setError('Failed to fetch user profile')
+      console.error('Profile fetch error:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleLogout = async () => {
+    // Navigate to signout route which will handle the actual logout
+    window.history.pushState({}, '', '/signout')
+    window.dispatchEvent(new PopStateEvent('popstate'))
+  }
+
+  const renderCurrentView = () => {
+    if (!user) return null
+
+    switch (currentView) {
+      case 'dashboard':
+        return <DashboardHome user={user} />
+      case 'user-management':
+        if (user.roles.includes('admin')) {
+          return <UserManagement />
+        } else {
+          return (
+            <div className="p-6">
+              <div className="bg-red-50 border border-red-200 rounded-md p-4">
+                <div className="text-sm text-red-700">
+                  Access denied. You need admin privileges to access user management.
+                </div>
+              </div>
+            </div>
+          )
+        }
+      case 'experiments':
+        return (
+          <div className="p-6">
+            <h1 className="text-2xl font-bold text-gray-900 mb-4">Experiments</h1>
+            <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
+              <div className="text-sm text-blue-700">
+                Experiments module coming soon...
+              </div>
+            </div>
+          </div>
+        )
+      case 'analytics':
+        return (
+          <div className="p-6">
+            <h1 className="text-2xl font-bold text-gray-900 mb-4">Analytics</h1>
+            <div className="bg-green-50 border border-green-200 rounded-md p-4">
+              <div className="text-sm text-green-700">
+                Analytics module coming soon...
+              </div>
+            </div>
+          </div>
+        )
+      case 'data-entry':
+        return (
+          <div className="p-6">
+            <h1 className="text-2xl font-bold text-gray-900 mb-4">Data Entry</h1>
+            <div className="bg-purple-50 border border-purple-200 rounded-md p-4">
+              <div className="text-sm text-purple-700">
+                Data entry module coming soon...
+              </div>
+            </div>
+          </div>
+        )
+      default:
+        return <DashboardHome user={user} />
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto"></div>
+          <p className="mt-4 text-gray-600">Loading dashboard...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="max-w-md w-full">
+          <div className="rounded-md bg-red-50 p-4">
+            <div className="text-sm text-red-700">{error}</div>
+          </div>
+          <button
+            onClick={handleLogout}
+            className="mt-4 w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700"
+          >
+            Back to Login
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="text-gray-600">No user data available</div>
+          <button
+            onClick={handleLogout}
+            className="mt-4 px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700"
+          >
+            Back to Login
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex">
+      <Sidebar
+        user={user}
+        currentView={currentView}
+        onViewChange={setCurrentView}
+        onLogout={handleLogout}
+      />
+      <main className="flex-1 overflow-auto">
+        {renderCurrentView()}
+      </main>
+    </div>
+  )
+}