40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import { useNavigate } from 'react-router-dom';
|
|
import { useContracts } from '@/hooks/useContracts';
|
|
import { ServiceObject } from '@/components/ui/ServiceObject';
|
|
import { Card, CardContent } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Loader } from '@/components/ui/Loader';
|
|
import { EmptyState } from '@/components/ui/EmptyState';
|
|
|
|
export default function ServicesWidget() {
|
|
const { contracts, isLoading, error } = useContracts();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<Card>
|
|
<CardContent className="p-6 flex flex-col h-full">
|
|
|
|
<div className="mb-4">
|
|
<h2 className="text-lg font-semibold text-slate-900">Vos services gérés</h2>
|
|
<p className="text-sm text-slate-500">Catalogue des contrats d'infogérance actifs</p>
|
|
</div>
|
|
|
|
<div className="flex-1 mb-6 space-y-3">
|
|
{error && <EmptyState message={error} className="text-red-500" />}
|
|
{isLoading && !error && <Loader />}
|
|
{!isLoading && !error && contracts.length === 0 && (
|
|
<EmptyState message="Aucun contrat actif détecté." />
|
|
)}
|
|
{!isLoading && !error && contracts.map((contract) => (
|
|
<ServiceObject key={contract.id} contract={contract} />
|
|
))}
|
|
</div>
|
|
|
|
<Button className ="text-green-600" size="lg" onClick={() => navigate('/evolution-infrastructure')}>
|
|
Mise à niveau du Parc
|
|
</Button>
|
|
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |