diff --git a/src/App.tsx b/src/App.tsx index 144a563..1b4c90b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -185,8 +185,8 @@ const MedPlanAssistant = () => { />
diff --git a/src/components/day-schedule.tsx b/src/components/day-schedule.tsx index 1a18422..7daa460 100644 --- a/src/components/day-schedule.tsx +++ b/src/components/day-schedule.tsx @@ -117,7 +117,7 @@ const DaySchedule: React.FC = ({ // 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 = ({ } // 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 ( = ({ } >
- + {t('day')} {dayIndex + 1} {!day.isTemplate && doseCountDiff !== 0 ? ( @@ -339,6 +338,8 @@ const DaySchedule: React.FC = ({ )}
+ + {/* Daily details (intakes) */} {!collapsedDays.has(day.id) && ( {/* Daily total warning/error box */} @@ -352,11 +353,11 @@ const DaySchedule: React.FC = ({
)} {/* Dose table header */} -
-
#
{/* Index header */} +
+
#
{/* Index header */}
{t('time')}
{/* Time header */} -
{/* Spacer for delta badge */}
{t('ldx')} (mg)
{/* LDX header */} +
{/* Buttons column (empty header) */}
{/* Dose rows */} @@ -392,14 +393,17 @@ const DaySchedule: React.FC = ({ return (
-
-
- {/* Intake index badges */} - +
+ {/* Intake index badge */} +
+ {doseIndex} +
- {/* Time input */} + {/* Time input with delta badge attached (where applicable) */} +
onUpdateDose(day.id, dose.id, 'time', value)} @@ -409,33 +413,29 @@ const DaySchedule: React.FC = ({ errorMessage={formatText(t('errorTimeRequired'))} warningMessage={formatText(t('warningDuplicateTime'))} /> - - {/* Delta badge */} - + {timeDelta} - - {/* LDX dose input */} - 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 */} -
- {/* Spacer to align buttons in case of flex wrap only */} -
+ {/* LDX dose input */} + 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 */} +
handleActionWithSort(day.id, () => onUpdateDoseField(day.id, dose.id, 'isFed', !dose.isFed))} icon={} diff --git a/src/components/simulation-chart.tsx b/src/components/simulation-chart.tsx index c2f15ef..1c391c7 100644 --- a/src/components/simulation-chart.tsx +++ b/src/components/simulation-chart.tsx @@ -28,6 +28,7 @@ import { } from './ui/tooltip'; import { useElementSize } from '../hooks/useElementSize'; +// TODO make use of the actual theme colors;some colors are not matching the classes in the comments // Chart color scheme const CHART_COLORS = { // d-Amphetamine profiles @@ -42,7 +43,7 @@ const CHART_COLORS = { // Reference lines regularPlanDivider: '#22c55e', // green-500 - deviationDayDivider: '#9ca3af', // gray-400 + deviationDayDivider: '#f59e0b', // yellow-500 therapeuticMin: '#22c55e', // green-500 therapeuticMax: '#ef4444', // red-500 dayDivider: '#9ca3af', // gray-400 diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 8938904..cd60b10 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "../../lib/utils" const badgeVariants = cva( - "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + "inline-flex items-center rounded-sm border px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { @@ -16,7 +16,9 @@ const badgeVariants = cva( "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", transparent: "border-transparent bg-transparent text-foreground hover:border-secondary", - inverted: "border-transparent bg-muted-foreground text-background", + field: "bg-background text-foreground", + solid: "border-transparent bg-muted-foreground text-background", + solidmuted: "border-transparent bg-muted-foreground text-background", }, }, defaultVariants: { diff --git a/src/components/ui/form-time-input.tsx b/src/components/ui/form-time-input.tsx index 0a23cf9..c09bf6e 100644 --- a/src/components/ui/form-time-input.tsx +++ b/src/components/ui/form-time-input.tsx @@ -13,6 +13,7 @@ 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"