109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { FolderKanban, Plus } 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';
|
|
|
|
export default function DashboardPage() {
|
|
const { data: projects } = useProjects();
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
|
|
<p className="text-muted-foreground">
|
|
Welcome to ColaFlow - Your AI-powered project management system
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Projects</CardTitle>
|
|
<FolderKanban className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{projects?.length || 0}</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Active projects in your workspace
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Active Projects</CardTitle>
|
|
<FolderKanban className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">
|
|
{projects?.filter((p) => p.status === 'Active').length || 0}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Currently in progress
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Quick Actions</CardTitle>
|
|
<Plus className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Link href="/projects">
|
|
<Button className="w-full" variant="outline">
|
|
View All Projects
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Recent Projects</CardTitle>
|
|
<CardDescription>
|
|
Your most recently updated projects
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{projects && projects.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{projects.slice(0, 5).map((project) => (
|
|
<Link
|
|
key={project.id}
|
|
href={`/projects/${project.id}`}
|
|
className="block rounded-lg border p-3 transition-colors hover:bg-accent"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="font-medium">{project.name}</h3>
|
|
<p className="text-sm text-muted-foreground">{project.key}</p>
|
|
</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>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">
|
|
No projects yet. Create your first project to get started.
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|