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

Update day-schedule layout (style improvements/fixes), attached delta badge to time input field

Browse Source
This commit is contained in:
Andreas Weyer
2026-02-09 19:37:30 +00:00
parent 8325f10b19
commit d544c7f3b3
5 changed files with 44 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -117,7 +117,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
// Calculate time delta from previous intake (across all days)
const calculateTimeDelta = (dayIndex: number, doseIndex: number): string => {
if (dayIndex === 0 && doseIndex === 0) {
return '+0:00'; // First dose of all days
return ""; // No delta for first dose of first day
}
const currentDay = days[dayIndex];
@@ -224,8 +224,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
}
// FIXME incomplete implementation of @container and @min-[497px]:
// the intention is to wrap dose buttons as well as header badges all at the same time
// at a specific container width while adding a spacer to align buttons with time field
// TODO solution not ideal for mobile, consider https://tailwindcss.com/docs/responsive-design
return (
<Card key={day.id} className="@container">
<CollapsibleCardHeader
@@ -258,7 +257,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
}
>
<div className="flex flex-nowrap items-center gap-2">
<Badge variant="secondary" className="text-xs">
<Badge variant="solid" className="text-xs font-bold">
{t('day')} {dayIndex + 1}
</Badge>
{!day.isTemplate && doseCountDiff !== 0 ? (
@@ -339,6 +338,8 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
)}
</div>
</CollapsibleCardHeader>
{/* Daily details (intakes) */}
{!collapsedDays.has(day.id) && (
<CardContent className="space-y-3">
{/* Daily total warning/error box */}
@@ -352,11 +353,11 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
</div>
)}
{/* Dose table header */}
<div className="flex flex-nowrap items-center gap-2 text-sm font-medium text-muted-foreground">
<div className="w-5 h-6 flex justify-center">#</div>{/* Index header */}
<div className="grid items-center gap-0.5 text-sm font-medium text-muted-foreground" style={{gridTemplateColumns: '20px 172px 72px 1fr'}}>
<div className="flex justify-center">#</div>{/* Index header */}
<div>{t('time')}</div>{/* Time header */}
<div className="w-[8.5rem]"></div> {/* Spacer for delta badge */}
<div>{t('ldx')} (mg)</div>{/* LDX header */}
<div></div>{/* Buttons column (empty header) */}
</div>
{/* Dose rows */}
@@ -392,14 +393,17 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
return (
<div key={dose.id} className="space-y-2">
<div className="flex flex-nowrap @min-[497px]:flex-wrap items-center gap-2">
<div className="flex flex-nowrap items-center gap-2">
{/* Intake index badges */}
<Badge variant="outline" className="text-xs w-5 h-6 flex items-center justify-center px-1.5">
<div className="grid items-center gap-0.5" style={{gridTemplateColumns: '20px 172px 72px 1fr'}}>
{/* Intake index badge */}
<div className="flex justify-center">
<Badge variant="solid"
className="text-xs w-5 h-6 flex items-center justify-center px-1.5">
{doseIndex}
</Badge>
</div>
{/* Time input */}
{/* Time input with delta badge attached (where applicable) */}
<div className="flex flex-nowrap items-center justify-center gap-0">
<FormTimeInput
value={dose.time}
onChange={(value) => onUpdateDose(day.id, dose.id, 'time', value)}
@@ -409,33 +413,29 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
errorMessage={formatText(t('errorTimeRequired'))}
warningMessage={formatText(t('warningDuplicateTime'))}
/>
{/* Delta badge */}
<Badge variant="outline" className="text-xs w-12 h-6 flex items-center justify-end px-1.5">
<Badge variant={timeDelta ? "field" : "transparent"} className="rounded-l-none border-l-0 font-light italic text-muted-foreground text-xs w-12 h-6 flex justify-end px-1.5">
{timeDelta}
</Badge>
{/* LDX dose input */}
<FormNumericInput
value={dose.ldx}
onChange={(value) => onUpdateDose(day.id, dose.id, 'ldx', value)}
increment={doseIncrement}
min={0}
max={200}
//unit="mg"
required={true}
error={isDailyTotalError}
warning={isDailyTotalWarning || isZeroDose || isHighDose}
errorMessage={doseErrorMessage || formatText(t('errorNumberRequired'))}
warningMessage={doseWarningMessage}
inputWidth="w-[72px]"
/>
</div>
{/* Action buttons */}
<div className="flex flex-nowrap items-center gap-2">
{/* Spacer to align buttons in case of flex wrap only */}
<div className="w-0 @min-[497px]:w-5 h-9" />
{/* LDX dose input */}
<FormNumericInput
value={dose.ldx}
onChange={(value) => onUpdateDose(day.id, dose.id, 'ldx', value)}
increment={doseIncrement}
min={0}
max={200}
//unit="mg"
required={true}
error={isDailyTotalError}
warning={isDailyTotalWarning || isZeroDose || isHighDose}
errorMessage={doseErrorMessage || formatText(t('errorNumberRequired'))}
warningMessage={doseWarningMessage}
inputWidth="w-[72px]"
/>
{/* Action buttons - right aligned */}
<div className="flex flex-nowrap items-center justify-end gap-1">
<IconButtonWithTooltip
onClick={() => handleActionWithSort(day.id, () => onUpdateDoseField(day.id, dose.id, 'isFed', !dose.isFed))}
icon={<Utensils className="h-4 w-4" />}