Router and shadcn

frontend/src/App.tsx

@@ -1,22 +1,16 @@
 import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { ProjectsPage } from '@/components/projects/projects-page'
-import { UsersPage } from '@/components/users/users-page'
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'
 import { LoginForm } from '@/components/auth/login-form'
-import { ApiResponse } from 'shared/types'
-import { authStorage, isAuthenticated, logout, makeAuthenticatedRequest } from '@/lib/auth'
-import { ArrowLeft, Heart, Activity, FolderOpen, Users, CheckCircle, AlertCircle, LogOut } from 'lucide-react'
+import { Navbar } from '@/components/layout/navbar'
+import { HomePage } from '@/pages/home'
+import { Projects } from '@/pages/projects'
+import { Users } from '@/pages/users'
+import { isAuthenticated } from '@/lib/auth'
 
-function App() {
-  const [currentPage, setCurrentPage] = useState<'home' | 'projects' | 'users'>('home')
-  const [message, setMessage] = useState<string>('')
-  const [messageType, setMessageType] = useState<'success' | 'error'>('success')
-  const [loading, setLoading] = useState(false)
+function AppContent() {
+  const location = useLocation()
   const [authenticated, setAuthenticated] = useState(false)
-  
-  const currentUser = authStorage.getUser()
+  const showNavbar = location.pathname !== '/' || authenticated
 
   useEffect(() => {
     setAuthenticated(isAuthenticated())
@@ -24,270 +18,37 @@ function App() {
 
   const handleLogin = () => {
     setAuthenticated(true)
-    setCurrentPage('home')
   }
 
   const handleLogout = () => {
-    logout()
     setAuthenticated(false)
-    setCurrentPage('home')
-  }
-
-  const fetchHello = async () => {
-    setLoading(true)
-    try {
-      const response = await makeAuthenticatedRequest('/api/hello?name=Bloop')
-      const data = await response.json()
-      setMessage(data.message)
-      setMessageType('success')
-    } catch (error) {
-      setMessage('Error connecting to backend')
-      setMessageType('error')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const checkHealth = async () => {
-    setLoading(true)
-    try {
-      const response = await makeAuthenticatedRequest('/api/health')
-      const data: ApiResponse<string> = await response.json()
-      setMessage(data.message || 'Health check completed')
-      setMessageType('success')
-    } catch (error) {
-      setMessage('Backend health check failed')
-      setMessageType('error')
-    } finally {
-      setLoading(false)
-    }
   }
 
   if (!authenticated) {
     return <LoginForm onSuccess={handleLogin} />
   }
 
-  if (currentPage === 'projects' || currentPage === 'users') {
-    return (
-      <div className="min-h-screen bg-background">
-        <div className="border-b">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="flex items-center justify-between h-16">
-              <div className="flex items-center space-x-6">
-                <h2 className="text-lg font-semibold">Bloop</h2>
-                <div className="flex items-center space-x-1">
-                  <Button
-                    variant={currentPage === 'projects' ? 'default' : 'ghost'}
-                    size="sm"
-                    onClick={() => setCurrentPage('projects')}
-                  >
-                    <FolderOpen className="mr-2 h-4 w-4" />
-                    Projects
-                  </Button>
-                  {currentUser?.is_admin && (
-                    <Button
-                      variant={currentPage === 'users' ? 'default' : 'ghost'}
-                      size="sm"
-                      onClick={() => setCurrentPage('users')}
-                    >
-                      <Users className="mr-2 h-4 w-4" />
-                      Users
-                    </Button>
-                  )}
-                </div>
-              </div>
-              <div className="flex items-center space-x-4">
-                <div className="text-sm text-muted-foreground">
-                  Welcome, {currentUser?.email}
-                </div>
-                <Button variant="ghost" onClick={() => setCurrentPage('home')}>
-                  <ArrowLeft className="mr-2 h-4 w-4" />
-                  Home
-                </Button>
-                <Button variant="ghost" onClick={handleLogout}>
-                  <LogOut className="mr-2 h-4 w-4" />
-                  Logout
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="max-w-7xl mx-auto p-6 sm:p-8">
-          {currentPage === 'projects' ? <ProjectsPage /> : <UsersPage />}
-        </div>
-      </div>
-    )
-  }
-
   return (
-    <div className="min-h-screen bg-gradient-to-br from-background to-muted/20">
-      <div className="container mx-auto px-4 py-12">
-        <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-12">
-            <div className="flex items-center justify-center mb-6">
-              <div className="rounded-full bg-primary/10 p-4">
-                <Heart className="h-8 w-8 text-primary" />
-              </div>
-            </div>
-            <h1 className="text-4xl font-bold tracking-tight mb-4">
-              Welcome to Bloop
-            </h1>
-            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
-              A modern full-stack monorepo built with Rust backend and React frontend.
-              Get started by exploring our features below.
-            </p>
-          </div>
-
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
-            <Card className="hover:shadow-md transition-shadow">
-              <CardHeader>
-                <div className="flex items-center">
-                  <div className="rounded-lg bg-blue-100 p-2 mr-3">
-                    <Heart className="h-5 w-5 text-blue-600" />
-                  </div>
-                  <CardTitle className="text-lg">API Test</CardTitle>
-                </div>
-                <CardDescription>
-                  Test the connection between frontend and backend
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Button 
-                  onClick={fetchHello} 
-                  disabled={loading}
-                  className="w-full"
-                  size="sm"
-                >
-                  <Heart className="mr-2 h-4 w-4" />
-                  Say Hello
-                </Button>
-              </CardContent>
-            </Card>
-
-            <Card className="hover:shadow-md transition-shadow">
-              <CardHeader>
-                <div className="flex items-center">
-                  <div className="rounded-lg bg-green-100 p-2 mr-3">
-                    <Activity className="h-5 w-5 text-green-600" />
-                  </div>
-                  <CardTitle className="text-lg">Health Check</CardTitle>
-                </div>
-                <CardDescription>
-                  Monitor the health status of your backend services
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Button 
-                  onClick={checkHealth} 
-                  variant="outline" 
-                  disabled={loading}
-                  className="w-full"
-                  size="sm"
-                >
-                  <Activity className="mr-2 h-4 w-4" />
-                  Check Health
-                </Button>
-              </CardContent>
-            </Card>
-
-            <Card className="hover:shadow-md transition-shadow">
-              <CardHeader>
-                <div className="flex items-center">
-                  <div className="rounded-lg bg-purple-100 p-2 mr-3">
-                    <FolderOpen className="h-5 w-5 text-purple-600" />
-                  </div>
-                  <CardTitle className="text-lg">Projects</CardTitle>
-                </div>
-                <CardDescription>
-                  Manage your projects with full CRUD operations
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Button 
-                  onClick={() => setCurrentPage('projects')}
-                  className="w-full"
-                  size="sm"
-                >
-                  <FolderOpen className="mr-2 h-4 w-4" />
-                  View Projects
-                </Button>
-              </CardContent>
-            </Card>
-
-            {currentUser?.is_admin && (
-              <Card className="hover:shadow-md transition-shadow">
-                <CardHeader>
-                  <div className="flex items-center">
-                    <div className="rounded-lg bg-orange-100 p-2 mr-3">
-                      <Users className="h-5 w-5 text-orange-600" />
-                    </div>
-                    <CardTitle className="text-lg">Users</CardTitle>
-                  </div>
-                  <CardDescription>
-                    Manage user accounts and permissions
-                  </CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <Button 
-                    onClick={() => setCurrentPage('users')}
-                    className="w-full"
-                    size="sm"
-                  >
-                    <Users className="mr-2 h-4 w-4" />
-                    Manage Users
-                  </Button>
-                </CardContent>
-              </Card>
-            )}
-
-            <Card className="hover:shadow-md transition-shadow">
-              <CardHeader>
-                <div className="flex items-center">
-                  <div className="rounded-lg bg-red-100 p-2 mr-3">
-                    <LogOut className="h-5 w-5 text-red-600" />
-                  </div>
-                  <CardTitle className="text-lg">Account</CardTitle>
-                </div>
-                <CardDescription>
-                  Logged in as {currentUser?.email}
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <Button 
-                  onClick={handleLogout}
-                  variant="outline"
-                  className="w-full"
-                  size="sm"
-                >
-                  <LogOut className="mr-2 h-4 w-4" />
-                  Logout
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
-
-          {message && (
-            <Alert variant={messageType === 'error' ? 'destructive' : 'default'} className="max-w-2xl mx-auto">
-              {messageType === 'error' ? (
-                <AlertCircle className="h-4 w-4" />
-              ) : (
-                <CheckCircle className="h-4 w-4" />
-              )}
-              <AlertDescription>
-                {message}
-              </AlertDescription>
-            </Alert>
-          )}
-
-          <div className="mt-12 text-center">
-            <p className="text-sm text-muted-foreground">
-              Built with ❤️ using Rust, React, TypeScript, and Tailwind CSS
-            </p>
-          </div>
-        </div>
+    <div className="min-h-screen bg-background">
+      {showNavbar && <Navbar onLogout={handleLogout} />}
+      <div className={showNavbar && location.pathname !== '/' ? "max-w-7xl mx-auto p-6 sm:p-8" : ""}>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/projects" element={<Projects />} />
+          <Route path="/projects/:projectId" element={<Projects />} />
+          <Route path="/users" element={<Users />} />
+        </Routes>
       </div>
     </div>
   )
 }
 
+function App() {
+  return (
+    <BrowserRouter>
+      <AppContent />
+    </BrowserRouter>
+  )
+}
+
 export default App

frontend/src/components/layout/navbar.tsx

@@ -0,0 +1,72 @@
+import { Link, useLocation } from 'react-router-dom'
+import { Button } from '@/components/ui/button'
+import { authStorage, logout } from '@/lib/auth'
+import { ArrowLeft, FolderOpen, Users, LogOut } from 'lucide-react'
+
+interface NavbarProps {
+  onLogout: () => void
+}
+
+export function Navbar({ onLogout }: NavbarProps) {
+  const location = useLocation()
+  const currentUser = authStorage.getUser()
+  const isHome = location.pathname === '/'
+
+  const handleLogout = () => {
+    logout()
+    onLogout()
+  }
+
+  return (
+    <div className="border-b">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center space-x-6">
+            <h2 className="text-lg font-semibold">Bloop</h2>
+            <div className="flex items-center space-x-1">
+              <Button
+                asChild
+                variant={location.pathname === '/projects' ? 'default' : 'ghost'}
+                size="sm"
+              >
+                <Link to="/projects">
+                  <FolderOpen className="mr-2 h-4 w-4" />
+                  Projects
+                </Link>
+              </Button>
+              {currentUser?.is_admin && (
+                <Button
+                  asChild
+                  variant={location.pathname === '/users' ? 'default' : 'ghost'}
+                  size="sm"
+                >
+                  <Link to="/users">
+                    <Users className="mr-2 h-4 w-4" />
+                    Users
+                  </Link>
+                </Button>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center space-x-4">
+            <div className="text-sm text-muted-foreground">
+              Welcome, {currentUser?.email}
+            </div>
+            {!isHome && (
+              <Button asChild variant="ghost">
+                <Link to="/">
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                  Home
+                </Link>
+              </Button>
+            )}
+            <Button variant="ghost" onClick={handleLogout}>
+              <LogOut className="mr-2 h-4 w-4" />
+              Logout
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/home.tsx

@@ -0,0 +1,242 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import { ApiResponse } from 'shared/types'
+import { authStorage, makeAuthenticatedRequest } from '@/lib/auth'
+import { Heart, Activity, FolderOpen, Users, CheckCircle, AlertCircle, Zap, Shield, Code } from 'lucide-react'
+
+export function HomePage() {
+  const [message, setMessage] = useState<string>('')
+  const [messageType, setMessageType] = useState<'success' | 'error'>('success')
+  const [loading, setLoading] = useState(false)
+  
+  const currentUser = authStorage.getUser()
+
+  const fetchHello = async () => {
+    setLoading(true)
+    try {
+      const response = await makeAuthenticatedRequest('/api/hello?name=Bloop')
+      const data = await response.json()
+      setMessage(data.message)
+      setMessageType('success')
+    } catch (error) {
+      setMessage('Error connecting to backend')
+      setMessageType('error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const checkHealth = async () => {
+    setLoading(true)
+    try {
+      const response = await makeAuthenticatedRequest('/api/health')
+      const data: ApiResponse<string> = await response.json()
+      setMessage(data.message || 'Health check completed')
+      setMessageType('success')
+    } catch (error) {
+      setMessage('Backend health check failed')
+      setMessageType('error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-background to-muted/20">
+      <div className="container mx-auto px-4 py-12">
+        <div className="max-w-6xl mx-auto">
+          {/* Hero Section */}
+          <div className="text-center mb-12">
+            <div className="flex items-center justify-center mb-6">
+              <div className="relative">
+                <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl"></div>
+                <div className="relative rounded-full bg-primary/10 p-4 border">
+                  <Heart className="h-8 w-8 text-primary" />
+                </div>
+              </div>
+            </div>
+            <Badge variant="secondary" className="mb-4">
+              <Zap className="mr-1 h-3 w-3" />
+              Mission Control Dashboard
+            </Badge>
+            <h1 className="text-4xl font-bold tracking-tight mb-4 bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text">
+              Welcome to Bloop
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
+              A modern full-stack monorepo built with Rust backend and React frontend.
+              Get started by exploring our features below.
+            </p>
+            <div className="flex items-center justify-center gap-4">
+              <Badge variant="outline" className="text-xs">
+                <Shield className="mr-1 h-3 w-3" />
+                Secure
+              </Badge>
+              <Badge variant="outline" className="text-xs">
+                <Code className="mr-1 h-3 w-3" />
+                Type-Safe
+              </Badge>
+              <Badge variant="outline" className="text-xs">
+                <Activity className="mr-1 h-3 w-3" />
+                Real-time
+              </Badge>
+            </div>
+          </div>
+
+          {/* Feature Cards */}
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
+            <Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted">
+              <CardHeader className="pb-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <div className="rounded-lg bg-primary/10 p-2 mr-3 group-hover:bg-primary/20 transition-colors">
+                      <Heart className="h-5 w-5 text-primary" />
+                    </div>
+                    <CardTitle className="text-lg">API Test</CardTitle>
+                  </div>
+                  <Badge variant="secondary" className="text-xs">Test</Badge>
+                </div>
+                <CardDescription>
+                  Test the connection between frontend and backend
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button 
+                  onClick={fetchHello} 
+                  disabled={loading}
+                  className="w-full group-hover:shadow-sm transition-shadow"
+                  size="sm"
+                >
+                  <Heart className="mr-2 h-4 w-4" />
+                  {loading ? 'Testing...' : 'Say Hello'}
+                </Button>
+              </CardContent>
+            </Card>
+
+            <Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted">
+              <CardHeader className="pb-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <div className="rounded-lg bg-emerald-500/10 p-2 mr-3 group-hover:bg-emerald-500/20 transition-colors">
+                      <Activity className="h-5 w-5 text-emerald-600" />
+                    </div>
+                    <CardTitle className="text-lg">Health Check</CardTitle>
+                  </div>
+                  <Badge variant="secondary" className="text-xs">Monitor</Badge>
+                </div>
+                <CardDescription>
+                  Monitor the health status of your backend services
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button 
+                  onClick={checkHealth} 
+                  variant="outline" 
+                  disabled={loading}
+                  className="w-full group-hover:shadow-sm transition-shadow"
+                  size="sm"
+                >
+                  <Activity className="mr-2 h-4 w-4" />
+                  {loading ? 'Checking...' : 'Check Health'}
+                </Button>
+              </CardContent>
+            </Card>
+
+            <Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted">
+              <CardHeader className="pb-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <div className="rounded-lg bg-violet-500/10 p-2 mr-3 group-hover:bg-violet-500/20 transition-colors">
+                      <FolderOpen className="h-5 w-5 text-violet-600" />
+                    </div>
+                    <CardTitle className="text-lg">Projects</CardTitle>
+                  </div>
+                  <Badge variant="secondary" className="text-xs">CRUD</Badge>
+                </div>
+                <CardDescription>
+                  Manage your projects with full CRUD operations
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button asChild className="w-full group-hover:shadow-sm transition-shadow" size="sm">
+                  <Link to="/projects">
+                    <FolderOpen className="mr-2 h-4 w-4" />
+                    View Projects
+                  </Link>
+                </Button>
+              </CardContent>
+            </Card>
+
+            {currentUser?.is_admin && (
+              <Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted lg:col-span-2">
+                <CardHeader className="pb-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center">
+                      <div className="rounded-lg bg-amber-500/10 p-2 mr-3 group-hover:bg-amber-500/20 transition-colors">
+                        <Users className="h-5 w-5 text-amber-600" />
+                      </div>
+                      <div>
+                        <CardTitle className="text-lg flex items-center gap-2">
+                          Users
+                          <Badge variant="outline" className="text-xs">
+                            <Shield className="mr-1 h-3 w-3" />
+                            Admin Only
+                          </Badge>
+                        </CardTitle>
+                        <CardDescription className="mt-1">
+                          Manage user accounts and permissions
+                        </CardDescription>
+                      </div>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <Button asChild className="group-hover:shadow-sm transition-shadow" size="sm">
+                    <Link to="/users">
+                      <Users className="mr-2 h-4 w-4" />
+                      Manage Users
+                    </Link>
+                  </Button>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+
+          {/* Status Alert */}
+          {message && (
+            <div className="max-w-2xl mx-auto mb-8">
+              <Alert variant={messageType === 'error' ? 'destructive' : 'default'} className="border-muted/50">
+                {messageType === 'error' ? (
+                  <AlertCircle className="h-4 w-4" />
+                ) : (
+                  <CheckCircle className="h-4 w-4" />
+                )}
+                <AlertDescription className="font-medium">
+                  {message}
+                </AlertDescription>
+              </Alert>
+            </div>
+          )}
+
+          {/* Footer */}
+          <Separator className="my-12 max-w-2xl mx-auto" />
+          <div className="text-center">
+            <p className="text-sm text-muted-foreground mb-2">
+              Built with ❤️ using modern technologies
+            </p>
+            <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
+              <Badge variant="outline" className="text-xs">Rust</Badge>
+              <Badge variant="outline" className="text-xs">React</Badge>
+              <Badge variant="outline" className="text-xs">TypeScript</Badge>
+              <Badge variant="outline" className="text-xs">Tailwind CSS</Badge>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/projects.tsx

@@ -0,0 +1,23 @@
+import { useParams, useNavigate } from 'react-router-dom'
+import { ProjectList } from '@/components/projects/project-list'
+import { ProjectDetail } from '@/components/projects/project-detail'
+
+export function Projects() {
+  const { projectId } = useParams<{ projectId: string }>()
+  const navigate = useNavigate()
+
+  const handleBack = () => {
+    navigate('/projects')
+  }
+
+  if (projectId) {
+    return (
+      <ProjectDetail
+        projectId={projectId}
+        onBack={handleBack}
+      />
+    )
+  }
+
+  return <ProjectList />
+}

frontend/src/pages/users.tsx

@@ -0,0 +1,188 @@
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { User, ApiResponse } from 'shared/types'
+import { UserForm } from '@/components/users/user-form'
+import { makeAuthenticatedRequest, authStorage } from '@/lib/auth'
+import { Plus, Edit, Trash2, Calendar, AlertCircle, Loader2, Shield, User as UserIcon } from 'lucide-react'
+
+export function Users() {
+  const [users, setUsers] = useState<User[]>([])
+  const [loading, setLoading] = useState(false)
+  const [showForm, setShowForm] = useState(false)
+  const [editingUser, setEditingUser] = useState<User | null>(null)
+  const [error, setError] = useState('')
+  const currentUser = authStorage.getUser()
+
+  const fetchUsers = async () => {
+    setLoading(true)
+    setError('')
+    try {
+      const response = await makeAuthenticatedRequest('/api/users')
+      const data: ApiResponse<User[]> = await response.json()
+      if (data.success && data.data) {
+        setUsers(data.data)
+      } else {
+        setError('Failed to load users')
+      }
+    } catch (error) {
+      console.error('Failed to fetch users:', error)
+      setError('Failed to connect to server')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDelete = async (id: string, email: string) => {
+    if (!confirm(`Are you sure you want to delete user "${email}"? This action cannot be undone.`)) return
+
+    try {
+      const response = await makeAuthenticatedRequest(`/api/users/${id}`, {
+        method: 'DELETE',
+      })
+      if (response.ok) {
+        fetchUsers()
+      } else if (response.status === 403) {
+        setError('You cannot delete this user')
+      } else {
+        setError('Failed to delete user')
+      }
+    } catch (error) {
+      console.error('Failed to delete user:', error)
+      setError('Failed to delete user')
+    }
+  }
+
+  const handleEdit = (user: User) => {
+    setEditingUser(user)
+    setShowForm(true)
+  }
+
+  const handleFormSuccess = () => {
+    setShowForm(false)
+    setEditingUser(null)
+    fetchUsers()
+  }
+
+  useEffect(() => {
+    fetchUsers()
+  }, [])
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Users</h1>
+          <p className="text-muted-foreground">
+            Manage user accounts and permissions
+          </p>
+        </div>
+        {currentUser?.is_admin && (
+          <Button onClick={() => setShowForm(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add User
+          </Button>
+        )}
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            {error}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          Loading users...
+        </div>
+      ) : users.length === 0 ? (
+        <Card>
+          <CardContent className="py-12 text-center">
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-muted">
+              <UserIcon className="h-6 w-6" />
+            </div>
+            <h3 className="mt-4 text-lg font-semibold">No users found</h3>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Get started by creating the first user account.
+            </p>
+            {currentUser?.is_admin && (
+              <Button
+                className="mt-4"
+                onClick={() => setShowForm(true)}
+              >
+                <Plus className="mr-2 h-4 w-4" />
+                Add your first user
+              </Button>
+            )}
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {users.map((user) => (
+            <Card key={user.id} className="hover:shadow-md transition-shadow">
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between">
+                  <CardTitle className="text-lg flex items-center">
+                    {user.is_admin ? (
+                      <Shield className="mr-2 h-4 w-4 text-orange-500" />
+                    ) : (
+                      <UserIcon className="mr-2 h-4 w-4 text-blue-500" />
+                    )}
+                    {user.email}
+                  </CardTitle>
+                  <Badge variant={user.is_admin ? "default" : "secondary"}>
+                    {user.is_admin ? "Admin" : "User"}
+                  </Badge>
+                </div>
+                <CardDescription className="flex items-center">
+                  <Calendar className="mr-1 h-3 w-3" />
+                  Joined {new Date(user.created_at).toLocaleDateString()}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleEdit(user)}
+                    className="h-8"
+                  >
+                    <Edit className="mr-1 h-3 w-3" />
+                    Edit
+                  </Button>
+                  {currentUser?.is_admin && currentUser.id !== user.id && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleDelete(user.id, user.email)}
+                      className="h-8 text-red-600 hover:text-red-700 hover:bg-red-50"
+                    >
+                      <Trash2 className="mr-1 h-3 w-3" />
+                      Delete
+                    </Button>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      <UserForm
+        open={showForm}
+        onClose={() => {
+          setShowForm(false)
+          setEditingUser(null)
+        }}
+        onSuccess={handleFormSuccess}
+        user={editingUser}
+      />
+    </div>
+  )
+}