243 lines
10 KiB
TypeScript
243 lines
10 KiB
TypeScript
|
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>
|
|||
|
|
)
|
|||
|
|
}
|