81 lines
3.3 KiB
TypeScript
81 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { Calendar, DollarSign, Users, TrendingUp } from 'lucide-react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Project, STATUS_CONFIG } from '@/types/project';
|
|
|
|
interface ProjectCardProps {
|
|
project: Project;
|
|
}
|
|
|
|
export default function ProjectCard({ project }: ProjectCardProps) {
|
|
return (
|
|
<Card className="border-gray-200 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="w-12 h-12">
|
|
<AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white font-semibold">
|
|
{project.avatar}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<CardTitle className="text-lg text-gray-900">{project.name}</CardTitle>
|
|
<CardDescription className="text-sm">{project.client}</CardDescription>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Badge variant="outline" className={`mt-3 ${STATUS_CONFIG[project.status].color} border`}>
|
|
{STATUS_CONFIG[project.status].label}
|
|
</Badge>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{/* Progress Bar */}
|
|
<div className="mb-4">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-xs font-medium text-gray-600">Progreso</span>
|
|
<span className="text-xs font-semibold text-gray-900">{project.progress}%</span>
|
|
</div>
|
|
<div className="w-full bg-gray-200 rounded-full h-2">
|
|
<div
|
|
className="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full transition-all duration-500"
|
|
style={{ width: `${project.progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Budget Info */}
|
|
<div className="grid grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<div className="flex items-center gap-1 text-gray-500 mb-1">
|
|
<DollarSign className="w-3 h-3" />
|
|
<span className="text-xs">Presupuesto</span>
|
|
</div>
|
|
<p className="text-sm font-semibold text-gray-900">€{(project.budget / 1000).toFixed(0)}k</p>
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-1 text-gray-500 mb-1">
|
|
<TrendingUp className="w-3 h-3" />
|
|
<span className="text-xs">Gastado</span>
|
|
</div>
|
|
<p className="text-sm font-semibold text-gray-900">€{(project.spent / 1000).toFixed(0)}k</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Info */}
|
|
<div className="pt-4 border-t border-gray-100 flex items-center justify-between">
|
|
<div className="flex items-center gap-1 text-gray-500">
|
|
<Users className="w-4 h-4" />
|
|
<span className="text-xs">{project.team} miembros</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-gray-500">
|
|
<Calendar className="w-4 h-4" />
|
|
<span className="text-xs">{new Date(project.endDate).toLocaleDateString('es-ES')}</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |