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

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

@@ -158,6 +158,12 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
} }
const deltaMinutes = currentTotalMinutes - prevTotalMinutes; 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 deltaHours = Math.floor(deltaMinutes / 60);
const remainingMinutes = deltaMinutes % 60; const remainingMinutes = deltaMinutes % 60;
@@ -360,7 +366,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
</div> </div>
)} )}
{/* Dose table header */} {/* 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 className="flex justify-center">#</div>{/* Index header */}
<div>{t('time')}</div>{/* Time header */} <div>{t('time')}</div>{/* Time header */}
<div>{t('ldx')} (mg)</div>{/* LDX header */} <div>{t('ldx')} (mg)</div>{/* LDX header */}
@@ -400,7 +406,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
return ( return (
<div key={dose.id} className="space-y-2"> <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 */} {/* Intake index badge */}
<div className="flex justify-center"> <div className="flex justify-center">
<Badge variant="solid" <Badge variant="solid"
@@ -441,8 +447,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
inputWidth="w-[72px]" inputWidth="w-[72px]"
/> />
{/* Action buttons - right aligned */} {/* Fed/fasted toggle button */}
<div className="flex flex-nowrap items-center justify-end gap-1">
<IconButtonWithTooltip <IconButtonWithTooltip
onClick={() => handleActionWithoutSort(() => onUpdateDoseField(day.id, dose.id, 'isFed', !dose.isFed))} onClick={() => handleActionWithoutSort(() => onUpdateDoseField(day.id, dose.id, 'isFed', !dose.isFed))}
icon={<Utensils className="h-4 w-4" />} icon={<Utensils className="h-4 w-4" />}
@@ -451,6 +456,9 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
variant={dose.isFed ? "default" : "outline"} variant={dose.isFed ? "default" : "outline"}
className={`h-9 w-9 p-0 ${dose.isFed ? 'bg-orange-500 hover:bg-orange-600' : ''}`} 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 <IconButtonWithTooltip
onClick={() => handleActionWithoutSort(() => onRemoveDose(day.id, dose.id))} onClick={() => handleActionWithoutSort(() => onRemoveDose(day.id, dose.id))}
icon={<Trash2 className="h-4 w-4" />} 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 { Button } from "./button"
import { Input } from "./input" import { Input } from "./input"
import { Popover, PopoverContent, PopoverTrigger } from "./popover" import { Popover, PopoverContent, PopoverTrigger } from "./popover"
import { Badge } from './badge';
import { cn } from "../../lib/utils" import { cn } from "../../lib/utils"
import { useTranslation } from "react-i18next" import { useTranslation } from "react-i18next"
@@ -229,12 +228,12 @@ const FormTimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
<Clock className="h-4 w-4" /> <Clock className="h-4 w-4" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-auto p-3 bg-popover shadow-md border"> <PopoverContent className="w-auto p-2 bg-popover shadow-md border">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-2">
<div className="flex gap-2"> <div className="flex gap-2">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-0 border rounded-md bg-transparent">
<div className="text-xs font-medium text-center mb-1">{t('timePickerHour')}</div> <div className="text-xs font-bold text-center mt-1">{t('timePickerHour')}</div>
<div className="grid grid-cols-4 gap-1 max-h-60 overflow-y-auto"> <div className="grid grid-cols-6 gap-0.5 p-1 max-h-70 overflow-y-auto">
{Array.from({ length: 24 }, (_, i) => { {Array.from({ length: 24 }, (_, i) => {
const isCurrentValue = pickerHours === i && stagedHour === null const isCurrentValue = pickerHours === i && stagedHour === null
const isStaged = stagedHour === i const isStaged = stagedHour === i
@@ -244,7 +243,8 @@ const FormTimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
type="button" type="button"
variant={isStaged ? "default" : isCurrentValue ? "secondary" : "outline"} variant={isStaged ? "default" : isCurrentValue ? "secondary" : "outline"}
size="sm" 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)} onClick={() => handleHourClick(i)}
> >
{String(i).padStart(2, '0')} {String(i).padStart(2, '0')}
@@ -253,9 +253,9 @@ const FormTimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
})} })}
</div> </div>
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-0 border rounded-md bg-transparent">
<div className="text-xs font-medium text-center mb-1">{t('timePickerMinute')}</div> <div className="text-xs font-bold text-center mt-1">{t('timePickerMinute')}</div>
<div className="grid grid-cols-4 gap-1 max-h-60 overflow-y-auto"> <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 => { {Array.from({ length: 12 }, (_, i) => i * 5).map(minute => {
const isCurrentValue = pickerMinutes === minute && stagedMinute === null const isCurrentValue = pickerMinutes === minute && stagedMinute === null
const isStaged = stagedMinute === minute const isStaged = stagedMinute === minute
@@ -265,7 +265,7 @@ const FormTimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
type="button" type="button"
variant={isStaged ? "default" : isCurrentValue ? "secondary" : "outline"} variant={isStaged ? "default" : isCurrentValue ? "secondary" : "outline"}
size="sm" size="sm"
className="h-8 w-10" className="h-8 w-10 text-sm"
onClick={() => handleMinuteClick(minute)} onClick={() => handleMinuteClick(minute)}
> >
{String(minute).padStart(2, '0')} {String(minute).padStart(2, '0')}