96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { Plus, Loader2 } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { useProjects } from '@/lib/hooks/use-projects';
|
|
import { CreateProjectDialog } from '@/components/features/projects/CreateProjectDialog';
|
|
|
|
export default function ProjectsPage() {
|
|
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
|
const { data: projects, isLoading, error } = useProjects();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex h-[50vh] items-center justify-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex h-[50vh] items-center justify-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
Failed to load projects. Please try again later.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Projects</h1>
|
|
<p className="text-muted-foreground">
|
|
Manage your projects and track progress
|
|
</p>
|
|
</div>
|
|
<Button onClick={() => setIsCreateDialogOpen(true)}>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
New Project
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{projects?.map((project) => (
|
|
<Link key={project.id} href={`/projects/${project.id}`}>
|
|
<Card className="transition-colors hover:bg-accent">
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div className="space-y-1">
|
|
<CardTitle>{project.name}</CardTitle>
|
|
<CardDescription>{project.key}</CardDescription>
|
|
</div>
|
|
<span
|
|
className={`rounded-full px-2 py-1 text-xs font-medium ${
|
|
project.status === 'Active'
|
|
? 'bg-green-100 text-green-700'
|
|
: 'bg-gray-100 text-gray-700'
|
|
}`}
|
|
>
|
|
{project.status}
|
|
</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="line-clamp-2 text-sm text-muted-foreground">
|
|
{project.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
|
|
{!projects || projects.length === 0 ? (
|
|
<Card className="col-span-full">
|
|
<CardContent className="flex h-40 items-center justify-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
No projects yet. Create your first project to get started.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
</div>
|
|
|
|
<CreateProjectDialog
|
|
open={isCreateDialogOpen}
|
|
onOpenChange={setIsCreateDialogOpen}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|