cbaoth/med-plan-assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix negative intake time delta while in time picker (shown with "+-" prefix), improved time picker layout

Browse Source
This commit is contained in:
Andreas Weyer
2026-02-10 19:25:22 +00:00
parent cafc0a266d
commit 955d3ad650
2 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/day-schedule.tsx
View File

@@ -158,6 +158,12 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
}
const deltaMinutes = currentTotalMinutes - prevTotalMinutes;
// Resurn string "-" if delta is negative
// Thes shouldn't happen if sorting works correctly, but it can happen when time picker is open and
// inakes are temporarily not in correct order wihle picker is still open (sorting happens on blur)
if (deltaMinutes <= 0) {
return '-';
}
const deltaHours = Math.floor(deltaMinutes / 60);
const remainingMinutes = deltaMinutes % 60;
@@ -360,7 +366,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
</div>
)}
{/* Dose table header */}
<div className="grid items-center gap-0.5 text-sm font-medium text-muted-foreground" style={{gridTemplateColumns: '20px 172px 72px 1fr'}}>
<div className="grid items-center gap-0.5 text-sm font-medium text-muted-foreground" style={{gridTemplateColumns: '20px 172px 148px 30px 1fr'}}>
<div className="flex justify-center">#</div>{/* Index header */}
<div>{t('time')}</div>{/* Time header */}
<div>{t('ldx')} (mg)</div>{/* LDX header */}
@@ -400,7 +406,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
return (
<div key={dose.id} className="space-y-2">
<div className="grid items-center gap-0.5" style={{gridTemplateColumns: '20px 172px 72px 1fr'}}>
<div className="grid items-center gap-0.5" style={{gridTemplateColumns: '20px 172px 148px 30px 1fr'}}>
{/* Intake index badge */}
<div className="flex justify-center">
<Badge variant="solid"
@@ -441,9 +447,8 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
inputWidth="w-[72px]"
/>
{/* Action buttons - right aligned */}
<div className="flex flex-nowrap items-center justify-end gap-1">
<IconButtonWithTooltip
{/* Fed/fasted toggle button */}
<IconButtonWithTooltip
onClick={() => handleActionWithoutSort(() => onUpdateDoseField(day.id, dose.id, 'isFed', !dose.isFed))}
icon={<Utensils className="h-4 w-4" />}
tooltip={dose.isFed ? t('doseWithFood') : t('doseFasted')}
@@ -451,6 +456,9 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
variant={dose.isFed ? "default" : "outline"}
className={`h-9 w-9 p-0 ${dose.isFed ? 'bg-orange-500 hover:bg-orange-600' : ''}`}
/>
{/* Row action buttons - right aligned */}
<div className="flex flex-nowrap items-center justify-end gap-1">
<IconButtonWithTooltip
onClick={() => handleActionWithoutSort(() => onRemoveDose(day.id, dose.id))}
icon={<Trash2 className="h-4 w-4" />}

22
src/components/ui/form-time-input.tsx
View File

@@ -13,7 +13,6 @@ import { Clock } from "lucide-react"
import { Button } from "./button"
import { Input } from "./input"
import { Popover, PopoverContent, PopoverTrigger } from "./popover"
import { Badge } from './badge';
import { cn } from "../../lib/utils"
import { useTranslation } from "react-i18next"
@@ -229,12 +228,12 @@ const FormTimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
<Clock className="h-4 w-4" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-3 bg-popover shadow-md border">
<div className="flex flex-col gap-3">
<PopoverContent className="w-auto p-2 bg-popover shadow-md border">
<div className="flex flex-col gap-2">
<div className="flex gap-2">
<div className="flex flex-col gap-1">
<div className="text-xs font-medium text-center mb-1">{t('timePickerHour')}</div>
<div className="grid grid-cols-4 gap-1 max-h-60 overflow-y-auto">
<div className="flex flex-col gap-0 border rounded-md bg-transparent">
<div className="text-xs font-bold text-center mt-1">{t('timePickerHour')}</div>
<div className="grid grid-cols-6 gap-0.5 p-1 max-h-70 overflow-y-auto">
{Array.from({ length: 24 }, (_, i) => {
const isCurrentValue = pickerHours === i && stagedHour === null
const isStaged = stagedHour === i
@@ -244,7 +243,8 @@ const FormTimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
type="button"
variant={isStaged ? "default" : isCurrentValue ? "secondary" : "outline"}
size="sm"
className="h-8 w-10"
//className={cn("h-8 text-sm", i === 0 ? "col-span-3": "w-10")}
className="h-8 w-10 text-sm"
onClick={() => handleHourClick(i)}
>
{String(i).padStart(2, '0')}
@@ -253,9 +253,9 @@ const FormTimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
})}
</div>
</div>
<div className="flex flex-col gap-1">
<div className="text-xs font-medium text-center mb-1">{t('timePickerMinute')}</div>
<div className="grid grid-cols-4 gap-1 max-h-60 overflow-y-auto">
<div className="flex flex-col gap-0 border rounded-md bg-transparent">
<div className="text-xs font-bold text-center mt-1">{t('timePickerMinute')}</div>
<div className="grid grid-cols-3 gap-0.5 p-1 max-h-70 overflow-y-auto">
{Array.from({ length: 12 }, (_, i) => i * 5).map(minute => {
const isCurrentValue = pickerMinutes === minute && stagedMinute === null
const isStaged = stagedMinute === minute
@@ -265,7 +265,7 @@ const FormTimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
type="button"
variant={isStaged ? "default" : isCurrentValue ? "secondary" : "outline"}
size="sm"
className="h-8 w-10"
className="h-8 w-10 text-sm"
onClick={() => handleMinuteClick(minute)}
>
{String(minute).padStart(2, '0')}