396 lines
15 KiB
TypeScript
396 lines
15 KiB
TypeScript
// Parametres.tsx — Page de paramétrage du calcul de renouvellement
|
|
// Design: Corporate Modernism — Itinova Budget SI 2027
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useLocation } from 'wouter';
|
|
import {
|
|
Settings,
|
|
Monitor,
|
|
Laptop,
|
|
Euro,
|
|
RotateCcw,
|
|
Save,
|
|
CheckCircle,
|
|
ChevronLeft,
|
|
Info,
|
|
BarChart3,
|
|
Calendar,
|
|
} from 'lucide-react';
|
|
import { ANNEES_DISPONIBLES } from '../contexts/AnneeContext';
|
|
import { AppSidebar } from '../components/AppSidebar';
|
|
import { useParametres, PARAMETRES_DEFAULTS } from '../contexts/ParametresContext';
|
|
import { formatEuros } from '../lib/format';
|
|
import { toast } from 'sonner';
|
|
|
|
interface FieldState {
|
|
seuilFixesAns: number;
|
|
seuilPortablesAns: number;
|
|
coutFixe: number;
|
|
coutPortable: number;
|
|
anneeDefaut: number;
|
|
}
|
|
|
|
function SliderInput({
|
|
label,
|
|
icon: Icon,
|
|
value,
|
|
min,
|
|
max,
|
|
step,
|
|
unit,
|
|
description,
|
|
onChange,
|
|
accentClass,
|
|
}: {
|
|
label: string;
|
|
icon: React.ElementType;
|
|
value: number;
|
|
min: number;
|
|
max: number;
|
|
step: number;
|
|
unit: string;
|
|
description: string;
|
|
onChange: (v: number) => void;
|
|
accentClass: string;
|
|
}) {
|
|
return (
|
|
<div className="bg-card border border-border rounded-xl p-5 space-y-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${accentClass}`}>
|
|
<Icon className="w-5 h-5" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-semibold text-foreground" style={{ fontFamily: 'Sora, sans-serif' }}>
|
|
{label}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground mt-0.5">{description}</p>
|
|
</div>
|
|
<div className="flex-shrink-0 text-right">
|
|
<span className={`text-2xl font-bold tabular-nums ${accentClass.replace('bg-', 'text-').replace('/10', '')}`}>
|
|
{value}
|
|
</span>
|
|
<span className="text-sm text-muted-foreground ml-1">{unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Slider */}
|
|
<div className="space-y-2">
|
|
<input
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
onChange={(e) => onChange(Number(e.target.value))}
|
|
className="w-full h-2 rounded-full appearance-none cursor-pointer accent-primary bg-muted"
|
|
/>
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
|
<span>{min} {unit}</span>
|
|
<span>{max} {unit}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Input numérique direct */}
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm text-muted-foreground flex-shrink-0">Valeur exacte :</label>
|
|
<input
|
|
type="number"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
onChange={(e) => {
|
|
const v = Number(e.target.value);
|
|
if (!isNaN(v) && v >= min && v <= max) onChange(v);
|
|
}}
|
|
className="w-24 px-3 py-1.5 text-sm border border-border rounded-lg bg-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary tabular-nums"
|
|
/>
|
|
<span className="text-sm text-muted-foreground">{unit}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Parametres() {
|
|
const [, navigate] = useLocation();
|
|
const { parametres, setParametres, resetParametres } = useParametres();
|
|
const [draft, setDraft] = useState<FieldState>({ ...parametres });
|
|
const [saved, setSaved] = useState(false);
|
|
|
|
// Sync si les paramètres changent depuis l'extérieur
|
|
useEffect(() => {
|
|
setDraft({ ...parametres });
|
|
}, [parametres]);
|
|
|
|
const hasChanges =
|
|
draft.seuilFixesAns !== parametres.seuilFixesAns ||
|
|
draft.seuilPortablesAns !== parametres.seuilPortablesAns ||
|
|
draft.coutFixe !== parametres.coutFixe ||
|
|
draft.coutPortable !== parametres.coutPortable ||
|
|
draft.anneeDefaut !== parametres.anneeDefaut;
|
|
|
|
const handleSave = () => {
|
|
setParametres(draft);
|
|
setSaved(true);
|
|
toast.success('Paramètres enregistrés', {
|
|
description: 'Les budgets ont été recalculés avec les nouveaux seuils.',
|
|
});
|
|
setTimeout(() => setSaved(false), 2500);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setDraft({ ...PARAMETRES_DEFAULTS });
|
|
resetParametres();
|
|
toast.info('Paramètres réinitialisés', {
|
|
description: 'Les valeurs par défaut ont été restaurées.',
|
|
});
|
|
};
|
|
|
|
const update = (key: keyof FieldState) => (v: number) => {
|
|
setDraft((d) => ({ ...d, [key]: v }));
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex bg-background">
|
|
<AppSidebar />
|
|
|
|
{/* Contenu principal */}
|
|
<main className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
|
{/* En-tête */}
|
|
<header className="bg-card border-b border-border px-6 py-4 flex-shrink-0">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => navigate('/')}
|
|
className="p-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
|
|
title="Retour aux établissements"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
</button>
|
|
<div>
|
|
<h1 className="text-xl font-bold text-foreground" style={{ fontFamily: 'Sora, sans-serif' }}>
|
|
Paramètres de calcul
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground mt-0.5">
|
|
Seuils de vétusté et coûts unitaires — Budget 2027
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleReset}
|
|
className="flex items-center gap-2 px-3 py-2 text-sm rounded-lg border border-border bg-card hover:bg-muted transition-colors text-muted-foreground"
|
|
>
|
|
<RotateCcw className="w-3.5 h-3.5" />
|
|
Réinitialiser
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={!hasChanges}
|
|
className={`flex items-center gap-2 px-4 py-2 text-sm rounded-lg font-medium transition-all ${
|
|
saved
|
|
? 'bg-emerald-600 text-white'
|
|
: hasChanges
|
|
? 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm'
|
|
: 'bg-muted text-muted-foreground cursor-not-allowed'
|
|
}`}
|
|
>
|
|
{saved ? (
|
|
<>
|
|
<CheckCircle className="w-3.5 h-3.5" />
|
|
Enregistré
|
|
</>
|
|
) : (
|
|
<>
|
|
<Save className="w-3.5 h-3.5" />
|
|
Enregistrer
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Contenu */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-6">
|
|
<div className="max-w-2xl space-y-8">
|
|
|
|
{/* Bandeau info */}
|
|
<div className="flex items-start gap-3 bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 text-sm text-blue-800">
|
|
<Info className="w-4 h-4 mt-0.5 flex-shrink-0 text-blue-500" />
|
|
<p>
|
|
Les modifications sont appliquées <strong>immédiatement</strong> après enregistrement.
|
|
Tous les budgets des 60 établissements sont recalculés automatiquement.
|
|
Les valeurs sont sauvegardées dans votre navigateur.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Section vétusté */}
|
|
<section className="space-y-4">
|
|
<div className="flex items-center gap-2 pb-2 border-b border-border">
|
|
<Settings className="w-4 h-4 text-muted-foreground" />
|
|
<h2 className="font-semibold text-foreground" style={{ fontFamily: 'Sora, sans-serif' }}>
|
|
Seuils de vétusté
|
|
</h2>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Un équipement est considéré à renouveler si son âge (calculé au 01/01/2027) est
|
|
<strong> supérieur ou égal</strong> au seuil défini ci-dessous.
|
|
</p>
|
|
|
|
<SliderInput
|
|
label="PC Fixes"
|
|
icon={Monitor}
|
|
value={draft.seuilFixesAns}
|
|
min={1}
|
|
max={15}
|
|
step={1}
|
|
unit="ans"
|
|
description="Âge minimum pour renouveler un PC de bureau"
|
|
onChange={update('seuilFixesAns')}
|
|
accentClass="bg-blue-100 text-blue-700"
|
|
/>
|
|
|
|
<SliderInput
|
|
label="PC Portables"
|
|
icon={Laptop}
|
|
value={draft.seuilPortablesAns}
|
|
min={1}
|
|
max={15}
|
|
step={1}
|
|
unit="ans"
|
|
description="Âge minimum pour renouveler un PC portable"
|
|
onChange={update('seuilPortablesAns')}
|
|
accentClass="bg-orange-100 text-orange-700"
|
|
/>
|
|
</section>
|
|
|
|
{/* Section coûts */}
|
|
<section className="space-y-4">
|
|
<div className="flex items-center gap-2 pb-2 border-b border-border">
|
|
<Euro className="w-4 h-4 text-muted-foreground" />
|
|
<h2 className="font-semibold text-foreground" style={{ fontFamily: 'Sora, sans-serif' }}>
|
|
Coûts unitaires TTC
|
|
</h2>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Prix d'achat unitaire estimé utilisé pour le calcul du budget de renouvellement.
|
|
</p>
|
|
|
|
<SliderInput
|
|
label="Coût d'un PC Fixe"
|
|
icon={Monitor}
|
|
value={draft.coutFixe}
|
|
min={100}
|
|
max={2000}
|
|
step={50}
|
|
unit="€ TTC"
|
|
description="Prix unitaire estimé pour un PC de bureau neuf"
|
|
onChange={update('coutFixe')}
|
|
accentClass="bg-blue-100 text-blue-700"
|
|
/>
|
|
|
|
<SliderInput
|
|
label="Coût d'un PC Portable"
|
|
icon={Laptop}
|
|
value={draft.coutPortable}
|
|
min={100}
|
|
max={3000}
|
|
step={50}
|
|
unit="€ TTC"
|
|
description="Prix unitaire estimé pour un PC portable neuf"
|
|
onChange={update('coutPortable')}
|
|
accentClass="bg-orange-100 text-orange-700"
|
|
/>
|
|
</section>
|
|
|
|
{/* Section année par défaut */}
|
|
<section className="space-y-4">
|
|
<div className="flex items-center gap-2 pb-2 border-b border-border">
|
|
<Calendar className="w-4 h-4 text-muted-foreground" />
|
|
<h2 className="font-semibold text-foreground" style={{ fontFamily: 'Sora, sans-serif' }}>
|
|
Année d'ouverture par défaut
|
|
</h2>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
L'année sélectionnée au démarrage de l'application lorsqu'aucune session précédente n'est mémorisée.
|
|
</p>
|
|
<div className="bg-card border border-border rounded-xl p-5">
|
|
<div className="flex items-center gap-4 flex-wrap">
|
|
<div className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 bg-indigo-100 text-indigo-700">
|
|
<Calendar className="w-5 h-5" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-foreground" style={{ fontFamily: 'Sora, sans-serif' }}>Année par défaut</p>
|
|
<p className="text-sm text-muted-foreground mt-0.5">Exercice ouvert au premier lancement</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{ANNEES_DISPONIBLES.map(a => (
|
|
<button
|
|
key={a}
|
|
onClick={() => setDraft(d => ({ ...d, anneeDefaut: a }))}
|
|
className={`px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
|
|
draft.anneeDefaut === a
|
|
? 'bg-indigo-600 text-white shadow-sm'
|
|
: 'bg-muted text-muted-foreground hover:bg-muted/70'
|
|
}`}
|
|
>
|
|
{a}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Aperçu de l'impact */}
|
|
<section className="space-y-4">
|
|
<div className="flex items-center gap-2 pb-2 border-b border-border">
|
|
<BarChart3 className="w-4 h-4 text-muted-foreground" />
|
|
<h2 className="font-semibold text-foreground" style={{ fontFamily: 'Sora, sans-serif' }}>
|
|
Paramètres en cours d'édition
|
|
</h2>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{[
|
|
{ label: 'Seuil PC Fixes', value: `${draft.seuilFixesAns} ans`, changed: draft.seuilFixesAns !== parametres.seuilFixesAns },
|
|
{ label: 'Seuil PC Portables', value: `${draft.seuilPortablesAns} ans`, changed: draft.seuilPortablesAns !== parametres.seuilPortablesAns },
|
|
{ label: 'Coût fixe unitaire', value: formatEuros(draft.coutFixe), changed: draft.coutFixe !== parametres.coutFixe },
|
|
{ label: 'Coût portable unitaire', value: formatEuros(draft.coutPortable), changed: draft.coutPortable !== parametres.coutPortable },
|
|
{ label: 'Année par défaut', value: `${draft.anneeDefaut}`, changed: draft.anneeDefaut !== parametres.anneeDefaut },
|
|
].map((item) => (
|
|
<div
|
|
key={item.label}
|
|
className={`rounded-lg border px-4 py-3 transition-colors ${
|
|
item.changed
|
|
? 'border-orange-300 bg-orange-50'
|
|
: 'border-border bg-card'
|
|
}`}
|
|
>
|
|
<p className="text-xs text-muted-foreground">{item.label}</p>
|
|
<p className={`font-bold mt-0.5 ${item.changed ? 'text-orange-700' : 'text-foreground'}`}>
|
|
{item.value}
|
|
{item.changed && (
|
|
<span className="ml-2 text-[10px] font-normal text-orange-500 uppercase tracking-wide">
|
|
modifié
|
|
</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{hasChanges && (
|
|
<p className="text-sm text-orange-600 flex items-center gap-1.5">
|
|
<Info className="w-3.5 h-3.5" />
|
|
Des modifications non enregistrées sont en attente. Cliquez sur <strong>Enregistrer</strong> pour les appliquer.
|
|
</p>
|
|
)}
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|