simonfranken/timetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace type=time with separate hours/minutes number inputs in correction form

Browse Source 
type="time" renders a clock-time picker (with AM/PM), not a duration input.
Switch to two type="number" fields (h / m) so the intent is unambiguous.
This commit is contained in:
Simon Franken
2026-02-24 21:53:21 +01:00
parent 91d13b19db
commit 924b83eb4d
1 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/pages/ClientsPage.tsx
View File

@@ -60,7 +60,8 @@ function ClientTargetPanel({
// Correction form state // Correction form state
const [showCorrectionForm, setShowCorrectionForm] = useState(false); const [showCorrectionForm, setShowCorrectionForm] = useState(false);
const [corrDate, setCorrDate] = useState(''); const [corrDate, setCorrDate] = useState('');
const [corrDuration, setCorrDuration] = useState(''); const [corrHours, setCorrHours] = useState('');
const [corrMins, setCorrMins] = useState('');
const [corrNegative, setCorrNegative] = useState(false); const [corrNegative, setCorrNegative] = useState(false);
const [corrDesc, setCorrDesc] = useState(''); const [corrDesc, setCorrDesc] = useState('');
const [corrError, setCorrError] = useState<string | null>(null); const [corrError, setCorrError] = useState<string | null>(null);
@@ -153,28 +154,24 @@ function ClientTargetPanel({
e.preventDefault(); e.preventDefault();
setCorrError(null); setCorrError(null);
if (!target) return; if (!target) return;
if (!corrDuration) { const h = parseInt(corrHours || '0', 10);
setCorrError('Enter a duration'); const m = parseInt(corrMins || '0', 10);
return;
}
const [hPart, mPart] = corrDuration.split(':').map(Number);
const h = isNaN(hPart) ? 0 : hPart;
const m = isNaN(mPart) ? 0 : mPart;
if (h === 0 && m === 0) { if (h === 0 && m === 0) {
setCorrError('Duration must be at least 1 minute'); setCorrError('Duration must be at least 1 minute');
return; return;
} }
const totalHours = (h + m / 60) * (corrNegative ? -1 : 1);
if (!corrDate) { if (!corrDate) {
setCorrError('Please select a date'); setCorrError('Please select a date');
return; return;
} }
const totalHours = (h + m / 60) * (corrNegative ? -1 : 1);
setCorrSaving(true); setCorrSaving(true);
try { try {
const input: CreateCorrectionInput = { date: corrDate, hours: totalHours, description: corrDesc || undefined }; const input: CreateCorrectionInput = { date: corrDate, hours: totalHours, description: corrDesc || undefined };
await addCorrection.mutateAsync({ targetId: target.id, input }); await addCorrection.mutateAsync({ targetId: target.id, input });
setCorrDate(''); setCorrDate('');
setCorrDuration(''); setCorrHours('');
setCorrMins('');
setCorrNegative(false); setCorrNegative(false);
setCorrDesc(''); setCorrDesc('');
setShowCorrectionForm(false); setShowCorrectionForm(false);
@@ -410,12 +407,24 @@ function ClientTargetPanel({
{corrNegative ? '−' : '+'} {corrNegative ? '−' : '+'}
</button> </button>
<input <input
type="time" type="number"
value={corrDuration} min={0}
onChange={e => setCorrDuration(e.target.value)} value={corrHours}
className="input text-xs py-1 flex-1 min-w-0" onChange={e => setCorrHours(e.target.value)}
required className="input text-xs py-1 w-12 min-w-0 text-center"
placeholder="h"
/> />
<span className="text-xs text-gray-400 self-center">h</span>
<input
type="number"
min={0}
max={59}
value={corrMins}
onChange={e => setCorrMins(e.target.value)}
className="input text-xs py-1 w-12 min-w-0 text-center"
placeholder="m"
/>
<span className="text-xs text-gray-400 self-center">m</span>
</div> </div>
</div> </div>
</div> </div>