70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
/**
|
|
* Composant réutilisable pour afficher l'avancement d'un chantier
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { ProgressBar } from 'primereact/progressbar';
|
|
import { AVANCEMENT_CONFIG, COMMON_CLASSES } from './ChantierStyles';
|
|
|
|
interface ChantierProgressBarProps {
|
|
value: number;
|
|
showValue?: boolean;
|
|
showPercentage?: boolean;
|
|
size?: 'small' | 'normal' | 'large';
|
|
showCompletionIcon?: boolean;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
const ChantierProgressBar: React.FC<ChantierProgressBarProps> = ({
|
|
value,
|
|
showValue = false,
|
|
showPercentage = true,
|
|
size = 'normal',
|
|
showCompletionIcon = true,
|
|
className = '',
|
|
style = {}
|
|
}) => {
|
|
// Déterminer la configuration couleur selon l'avancement
|
|
const getProgressConfig = () => {
|
|
if (value < AVANCEMENT_CONFIG.CRITIQUE.threshold) return AVANCEMENT_CONFIG.CRITIQUE;
|
|
if (value < AVANCEMENT_CONFIG.ATTENTION.threshold) return AVANCEMENT_CONFIG.ATTENTION;
|
|
if (value < AVANCEMENT_CONFIG.PROGRES.threshold) return AVANCEMENT_CONFIG.PROGRES;
|
|
return AVANCEMENT_CONFIG.TERMINE;
|
|
};
|
|
|
|
const config = getProgressConfig();
|
|
|
|
const sizeConfig = {
|
|
small: { height: '8px', fontSize: 'text-xs' },
|
|
normal: { height: '16px', fontSize: 'text-sm' },
|
|
large: { height: '20px', fontSize: 'text-base' }
|
|
};
|
|
|
|
const currentSize = sizeConfig[size];
|
|
|
|
return (
|
|
<div className={`${COMMON_CLASSES.PROGRESS_CONTAINER} ${className}`} style={style}>
|
|
<div className="w-full">
|
|
<ProgressBar
|
|
value={value}
|
|
showValue={showValue}
|
|
style={{ height: currentSize.height }}
|
|
className={`progress-${size}`}
|
|
/>
|
|
</div>
|
|
|
|
{showPercentage && (
|
|
<span className={`ml-2 font-bold ${currentSize.fontSize} ${config.textColor}`}>
|
|
{value}%
|
|
</span>
|
|
)}
|
|
|
|
{showCompletionIcon && value === 100 && (
|
|
<i className="pi pi-check-circle text-green-500 text-xl ml-2" />
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChantierProgressBar; |