Add German comma decimal input for currency/decimal fields

- New utility module `germanDecimal.js` with parseGermanDecimal(),
  sanitizeDecimalInput(), and formatGermanDecimal()
- New DecimalInput component replacing type="number" inputs
- Enables users to enter comma as decimal separator (12,50)
- Applied to: hourlyWage, weeklyHours (ContractForm)
  and billingRate, travelCostRate, travelCostPerKm,
  mealAllowanceRate, minimumHours, and percent surcharges (FacilityForm)
- Display formatting updated in FacilityDetailPanel to show comma decimals

Both comma and dot are accepted as decimal separators. Backend
decimal types remain unchanged (already decimal?).

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Felix Kemmler
2026-08-10 22:16:20 +02:00
co-authored by Claude Haiku 4.5
parent fd20b07e83
commit 52fbec3214
5 changed files with 110 additions and 29 deletions
@@ -1,5 +1,7 @@
import OmsorgButton from "../../components/ui/OmsorgButton";
import DecimalInput from "../../components/ui/DecimalInput";
import { useValueListItems } from "../../app/useValueListItems";
import { parseGermanDecimal } from "../../utils/germanDecimal";
export const emptyContractForm = {
contractType: "",
@@ -36,8 +38,8 @@ export function contractFormToPayload(form, { employeeId, includeStatus = false
facilityId: null,
startDate: form.startDate,
endDate: form.endDate || null,
weeklyHours: form.weeklyHours === "" ? null : Number(form.weeklyHours),
hourlyWage: form.hourlyWage === "" ? null : Number(form.hourlyWage),
weeklyHours: parseGermanDecimal(form.weeklyHours),
hourlyWage: parseGermanDecimal(form.hourlyWage),
allowancesDescription: form.allowancesDescription.trim() || null,
overtimeRules: form.overtimeRules.trim() || null,
vacationDaysPerYear: form.vacationDaysPerYear === "" ? null : Number(form.vacationDaysPerYear),
@@ -59,6 +61,10 @@ export default function ContractForm({ form, onChange, includeStatus = false })
return (event) => onChange({ ...form, [field]: event.target.value });
}
function updateDecimalField(field) {
return (rawValue) => onChange({ ...form, [field]: rawValue });
}
return (
<div className="form-grid">
<label className="form-field">
@@ -101,12 +107,12 @@ export default function ContractForm({ form, onChange, includeStatus = false })
<div className="form-row">
<label className="form-field">
<span>Arbeitszeit (Std./Woche)</span>
<input type="number" min="0" step="0.5" value={form.weeklyHours} onChange={updateField("weeklyHours")} />
<DecimalInput value={form.weeklyHours} onChange={updateDecimalField("weeklyHours")} />
</label>
<label className="form-field">
<span>Stundenlohn ()</span>
<input type="number" min="0" step="0.01" value={form.hourlyWage} onChange={updateField("hourlyWage")} />
<DecimalInput value={form.hourlyWage} onChange={updateDecimalField("hourlyWage")} />
</label>
</div>