first commit
This commit is contained in:
Stefan Hacker
@@ -0,0 +1,181 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { appSettingsApi } from '../../services/api';
|
||||
import Card from '../../components/ui/Card';
|
||||
import Input from '../../components/ui/Input';
|
||||
import Button from '../../components/ui/Button';
|
||||
import { ArrowLeft, Clock, AlertTriangle, AlertCircle, CheckCircle } from 'lucide-react';
|
||||
|
||||
export default function DeadlineSettings() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: settingsData, isLoading } = useQuery({
|
||||
queryKey: ['app-settings'],
|
||||
queryFn: () => appSettingsApi.getAll(),
|
||||
});
|
||||
|
||||
const [criticalDays, setCriticalDays] = useState('14');
|
||||
const [warningDays, setWarningDays] = useState('42');
|
||||
const [okDays, setOkDays] = useState('90');
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (settingsData?.data) {
|
||||
setCriticalDays(settingsData.data.deadlineCriticalDays || '14');
|
||||
setWarningDays(settingsData.data.deadlineWarningDays || '42');
|
||||
setOkDays(settingsData.data.deadlineOkDays || '90');
|
||||
setHasChanges(false);
|
||||
}
|
||||
}, [settingsData]);
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: (settings: Record<string, string>) => appSettingsApi.update(settings),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['app-settings'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['contract-cockpit'] });
|
||||
setHasChanges(false);
|
||||
},
|
||||
});
|
||||
|
||||
const handleSave = () => {
|
||||
// Validierung
|
||||
const critical = parseInt(criticalDays);
|
||||
const warning = parseInt(warningDays);
|
||||
const ok = parseInt(okDays);
|
||||
|
||||
if (isNaN(critical) || isNaN(warning) || isNaN(ok)) {
|
||||
alert('Bitte gültige Zahlen eingeben');
|
||||
return;
|
||||
}
|
||||
|
||||
if (critical >= warning || warning >= ok) {
|
||||
alert('Die Werte müssen aufsteigend sein: Kritisch < Warnung < OK');
|
||||
return;
|
||||
}
|
||||
|
||||
updateMutation.mutate({
|
||||
deadlineCriticalDays: criticalDays,
|
||||
deadlineWarningDays: warningDays,
|
||||
deadlineOkDays: okDays,
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (setter: (value: string) => void, value: string) => {
|
||||
setter(value);
|
||||
setHasChanges(true);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-gray-500">Laden...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<Link to="/settings" className="text-gray-500 hover:text-gray-700">
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="w-6 h-6" />
|
||||
<h1 className="text-2xl font-bold">Fristenschwellen</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card title="Farbkodierung für Fristen">
|
||||
<p className="text-gray-600 mb-6">
|
||||
Definiere, ab wann Vertragsfristen als kritisch (rot), Warnung (gelb) oder OK (grün)
|
||||
angezeigt werden sollen. Die Werte geben die Anzahl der Tage bis zur Frist an.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Kritisch (Rot) */}
|
||||
<div className="flex items-center gap-4 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
<AlertCircle className="w-8 h-8 text-red-500 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<label className="block font-medium text-red-800 mb-1">
|
||||
Kritisch (Rot)
|
||||
</label>
|
||||
<p className="text-sm text-red-600 mb-2">
|
||||
Fristen mit weniger als X Tagen werden rot markiert
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
value={criticalDays}
|
||||
onChange={(e) => handleChange(setCriticalDays, e.target.value)}
|
||||
className="w-24"
|
||||
/>
|
||||
<span className="text-red-700">Tage</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warnung (Gelb) */}
|
||||
<div className="flex items-center gap-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||||
<AlertTriangle className="w-8 h-8 text-yellow-500 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<label className="block font-medium text-yellow-800 mb-1">
|
||||
Warnung (Gelb)
|
||||
</label>
|
||||
<p className="text-sm text-yellow-600 mb-2">
|
||||
Fristen mit weniger als X Tagen werden gelb markiert
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
value={warningDays}
|
||||
onChange={(e) => handleChange(setWarningDays, e.target.value)}
|
||||
className="w-24"
|
||||
/>
|
||||
<span className="text-yellow-700">Tage</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* OK (Grün) */}
|
||||
<div className="flex items-center gap-4 p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<CheckCircle className="w-8 h-8 text-green-500 flex-shrink-0" />
|
||||
<div className="flex-1">
|
||||
<label className="block font-medium text-green-800 mb-1">
|
||||
OK (Grün)
|
||||
</label>
|
||||
<p className="text-sm text-green-600 mb-2">
|
||||
Fristen mit weniger als X Tagen werden grün markiert (darüber nicht angezeigt)
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
min="1"
|
||||
value={okDays}
|
||||
onChange={(e) => handleChange(setOkDays, e.target.value)}
|
||||
className="w-24"
|
||||
/>
|
||||
<span className="text-green-700">Tage</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-4 border-t flex justify-between items-center">
|
||||
<p className="text-sm text-gray-500">
|
||||
Beispiel: Bei 14/42/90 Tagen wird eine Frist die in 10 Tagen abläuft rot,
|
||||
eine in 30 Tagen gelb, und eine in 60 Tagen grün markiert.
|
||||
</p>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={!hasChanges || updateMutation.isPending}
|
||||
>
|
||||
{updateMutation.isPending ? 'Speichere...' : 'Speichern'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user