121 lines
2.7 KiB
TypeScript
121 lines
2.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import DashboardHeader from './dashboard-header';
|
||
|
|
import StatsOverview from './stats-overview';
|
||
|
|
import ProjectGrid from './project-grid';
|
||
|
|
import { Project } from '@/types/project';
|
||
|
|
|
||
|
|
// Tipos
|
||
|
|
type ProjectStatus = 'en_progreso' | 'planificacion' | 'completado' | 'revision';
|
||
|
|
|
||
|
|
// Datos mock (luego esto vendrá de Dolibarr)
|
||
|
|
const mockProjects: Project[] = [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
name: "Rediseño Web Corporativa",
|
||
|
|
client: "Tech Solutions SA",
|
||
|
|
status: "en_progreso",
|
||
|
|
progress: 65,
|
||
|
|
budget: 45000,
|
||
|
|
spent: 29250,
|
||
|
|
startDate: "2024-10-15",
|
||
|
|
endDate: "2024-12-30",
|
||
|
|
team: 4,
|
||
|
|
avatar: "TS"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
name: "App Móvil E-commerce",
|
||
|
|
client: "Fashion Store",
|
||
|
|
status: "en_progreso",
|
||
|
|
progress: 40,
|
||
|
|
budget: 80000,
|
||
|
|
spent: 32000,
|
||
|
|
startDate: "2024-11-01",
|
||
|
|
endDate: "2025-02-28",
|
||
|
|
team: 6,
|
||
|
|
avatar: "FS"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
name: "Sistema CRM Interno",
|
||
|
|
client: "Industrial Corp",
|
||
|
|
status: "planificacion",
|
||
|
|
progress: 10,
|
||
|
|
budget: 120000,
|
||
|
|
spent: 12000,
|
||
|
|
startDate: "2024-12-01",
|
||
|
|
endDate: "2025-05-30",
|
||
|
|
team: 8,
|
||
|
|
avatar: "IC"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
name: "Dashboard Analytics",
|
||
|
|
client: "Data Insights",
|
||
|
|
status: "completado",
|
||
|
|
progress: 100,
|
||
|
|
budget: 35000,
|
||
|
|
spent: 33500,
|
||
|
|
startDate: "2024-08-01",
|
||
|
|
endDate: "2024-11-15",
|
||
|
|
team: 3,
|
||
|
|
avatar: "DI"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 5,
|
||
|
|
name: "Migración Cloud AWS",
|
||
|
|
client: "StartUp Innovate",
|
||
|
|
status: "en_progreso",
|
||
|
|
progress: 75,
|
||
|
|
budget: 95000,
|
||
|
|
spent: 71250,
|
||
|
|
startDate: "2024-09-15",
|
||
|
|
endDate: "2024-12-20",
|
||
|
|
team: 5,
|
||
|
|
avatar: "SI"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 6,
|
||
|
|
name: "Portal de Clientes",
|
||
|
|
client: "Services Group",
|
||
|
|
status: "revision",
|
||
|
|
progress: 90,
|
||
|
|
budget: 52000,
|
||
|
|
spent: 48880,
|
||
|
|
startDate: "2024-10-01",
|
||
|
|
endDate: "2024-12-10",
|
||
|
|
team: 4,
|
||
|
|
avatar: "SG"
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function ProjectDashboard() {
|
||
|
|
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
|
||
|
|
const [searchTerm, setSearchTerm] = useState('');
|
||
|
|
|
||
|
|
const filteredProjects = mockProjects.filter(project =>
|
||
|
|
project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
|
|
project.client.toLowerCase().includes(searchTerm.toLowerCase())
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
|
||
|
|
<DashboardHeader
|
||
|
|
searchTerm={searchTerm}
|
||
|
|
onSearchChange={setSearchTerm}
|
||
|
|
viewMode={viewMode}
|
||
|
|
onViewModeChange={setViewMode}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
|
|
<StatsOverview projects={mockProjects} />
|
||
|
|
<ProjectGrid projects={filteredProjects} viewMode={viewMode} />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|