daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Edit tasks

Browse Source
This commit is contained in:
Louis Knight-Webb
2025-06-14 19:10:28 -04:00
parent 0041f5e92a
commit b0c8470099
1 changed files with 67 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
frontend/src/pages/home.tsx
View File

@@ -1,37 +1,53 @@
import { useState } from 'react' import { useState } from "react";
import { Link } from 'react-router-dom' import { Link } from "react-router-dom";
import { Button } from '@/components/ui/button' import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import {
import { Alert, AlertDescription } from '@/components/ui/alert' Card,
import { Badge } from '@/components/ui/badge' CardContent,
import { Separator } from '@/components/ui/separator' CardDescription,
import { ApiResponse } from 'shared/types' CardHeader,
import { authStorage, makeAuthenticatedRequest } from '@/lib/auth' CardTitle,
import { Heart, Activity, FolderOpen, Users, CheckCircle, AlertCircle, Zap, Shield, Code } from 'lucide-react' } 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() { export function HomePage() {
const [message, setMessage] = useState<string>('') const [message, setMessage] = useState<string>("");
const [messageType, setMessageType] = useState<'success' | 'error'>('success') const [messageType, setMessageType] = useState<"success" | "error">(
const [loading, setLoading] = useState(false) "success"
);
const currentUser = authStorage.getUser() const [loading, setLoading] = useState(false);
const currentUser = authStorage.getUser();
const checkHealth = async () => { const checkHealth = async () => {
setLoading(true) setLoading(true);
try { try {
const response = await makeAuthenticatedRequest('/api/health') const response = await makeAuthenticatedRequest("/api/health");
const data: ApiResponse<string> = await response.json() const data: ApiResponse<string> = await response.json();
setMessage(data.message || 'Health check completed') setMessage(data.message || "Health check completed");
setMessageType('success') setMessageType("success");
} catch (error) { } catch (error) {
setMessage('Backend health check failed') setMessage("Backend health check failed");
setMessageType('error') setMessageType("error");
} finally { } finally {
setLoading(false) setLoading(false);
} }
} };
return ( return (
<div className="min-h-screen bg-gradient-to-br from-background to-muted/20"> <div className="min-h-screen bg-gradient-to-br from-background to-muted/20">
@@ -54,30 +70,10 @@ export function HomePage() {
<h1 className="text-4xl font-bold tracking-tight mb-4 bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text"> <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 Welcome to Bloop
</h1> </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> </div>
{/* Feature Cards */} {/* Feature Cards */}
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8"> <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"> <Card className="group hover:shadow-lg transition-all duration-200 border-muted/50 hover:border-muted">
<CardHeader className="pb-4"> <CardHeader className="pb-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -87,22 +83,24 @@ export function HomePage() {
</div> </div>
<CardTitle className="text-lg">Health Check</CardTitle> <CardTitle className="text-lg">Health Check</CardTitle>
</div> </div>
<Badge variant="secondary" className="text-xs">Monitor</Badge> <Badge variant="secondary" className="text-xs">
Monitor
</Badge>
</div> </div>
<CardDescription> <CardDescription>
Monitor the health status of your backend services Monitor the health status of your backend services
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Button <Button
onClick={checkHealth} onClick={checkHealth}
variant="outline" variant="outline"
disabled={loading} disabled={loading}
className="w-full group-hover:shadow-sm transition-shadow" className="w-full group-hover:shadow-sm transition-shadow"
size="sm" size="sm"
> >
<Activity className="mr-2 h-4 w-4" /> <Activity className="mr-2 h-4 w-4" />
{loading ? 'Checking...' : 'Check Health'} {loading ? "Checking..." : "Check Health"}
</Button> </Button>
</CardContent> </CardContent>
</Card> </Card>
@@ -116,14 +114,20 @@ export function HomePage() {
</div> </div>
<CardTitle className="text-lg">Projects</CardTitle> <CardTitle className="text-lg">Projects</CardTitle>
</div> </div>
<Badge variant="secondary" className="text-xs">CRUD</Badge> <Badge variant="secondary" className="text-xs">
CRUD
</Badge>
</div> </div>
<CardDescription> <CardDescription>
Manage your projects with full CRUD operations Manage your projects with full CRUD operations
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Button asChild className="w-full group-hover:shadow-sm transition-shadow" size="sm"> <Button
asChild
className="w-full group-hover:shadow-sm transition-shadow"
size="sm"
>
<Link to="/projects"> <Link to="/projects">
<FolderOpen className="mr-2 h-4 w-4" /> <FolderOpen className="mr-2 h-4 w-4" />
View Projects View Projects
@@ -156,7 +160,11 @@ export function HomePage() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Button asChild className="group-hover:shadow-sm transition-shadow" size="sm"> <Button
asChild
className="group-hover:shadow-sm transition-shadow"
size="sm"
>
<Link to="/users"> <Link to="/users">
<Users className="mr-2 h-4 w-4" /> <Users className="mr-2 h-4 w-4" />
Manage Users Manage Users
@@ -170,8 +178,11 @@ export function HomePage() {
{/* Status Alert */} {/* Status Alert */}
{message && ( {message && (
<div className="max-w-2xl mx-auto mb-8"> <div className="max-w-2xl mx-auto mb-8">
<Alert variant={messageType === 'error' ? 'destructive' : 'default'} className="border-muted/50"> <Alert
{messageType === 'error' ? ( variant={messageType === "error" ? "destructive" : "default"}
className="border-muted/50"
>
{messageType === "error" ? (
<AlertCircle className="h-4 w-4" /> <AlertCircle className="h-4 w-4" />
) : ( ) : (
<CheckCircle className="h-4 w-4" /> <CheckCircle className="h-4 w-4" />
@@ -182,22 +193,8 @@ export function HomePage() {
</Alert> </Alert>
</div> </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> </div>
</div> </div>
) );
} }