Initial commit
This commit is contained in:
dahoud
839
app/(main)/stock/commandes/page.tsx
Normal file
839
app/(main)/stock/commandes/page.tsx
Normal file
@@ -0,0 +1,839 @@
|
||||
'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 { Dialog } from 'primereact/dialog';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { confirmDialog } from 'primereact/confirmdialog';
|
||||
import { ConfirmDialog } from 'primereact/confirmdialog';
|
||||
|
||||
interface OrderItem {
|
||||
id: string;
|
||||
reference: string;
|
||||
nom: string;
|
||||
quantiteCommandee: number;
|
||||
quantiteRecue: number;
|
||||
prixUnitaire: number;
|
||||
total: number;
|
||||
unite: string;
|
||||
}
|
||||
|
||||
interface Order {
|
||||
id: string;
|
||||
numero: string;
|
||||
fournisseur: string;
|
||||
dateCommande: Date;
|
||||
dateLivraison?: Date;
|
||||
statut: 'BROUILLON' | 'ENVOYEE' | 'CONFIRMEE' | 'PARTIELLE' | 'LIVREE' | 'ANNULEE';
|
||||
priorite: 'NORMALE' | 'URGENTE' | 'CRITIQUE';
|
||||
montantTotal: number;
|
||||
items: OrderItem[];
|
||||
commentaires: string;
|
||||
adresseLivraison: string;
|
||||
responsable: string;
|
||||
}
|
||||
|
||||
const CommandesPage = () => {
|
||||
const [orders, setOrders] = useState<Order[]>([]);
|
||||
const [selectedOrders, setSelectedOrders] = useState<Order[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [orderDialog, setOrderDialog] = useState(false);
|
||||
const [itemDialog, setItemDialog] = useState(false);
|
||||
const [deleteOrderDialog, setDeleteOrderDialog] = useState(false);
|
||||
const [order, setOrder] = useState<Order>({
|
||||
id: '',
|
||||
numero: '',
|
||||
fournisseur: '',
|
||||
dateCommande: new Date(),
|
||||
statut: 'BROUILLON',
|
||||
priorite: 'NORMALE',
|
||||
montantTotal: 0,
|
||||
items: [],
|
||||
commentaires: '',
|
||||
adresseLivraison: '',
|
||||
responsable: ''
|
||||
});
|
||||
const [currentItem, setCurrentItem] = useState<OrderItem>({
|
||||
id: '',
|
||||
reference: '',
|
||||
nom: '',
|
||||
quantiteCommandee: 0,
|
||||
quantiteRecue: 0,
|
||||
prixUnitaire: 0,
|
||||
total: 0,
|
||||
unite: 'unité'
|
||||
});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const toast = useRef<Toast>(null);
|
||||
const dt = useRef<DataTable<Order[]>>(null);
|
||||
|
||||
const fournisseurs = [
|
||||
{ label: 'Lafarge', value: 'lafarge' },
|
||||
{ label: 'Bosch', value: 'bosch' },
|
||||
{ label: 'Protecta', value: 'protecta' },
|
||||
{ label: 'Leroy Merlin', value: 'leroy-merlin' },
|
||||
{ label: 'Castorama', value: 'castorama' }
|
||||
];
|
||||
|
||||
const priorites = [
|
||||
{ label: 'Normale', value: 'NORMALE' },
|
||||
{ label: 'Urgente', value: 'URGENTE' },
|
||||
{ label: 'Critique', value: 'CRITIQUE' }
|
||||
];
|
||||
|
||||
const statuts = [
|
||||
{ label: 'Brouillon', value: 'BROUILLON' },
|
||||
{ label: 'Envoyée', value: 'ENVOYEE' },
|
||||
{ label: 'Confirmée', value: 'CONFIRMEE' },
|
||||
{ label: 'Partielle', value: 'PARTIELLE' },
|
||||
{ label: 'Livrée', value: 'LIVREE' },
|
||||
{ label: 'Annulée', value: 'ANNULEE' }
|
||||
];
|
||||
|
||||
const unites = [
|
||||
{ label: 'Unité', value: 'unité' },
|
||||
{ label: 'Mètre', value: 'm' },
|
||||
{ label: 'Mètre carré', value: 'm²' },
|
||||
{ label: 'Kilogramme', value: 'kg' },
|
||||
{ label: 'Litre', value: 'l' },
|
||||
{ label: 'Sac', value: 'sac' },
|
||||
{ label: 'Palette', value: 'palette' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadOrders();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Recalculer le total de la commande quand les items changent
|
||||
const total = order.items.reduce((sum, item) => sum + item.total, 0);
|
||||
setOrder(prev => ({ ...prev, montantTotal: total }));
|
||||
}, [order.items]);
|
||||
|
||||
const loadOrders = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Données mockées
|
||||
const mockOrders: Order[] = [
|
||||
{
|
||||
id: '1',
|
||||
numero: 'CMD-2024-001',
|
||||
fournisseur: 'lafarge',
|
||||
dateCommande: new Date('2024-01-15'),
|
||||
dateLivraison: new Date('2024-01-22'),
|
||||
statut: 'LIVREE',
|
||||
priorite: 'NORMALE',
|
||||
montantTotal: 1275.00,
|
||||
items: [
|
||||
{
|
||||
id: '1',
|
||||
reference: 'CIM-001',
|
||||
nom: 'Ciment Portland',
|
||||
quantiteCommandee: 150,
|
||||
quantiteRecue: 150,
|
||||
prixUnitaire: 8.50,
|
||||
total: 1275.00,
|
||||
unite: 'sac'
|
||||
}
|
||||
],
|
||||
commentaires: 'Livraison urgente pour chantier Dupont',
|
||||
adresseLivraison: '123 Rue du Chantier, 75001 Paris',
|
||||
responsable: 'Jean Martin'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
numero: 'CMD-2024-002',
|
||||
fournisseur: 'bosch',
|
||||
dateCommande: new Date('2024-01-20'),
|
||||
statut: 'CONFIRMEE',
|
||||
priorite: 'URGENTE',
|
||||
montantTotal: 600.00,
|
||||
items: [
|
||||
{
|
||||
id: '2',
|
||||
reference: 'OUT-002',
|
||||
nom: 'Perceuse électrique',
|
||||
quantiteCommandee: 5,
|
||||
quantiteRecue: 0,
|
||||
prixUnitaire: 120.00,
|
||||
total: 600.00,
|
||||
unite: 'unité'
|
||||
}
|
||||
],
|
||||
commentaires: 'Renouvellement outillage équipe',
|
||||
adresseLivraison: 'Entrepôt A, Zone Industrielle',
|
||||
responsable: 'Marie Dubois'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
numero: 'CMD-2024-003',
|
||||
fournisseur: 'protecta',
|
||||
dateCommande: new Date(),
|
||||
statut: 'BROUILLON',
|
||||
priorite: 'CRITIQUE',
|
||||
montantTotal: 500.00,
|
||||
items: [
|
||||
{
|
||||
id: '3',
|
||||
reference: 'SEC-003',
|
||||
nom: 'Casque de sécurité',
|
||||
quantiteCommandee: 20,
|
||||
quantiteRecue: 0,
|
||||
prixUnitaire: 25.00,
|
||||
total: 500.00,
|
||||
unite: 'unité'
|
||||
}
|
||||
],
|
||||
commentaires: 'Commande urgente EPI',
|
||||
adresseLivraison: 'Bureau central',
|
||||
responsable: 'Pierre Durand'
|
||||
}
|
||||
];
|
||||
|
||||
setOrders(mockOrders);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les commandes',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openNew = () => {
|
||||
setOrder({
|
||||
id: '',
|
||||
numero: '',
|
||||
fournisseur: '',
|
||||
dateCommande: new Date(),
|
||||
statut: 'BROUILLON',
|
||||
priorite: 'NORMALE',
|
||||
montantTotal: 0,
|
||||
items: [],
|
||||
commentaires: '',
|
||||
adresseLivraison: '',
|
||||
responsable: ''
|
||||
});
|
||||
setSubmitted(false);
|
||||
setOrderDialog(true);
|
||||
};
|
||||
|
||||
const hideDialog = () => {
|
||||
setSubmitted(false);
|
||||
setOrderDialog(false);
|
||||
};
|
||||
|
||||
const hideItemDialog = () => {
|
||||
setSubmitted(false);
|
||||
setItemDialog(false);
|
||||
};
|
||||
|
||||
const hideDeleteOrderDialog = () => {
|
||||
setDeleteOrderDialog(false);
|
||||
};
|
||||
|
||||
const saveOrder = () => {
|
||||
setSubmitted(true);
|
||||
|
||||
if (order.fournisseur && order.responsable && order.items.length > 0) {
|
||||
let updatedOrders = [...orders];
|
||||
|
||||
if (order.id) {
|
||||
// Mise à jour
|
||||
const index = orders.findIndex(o => o.id === order.id);
|
||||
updatedOrders[index] = order;
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Commande mise à jour',
|
||||
life: 3000
|
||||
});
|
||||
} else {
|
||||
// Création
|
||||
const newOrder = {
|
||||
...order,
|
||||
id: Date.now().toString(),
|
||||
numero: `CMD-${new Date().getFullYear()}-${String(orders.length + 1).padStart(3, '0')}`
|
||||
};
|
||||
updatedOrders.push(newOrder);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Commande créée',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
|
||||
setOrders(updatedOrders);
|
||||
setOrderDialog(false);
|
||||
}
|
||||
};
|
||||
|
||||
const editOrder = (order: Order) => {
|
||||
setOrder({ ...order });
|
||||
setOrderDialog(true);
|
||||
};
|
||||
|
||||
const confirmDeleteOrder = (order: Order) => {
|
||||
setOrder(order);
|
||||
setDeleteOrderDialog(true);
|
||||
};
|
||||
|
||||
const deleteOrder = () => {
|
||||
const updatedOrders = orders.filter(o => o.id !== order.id);
|
||||
setOrders(updatedOrders);
|
||||
setDeleteOrderDialog(false);
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Commande supprimée',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const sendOrder = (order: Order) => {
|
||||
const updatedOrders = orders.map(o =>
|
||||
o.id === order.id
|
||||
? { ...o, statut: 'ENVOYEE' as const }
|
||||
: o
|
||||
);
|
||||
setOrders(updatedOrders);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Commande envoyée',
|
||||
detail: `Commande ${order.numero} envoyée au fournisseur`,
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const receiveOrder = (order: Order) => {
|
||||
const updatedOrders = orders.map(o =>
|
||||
o.id === order.id
|
||||
? {
|
||||
...o,
|
||||
statut: 'LIVREE' as const,
|
||||
dateLivraison: new Date(),
|
||||
items: o.items.map(item => ({ ...item, quantiteRecue: item.quantiteCommandee }))
|
||||
}
|
||||
: o
|
||||
);
|
||||
setOrders(updatedOrders);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Commande réceptionnée',
|
||||
detail: `Commande ${order.numero} réceptionnée`,
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const addItem = () => {
|
||||
setCurrentItem({
|
||||
id: '',
|
||||
reference: '',
|
||||
nom: '',
|
||||
quantiteCommandee: 0,
|
||||
quantiteRecue: 0,
|
||||
prixUnitaire: 0,
|
||||
total: 0,
|
||||
unite: 'unité'
|
||||
});
|
||||
setSubmitted(false);
|
||||
setItemDialog(true);
|
||||
};
|
||||
|
||||
const saveItem = () => {
|
||||
setSubmitted(true);
|
||||
|
||||
if (currentItem.nom && currentItem.quantiteCommandee > 0 && currentItem.prixUnitaire > 0) {
|
||||
const item = {
|
||||
...currentItem,
|
||||
id: currentItem.id || Date.now().toString(),
|
||||
total: currentItem.quantiteCommandee * currentItem.prixUnitaire
|
||||
};
|
||||
|
||||
let updatedItems = [...order.items];
|
||||
|
||||
if (currentItem.id) {
|
||||
// Mise à jour
|
||||
const index = order.items.findIndex(i => i.id === currentItem.id);
|
||||
updatedItems[index] = item;
|
||||
} else {
|
||||
// Ajout
|
||||
updatedItems.push(item);
|
||||
}
|
||||
|
||||
setOrder({ ...order, items: updatedItems });
|
||||
setItemDialog(false);
|
||||
}
|
||||
};
|
||||
|
||||
const editItem = (item: OrderItem) => {
|
||||
setCurrentItem({ ...item });
|
||||
setItemDialog(true);
|
||||
};
|
||||
|
||||
const deleteItem = (itemId: string) => {
|
||||
const updatedItems = order.items.filter(i => i.id !== itemId);
|
||||
setOrder({ ...order, items: updatedItems });
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
dt.current?.exportCSV();
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
label="Nouvelle Commande"
|
||||
icon="pi pi-plus"
|
||||
severity="success"
|
||||
onClick={openNew}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<Button
|
||||
label="Exporter"
|
||||
icon="pi pi-upload"
|
||||
severity="help"
|
||||
onClick={exportCSV}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: Order) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-pencil"
|
||||
rounded
|
||||
severity="success"
|
||||
onClick={() => editOrder(rowData)}
|
||||
tooltip="Modifier"
|
||||
/>
|
||||
{rowData.statut === 'BROUILLON' && (
|
||||
<Button
|
||||
icon="pi pi-send"
|
||||
rounded
|
||||
severity="info"
|
||||
onClick={() => sendOrder(rowData)}
|
||||
tooltip="Envoyer"
|
||||
/>
|
||||
)}
|
||||
{(rowData.statut === 'CONFIRMEE' || rowData.statut === 'PARTIELLE') && (
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
rounded
|
||||
severity="success"
|
||||
onClick={() => receiveOrder(rowData)}
|
||||
tooltip="Réceptionner"
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
rounded
|
||||
severity="warning"
|
||||
onClick={() => confirmDeleteOrder(rowData)}
|
||||
tooltip="Supprimer"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const statusBodyTemplate = (rowData: Order) => {
|
||||
let severity: "success" | "warning" | "danger" | "info" = 'info';
|
||||
let label = rowData.statut;
|
||||
|
||||
switch (rowData.statut) {
|
||||
case 'BROUILLON':
|
||||
severity = 'info';
|
||||
label = 'Brouillon';
|
||||
break;
|
||||
case 'ENVOYEE':
|
||||
severity = 'warning';
|
||||
label = 'Envoyée';
|
||||
break;
|
||||
case 'CONFIRMEE':
|
||||
severity = 'success';
|
||||
label = 'Confirmée';
|
||||
break;
|
||||
case 'PARTIELLE':
|
||||
severity = 'warning';
|
||||
label = 'Partielle';
|
||||
break;
|
||||
case 'LIVREE':
|
||||
severity = 'success';
|
||||
label = 'Livrée';
|
||||
break;
|
||||
case 'ANNULEE':
|
||||
severity = 'danger';
|
||||
label = 'Annulée';
|
||||
break;
|
||||
}
|
||||
|
||||
return <Tag value={label} severity={severity} />;
|
||||
};
|
||||
|
||||
const prioriteBodyTemplate = (rowData: Order) => {
|
||||
let severity: "success" | "warning" | "danger" | "info" = 'info';
|
||||
let label = rowData.priorite;
|
||||
|
||||
switch (rowData.priorite) {
|
||||
case 'NORMALE':
|
||||
severity = 'info';
|
||||
label = 'Normale';
|
||||
break;
|
||||
case 'URGENTE':
|
||||
severity = 'warning';
|
||||
label = 'Urgente';
|
||||
break;
|
||||
case 'CRITIQUE':
|
||||
severity = 'danger';
|
||||
label = 'Critique';
|
||||
break;
|
||||
}
|
||||
|
||||
return <Tag value={label} severity={severity} />;
|
||||
};
|
||||
|
||||
const fournisseurBodyTemplate = (rowData: Order) => {
|
||||
const fournisseur = fournisseurs.find(f => f.value === rowData.fournisseur);
|
||||
return fournisseur ? fournisseur.label : rowData.fournisseur;
|
||||
};
|
||||
|
||||
const montantBodyTemplate = (rowData: Order) => {
|
||||
return new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR'
|
||||
}).format(rowData.montantTotal);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 className="m-0">Gestion des Commandes</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 orderDialogFooter = (
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button label="Annuler" icon="pi pi-times" text onClick={hideDialog} />
|
||||
<Button label="Sauvegarder" icon="pi pi-check" onClick={saveOrder} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const itemDialogFooter = (
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button label="Annuler" icon="pi pi-times" text onClick={hideItemDialog} />
|
||||
<Button label="Ajouter" icon="pi pi-check" onClick={saveItem} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const deleteOrderDialogFooter = (
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button label="Non" icon="pi pi-times" text onClick={hideDeleteOrderDialog} />
|
||||
<Button label="Oui" icon="pi pi-check" onClick={deleteOrder} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toast ref={toast} />
|
||||
<ConfirmDialog />
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
||||
|
||||
<DataTable
|
||||
ref={dt}
|
||||
value={orders}
|
||||
selection={selectedOrders}
|
||||
onSelectionChange={(e) => setSelectedOrders(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} commandes"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucune commande trouvée."
|
||||
header={header}
|
||||
responsiveLayout="scroll"
|
||||
loading={loading}
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
|
||||
<Column field="numero" header="Numéro" sortable />
|
||||
<Column field="fournisseur" header="Fournisseur" body={fournisseurBodyTemplate} sortable />
|
||||
<Column field="dateCommande" header="Date commande" body={(rowData) => rowData.dateCommande.toLocaleDateString()} sortable />
|
||||
<Column field="dateLivraison" header="Date livraison" body={(rowData) => rowData.dateLivraison?.toLocaleDateString() || '-'} sortable />
|
||||
<Column field="statut" header="Statut" body={statusBodyTemplate} sortable />
|
||||
<Column field="priorite" header="Priorité" body={prioriteBodyTemplate} sortable />
|
||||
<Column field="montantTotal" header="Montant" body={montantBodyTemplate} sortable />
|
||||
<Column field="responsable" header="Responsable" sortable />
|
||||
<Column body={actionBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
|
||||
</DataTable>
|
||||
|
||||
{/* Dialog commande */}
|
||||
<Dialog
|
||||
visible={orderDialog}
|
||||
style={{ width: '80vw' }}
|
||||
header="Détails de la commande"
|
||||
modal
|
||||
className="p-fluid"
|
||||
footer={orderDialogFooter}
|
||||
onHide={hideDialog}
|
||||
>
|
||||
<div className="formgrid grid">
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="fournisseur">Fournisseur *</label>
|
||||
<Dropdown
|
||||
id="fournisseur"
|
||||
value={order.fournisseur}
|
||||
options={fournisseurs}
|
||||
onChange={(e) => setOrder({...order, fournisseur: e.value})}
|
||||
placeholder="Sélectionnez un fournisseur"
|
||||
required
|
||||
className={submitted && !order.fournisseur ? 'p-invalid' : ''}
|
||||
/>
|
||||
{submitted && !order.fournisseur && <small className="p-invalid">Le fournisseur est requis.</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="responsable">Responsable *</label>
|
||||
<InputText
|
||||
id="responsable"
|
||||
value={order.responsable}
|
||||
onChange={(e) => setOrder({...order, responsable: e.target.value})}
|
||||
required
|
||||
className={submitted && !order.responsable ? 'p-invalid' : ''}
|
||||
/>
|
||||
{submitted && !order.responsable && <small className="p-invalid">Le responsable est requis.</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<label htmlFor="dateCommande">Date commande</label>
|
||||
<Calendar
|
||||
id="dateCommande"
|
||||
value={order.dateCommande}
|
||||
onChange={(e) => setOrder({...order, dateCommande: e.value || new Date()})}
|
||||
showIcon
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<label htmlFor="priorite">Priorité</label>
|
||||
<Dropdown
|
||||
id="priorite"
|
||||
value={order.priorite}
|
||||
options={priorites}
|
||||
onChange={(e) => setOrder({...order, priorite: e.value})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<label htmlFor="statut">Statut</label>
|
||||
<Dropdown
|
||||
id="statut"
|
||||
value={order.statut}
|
||||
options={statuts}
|
||||
onChange={(e) => setOrder({...order, statut: e.value})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="adresseLivraison">Adresse de livraison</label>
|
||||
<InputTextarea
|
||||
id="adresseLivraison"
|
||||
value={order.adresseLivraison}
|
||||
onChange={(e) => setOrder({...order, adresseLivraison: e.target.value})}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="commentaires">Commentaires</label>
|
||||
<InputTextarea
|
||||
id="commentaires"
|
||||
value={order.commentaires}
|
||||
onChange={(e) => setOrder({...order, commentaires: e.target.value})}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Articles commandés */}
|
||||
<div className="field col-12">
|
||||
<div className="flex justify-content-between align-items-center mb-3">
|
||||
<h6>Articles commandés</h6>
|
||||
<Button
|
||||
label="Ajouter Article"
|
||||
icon="pi pi-plus"
|
||||
size="small"
|
||||
onClick={addItem}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
value={order.items}
|
||||
responsiveLayout="scroll"
|
||||
emptyMessage="Aucun article ajouté"
|
||||
>
|
||||
<Column field="reference" header="Référence" />
|
||||
<Column field="nom" header="Nom" />
|
||||
<Column field="quantiteCommandee" header="Qté" />
|
||||
<Column field="unite" header="Unité" />
|
||||
<Column field="prixUnitaire" header="Prix unitaire" body={(rowData) => `${rowData.prixUnitaire.toFixed(2)}€`} />
|
||||
<Column field="total" header="Total" body={(rowData) => `${rowData.total.toFixed(2)}€`} />
|
||||
<Column body={(rowData) => (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-pencil"
|
||||
size="small"
|
||||
onClick={() => editItem(rowData)}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
size="small"
|
||||
severity="danger"
|
||||
onClick={() => deleteItem(rowData.id)}
|
||||
/>
|
||||
</div>
|
||||
)} />
|
||||
</DataTable>
|
||||
|
||||
<div className="text-right mt-3">
|
||||
<strong>Total commande: {order.montantTotal.toFixed(2)}€</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog article */}
|
||||
<Dialog
|
||||
visible={itemDialog}
|
||||
style={{ width: '450px' }}
|
||||
header="Article de commande"
|
||||
modal
|
||||
className="p-fluid"
|
||||
footer={itemDialogFooter}
|
||||
onHide={hideItemDialog}
|
||||
>
|
||||
<div className="formgrid grid">
|
||||
<div className="field col-12">
|
||||
<label htmlFor="itemReference">Référence</label>
|
||||
<InputText
|
||||
id="itemReference"
|
||||
value={currentItem.reference}
|
||||
onChange={(e) => setCurrentItem({...currentItem, reference: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="itemNom">Nom *</label>
|
||||
<InputText
|
||||
id="itemNom"
|
||||
value={currentItem.nom}
|
||||
onChange={(e) => setCurrentItem({...currentItem, nom: e.target.value})}
|
||||
required
|
||||
className={submitted && !currentItem.nom ? 'p-invalid' : ''}
|
||||
/>
|
||||
{submitted && !currentItem.nom && <small className="p-invalid">Le nom est requis.</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="itemQuantite">Quantité *</label>
|
||||
<InputNumber
|
||||
id="itemQuantite"
|
||||
value={currentItem.quantiteCommandee}
|
||||
onValueChange={(e) => setCurrentItem({...currentItem, quantiteCommandee: e.value || 0})}
|
||||
min={1}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="itemUnite">Unité</label>
|
||||
<Dropdown
|
||||
id="itemUnite"
|
||||
value={currentItem.unite}
|
||||
options={unites}
|
||||
onChange={(e) => setCurrentItem({...currentItem, unite: e.value})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="itemPrix">Prix unitaire (€) *</label>
|
||||
<InputNumber
|
||||
id="itemPrix"
|
||||
value={currentItem.prixUnitaire}
|
||||
onValueChange={(e) => setCurrentItem({...currentItem, prixUnitaire: e.value || 0})}
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
locale="fr-FR"
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label>Total: {(currentItem.quantiteCommandee * currentItem.prixUnitaire).toFixed(2)}€</label>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog suppression */}
|
||||
<Dialog
|
||||
visible={deleteOrderDialog}
|
||||
style={{ width: '450px' }}
|
||||
header="Confirmer"
|
||||
modal
|
||||
footer={deleteOrderDialogFooter}
|
||||
onHide={hideDeleteOrderDialog}
|
||||
>
|
||||
<div className="flex align-items-center justify-content-center">
|
||||
<i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
|
||||
{order && (
|
||||
<span>
|
||||
Êtes-vous sûr de vouloir supprimer la commande <b>{order.numero}</b> ?
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Dialog>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommandesPage;
|
||||
873
app/(main)/stock/fournisseurs/page.tsx
Normal file
873
app/(main)/stock/fournisseurs/page.tsx
Normal file
@@ -0,0 +1,873 @@
|
||||
'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 { Dialog } from 'primereact/dialog';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { Checkbox } from 'primereact/checkbox';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Panel } from 'primereact/panel';
|
||||
import { Rating } from 'primereact/rating';
|
||||
import fournisseurService from '../../../../services/fournisseurService';
|
||||
import type { Fournisseur } from '../../../../types/btp-extended';
|
||||
import {
|
||||
ActionButtonGroup,
|
||||
ViewButton,
|
||||
EditButton,
|
||||
DeleteButton,
|
||||
ActionButton
|
||||
} from '../../../../components/ui/ActionButton';
|
||||
|
||||
interface FournisseurFormData {
|
||||
id?: number;
|
||||
nom: string;
|
||||
contact?: string;
|
||||
telephone?: string;
|
||||
email?: string;
|
||||
adresse?: string;
|
||||
ville?: string;
|
||||
codePostal?: string;
|
||||
pays?: string;
|
||||
typeFournisseur: 'MATERIAU' | 'EQUIPEMENT' | 'SERVICE' | 'SOUS_TRAITANT';
|
||||
specialites?: string;
|
||||
numeroTVA?: string;
|
||||
siret?: string;
|
||||
delaiLivraison?: number;
|
||||
conditionsPaiement?: string;
|
||||
evaluationQualite?: number;
|
||||
actif: boolean;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
const FournisseursPage = () => {
|
||||
const [fournisseurs, setFournisseurs] = useState<Fournisseur[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [selectedFournisseurs, setSelectedFournisseurs] = useState<Fournisseur[]>([]);
|
||||
const [fournisseurDialog, setFournisseurDialog] = useState(false);
|
||||
const [deleteFournisseurDialog, setDeleteFournisseurDialog] = useState(false);
|
||||
const [commandesDialog, setCommandesDialog] = useState(false);
|
||||
const [selectedFournisseurCommandes, setSelectedFournisseurCommandes] = useState<any[]>([]);
|
||||
const [currentFournisseur, setCurrentFournisseur] = useState<Fournisseur | null>(null);
|
||||
const [fournisseur, setFournisseur] = useState<FournisseurFormData>({
|
||||
nom: '',
|
||||
contact: '',
|
||||
telephone: '',
|
||||
email: '',
|
||||
adresse: '',
|
||||
ville: '',
|
||||
codePostal: '',
|
||||
pays: 'France',
|
||||
typeFournisseur: 'MATERIAU',
|
||||
specialites: '',
|
||||
numeroTVA: '',
|
||||
siret: '',
|
||||
delaiLivraison: 7,
|
||||
conditionsPaiement: '',
|
||||
evaluationQualite: 5,
|
||||
actif: true,
|
||||
notes: ''
|
||||
});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const toast = useRef<Toast>(null);
|
||||
const dt = useRef<DataTable<Fournisseur[]>>(null);
|
||||
|
||||
const typesFournisseur = [
|
||||
{ label: 'Matériaux', value: 'MATERIAU' },
|
||||
{ label: 'Équipement', value: 'EQUIPEMENT' },
|
||||
{ label: 'Service', value: 'SERVICE' },
|
||||
{ label: 'Sous-traitant', value: 'SOUS_TRAITANT' }
|
||||
];
|
||||
|
||||
const delaisLivraison = [
|
||||
{ label: '1-3 jours', value: 3 },
|
||||
{ label: '1 semaine', value: 7 },
|
||||
{ label: '2 semaines', value: 14 },
|
||||
{ label: '1 mois', value: 30 },
|
||||
{ label: 'Sur mesure', value: 0 }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadFournisseurs();
|
||||
}, []);
|
||||
|
||||
const loadFournisseurs = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await fournisseurService.getAll();
|
||||
setFournisseurs(data);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des fournisseurs:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les fournisseurs',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openNew = () => {
|
||||
setFournisseur({
|
||||
nom: '',
|
||||
contact: '',
|
||||
telephone: '',
|
||||
email: '',
|
||||
adresse: '',
|
||||
ville: '',
|
||||
codePostal: '',
|
||||
pays: 'France',
|
||||
typeFournisseur: 'MATERIAU',
|
||||
specialites: '',
|
||||
numeroTVA: '',
|
||||
siret: '',
|
||||
delaiLivraison: 7,
|
||||
conditionsPaiement: '',
|
||||
evaluationQualite: 5,
|
||||
actif: true,
|
||||
notes: ''
|
||||
});
|
||||
setSubmitted(false);
|
||||
setFournisseurDialog(true);
|
||||
};
|
||||
|
||||
const hideDialog = () => {
|
||||
setSubmitted(false);
|
||||
setFournisseurDialog(false);
|
||||
};
|
||||
|
||||
const hideDeleteFournisseurDialog = () => {
|
||||
setDeleteFournisseurDialog(false);
|
||||
};
|
||||
|
||||
const saveFournisseur = async () => {
|
||||
setSubmitted(true);
|
||||
|
||||
if (fournisseur.nom.trim()) {
|
||||
try {
|
||||
let updatedFournisseurs = [...fournisseurs];
|
||||
|
||||
if (fournisseur.id) {
|
||||
// Mise à jour
|
||||
const updatedFournisseur = await fournisseurService.update(fournisseur.id, fournisseur);
|
||||
const index = fournisseurs.findIndex(f => f.id === fournisseur.id);
|
||||
updatedFournisseurs[index] = updatedFournisseur;
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Fournisseur mis à jour',
|
||||
life: 3000
|
||||
});
|
||||
} else {
|
||||
// Création
|
||||
const newFournisseur = await fournisseurService.create(fournisseur);
|
||||
updatedFournisseurs.push(newFournisseur);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Fournisseur créé',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
|
||||
setFournisseurs(updatedFournisseurs);
|
||||
setFournisseurDialog(false);
|
||||
setFournisseur({
|
||||
nom: '',
|
||||
contact: '',
|
||||
telephone: '',
|
||||
email: '',
|
||||
adresse: '',
|
||||
ville: '',
|
||||
codePostal: '',
|
||||
pays: 'France',
|
||||
typeFournisseur: 'MATERIAU',
|
||||
specialites: '',
|
||||
numeroTVA: '',
|
||||
siret: '',
|
||||
delaiLivraison: 7,
|
||||
conditionsPaiement: '',
|
||||
evaluationQualite: 5,
|
||||
actif: true,
|
||||
notes: ''
|
||||
});
|
||||
} catch (error: any) {
|
||||
console.error('Erreur lors de la sauvegarde:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de sauvegarder le fournisseur',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const editFournisseur = (fournisseur: Fournisseur) => {
|
||||
setFournisseur({
|
||||
id: fournisseur.id,
|
||||
nom: fournisseur.nom,
|
||||
contact: fournisseur.contact || '',
|
||||
telephone: fournisseur.telephone || '',
|
||||
email: fournisseur.email || '',
|
||||
adresse: fournisseur.adresse || '',
|
||||
ville: fournisseur.ville || '',
|
||||
codePostal: fournisseur.codePostal || '',
|
||||
pays: fournisseur.pays || 'France',
|
||||
typeFournisseur: fournisseur.typeFournisseur || 'MATERIAU',
|
||||
specialites: fournisseur.specialites || '',
|
||||
numeroTVA: fournisseur.numeroTVA || '',
|
||||
siret: fournisseur.siret || '',
|
||||
delaiLivraison: fournisseur.delaiLivraison || 7,
|
||||
conditionsPaiement: fournisseur.conditionsPaiement || '',
|
||||
evaluationQualite: fournisseur.evaluationQualite || 5,
|
||||
actif: fournisseur.actif !== undefined ? fournisseur.actif : true,
|
||||
notes: fournisseur.notes || ''
|
||||
});
|
||||
setFournisseurDialog(true);
|
||||
};
|
||||
|
||||
const confirmDeleteFournisseur = (fournisseur: Fournisseur) => {
|
||||
setFournisseur(fournisseur as FournisseurFormData);
|
||||
setDeleteFournisseurDialog(true);
|
||||
};
|
||||
|
||||
const deleteFournisseur = async () => {
|
||||
try {
|
||||
if (fournisseur.id) {
|
||||
await fournisseurService.delete(fournisseur.id);
|
||||
let updatedFournisseurs = fournisseurs.filter(f => f.id !== fournisseur.id);
|
||||
setFournisseurs(updatedFournisseurs);
|
||||
setDeleteFournisseurDialog(false);
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Fournisseur supprimé',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la suppression:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de supprimer le fournisseur',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const voirCommandesFournisseur = async (fournisseur: Fournisseur) => {
|
||||
try {
|
||||
setCurrentFournisseur(fournisseur);
|
||||
const commandes = await fournisseurService.getCommandes(fournisseur.id!);
|
||||
setSelectedFournisseurCommandes(commandes || []);
|
||||
setCommandesDialog(true);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des commandes:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les commandes du fournisseur',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
dt.current?.exportCSV();
|
||||
};
|
||||
|
||||
const onInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
|
||||
const val = (e.target && e.target.value) || '';
|
||||
let _fournisseur = { ...fournisseur };
|
||||
(_fournisseur as any)[name] = val;
|
||||
setFournisseur(_fournisseur);
|
||||
};
|
||||
|
||||
const onDropdownChange = (e: any, name: string) => {
|
||||
let _fournisseur = { ...fournisseur };
|
||||
(_fournisseur as any)[name] = e.value;
|
||||
setFournisseur(_fournisseur);
|
||||
};
|
||||
|
||||
const onNumberChange = (e: any, name: string) => {
|
||||
let _fournisseur = { ...fournisseur };
|
||||
(_fournisseur as any)[name] = e.value;
|
||||
setFournisseur(_fournisseur);
|
||||
};
|
||||
|
||||
const onCheckboxChange = (e: any, name: string) => {
|
||||
let _fournisseur = { ...fournisseur };
|
||||
(_fournisseur as any)[name] = e.checked;
|
||||
setFournisseur(_fournisseur);
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="my-2">
|
||||
<Button
|
||||
label="Nouveau"
|
||||
icon="pi pi-plus"
|
||||
severity="success"
|
||||
className="mr-2"
|
||||
onClick={openNew}
|
||||
/>
|
||||
<Button
|
||||
label="Supprimer"
|
||||
icon="pi pi-trash"
|
||||
severity="danger"
|
||||
onClick={() => {/* TODO: bulk delete */}}
|
||||
disabled={!selectedFournisseurs || selectedFournisseurs.length === 0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<Button
|
||||
label="Exporter"
|
||||
icon="pi pi-upload"
|
||||
severity="help"
|
||||
onClick={exportCSV}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: Fournisseur) => {
|
||||
return (
|
||||
<ActionButtonGroup>
|
||||
<ActionButton
|
||||
icon="pi pi-shopping-cart"
|
||||
tooltip="Voir les commandes"
|
||||
onClick={() => voirCommandesFournisseur(rowData)}
|
||||
color="blue"
|
||||
/>
|
||||
<EditButton
|
||||
tooltip="Modifier"
|
||||
onClick={() => editFournisseur(rowData)}
|
||||
/>
|
||||
<DeleteButton
|
||||
tooltip="Supprimer"
|
||||
onClick={() => confirmDeleteFournisseur(rowData)}
|
||||
/>
|
||||
</ActionButtonGroup>
|
||||
);
|
||||
};
|
||||
|
||||
const typeFournisseurBodyTemplate = (rowData: Fournisseur) => {
|
||||
const getSeverity = (type: string) => {
|
||||
switch (type) {
|
||||
case 'MATERIAU': return 'info';
|
||||
case 'EQUIPEMENT': return 'warning';
|
||||
case 'SERVICE': return 'success';
|
||||
case 'SOUS_TRAITANT': return 'help';
|
||||
default: return 'info';
|
||||
}
|
||||
};
|
||||
|
||||
const getLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case 'MATERIAU': return 'Matériaux';
|
||||
case 'EQUIPEMENT': return 'Équipement';
|
||||
case 'SERVICE': return 'Service';
|
||||
case 'SOUS_TRAITANT': return 'Sous-traitant';
|
||||
default: return type;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Tag
|
||||
value={getLabel(rowData.typeFournisseur || 'MATERIAU')}
|
||||
severity={getSeverity(rowData.typeFournisseur || 'MATERIAU')}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const contactBodyTemplate = (rowData: Fournisseur) => {
|
||||
return (
|
||||
<div className="flex flex-column">
|
||||
{rowData.contact && (
|
||||
<div className="flex align-items-center mb-1">
|
||||
<i className="pi pi-user mr-2 text-color-secondary"></i>
|
||||
<span className="text-sm font-medium">{rowData.contact}</span>
|
||||
</div>
|
||||
)}
|
||||
{rowData.email && (
|
||||
<div className="flex align-items-center mb-1">
|
||||
<i className="pi pi-envelope mr-2 text-color-secondary"></i>
|
||||
<span className="text-sm">{rowData.email}</span>
|
||||
</div>
|
||||
)}
|
||||
{rowData.telephone && (
|
||||
<div className="flex align-items-center">
|
||||
<i className="pi pi-phone mr-2 text-color-secondary"></i>
|
||||
<span className="text-sm">{rowData.telephone}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const evaluationBodyTemplate = (rowData: Fournisseur) => {
|
||||
return (
|
||||
<div className="flex align-items-center">
|
||||
<Rating
|
||||
value={rowData.evaluationQualite || 0}
|
||||
readOnly
|
||||
cancel={false}
|
||||
className="mr-2"
|
||||
/>
|
||||
<span className="text-sm">({rowData.evaluationQualite || 0}/5)</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const delaiBodyTemplate = (rowData: Fournisseur) => {
|
||||
const delai = rowData.delaiLivraison || 0;
|
||||
let severity: 'success' | 'warning' | 'danger' = 'success';
|
||||
let label = '';
|
||||
|
||||
if (delai === 0) {
|
||||
label = 'Sur mesure';
|
||||
severity = 'warning';
|
||||
} else if (delai <= 3) {
|
||||
label = `${delai} jour(s)`;
|
||||
severity = 'success';
|
||||
} else if (delai <= 7) {
|
||||
label = `${delai} jours`;
|
||||
severity = 'success';
|
||||
} else if (delai <= 14) {
|
||||
label = `${delai} jours`;
|
||||
severity = 'warning';
|
||||
} else {
|
||||
label = `${delai} jours`;
|
||||
severity = 'danger';
|
||||
}
|
||||
|
||||
return <Badge value={label} severity={severity} />;
|
||||
};
|
||||
|
||||
const statutBodyTemplate = (rowData: Fournisseur) => {
|
||||
return (
|
||||
<Tag
|
||||
value={rowData.actif ? 'Actif' : 'Inactif'}
|
||||
severity={rowData.actif ? 'success' : 'danger'}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const nomFournisseurBodyTemplate = (rowData: Fournisseur) => {
|
||||
return (
|
||||
<div className="flex flex-column">
|
||||
<span className="font-medium">{rowData.nom}</span>
|
||||
{rowData.specialites && (
|
||||
<span className="text-sm text-color-secondary">{rowData.specialites}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 className="m-0">Gestion des Fournisseurs</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 fournisseurDialogFooter = (
|
||||
<>
|
||||
<Button label="Annuler" icon="pi pi-times" text onClick={hideDialog} />
|
||||
<Button label="Sauvegarder" icon="pi pi-check" text onClick={saveFournisseur} />
|
||||
</>
|
||||
);
|
||||
|
||||
const deleteFournisseurDialogFooter = (
|
||||
<>
|
||||
<Button label="Non" icon="pi pi-times" text onClick={hideDeleteFournisseurDialog} />
|
||||
<Button label="Oui" icon="pi pi-check" text onClick={deleteFournisseur} />
|
||||
</>
|
||||
);
|
||||
|
||||
const commandesDialogFooter = (
|
||||
<Button label="Fermer" icon="pi pi-times" onClick={() => setCommandesDialog(false)} />
|
||||
);
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR'
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string | Date | null) => {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('fr-FR');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toast ref={toast} />
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
||||
|
||||
<DataTable
|
||||
ref={dt}
|
||||
value={fournisseurs}
|
||||
selection={selectedFournisseurs}
|
||||
onSelectionChange={(e) => setSelectedFournisseurs(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} fournisseurs"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucun fournisseur trouvé."
|
||||
header={header}
|
||||
responsiveLayout="scroll"
|
||||
loading={loading}
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
|
||||
<Column header="Nom" body={nomFournisseurBodyTemplate} sortable headerStyle={{ minWidth: '12rem' }} />
|
||||
<Column field="typeFournisseur" header="Type" body={typeFournisseurBodyTemplate} sortable headerStyle={{ minWidth: '8rem' }} />
|
||||
<Column header="Contact" body={contactBodyTemplate} headerStyle={{ minWidth: '14rem' }} />
|
||||
<Column field="ville" header="Ville" sortable headerStyle={{ minWidth: '10rem' }} />
|
||||
<Column header="Délai livraison" body={delaiBodyTemplate} headerStyle={{ minWidth: '8rem' }} />
|
||||
<Column header="Évaluation" body={evaluationBodyTemplate} headerStyle={{ minWidth: '10rem' }} />
|
||||
<Column field="actif" header="Statut" body={statutBodyTemplate} sortable headerStyle={{ minWidth: '8rem' }} />
|
||||
<Column body={actionBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
|
||||
</DataTable>
|
||||
|
||||
<Dialog
|
||||
visible={fournisseurDialog}
|
||||
style={{ width: '700px' }}
|
||||
header="Détails du Fournisseur"
|
||||
modal
|
||||
className="p-fluid"
|
||||
footer={fournisseurDialogFooter}
|
||||
onHide={hideDialog}
|
||||
>
|
||||
<div className="formgrid grid">
|
||||
<div className="field col-12">
|
||||
<label htmlFor="nom">Nom du fournisseur</label>
|
||||
<InputText
|
||||
id="nom"
|
||||
value={fournisseur.nom}
|
||||
onChange={(e) => onInputChange(e, 'nom')}
|
||||
required
|
||||
className={submitted && !fournisseur.nom ? 'p-invalid' : ''}
|
||||
/>
|
||||
{submitted && !fournisseur.nom && <small className="p-invalid">Le nom est requis.</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="typeFournisseur">Type de fournisseur</label>
|
||||
<Dropdown
|
||||
id="typeFournisseur"
|
||||
value={fournisseur.typeFournisseur}
|
||||
options={typesFournisseur}
|
||||
onChange={(e) => onDropdownChange(e, 'typeFournisseur')}
|
||||
placeholder="Sélectionnez un type"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="contact">Personne de contact</label>
|
||||
<InputText
|
||||
id="contact"
|
||||
value={fournisseur.contact}
|
||||
onChange={(e) => onInputChange(e, 'contact')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="specialites">Spécialités</label>
|
||||
<InputText
|
||||
id="specialites"
|
||||
value={fournisseur.specialites}
|
||||
onChange={(e) => onInputChange(e, 'specialites')}
|
||||
placeholder="Ex: Béton, Acier, Isolation..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="telephone">Téléphone</label>
|
||||
<InputText
|
||||
id="telephone"
|
||||
value={fournisseur.telephone}
|
||||
onChange={(e) => onInputChange(e, 'telephone')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="email">Email</label>
|
||||
<InputText
|
||||
id="email"
|
||||
value={fournisseur.email}
|
||||
onChange={(e) => onInputChange(e, 'email')}
|
||||
type="email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="adresse">Adresse</label>
|
||||
<InputTextarea
|
||||
id="adresse"
|
||||
value={fournisseur.adresse}
|
||||
onChange={(e) => onInputChange(e, 'adresse')}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="ville">Ville</label>
|
||||
<InputText
|
||||
id="ville"
|
||||
value={fournisseur.ville}
|
||||
onChange={(e) => onInputChange(e, 'ville')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="codePostal">Code postal</label>
|
||||
<InputText
|
||||
id="codePostal"
|
||||
value={fournisseur.codePostal}
|
||||
onChange={(e) => onInputChange(e, 'codePostal')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="pays">Pays</label>
|
||||
<InputText
|
||||
id="pays"
|
||||
value={fournisseur.pays}
|
||||
onChange={(e) => onInputChange(e, 'pays')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="delaiLivraison">Délai de livraison</label>
|
||||
<Dropdown
|
||||
id="delaiLivraison"
|
||||
value={fournisseur.delaiLivraison}
|
||||
options={delaisLivraison}
|
||||
onChange={(e) => onDropdownChange(e, 'delaiLivraison')}
|
||||
placeholder="Sélectionnez un délai"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="evaluationQualite">Évaluation qualité (1-5)</label>
|
||||
<Rating
|
||||
value={fournisseur.evaluationQualite}
|
||||
onChange={(e) => onNumberChange(e, 'evaluationQualite')}
|
||||
cancel={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="numeroTVA">Numéro TVA</label>
|
||||
<InputText
|
||||
id="numeroTVA"
|
||||
value={fournisseur.numeroTVA}
|
||||
onChange={(e) => onInputChange(e, 'numeroTVA')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="siret">SIRET</label>
|
||||
<InputText
|
||||
id="siret"
|
||||
value={fournisseur.siret}
|
||||
onChange={(e) => onInputChange(e, 'siret')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="conditionsPaiement">Conditions de paiement</label>
|
||||
<InputText
|
||||
id="conditionsPaiement"
|
||||
value={fournisseur.conditionsPaiement}
|
||||
onChange={(e) => onInputChange(e, 'conditionsPaiement')}
|
||||
placeholder="Ex: 30 jours net, 2% escompte 10 jours..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="notes">Notes</label>
|
||||
<InputTextarea
|
||||
id="notes"
|
||||
value={fournisseur.notes}
|
||||
onChange={(e) => onInputChange(e, 'notes')}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<div className="flex align-items-center">
|
||||
<Checkbox
|
||||
id="actif"
|
||||
checked={fournisseur.actif}
|
||||
onChange={(e) => onCheckboxChange(e, 'actif')}
|
||||
/>
|
||||
<label htmlFor="actif" className="ml-2">Fournisseur actif</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
visible={deleteFournisseurDialog}
|
||||
style={{ width: '450px' }}
|
||||
header="Confirmer"
|
||||
modal
|
||||
footer={deleteFournisseurDialogFooter}
|
||||
onHide={hideDeleteFournisseurDialog}
|
||||
>
|
||||
<div className="flex align-items-center justify-content-center">
|
||||
<i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
|
||||
{fournisseur && (
|
||||
<span>
|
||||
Êtes-vous sûr de vouloir supprimer le fournisseur <b>{fournisseur.nom}</b> ?
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog des commandes du fournisseur */}
|
||||
<Dialog
|
||||
visible={commandesDialog}
|
||||
style={{ width: '90vw', height: '80vh' }}
|
||||
header={`Commandes - ${currentFournisseur?.nom}`}
|
||||
modal
|
||||
className="p-fluid"
|
||||
footer={commandesDialogFooter}
|
||||
onHide={() => setCommandesDialog(false)}
|
||||
maximizable
|
||||
>
|
||||
<div className="grid mb-3">
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-500">{selectedFournisseurCommandes.length}</div>
|
||||
<div className="text-color-secondary">Total commandes</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-green-500">
|
||||
{selectedFournisseurCommandes.filter(c => c.statut === 'LIVREE').length}
|
||||
</div>
|
||||
<div className="text-color-secondary">Livrées</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-orange-500">
|
||||
{selectedFournisseurCommandes.filter(c => c.statut === 'EN_COURS').length}
|
||||
</div>
|
||||
<div className="text-color-secondary">En cours</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-cyan-500">
|
||||
{formatCurrency(selectedFournisseurCommandes.reduce((sum, c) => sum + (c.montantTotal || 0), 0))}
|
||||
</div>
|
||||
<div className="text-color-secondary">CA Total</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
value={selectedFournisseurCommandes}
|
||||
paginator
|
||||
rows={10}
|
||||
dataKey="id"
|
||||
className="datatable-responsive"
|
||||
emptyMessage="Aucune commande pour ce fournisseur"
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column field="numero" header="N° Commande" sortable style={{ minWidth: '10rem' }} />
|
||||
<Column
|
||||
field="dateCommande"
|
||||
header="Date commande"
|
||||
body={(rowData) => formatDate(rowData.dateCommande)}
|
||||
sortable
|
||||
style={{ minWidth: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
field="dateLivraisonPrevue"
|
||||
header="Livraison prévue"
|
||||
body={(rowData) => formatDate(rowData.dateLivraisonPrevue)}
|
||||
sortable
|
||||
style={{ minWidth: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
header="Statut"
|
||||
body={(rowData) => {
|
||||
const getSeverity = (statut: string) => {
|
||||
switch (statut) {
|
||||
case 'EN_ATTENTE': return 'warning';
|
||||
case 'EN_COURS': return 'info';
|
||||
case 'LIVREE': return 'success';
|
||||
case 'ANNULEE': return 'danger';
|
||||
default: return 'info';
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Tag
|
||||
value={rowData.statut}
|
||||
severity={getSeverity(rowData.statut)}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
style={{ minWidth: '8rem' }}
|
||||
/>
|
||||
<Column
|
||||
header="Montant"
|
||||
body={(rowData) => formatCurrency(rowData.montantTotal || 0)}
|
||||
style={{ minWidth: '8rem' }}
|
||||
/>
|
||||
<Column field="chantier.nom" header="Chantier" style={{ minWidth: '12rem' }} />
|
||||
</DataTable>
|
||||
</Dialog>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FournisseursPage;
|
||||
676
app/(main)/stock/inventaire/page.tsx
Normal file
676
app/(main)/stock/inventaire/page.tsx
Normal file
@@ -0,0 +1,676 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Divider } from 'primereact/divider';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { Knob } from 'primereact/knob';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Checkbox } from 'primereact/checkbox';
|
||||
import { Chart } from 'primereact/chart';
|
||||
import {
|
||||
ActionButtonGroup,
|
||||
ViewButton,
|
||||
EditButton,
|
||||
DeleteButton,
|
||||
ActionButton
|
||||
} from '../../../../components/ui/ActionButton';
|
||||
|
||||
// Types pour l'inventaire
|
||||
interface InventoryItem {
|
||||
id: string;
|
||||
reference: string;
|
||||
nom: string;
|
||||
categorie: string;
|
||||
unite: string;
|
||||
stockTheorique: number;
|
||||
stockReel: number;
|
||||
ecart: number;
|
||||
valeurStock: number;
|
||||
emplacement: string;
|
||||
dateInventaire: Date;
|
||||
auditeur: string;
|
||||
statut: 'OK' | 'ECART' | 'MANQUANT' | 'EXCEDENT';
|
||||
}
|
||||
|
||||
interface InventorySession {
|
||||
id: string;
|
||||
nom: string;
|
||||
dateDebut: Date;
|
||||
dateFin?: Date;
|
||||
statut: 'PLANIFIE' | 'EN_COURS' | 'TERMINE';
|
||||
emplacements: string[];
|
||||
categories: string[];
|
||||
auditeur: string;
|
||||
commentaires: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Page Inventaire Matériel BTP Express
|
||||
* Gestion complète stocks, maintenances et alertes matériel
|
||||
*/
|
||||
const InventairePage = () => {
|
||||
const [inventoryItems, setInventoryItems] = useState<InventoryItem[]>([]);
|
||||
const [sessions, setSessions] = useState<InventorySession[]>([]);
|
||||
const [selectedItems, setSelectedItems] = useState<InventoryItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [inventaireDialog, setInventaireDialog] = useState(false);
|
||||
const [maintenanceDialog, setMaintenanceDialog] = useState(false);
|
||||
const [alertesDialog, setAlertesDialog] = useState(false);
|
||||
const [selectedMateriel, setSelectedMateriel] = useState<any>(null);
|
||||
const [nouvelleQuantite, setNouvelleQuantite] = useState<number>(0);
|
||||
const [commentaireInventaire, setCommentaireInventaire] = useState('');
|
||||
const [dateMaintenance, setDateMaintenance] = useState<Date | null>(null);
|
||||
const [typeMaintenance, setTypeMaintenance] = useState('');
|
||||
const [descriptionMaintenance, setDescriptionMaintenance] = useState('');
|
||||
const [alertes, setAlertes] = useState<any[]>([]);
|
||||
const [metriques, setMetriques] = useState<any>({});
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [sessionDialog, setSessionDialog] = useState(false);
|
||||
const [inventoryDialog, setInventoryDialog] = useState(false);
|
||||
const [selectedSession, setSelectedSession] = useState<InventorySession | null>(null);
|
||||
const [showStats, setShowStats] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const toast = useRef<Toast>(null);
|
||||
const dt = useRef<DataTable<InventoryItem[]>>(null);
|
||||
|
||||
const [newSession, setNewSession] = useState<InventorySession>({
|
||||
id: '',
|
||||
nom: '',
|
||||
dateDebut: new Date(),
|
||||
statut: 'PLANIFIE',
|
||||
emplacements: [],
|
||||
categories: [],
|
||||
auditeur: '',
|
||||
commentaires: ''
|
||||
});
|
||||
|
||||
const emplacements = [
|
||||
{ label: 'Entrepôt A', value: 'entrepot-a' },
|
||||
{ label: 'Entrepôt B', value: 'entrepot-b' },
|
||||
{ label: 'Magasin', value: 'magasin' },
|
||||
{ label: 'Chantier Mobile', value: 'chantier-mobile' },
|
||||
{ label: 'Bureau', value: 'bureau' }
|
||||
];
|
||||
|
||||
const categories = [
|
||||
{ label: 'Matériaux', value: 'materiaux' },
|
||||
{ label: 'Outillage', value: 'outillage' },
|
||||
{ label: 'Équipement', value: 'equipement' },
|
||||
{ label: 'Consommables', value: 'consommables' },
|
||||
{ label: 'Sécurité', value: 'securite' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadInventoryData();
|
||||
}, []);
|
||||
|
||||
const loadInventoryData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Données mockées
|
||||
const mockInventoryItems: InventoryItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
reference: 'CIM-001',
|
||||
nom: 'Ciment Portland',
|
||||
categorie: 'materiaux',
|
||||
unite: 'sac',
|
||||
stockTheorique: 150,
|
||||
stockReel: 148,
|
||||
ecart: -2,
|
||||
valeurStock: 1258.00,
|
||||
emplacement: 'entrepot-a',
|
||||
dateInventaire: new Date(),
|
||||
auditeur: 'Jean Dupont',
|
||||
statut: 'ECART'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
reference: 'OUT-002',
|
||||
nom: 'Perceuse électrique',
|
||||
categorie: 'outillage',
|
||||
unite: 'unité',
|
||||
stockTheorique: 5,
|
||||
stockReel: 5,
|
||||
ecart: 0,
|
||||
valeurStock: 600.00,
|
||||
emplacement: 'magasin',
|
||||
dateInventaire: new Date(),
|
||||
auditeur: 'Marie Martin',
|
||||
statut: 'OK'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
reference: 'SEC-003',
|
||||
nom: 'Casque de sécurité',
|
||||
categorie: 'securite',
|
||||
unite: 'unité',
|
||||
stockTheorique: 8,
|
||||
stockReel: 10,
|
||||
ecart: 2,
|
||||
valeurStock: 250.00,
|
||||
emplacement: 'bureau',
|
||||
dateInventaire: new Date(),
|
||||
auditeur: 'Pierre Durand',
|
||||
statut: 'EXCEDENT'
|
||||
}
|
||||
];
|
||||
|
||||
const mockSessions: InventorySession[] = [
|
||||
{
|
||||
id: '1',
|
||||
nom: 'Inventaire Mensuel Janvier 2024',
|
||||
dateDebut: new Date('2024-01-15'),
|
||||
dateFin: new Date('2024-01-17'),
|
||||
statut: 'TERMINE',
|
||||
emplacements: ['entrepot-a', 'magasin'],
|
||||
categories: ['materiaux', 'outillage'],
|
||||
auditeur: 'Équipe Inventaire',
|
||||
commentaires: 'Inventaire mensuel standard'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
nom: 'Inventaire Sécurité',
|
||||
dateDebut: new Date(),
|
||||
statut: 'EN_COURS',
|
||||
emplacements: ['bureau'],
|
||||
categories: ['securite'],
|
||||
auditeur: 'Pierre Durand',
|
||||
commentaires: 'Contrôle EPI obligatoire'
|
||||
}
|
||||
];
|
||||
|
||||
setInventoryItems(mockInventoryItems);
|
||||
setSessions(mockSessions);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les données d\'inventaire',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openNewSession = () => {
|
||||
setNewSession({
|
||||
id: '',
|
||||
nom: '',
|
||||
dateDebut: new Date(),
|
||||
statut: 'PLANIFIE',
|
||||
emplacements: [],
|
||||
categories: [],
|
||||
auditeur: '',
|
||||
commentaires: ''
|
||||
});
|
||||
setSubmitted(false);
|
||||
setSessionDialog(true);
|
||||
};
|
||||
|
||||
const saveSession = () => {
|
||||
setSubmitted(true);
|
||||
|
||||
if (newSession.nom.trim() && newSession.auditeur.trim()) {
|
||||
const session = {
|
||||
...newSession,
|
||||
id: Date.now().toString()
|
||||
};
|
||||
|
||||
setSessions([...sessions, session]);
|
||||
setSessionDialog(false);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Session d\'inventaire créée',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const startInventory = (session: InventorySession) => {
|
||||
const updatedSessions = sessions.map(s =>
|
||||
s.id === session.id
|
||||
? { ...s, statut: 'EN_COURS' as const }
|
||||
: s
|
||||
);
|
||||
setSessions(updatedSessions);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Inventaire démarré',
|
||||
detail: `Session "${session.nom}" en cours`,
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const finishInventory = (session: InventorySession) => {
|
||||
const updatedSessions = sessions.map(s =>
|
||||
s.id === session.id
|
||||
? { ...s, statut: 'TERMINE' as const, dateFin: new Date() }
|
||||
: s
|
||||
);
|
||||
setSessions(updatedSessions);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Inventaire terminé',
|
||||
detail: `Session "${session.nom}" terminée`,
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
dt.current?.exportCSV();
|
||||
};
|
||||
|
||||
const generateReport = () => {
|
||||
const totalItems = inventoryItems.length;
|
||||
const itemsWithIssues = inventoryItems.filter(item => item.statut !== 'OK').length;
|
||||
const totalValue = inventoryItems.reduce((sum, item) => sum + item.valeurStock, 0);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Rapport généré',
|
||||
detail: `${totalItems} articles, ${itemsWithIssues} écarts, Valeur: ${totalValue.toFixed(2)}€`,
|
||||
life: 5000
|
||||
});
|
||||
setShowStats(true);
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
label="Nouvelle Session"
|
||||
icon="pi pi-plus"
|
||||
severity="success"
|
||||
onClick={openNewSession}
|
||||
/>
|
||||
<Button
|
||||
label="Rapport"
|
||||
icon="pi pi-chart-bar"
|
||||
severity="info"
|
||||
onClick={generateReport}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<Button
|
||||
label="Exporter"
|
||||
icon="pi pi-upload"
|
||||
severity="help"
|
||||
onClick={exportCSV}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const statusBodyTemplate = (rowData: InventoryItem) => {
|
||||
let severity: "success" | "warning" | "danger" | "info" = 'success';
|
||||
let label = rowData.statut;
|
||||
|
||||
switch (rowData.statut) {
|
||||
case 'OK':
|
||||
severity = 'success';
|
||||
label = 'OK';
|
||||
break;
|
||||
case 'ECART':
|
||||
severity = 'warning';
|
||||
label = 'Écart';
|
||||
break;
|
||||
case 'MANQUANT':
|
||||
severity = 'danger';
|
||||
label = 'Manquant';
|
||||
break;
|
||||
case 'EXCEDENT':
|
||||
severity = 'info';
|
||||
label = 'Excédent';
|
||||
break;
|
||||
}
|
||||
|
||||
return <Tag value={label} severity={severity} />;
|
||||
};
|
||||
|
||||
const ecartBodyTemplate = (rowData: InventoryItem) => {
|
||||
const ecart = rowData.ecart;
|
||||
const className = ecart === 0 ? '' : ecart > 0 ? 'text-green-600' : 'text-red-600';
|
||||
return <span className={className}>{ecart > 0 ? '+' : ''}{ecart}</span>;
|
||||
};
|
||||
|
||||
const valeurBodyTemplate = (rowData: InventoryItem) => {
|
||||
return new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR'
|
||||
}).format(rowData.valeurStock);
|
||||
};
|
||||
|
||||
const categorieBodyTemplate = (rowData: InventoryItem) => {
|
||||
const categorie = categories.find(c => c.value === rowData.categorie);
|
||||
return categorie ? categorie.label : rowData.categorie;
|
||||
};
|
||||
|
||||
const emplacementBodyTemplate = (rowData: InventoryItem) => {
|
||||
const emplacement = emplacements.find(e => e.value === rowData.emplacement);
|
||||
return emplacement ? emplacement.label : rowData.emplacement;
|
||||
};
|
||||
|
||||
const sessionActionTemplate = (rowData: InventorySession) => {
|
||||
return (
|
||||
<ActionButtonGroup>
|
||||
{rowData.statut === 'PLANIFIE' && (
|
||||
<ActionButton
|
||||
icon="pi pi-play"
|
||||
color="success"
|
||||
tooltip="Démarrer"
|
||||
onClick={() => startInventory(rowData)}
|
||||
/>
|
||||
)}
|
||||
{rowData.statut === 'EN_COURS' && (
|
||||
<ActionButton
|
||||
icon="pi pi-check"
|
||||
color="info"
|
||||
tooltip="Terminer"
|
||||
onClick={() => finishInventory(rowData)}
|
||||
/>
|
||||
)}
|
||||
<ViewButton
|
||||
tooltip="Voir détails"
|
||||
onClick={() => setSelectedSession(rowData)}
|
||||
/>
|
||||
</ActionButtonGroup>
|
||||
);
|
||||
};
|
||||
|
||||
const sessionStatusTemplate = (rowData: InventorySession) => {
|
||||
let severity: "success" | "warning" | "danger" | "info" = 'info';
|
||||
let label = rowData.statut;
|
||||
|
||||
switch (rowData.statut) {
|
||||
case 'PLANIFIE':
|
||||
severity = 'info';
|
||||
label = 'Planifié';
|
||||
break;
|
||||
case 'EN_COURS':
|
||||
severity = 'warning';
|
||||
label = 'En cours';
|
||||
break;
|
||||
case 'TERMINE':
|
||||
severity = 'success';
|
||||
label = 'Terminé';
|
||||
break;
|
||||
}
|
||||
|
||||
return <Tag value={label} severity={severity} />;
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 className="m-0">Inventaire du Stock</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 sessionDialogFooter = (
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button label="Annuler" icon="pi pi-times" text onClick={() => setSessionDialog(false)} />
|
||||
<Button label="Créer" icon="pi pi-check" onClick={saveSession} />
|
||||
</div>
|
||||
);
|
||||
|
||||
// Statistiques pour le graphique
|
||||
const getStatsData = () => {
|
||||
const statsOK = inventoryItems.filter(item => item.statut === 'OK').length;
|
||||
const statsEcart = inventoryItems.filter(item => item.statut === 'ECART').length;
|
||||
const statsManquant = inventoryItems.filter(item => item.statut === 'MANQUANT').length;
|
||||
const statsExcedent = inventoryItems.filter(item => item.statut === 'EXCEDENT').length;
|
||||
|
||||
return {
|
||||
labels: ['OK', 'Écart', 'Manquant', 'Excédent'],
|
||||
datasets: [
|
||||
{
|
||||
data: [statsOK, statsEcart, statsManquant, statsExcedent],
|
||||
backgroundColor: ['#10B981', '#F59E0B', '#EF4444', '#3B82F6'],
|
||||
hoverBackgroundColor: ['#059669', '#D97706', '#DC2626', '#2563EB']
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toast ref={toast} />
|
||||
|
||||
{/* Sessions d'inventaire */}
|
||||
<div className="mb-4">
|
||||
<h6>Sessions d'inventaire</h6>
|
||||
<DataTable
|
||||
value={sessions}
|
||||
responsiveLayout="scroll"
|
||||
className="mb-4"
|
||||
>
|
||||
<Column field="nom" header="Nom de la session" />
|
||||
<Column field="dateDebut" header="Date début" body={(rowData) => rowData.dateDebut.toLocaleDateString()} />
|
||||
<Column field="dateFin" header="Date fin" body={(rowData) => rowData.dateFin?.toLocaleDateString() || '-'} />
|
||||
<Column field="statut" header="Statut" body={sessionStatusTemplate} />
|
||||
<Column field="auditeur" header="Auditeur" />
|
||||
<Column body={sessionActionTemplate} headerStyle={{ minWidth: '8rem' }} />
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
||||
|
||||
{showStats && (
|
||||
<Card className="mb-4" title="Statistiques d'inventaire">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<Chart type="doughnut" data={getStatsData()} />
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="grid">
|
||||
<div className="col-6">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-semibold text-green-600">
|
||||
{inventoryItems.filter(item => item.statut === 'OK').length}
|
||||
</div>
|
||||
<div className="text-sm">Articles OK</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-semibold text-orange-600">
|
||||
{inventoryItems.filter(item => item.statut !== 'OK').length}
|
||||
</div>
|
||||
<div className="text-sm">Avec écarts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-semibold text-blue-600">
|
||||
{inventoryItems.reduce((sum, item) => sum + item.valeurStock, 0).toFixed(0)}€
|
||||
</div>
|
||||
<div className="text-sm">Valeur totale</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-semibold text-purple-600">
|
||||
{Math.round((inventoryItems.filter(item => item.statut === 'OK').length / inventoryItems.length) * 100)}%
|
||||
</div>
|
||||
<div className="text-sm">Conformité</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<DataTable
|
||||
ref={dt}
|
||||
value={inventoryItems}
|
||||
selection={selectedItems}
|
||||
onSelectionChange={(e) => setSelectedItems(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} articles"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucun article trouvé."
|
||||
header={header}
|
||||
responsiveLayout="scroll"
|
||||
loading={loading}
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
|
||||
<Column field="reference" header="Référence" sortable />
|
||||
<Column field="nom" header="Nom" sortable />
|
||||
<Column field="categorie" header="Catégorie" body={categorieBodyTemplate} sortable />
|
||||
<Column field="stockTheorique" header="Stock théorique" sortable />
|
||||
<Column field="stockReel" header="Stock réel" sortable />
|
||||
<Column field="ecart" header="Écart" body={ecartBodyTemplate} sortable />
|
||||
<Column field="valeurStock" header="Valeur" body={valeurBodyTemplate} sortable />
|
||||
<Column field="emplacement" header="Emplacement" body={emplacementBodyTemplate} sortable />
|
||||
<Column field="statut" header="Statut" body={statusBodyTemplate} sortable />
|
||||
<Column field="auditeur" header="Auditeur" sortable />
|
||||
</DataTable>
|
||||
|
||||
{/* Dialog pour nouvelle session */}
|
||||
<Dialog
|
||||
visible={sessionDialog}
|
||||
style={{ width: '600px' }}
|
||||
header="Nouvelle session d'inventaire"
|
||||
modal
|
||||
className="p-fluid"
|
||||
footer={sessionDialogFooter}
|
||||
onHide={() => setSessionDialog(false)}
|
||||
>
|
||||
<div className="formgrid grid">
|
||||
<div className="field col-12">
|
||||
<label htmlFor="nom">Nom de la session</label>
|
||||
<InputText
|
||||
id="nom"
|
||||
value={newSession.nom}
|
||||
onChange={(e) => setNewSession({...newSession, nom: e.target.value})}
|
||||
required
|
||||
className={submitted && !newSession.nom ? 'p-invalid' : ''}
|
||||
/>
|
||||
{submitted && !newSession.nom && <small className="p-invalid">Le nom est requis.</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="dateDebut">Date de début</label>
|
||||
<Calendar
|
||||
id="dateDebut"
|
||||
value={newSession.dateDebut}
|
||||
onChange={(e) => setNewSession({...newSession, dateDebut: e.value || new Date()})}
|
||||
showIcon
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="auditeur">Auditeur</label>
|
||||
<InputText
|
||||
id="auditeur"
|
||||
value={newSession.auditeur}
|
||||
onChange={(e) => setNewSession({...newSession, auditeur: e.target.value})}
|
||||
required
|
||||
className={submitted && !newSession.auditeur ? 'p-invalid' : ''}
|
||||
/>
|
||||
{submitted && !newSession.auditeur && <small className="p-invalid">L'auditeur est requis.</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label>Emplacements à inventorier</label>
|
||||
<div className="grid">
|
||||
{emplacements.map((emplacement) => (
|
||||
<div key={emplacement.value} className="col-6">
|
||||
<Checkbox
|
||||
inputId={emplacement.value}
|
||||
value={emplacement.value}
|
||||
onChange={(e) => {
|
||||
const selected = [...newSession.emplacements];
|
||||
if (e.checked) {
|
||||
selected.push(e.value);
|
||||
} else {
|
||||
const index = selected.indexOf(e.value);
|
||||
if (index > -1) {
|
||||
selected.splice(index, 1);
|
||||
}
|
||||
}
|
||||
setNewSession({...newSession, emplacements: selected});
|
||||
}}
|
||||
checked={newSession.emplacements.includes(emplacement.value)}
|
||||
/>
|
||||
<label htmlFor={emplacement.value} className="ml-2">{emplacement.label}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label>Catégories à inventorier</label>
|
||||
<div className="grid">
|
||||
{categories.map((categorie) => (
|
||||
<div key={categorie.value} className="col-6">
|
||||
<Checkbox
|
||||
inputId={categorie.value}
|
||||
value={categorie.value}
|
||||
onChange={(e) => {
|
||||
const selected = [...newSession.categories];
|
||||
if (e.checked) {
|
||||
selected.push(e.value);
|
||||
} else {
|
||||
const index = selected.indexOf(e.value);
|
||||
if (index > -1) {
|
||||
selected.splice(index, 1);
|
||||
}
|
||||
}
|
||||
setNewSession({...newSession, categories: selected});
|
||||
}}
|
||||
checked={newSession.categories.includes(categorie.value)}
|
||||
/>
|
||||
<label htmlFor={categorie.value} className="ml-2">{categorie.label}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventairePage;
|
||||
773
app/(main)/stock/page.tsx
Normal file
773
app/(main)/stock/page.tsx
Normal file
@@ -0,0 +1,773 @@
|
||||
'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 { Dialog } from 'primereact/dialog';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { confirmDialog } from 'primereact/confirmdialog';
|
||||
import { ConfirmDialog } from 'primereact/confirmdialog';
|
||||
|
||||
interface StockItem {
|
||||
id: string;
|
||||
nom: string;
|
||||
reference: string;
|
||||
description: string;
|
||||
categorie: string;
|
||||
unite: string;
|
||||
quantiteStock: number;
|
||||
seuilAlerte: number;
|
||||
prixUnitaire: number;
|
||||
fournisseur: string;
|
||||
emplacement: string;
|
||||
dateAjout: Date;
|
||||
dateModification: Date;
|
||||
actif: boolean;
|
||||
}
|
||||
|
||||
interface StockMovement {
|
||||
id: string;
|
||||
articleId: string;
|
||||
type: 'ENTREE' | 'SORTIE';
|
||||
quantite: number;
|
||||
motif: string;
|
||||
chantier?: string;
|
||||
utilisateur: string;
|
||||
date: Date;
|
||||
}
|
||||
|
||||
const StockPage = () => {
|
||||
const [stockItems, setStockItems] = useState<StockItem[]>([]);
|
||||
const [selectedItems, setSelectedItems] = useState<StockItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [itemDialog, setItemDialog] = useState(false);
|
||||
const [movementDialog, setMovementDialog] = useState(false);
|
||||
const [deleteItemDialog, setDeleteItemDialog] = useState(false);
|
||||
const [item, setItem] = useState<StockItem>({
|
||||
id: '',
|
||||
nom: '',
|
||||
reference: '',
|
||||
description: '',
|
||||
categorie: '',
|
||||
unite: 'unité',
|
||||
quantiteStock: 0,
|
||||
seuilAlerte: 10,
|
||||
prixUnitaire: 0,
|
||||
fournisseur: '',
|
||||
emplacement: '',
|
||||
dateAjout: new Date(),
|
||||
dateModification: new Date(),
|
||||
actif: true
|
||||
});
|
||||
const [movement, setMovement] = useState<StockMovement>({
|
||||
id: '',
|
||||
articleId: '',
|
||||
type: 'ENTREE',
|
||||
quantite: 0,
|
||||
motif: '',
|
||||
chantier: '',
|
||||
utilisateur: 'Admin',
|
||||
date: new Date()
|
||||
});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const toast = useRef<Toast>(null);
|
||||
const dt = useRef<DataTable<StockItem[]>>(null);
|
||||
|
||||
const categories = [
|
||||
{ label: 'Matériaux', value: 'materiaux' },
|
||||
{ label: 'Outillage', value: 'outillage' },
|
||||
{ label: 'Équipement', value: 'equipement' },
|
||||
{ label: 'Consommables', value: 'consommables' },
|
||||
{ label: 'Sécurité', value: 'securite' }
|
||||
];
|
||||
|
||||
const unites = [
|
||||
{ label: 'Unité', value: 'unité' },
|
||||
{ label: 'Mètre', value: 'm' },
|
||||
{ label: 'Mètre carré', value: 'm²' },
|
||||
{ label: 'Mètre cube', value: 'm³' },
|
||||
{ label: 'Kilogramme', value: 'kg' },
|
||||
{ label: 'Tonne', value: 't' },
|
||||
{ label: 'Litre', value: 'l' },
|
||||
{ label: 'Boîte', value: 'boîte' },
|
||||
{ label: 'Sac', value: 'sac' },
|
||||
{ label: 'Palette', value: 'palette' }
|
||||
];
|
||||
|
||||
const emplacements = [
|
||||
{ label: 'Entrepôt A', value: 'entrepot-a' },
|
||||
{ label: 'Entrepôt B', value: 'entrepot-b' },
|
||||
{ label: 'Magasin', value: 'magasin' },
|
||||
{ label: 'Chantier Mobile', value: 'chantier-mobile' },
|
||||
{ label: 'Bureau', value: 'bureau' }
|
||||
];
|
||||
|
||||
const typesMovement = [
|
||||
{ label: 'Entrée', value: 'ENTREE' },
|
||||
{ label: 'Sortie', value: 'SORTIE' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
// Simuler le chargement des données
|
||||
loadStockItems();
|
||||
}, []);
|
||||
|
||||
const loadStockItems = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// Simulation de données
|
||||
const mockData: StockItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
nom: 'Ciment Portland',
|
||||
reference: 'CIM-001',
|
||||
description: 'Ciment Portland 32.5 pour béton',
|
||||
categorie: 'materiaux',
|
||||
unite: 'sac',
|
||||
quantiteStock: 150,
|
||||
seuilAlerte: 20,
|
||||
prixUnitaire: 8.50,
|
||||
fournisseur: 'Lafarge',
|
||||
emplacement: 'entrepot-a',
|
||||
dateAjout: new Date('2024-01-15'),
|
||||
dateModification: new Date('2024-01-15'),
|
||||
actif: true
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
nom: 'Perceuse électrique',
|
||||
reference: 'OUT-002',
|
||||
description: 'Perceuse électrique 850W',
|
||||
categorie: 'outillage',
|
||||
unite: 'unité',
|
||||
quantiteStock: 5,
|
||||
seuilAlerte: 2,
|
||||
prixUnitaire: 120.00,
|
||||
fournisseur: 'Bosch',
|
||||
emplacement: 'magasin',
|
||||
dateAjout: new Date('2024-02-01'),
|
||||
dateModification: new Date('2024-02-01'),
|
||||
actif: true
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
nom: 'Casque de sécurité',
|
||||
reference: 'SEC-003',
|
||||
description: 'Casque de sécurité blanc',
|
||||
categorie: 'securite',
|
||||
unite: 'unité',
|
||||
quantiteStock: 8,
|
||||
seuilAlerte: 5,
|
||||
prixUnitaire: 25.00,
|
||||
fournisseur: 'Protecta',
|
||||
emplacement: 'bureau',
|
||||
dateAjout: new Date('2024-03-01'),
|
||||
dateModification: new Date('2024-03-01'),
|
||||
actif: true
|
||||
}
|
||||
];
|
||||
|
||||
setStockItems(mockData);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement du stock:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les articles',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openNew = () => {
|
||||
setItem({
|
||||
id: '',
|
||||
nom: '',
|
||||
reference: '',
|
||||
description: '',
|
||||
categorie: '',
|
||||
unite: 'unité',
|
||||
quantiteStock: 0,
|
||||
seuilAlerte: 10,
|
||||
prixUnitaire: 0,
|
||||
fournisseur: '',
|
||||
emplacement: '',
|
||||
dateAjout: new Date(),
|
||||
dateModification: new Date(),
|
||||
actif: true
|
||||
});
|
||||
setSubmitted(false);
|
||||
setItemDialog(true);
|
||||
};
|
||||
|
||||
const openMovement = (item: StockItem) => {
|
||||
setMovement({
|
||||
id: '',
|
||||
articleId: item.id,
|
||||
type: 'ENTREE',
|
||||
quantite: 0,
|
||||
motif: '',
|
||||
chantier: '',
|
||||
utilisateur: 'Admin',
|
||||
date: new Date()
|
||||
});
|
||||
setSubmitted(false);
|
||||
setMovementDialog(true);
|
||||
};
|
||||
|
||||
const hideDialog = () => {
|
||||
setSubmitted(false);
|
||||
setItemDialog(false);
|
||||
};
|
||||
|
||||
const hideMovementDialog = () => {
|
||||
setSubmitted(false);
|
||||
setMovementDialog(false);
|
||||
};
|
||||
|
||||
const hideDeleteItemDialog = () => {
|
||||
setDeleteItemDialog(false);
|
||||
};
|
||||
|
||||
const saveItem = () => {
|
||||
setSubmitted(true);
|
||||
|
||||
if (item.nom.trim() && item.reference.trim() && item.categorie) {
|
||||
let updatedItems = [...stockItems];
|
||||
|
||||
if (item.id) {
|
||||
// Mise à jour
|
||||
const index = stockItems.findIndex(i => i.id === item.id);
|
||||
updatedItems[index] = { ...item, dateModification: new Date() };
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Article mis à jour',
|
||||
life: 3000
|
||||
});
|
||||
} else {
|
||||
// Création
|
||||
const newItem = {
|
||||
...item,
|
||||
id: Date.now().toString(),
|
||||
dateAjout: new Date(),
|
||||
dateModification: new Date()
|
||||
};
|
||||
updatedItems.push(newItem);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Article créé',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
|
||||
setStockItems(updatedItems);
|
||||
setItemDialog(false);
|
||||
setItem({
|
||||
id: '',
|
||||
nom: '',
|
||||
reference: '',
|
||||
description: '',
|
||||
categorie: '',
|
||||
unite: 'unité',
|
||||
quantiteStock: 0,
|
||||
seuilAlerte: 10,
|
||||
prixUnitaire: 0,
|
||||
fournisseur: '',
|
||||
emplacement: '',
|
||||
dateAjout: new Date(),
|
||||
dateModification: new Date(),
|
||||
actif: true
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const saveMovement = () => {
|
||||
setSubmitted(true);
|
||||
|
||||
if (movement.quantite > 0 && movement.motif.trim()) {
|
||||
const targetItem = stockItems.find(i => i.id === movement.articleId);
|
||||
if (targetItem) {
|
||||
const newQuantity = movement.type === 'ENTREE'
|
||||
? targetItem.quantiteStock + movement.quantite
|
||||
: targetItem.quantiteStock - movement.quantite;
|
||||
|
||||
if (newQuantity < 0) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Stock insuffisant',
|
||||
life: 3000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedItems = stockItems.map(item =>
|
||||
item.id === movement.articleId
|
||||
? { ...item, quantiteStock: newQuantity, dateModification: new Date() }
|
||||
: item
|
||||
);
|
||||
|
||||
setStockItems(updatedItems);
|
||||
setMovementDialog(false);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: `Mouvement de stock ${movement.type === 'ENTREE' ? 'entrée' : 'sortie'} enregistré`,
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const editItem = (item: StockItem) => {
|
||||
setItem({ ...item });
|
||||
setItemDialog(true);
|
||||
};
|
||||
|
||||
const confirmDeleteItem = (item: StockItem) => {
|
||||
setItem(item);
|
||||
setDeleteItemDialog(true);
|
||||
};
|
||||
|
||||
const deleteItem = () => {
|
||||
const updatedItems = stockItems.filter(i => i.id !== item.id);
|
||||
setStockItems(updatedItems);
|
||||
setDeleteItemDialog(false);
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Article supprimé',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
dt.current?.exportCSV();
|
||||
};
|
||||
|
||||
const onInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
|
||||
const val = (e.target && e.target.value) || '';
|
||||
let _item = { ...item };
|
||||
(_item as any)[name] = val;
|
||||
setItem(_item);
|
||||
};
|
||||
|
||||
const onNumberChange = (e: any, name: string) => {
|
||||
let _item = { ...item };
|
||||
(_item as any)[name] = e.value;
|
||||
setItem(_item);
|
||||
};
|
||||
|
||||
const onDropdownChange = (e: any, name: string) => {
|
||||
let _item = { ...item };
|
||||
(_item as any)[name] = e.value;
|
||||
setItem(_item);
|
||||
};
|
||||
|
||||
const onMovementInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
|
||||
const val = (e.target && e.target.value) || '';
|
||||
let _movement = { ...movement };
|
||||
(_movement as any)[name] = val;
|
||||
setMovement(_movement);
|
||||
};
|
||||
|
||||
const onMovementNumberChange = (e: any, name: string) => {
|
||||
let _movement = { ...movement };
|
||||
(_movement as any)[name] = e.value;
|
||||
setMovement(_movement);
|
||||
};
|
||||
|
||||
const onMovementDropdownChange = (e: any, name: string) => {
|
||||
let _movement = { ...movement };
|
||||
(_movement as any)[name] = e.value;
|
||||
setMovement(_movement);
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
label="Nouveau"
|
||||
icon="pi pi-plus"
|
||||
severity="success"
|
||||
onClick={openNew}
|
||||
/>
|
||||
<Button
|
||||
label="Alerte Stock"
|
||||
icon="pi pi-exclamation-triangle"
|
||||
severity="warning"
|
||||
onClick={() => {
|
||||
const alertes = stockItems.filter(item => item.quantiteStock <= item.seuilAlerte);
|
||||
if (alertes.length > 0) {
|
||||
toast.current?.show({
|
||||
severity: 'warn',
|
||||
summary: 'Alertes Stock',
|
||||
detail: `${alertes.length} article(s) en rupture ou sous le seuil`,
|
||||
life: 5000
|
||||
});
|
||||
} else {
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Stock',
|
||||
detail: 'Aucune alerte stock',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<Button
|
||||
label="Exporter"
|
||||
icon="pi pi-upload"
|
||||
severity="help"
|
||||
onClick={exportCSV}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: StockItem) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-pencil"
|
||||
rounded
|
||||
severity="success"
|
||||
onClick={() => editItem(rowData)}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-arrows-h"
|
||||
rounded
|
||||
severity="info"
|
||||
onClick={() => openMovement(rowData)}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
rounded
|
||||
severity="warning"
|
||||
onClick={() => confirmDeleteItem(rowData)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const stockStatusBodyTemplate = (rowData: StockItem) => {
|
||||
if (rowData.quantiteStock === 0) {
|
||||
return <Tag value="Rupture" severity="danger" />;
|
||||
} else if (rowData.quantiteStock <= rowData.seuilAlerte) {
|
||||
return <Tag value="Alerte" severity="warning" />;
|
||||
} else {
|
||||
return <Tag value="Disponible" severity="success" />;
|
||||
}
|
||||
};
|
||||
|
||||
const categorieBodyTemplate = (rowData: StockItem) => {
|
||||
const categorie = categories.find(c => c.value === rowData.categorie);
|
||||
return categorie ? categorie.label : rowData.categorie;
|
||||
};
|
||||
|
||||
const emplacementBodyTemplate = (rowData: StockItem) => {
|
||||
const emplacement = emplacements.find(e => e.value === rowData.emplacement);
|
||||
return emplacement ? emplacement.label : rowData.emplacement;
|
||||
};
|
||||
|
||||
const prixBodyTemplate = (rowData: StockItem) => {
|
||||
return new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR'
|
||||
}).format(rowData.prixUnitaire);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 className="m-0">Gestion du Stock</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 itemDialogFooter = (
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button label="Annuler" icon="pi pi-times" text onClick={hideDialog} />
|
||||
<Button label="Sauvegarder" icon="pi pi-check" onClick={saveItem} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const movementDialogFooter = (
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button label="Annuler" icon="pi pi-times" text onClick={hideMovementDialog} />
|
||||
<Button label="Enregistrer" icon="pi pi-check" onClick={saveMovement} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const deleteItemDialogFooter = (
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button label="Non" icon="pi pi-times" text onClick={hideDeleteItemDialog} />
|
||||
<Button label="Oui" icon="pi pi-check" onClick={deleteItem} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toast ref={toast} />
|
||||
<ConfirmDialog />
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
||||
|
||||
<DataTable
|
||||
ref={dt}
|
||||
value={stockItems}
|
||||
selection={selectedItems}
|
||||
onSelectionChange={(e) => setSelectedItems(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} articles"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucun article trouvé."
|
||||
header={header}
|
||||
responsiveLayout="scroll"
|
||||
loading={loading}
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
|
||||
<Column field="reference" header="Référence" sortable headerStyle={{ minWidth: '10rem' }} />
|
||||
<Column field="nom" header="Nom" sortable headerStyle={{ minWidth: '12rem' }} />
|
||||
<Column field="categorie" header="Catégorie" body={categorieBodyTemplate} sortable headerStyle={{ minWidth: '10rem' }} />
|
||||
<Column field="quantiteStock" header="Stock" sortable headerStyle={{ minWidth: '8rem' }} />
|
||||
<Column field="unite" header="Unité" sortable headerStyle={{ minWidth: '8rem' }} />
|
||||
<Column field="status" header="Statut" body={stockStatusBodyTemplate} headerStyle={{ minWidth: '10rem' }} />
|
||||
<Column field="prixUnitaire" header="Prix" body={prixBodyTemplate} sortable headerStyle={{ minWidth: '10rem' }} />
|
||||
<Column field="emplacement" header="Emplacement" body={emplacementBodyTemplate} sortable headerStyle={{ minWidth: '10rem' }} />
|
||||
<Column body={actionBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
|
||||
</DataTable>
|
||||
|
||||
<Dialog
|
||||
visible={itemDialog}
|
||||
style={{ width: '600px' }}
|
||||
header="Détails de l'article"
|
||||
modal
|
||||
className="p-fluid"
|
||||
footer={itemDialogFooter}
|
||||
onHide={hideDialog}
|
||||
>
|
||||
<div className="formgrid grid">
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="nom">Nom</label>
|
||||
<InputText
|
||||
id="nom"
|
||||
value={item.nom}
|
||||
onChange={(e) => onInputChange(e, 'nom')}
|
||||
required
|
||||
className={submitted && !item.nom ? 'p-invalid' : ''}
|
||||
/>
|
||||
{submitted && !item.nom && <small className="p-invalid">Le nom est requis.</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="reference">Référence</label>
|
||||
<InputText
|
||||
id="reference"
|
||||
value={item.reference}
|
||||
onChange={(e) => onInputChange(e, 'reference')}
|
||||
required
|
||||
className={submitted && !item.reference ? 'p-invalid' : ''}
|
||||
/>
|
||||
{submitted && !item.reference && <small className="p-invalid">La référence est requise.</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="description">Description</label>
|
||||
<InputTextarea
|
||||
id="description"
|
||||
value={item.description}
|
||||
onChange={(e) => onInputChange(e, 'description')}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="categorie">Catégorie</label>
|
||||
<Dropdown
|
||||
id="categorie"
|
||||
value={item.categorie}
|
||||
options={categories}
|
||||
onChange={(e) => onDropdownChange(e, 'categorie')}
|
||||
placeholder="Sélectionnez une catégorie"
|
||||
required
|
||||
className={submitted && !item.categorie ? 'p-invalid' : ''}
|
||||
/>
|
||||
{submitted && !item.categorie && <small className="p-invalid">La catégorie est requise.</small>}
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="unite">Unité</label>
|
||||
<Dropdown
|
||||
id="unite"
|
||||
value={item.unite}
|
||||
options={unites}
|
||||
onChange={(e) => onDropdownChange(e, 'unite')}
|
||||
placeholder="Sélectionnez une unité"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<label htmlFor="quantiteStock">Stock actuel</label>
|
||||
<InputNumber
|
||||
id="quantiteStock"
|
||||
value={item.quantiteStock}
|
||||
onValueChange={(e) => onNumberChange(e, 'quantiteStock')}
|
||||
min={0}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<label htmlFor="seuilAlerte">Seuil d'alerte</label>
|
||||
<InputNumber
|
||||
id="seuilAlerte"
|
||||
value={item.seuilAlerte}
|
||||
onValueChange={(e) => onNumberChange(e, 'seuilAlerte')}
|
||||
min={0}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<label htmlFor="prixUnitaire">Prix unitaire (€)</label>
|
||||
<InputNumber
|
||||
id="prixUnitaire"
|
||||
value={item.prixUnitaire}
|
||||
onValueChange={(e) => onNumberChange(e, 'prixUnitaire')}
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
locale="fr-FR"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="fournisseur">Fournisseur</label>
|
||||
<InputText
|
||||
id="fournisseur"
|
||||
value={item.fournisseur}
|
||||
onChange={(e) => onInputChange(e, 'fournisseur')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="emplacement">Emplacement</label>
|
||||
<Dropdown
|
||||
id="emplacement"
|
||||
value={item.emplacement}
|
||||
options={emplacements}
|
||||
onChange={(e) => onDropdownChange(e, 'emplacement')}
|
||||
placeholder="Sélectionnez un emplacement"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
visible={movementDialog}
|
||||
style={{ width: '450px' }}
|
||||
header="Mouvement de stock"
|
||||
modal
|
||||
className="p-fluid"
|
||||
footer={movementDialogFooter}
|
||||
onHide={hideMovementDialog}
|
||||
>
|
||||
<div className="formgrid grid">
|
||||
<div className="field col-12">
|
||||
<label htmlFor="type">Type de mouvement</label>
|
||||
<Dropdown
|
||||
id="type"
|
||||
value={movement.type}
|
||||
options={typesMovement}
|
||||
onChange={(e) => onMovementDropdownChange(e, 'type')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="quantite">Quantité</label>
|
||||
<InputNumber
|
||||
id="quantite"
|
||||
value={movement.quantite}
|
||||
onValueChange={(e) => onMovementNumberChange(e, 'quantite')}
|
||||
min={1}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="motif">Motif</label>
|
||||
<InputTextarea
|
||||
id="motif"
|
||||
value={movement.motif}
|
||||
onChange={(e) => onMovementInputChange(e, 'motif')}
|
||||
rows={3}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<label htmlFor="chantier">Chantier (optionnel)</label>
|
||||
<InputText
|
||||
id="chantier"
|
||||
value={movement.chantier}
|
||||
onChange={(e) => onMovementInputChange(e, 'chantier')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
visible={deleteItemDialog}
|
||||
style={{ width: '450px' }}
|
||||
header="Confirmer"
|
||||
modal
|
||||
footer={deleteItemDialogFooter}
|
||||
onHide={hideDeleteItemDialog}
|
||||
>
|
||||
<div className="flex align-items-center justify-content-center">
|
||||
<i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
|
||||
{item && (
|
||||
<span>
|
||||
Êtes-vous sûr de vouloir supprimer l'article <b>{item.nom}</b> ?
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Dialog>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StockPage;
|
||||
1025
app/(main)/stock/sorties/page.tsx
Normal file
1025
app/(main)/stock/sorties/page.tsx
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user