590 lines
24 KiB
TypeScript
590 lines
24 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Card } from 'primereact/card';
|
|
import { Button } from 'primereact/button';
|
|
import { DataTable } from 'primereact/datatable';
|
|
import { Column } from 'primereact/column';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { InputTextarea } from 'primereact/inputtextarea';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { Tag } from 'primereact/tag';
|
|
import { Toast } from 'primereact/toast';
|
|
import { Toolbar } from 'primereact/toolbar';
|
|
import { Dialog } from 'primereact/dialog';
|
|
import { ConfirmDialog } from 'primereact/confirmdialog';
|
|
import { Menu } from 'primereact/menu';
|
|
import { Badge } from 'primereact/badge';
|
|
import { devisService } from '../../../../services/api';
|
|
import { formatDate } from '../../../../utils/formatters';
|
|
|
|
interface DevisTemplate {
|
|
id: string;
|
|
nom: string;
|
|
description: string;
|
|
categorie: string;
|
|
lignes: Array<{
|
|
designation: string;
|
|
quantite: number;
|
|
unite: string;
|
|
prixUnitaire: number;
|
|
}>;
|
|
tauxTVA: number;
|
|
actif: boolean;
|
|
dateCreation: Date;
|
|
utilisations: number;
|
|
}
|
|
|
|
const DevisTemplatesPage = () => {
|
|
const toast = useRef<Toast>(null);
|
|
const menuRef = useRef<Menu>(null);
|
|
|
|
const [templates, setTemplates] = useState<DevisTemplate[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showDialog, setShowDialog] = useState(false);
|
|
const [editingTemplate, setEditingTemplate] = useState<DevisTemplate | null>(null);
|
|
const [selectedTemplate, setSelectedTemplate] = useState<DevisTemplate | null>(null);
|
|
const [globalFilter, setGlobalFilter] = useState('');
|
|
|
|
const [formData, setFormData] = useState<Partial<DevisTemplate>>({
|
|
nom: '',
|
|
description: '',
|
|
categorie: '',
|
|
lignes: [],
|
|
tauxTVA: 20,
|
|
actif: true
|
|
});
|
|
|
|
const categorieOptions = [
|
|
{ label: 'Gros œuvre', value: 'GROS_OEUVRE' },
|
|
{ label: 'Second œuvre', value: 'SECOND_OEUVRE' },
|
|
{ label: 'Finitions', value: 'FINITIONS' },
|
|
{ label: 'Plomberie', value: 'PLOMBERIE' },
|
|
{ label: 'Électricité', value: 'ELECTRICITE' },
|
|
{ label: 'Chauffage', value: 'CHAUFFAGE' },
|
|
{ label: 'Rénovation', value: 'RENOVATION' },
|
|
{ label: 'Maintenance', value: 'MAINTENANCE' }
|
|
];
|
|
|
|
useEffect(() => {
|
|
loadTemplates();
|
|
}, []);
|
|
|
|
const loadTemplates = async () => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
// TODO: Remplacer par un vrai appel API
|
|
// const response = await devisService.getTemplates();
|
|
|
|
// Données simulées pour la démonstration
|
|
const mockTemplates: DevisTemplate[] = [
|
|
{
|
|
id: '1',
|
|
nom: 'Rénovation Salle de Bain Standard',
|
|
description: 'Template pour rénovation complète salle de bain 6m²',
|
|
categorie: 'RENOVATION',
|
|
lignes: [
|
|
{ designation: 'Démolition existant', quantite: 1, unite: 'forfait', prixUnitaire: 800 },
|
|
{ designation: 'Carrelage sol', quantite: 6, unite: 'm²', prixUnitaire: 45 },
|
|
{ designation: 'Carrelage mural', quantite: 20, unite: 'm²', prixUnitaire: 35 },
|
|
{ designation: 'Sanitaires standard', quantite: 1, unite: 'forfait', prixUnitaire: 1200 }
|
|
],
|
|
tauxTVA: 20,
|
|
actif: true,
|
|
dateCreation: new Date('2024-01-15'),
|
|
utilisations: 23
|
|
},
|
|
{
|
|
id: '2',
|
|
nom: 'Extension Maison 20m²',
|
|
description: 'Template pour extension plain-pied 20m²',
|
|
categorie: 'GROS_OEUVRE',
|
|
lignes: [
|
|
{ designation: 'Fondations', quantite: 20, unite: 'm²', prixUnitaire: 120 },
|
|
{ designation: 'Murs parpaings', quantite: 40, unite: 'm²', prixUnitaire: 85 },
|
|
{ designation: 'Charpente', quantite: 20, unite: 'm²', prixUnitaire: 95 },
|
|
{ designation: 'Couverture', quantite: 22, unite: 'm²', prixUnitaire: 65 }
|
|
],
|
|
tauxTVA: 20,
|
|
actif: true,
|
|
dateCreation: new Date('2024-02-10'),
|
|
utilisations: 15
|
|
},
|
|
{
|
|
id: '3',
|
|
nom: 'Installation Électrique Complète',
|
|
description: 'Template pour installation électrique maison 100m²',
|
|
categorie: 'ELECTRICITE',
|
|
lignes: [
|
|
{ designation: 'Tableau électrique', quantite: 1, unite: 'unité', prixUnitaire: 450 },
|
|
{ designation: 'Prises de courant', quantite: 25, unite: 'unité', prixUnitaire: 35 },
|
|
{ designation: 'Points lumineux', quantite: 15, unite: 'unité', prixUnitaire: 45 },
|
|
{ designation: 'Câblage', quantite: 1, unite: 'forfait', prixUnitaire: 1200 }
|
|
],
|
|
tauxTVA: 20,
|
|
actif: true,
|
|
dateCreation: new Date('2024-03-05'),
|
|
utilisations: 31
|
|
}
|
|
];
|
|
|
|
setTemplates(mockTemplates);
|
|
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des templates:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Impossible de charger les templates'
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleNew = () => {
|
|
setEditingTemplate(null);
|
|
setFormData({
|
|
nom: '',
|
|
description: '',
|
|
categorie: '',
|
|
lignes: [],
|
|
tauxTVA: 20,
|
|
actif: true
|
|
});
|
|
setShowDialog(true);
|
|
};
|
|
|
|
const handleEdit = (template: DevisTemplate) => {
|
|
setEditingTemplate(template);
|
|
setFormData({ ...template });
|
|
setShowDialog(true);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
try {
|
|
if (editingTemplate) {
|
|
// TODO: Appel API pour mise à jour
|
|
// await devisService.updateTemplate(editingTemplate.id, formData);
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: 'Template modifié avec succès'
|
|
});
|
|
} else {
|
|
// TODO: Appel API pour création
|
|
// await devisService.createTemplate(formData);
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: 'Template créé avec succès'
|
|
});
|
|
}
|
|
|
|
setShowDialog(false);
|
|
loadTemplates();
|
|
|
|
} catch (error) {
|
|
console.error('Erreur lors de la sauvegarde:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Erreur lors de la sauvegarde'
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (template: DevisTemplate) => {
|
|
try {
|
|
// TODO: Appel API pour suppression
|
|
// await devisService.deleteTemplate(template.id);
|
|
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: 'Template supprimé avec succès'
|
|
});
|
|
|
|
loadTemplates();
|
|
|
|
} catch (error) {
|
|
console.error('Erreur lors de la suppression:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Erreur lors de la suppression'
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleUseTemplate = async (template: DevisTemplate) => {
|
|
try {
|
|
// TODO: Créer un nouveau devis basé sur le template
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Info',
|
|
detail: 'Redirection vers la création de devis...'
|
|
});
|
|
|
|
// Simuler la redirection
|
|
setTimeout(() => {
|
|
window.location.href = `/devis/nouveau?template=${template.id}`;
|
|
}, 1000);
|
|
|
|
} catch (error) {
|
|
console.error('Erreur lors de l\'utilisation du template:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Erreur lors de l\'utilisation du template'
|
|
});
|
|
}
|
|
};
|
|
|
|
const getMenuItems = (template: DevisTemplate) => [
|
|
{
|
|
label: 'Utiliser',
|
|
icon: 'pi pi-plus',
|
|
command: () => handleUseTemplate(template)
|
|
},
|
|
{
|
|
label: 'Modifier',
|
|
icon: 'pi pi-pencil',
|
|
command: () => handleEdit(template)
|
|
},
|
|
{
|
|
label: 'Dupliquer',
|
|
icon: 'pi pi-copy',
|
|
command: () => {
|
|
setEditingTemplate(null);
|
|
setFormData({
|
|
...template,
|
|
nom: `${template.nom} (Copie)`,
|
|
id: undefined
|
|
});
|
|
setShowDialog(true);
|
|
}
|
|
},
|
|
{
|
|
separator: true
|
|
},
|
|
{
|
|
label: 'Supprimer',
|
|
icon: 'pi pi-trash',
|
|
className: 'text-red-500',
|
|
command: () => {
|
|
setSelectedTemplate(template);
|
|
// TODO: Afficher dialog de confirmation
|
|
}
|
|
}
|
|
];
|
|
|
|
const actionBodyTemplate = (rowData: DevisTemplate) => (
|
|
<div className="flex gap-2">
|
|
<Button
|
|
icon="pi pi-plus"
|
|
className="p-button-text p-button-sm p-button-success"
|
|
tooltip="Utiliser ce template"
|
|
onClick={() => handleUseTemplate(rowData)}
|
|
/>
|
|
<Button
|
|
icon="pi pi-ellipsis-v"
|
|
className="p-button-text p-button-sm"
|
|
onClick={(e) => {
|
|
setSelectedTemplate(rowData);
|
|
menuRef.current?.toggle(e);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
const categorieBodyTemplate = (rowData: DevisTemplate) => {
|
|
const categorie = categorieOptions.find(opt => opt.value === rowData.categorie);
|
|
return (
|
|
<Tag
|
|
value={categorie?.label || rowData.categorie}
|
|
severity="info"
|
|
/>
|
|
);
|
|
};
|
|
|
|
const statutBodyTemplate = (rowData: DevisTemplate) => (
|
|
<Tag
|
|
value={rowData.actif ? 'Actif' : 'Inactif'}
|
|
severity={rowData.actif ? 'success' : 'danger'}
|
|
/>
|
|
);
|
|
|
|
const utilisationsBodyTemplate = (rowData: DevisTemplate) => (
|
|
<Badge value={rowData.utilisations} severity="info" />
|
|
);
|
|
|
|
const toolbarStartTemplate = () => (
|
|
<div className="flex align-items-center gap-2">
|
|
<h2 className="text-xl font-bold m-0">Templates de Devis</h2>
|
|
</div>
|
|
);
|
|
|
|
const toolbarEndTemplate = () => (
|
|
<div className="flex align-items-center gap-2">
|
|
<span className="p-input-icon-left">
|
|
<i className="pi pi-search" />
|
|
<InputText
|
|
value={globalFilter}
|
|
onChange={(e) => setGlobalFilter(e.target.value)}
|
|
placeholder="Rechercher..."
|
|
/>
|
|
</span>
|
|
<Button
|
|
label="Nouveau Template"
|
|
icon="pi pi-plus"
|
|
onClick={handleNew}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="grid">
|
|
<Toast ref={toast} />
|
|
<ConfirmDialog />
|
|
<Menu ref={menuRef} model={selectedTemplate ? getMenuItems(selectedTemplate) : []} popup />
|
|
|
|
<div className="col-12">
|
|
<Toolbar start={toolbarStartTemplate} end={toolbarEndTemplate} />
|
|
</div>
|
|
|
|
{/* Statistiques rapides */}
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Total Templates</span>
|
|
<div className="text-900 font-medium text-xl">{templates.length}</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-blue-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-file-edit text-blue-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Templates Actifs</span>
|
|
<div className="text-900 font-medium text-xl">
|
|
{templates.filter(t => t.actif).length}
|
|
</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-green-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-check-circle text-green-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Plus Utilisé</span>
|
|
<div className="text-900 font-medium text-xl">
|
|
{Math.max(...templates.map(t => t.utilisations), 0)} fois
|
|
</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-orange-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-star text-orange-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Catégories</span>
|
|
<div className="text-900 font-medium text-xl">
|
|
{new Set(templates.map(t => t.categorie)).size}
|
|
</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-purple-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-tags text-purple-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Table des templates */}
|
|
<div className="col-12">
|
|
<Card>
|
|
<DataTable
|
|
value={templates}
|
|
loading={loading}
|
|
globalFilter={globalFilter}
|
|
responsiveLayout="scroll"
|
|
paginator
|
|
rows={10}
|
|
rowsPerPageOptions={[5, 10, 25]}
|
|
emptyMessage="Aucun template trouvé"
|
|
header={
|
|
<div className="flex justify-content-between align-items-center">
|
|
<span className="text-xl font-bold">Liste des Templates</span>
|
|
<span className="text-sm text-600">{templates.length} template(s)</span>
|
|
</div>
|
|
}
|
|
>
|
|
<Column field="nom" header="Nom" sortable />
|
|
<Column field="description" header="Description" />
|
|
<Column
|
|
field="categorie"
|
|
header="Catégorie"
|
|
body={categorieBodyTemplate}
|
|
sortable
|
|
/>
|
|
<Column
|
|
field="lignes"
|
|
header="Nb Lignes"
|
|
body={(rowData) => rowData.lignes?.length || 0}
|
|
style={{ width: '100px' }}
|
|
/>
|
|
<Column
|
|
field="utilisations"
|
|
header="Utilisations"
|
|
body={utilisationsBodyTemplate}
|
|
sortable
|
|
style={{ width: '120px' }}
|
|
/>
|
|
<Column
|
|
field="actif"
|
|
header="Statut"
|
|
body={statutBodyTemplate}
|
|
style={{ width: '100px' }}
|
|
/>
|
|
<Column
|
|
field="dateCreation"
|
|
header="Créé le"
|
|
body={(rowData) => formatDate(rowData.dateCreation)}
|
|
sortable
|
|
style={{ width: '120px' }}
|
|
/>
|
|
<Column
|
|
header="Actions"
|
|
body={actionBodyTemplate}
|
|
style={{ width: '120px' }}
|
|
/>
|
|
</DataTable>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Dialog de création/modification */}
|
|
<Dialog
|
|
header={editingTemplate ? "Modifier le template" : "Nouveau template"}
|
|
visible={showDialog}
|
|
onHide={() => setShowDialog(false)}
|
|
style={{ width: '800px' }}
|
|
footer={
|
|
<div className="flex justify-content-end gap-2">
|
|
<Button
|
|
label="Annuler"
|
|
icon="pi pi-times"
|
|
className="p-button-outlined"
|
|
onClick={() => setShowDialog(false)}
|
|
/>
|
|
<Button
|
|
label="Enregistrer"
|
|
icon="pi pi-save"
|
|
onClick={handleSave}
|
|
/>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="grid">
|
|
<div className="col-12 md:col-6">
|
|
<div className="field">
|
|
<label htmlFor="nom" className="font-semibold">Nom *</label>
|
|
<InputText
|
|
id="nom"
|
|
value={formData.nom}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, nom: e.target.value }))}
|
|
className="w-full"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-6">
|
|
<div className="field">
|
|
<label htmlFor="categorie" className="font-semibold">Catégorie *</label>
|
|
<Dropdown
|
|
id="categorie"
|
|
value={formData.categorie}
|
|
options={categorieOptions}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, categorie: e.value }))}
|
|
className="w-full"
|
|
placeholder="Sélectionner une catégorie"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12">
|
|
<div className="field">
|
|
<label htmlFor="description" className="font-semibold">Description</label>
|
|
<InputTextarea
|
|
id="description"
|
|
value={formData.description}
|
|
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
|
|
className="w-full"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12">
|
|
<h6>Prestations du template</h6>
|
|
<p className="text-sm text-600 mb-3">
|
|
Les prestations seront automatiquement ajoutées lors de l'utilisation du template.
|
|
</p>
|
|
|
|
{formData.lignes && formData.lignes.length > 0 ? (
|
|
<DataTable value={formData.lignes} responsiveLayout="scroll">
|
|
<Column field="designation" header="Désignation" />
|
|
<Column field="quantite" header="Quantité" style={{ width: '100px' }} />
|
|
<Column field="unite" header="Unité" style={{ width: '80px' }} />
|
|
<Column
|
|
field="prixUnitaire"
|
|
header="Prix unitaire"
|
|
style={{ width: '120px' }}
|
|
body={(rowData) => `${rowData.prixUnitaire}€`}
|
|
/>
|
|
</DataTable>
|
|
) : (
|
|
<div className="text-center p-4 border-2 border-dashed border-300 border-round">
|
|
<i className="pi pi-inbox text-4xl text-400 mb-3"></i>
|
|
<p className="text-600">Aucune prestation définie</p>
|
|
<Button
|
|
label="Ajouter des prestations"
|
|
icon="pi pi-plus"
|
|
className="p-button-outlined p-button-sm"
|
|
onClick={() => {
|
|
// TODO: Ouvrir dialog pour ajouter des prestations
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Info',
|
|
detail: 'Fonctionnalité en cours de développement'
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DevisTemplatesPage;
|