Initial commit

app/(main)/chantiers/planifies/page.tsx

@@ -0,0 +1,376 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { Card } from 'primereact/card';
+import { Toast } from 'primereact/toast';
+import { Toolbar } from 'primereact/toolbar';
+import { Tag } from 'primereact/tag';
+import { Dialog } from 'primereact/dialog';
+import { Calendar } from 'primereact/calendar';
+import { chantierService } from '../../../../services/api';
+import { formatDate, formatCurrency } from '../../../../utils/formatters';
+import type { Chantier } from '../../../../types/btp';
+
+const ChantiersPlanifiesPage = () => {
+    const [chantiers, setChantiers] = useState<Chantier[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [selectedChantiers, setSelectedChantiers] = useState<Chantier[]>([]);
+    const [startDialog, setStartDialog] = useState(false);
+    const [selectedChantier, setSelectedChantier] = useState<Chantier | null>(null);
+    const [startDate, setStartDate] = useState<Date>(new Date());
+    const toast = useRef<Toast>(null);
+    const dt = useRef<DataTable<Chantier[]>>(null);
+
+    useEffect(() => {
+        loadChantiers();
+    }, []);
+
+    const loadChantiers = async () => {
+        try {
+            setLoading(true);
+            const data = await chantierService.getAll();
+            // Filtrer seulement les chantiers planifiés
+            const chantiersPlanifies = data.filter(chantier => chantier.statut === 'PLANIFIE');
+            setChantiers(chantiersPlanifies);
+        } catch (error) {
+            console.error('Erreur lors du chargement des chantiers:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de charger les chantiers planifiés',
+                life: 3000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const getDaysUntilStart = (dateDebut: string | Date) => {
+        const today = new Date();
+        const start = new Date(dateDebut);
+        const diffTime = start.getTime() - today.getTime();
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        return diffDays;
+    };
+
+    const isStartingSoon = (dateDebut: string | Date) => {
+        const days = getDaysUntilStart(dateDebut);
+        return days >= 0 && days <= 7; // Dans les 7 prochains jours
+    };
+
+    const isOverdue = (dateDebut: string | Date) => {
+        const days = getDaysUntilStart(dateDebut);
+        return days < 0; // Date de début dépassée
+    };
+
+    const startChantier = (chantier: Chantier) => {
+        setSelectedChantier(chantier);
+        setStartDate(new Date());
+        setStartDialog(true);
+    };
+
+    const handleStartChantier = async () => {
+        if (!selectedChantier) return;
+
+        try {
+            const updatedChantier = {
+                ...selectedChantier,
+                statut: 'EN_COURS',
+                dateDebut: startDate
+            };
+
+            await chantierService.update(selectedChantier.id, updatedChantier);
+            
+            // Retirer le chantier de la liste car il n'est plus "planifié"
+            setChantiers(prev => prev.filter(c => c.id !== selectedChantier.id));
+            setStartDialog(false);
+            
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: 'Chantier démarré avec succès',
+                life: 3000
+            });
+        } catch (error) {
+            console.error('Erreur lors du démarrage:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de démarrer le chantier',
+                life: 3000
+            });
+        }
+    };
+
+    const exportCSV = () => {
+        dt.current?.exportCSV();
+    };
+
+    const bulkStart = async () => {
+        if (selectedChantiers.length === 0) {
+            toast.current?.show({
+                severity: 'warn',
+                summary: 'Attention',
+                detail: 'Veuillez sélectionner au moins un chantier',
+                life: 3000
+            });
+            return;
+        }
+
+        try {
+            await Promise.all(
+                selectedChantiers.map(chantier => 
+                    chantierService.update(chantier.id, {
+                        ...chantier,
+                        statut: 'EN_COURS',
+                        dateDebut: new Date()
+                    })
+                )
+            );
+
+            setChantiers(prev => prev.filter(c => !selectedChantiers.includes(c)));
+            setSelectedChantiers([]);
+            
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: `${selectedChantiers.length} chantier(s) démarré(s)`,
+                life: 3000
+            });
+        } catch (error) {
+            console.error('Erreur lors du démarrage en lot:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de démarrer les chantiers sélectionnés',
+                life: 3000
+            });
+        }
+    };
+
+    const leftToolbarTemplate = () => {
+        return (
+            <div className="my-2 flex gap-2">
+                <h5 className="m-0 flex align-items-center">Chantiers planifiés ({chantiers.length})</h5>
+                <Button 
+                    label="Démarrer sélection" 
+                    icon="pi pi-play" 
+                    severity="success" 
+                    size="small"
+                    onClick={bulkStart}
+                    disabled={selectedChantiers.length === 0}
+                />
+            </div>
+        );
+    };
+
+    const rightToolbarTemplate = () => {
+        return (
+            <Button 
+                label="Exporter" 
+                icon="pi pi-upload" 
+                severity="help" 
+                onClick={exportCSV} 
+            />
+        );
+    };
+
+    const actionBodyTemplate = (rowData: Chantier) => {
+        return (
+            <div className="flex gap-2">
+                <Button 
+                    icon="pi pi-play" 
+                    rounded 
+                    severity="success" 
+                    size="small"
+                    tooltip="Démarrer le chantier"
+                    onClick={() => startChantier(rowData)}
+                />
+                <Button 
+                    icon="pi pi-eye" 
+                    rounded 
+                    severity="info" 
+                    size="small"
+                    tooltip="Voir détails"
+                    onClick={() => {
+                        toast.current?.show({
+                            severity: 'info',
+                            summary: 'Info',
+                            detail: `Détails du chantier ${rowData.nom}`,
+                            life: 3000
+                        });
+                    }}
+                />
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Chantier) => {
+        const overdue = isOverdue(rowData.dateDebut);
+        const startingSoon = isStartingSoon(rowData.dateDebut);
+        
+        return (
+            <div className="flex align-items-center gap-2">
+                <Tag value="Planifié" severity="info" />
+                {overdue && <Tag value="En retard" severity="danger" />}
+                {startingSoon && !overdue && <Tag value="Bientôt" severity="warning" />}
+            </div>
+        );
+    };
+
+    const dateDebutBodyTemplate = (rowData: Chantier) => {
+        const overdue = isOverdue(rowData.dateDebut);
+        const startingSoon = isStartingSoon(rowData.dateDebut);
+        const days = getDaysUntilStart(rowData.dateDebut);
+        
+        let className = '';
+        let icon = '';
+        let suffix = '';
+        
+        if (overdue) {
+            className = 'text-red-500 font-bold';
+            icon = 'pi pi-exclamation-triangle';
+            suffix = ` (${Math.abs(days)} jour${Math.abs(days) > 1 ? 's' : ''} de retard)`;
+        } else if (startingSoon) {
+            className = 'text-orange-500 font-bold';
+            icon = 'pi pi-clock';
+            suffix = ` (dans ${days} jour${days > 1 ? 's' : ''})`;
+        } else if (days > 0) {
+            suffix = ` (dans ${days} jour${days > 1 ? 's' : ''})`;
+        }
+        
+        return (
+            <div className={className}>
+                {icon && <i className={`${icon} mr-1`}></i>}
+                {formatDate(rowData.dateDebut)}
+                <small className="block text-600">{suffix}</small>
+            </div>
+        );
+    };
+
+    const clientBodyTemplate = (rowData: Chantier) => {
+        if (!rowData.client) return '';
+        return `${rowData.client.prenom} ${rowData.client.nom}`;
+    };
+
+    const durationBodyTemplate = (rowData: Chantier) => {
+        if (!rowData.dateDebut || !rowData.dateFinPrevue) return '';
+        
+        const start = new Date(rowData.dateDebut);
+        const end = new Date(rowData.dateFinPrevue);
+        const diffTime = end.getTime() - start.getTime();
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        
+        return `${diffDays} jour${diffDays > 1 ? 's' : ''}`;
+    };
+
+    const header = (
+        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+            <h5 className="m-0">Chantiers en attente de démarrage</h5>
+            <span className="block mt-2 md:mt-0 p-input-icon-left">
+                <i className="pi pi-search" />
+                <InputText 
+                    type="search" 
+                    placeholder="Rechercher..." 
+                    onInput={(e) => setGlobalFilter(e.currentTarget.value)} 
+                />
+            </span>
+        </div>
+    );
+
+    const startDialogFooter = (
+        <>
+            <Button 
+                label="Annuler" 
+                icon="pi pi-times" 
+                text 
+                onClick={() => setStartDialog(false)} 
+            />
+            <Button 
+                label="Démarrer" 
+                icon="pi pi-play" 
+                text 
+                onClick={handleStartChantier} 
+            />
+        </>
+    );
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                <Card>
+                    <Toast ref={toast} />
+                    <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
+
+                    <DataTable
+                        ref={dt}
+                        value={chantiers}
+                        selection={selectedChantiers}
+                        onSelectionChange={(e) => setSelectedChantiers(e.value)}
+                        dataKey="id"
+                        paginator
+                        rows={10}
+                        rowsPerPageOptions={[5, 10, 25]}
+                        className="datatable-responsive"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} chantiers"
+                        globalFilter={globalFilter}
+                        emptyMessage="Aucun chantier planifié trouvé."
+                        header={header}
+                        responsiveLayout="scroll"
+                        loading={loading}
+                        sortField="dateDebut"
+                        sortOrder={1}
+                    >
+                        <Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
+                        <Column field="nom" header="Nom" sortable headerStyle={{ minWidth: '12rem' }} />
+                        <Column field="client" header="Client" body={clientBodyTemplate} sortable headerStyle={{ minWidth: '12rem' }} />
+                        <Column field="adresse" header="Adresse" sortable headerStyle={{ minWidth: '12rem' }} />
+                        <Column field="dateDebut" header="Date de début prévue" body={dateDebutBodyTemplate} sortable headerStyle={{ minWidth: '14rem' }} />
+                        <Column field="dateFinPrevue" header="Date de fin prévue" body={(rowData) => formatDate(rowData.dateFinPrevue)} sortable headerStyle={{ minWidth: '10rem' }} />
+                        <Column field="duration" header="Durée" body={durationBodyTemplate} headerStyle={{ minWidth: '8rem' }} />
+                        <Column field="statut" header="Statut" body={statusBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
+                        <Column field="montantPrevu" header="Budget prévu" body={(rowData) => formatCurrency(rowData.montantPrevu)} sortable headerStyle={{ minWidth: '10rem' }} />
+                        <Column body={actionBodyTemplate} headerStyle={{ minWidth: '8rem' }} />
+                    </DataTable>
+
+                    <Dialog 
+                        visible={startDialog} 
+                        style={{ width: '450px' }} 
+                        header="Démarrer le chantier" 
+                        modal 
+                        className="p-fluid" 
+                        footer={startDialogFooter} 
+                        onHide={() => setStartDialog(false)}
+                    >
+                        <div className="formgrid grid">
+                            <div className="field col-12">
+                                <p>
+                                    Confirmer le démarrage du chantier <strong>{selectedChantier?.nom}</strong> ?
+                                </p>
+                            </div>
+                            
+                            <div className="field col-12">
+                                <label htmlFor="startDate">Date de démarrage effectif</label>
+                                <Calendar 
+                                    id="startDate" 
+                                    value={startDate} 
+                                    onChange={(e) => setStartDate(e.value || new Date())} 
+                                    dateFormat="dd/mm/yy" 
+                                    showIcon 
+                                />
+                            </div>
+                        </div>
+                    </Dialog>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default ChantiersPlanifiesPage;