fix(web): render date-only due dates without a time component (#248)

When a task is given a due date without a time, the value is stored at the
end of the day (23:59:59.999) as a date-only sentinel. The task views,
however, always rendered the due date with that time and the inline table
editor forced a date+time mode, so a meaningless time appeared whenever only
a date was selected (issue #215).

Add `DueDateUtils.isDateOnly` to detect the sentinel and:
- hide the time in the task list and task card due-date displays for
  date-only due dates
- let the inline due-date editor toggle between date-only and date+time via
  FlexibleDateTimeInput, defaulting to the current value's granularity

https://claude.ai/code/session_018XwCELPc4u4QsnxXqAhNa4

Co-authored-by: Claude <noreply@anthropic.com>

Author: felixevers

web/components/tables/TaskList.tsx

@@ -665,6 +665,8 @@ export const TaskList = forwardRef<TaskListRef, TaskListProps>(({ tasks: initial
             <TaskRowRefreshingGate taskId={row.original.id}>
               <InTableDateTimeEditPopUp
                 value={row.original.dueDate}
+                flexible
+                mode={DueDateUtils.isDateOnly(row.original.dueDate) ? 'date' : 'dateTime'}
                 onUpdate={next => {
                   if (next === row.original.dueDate) {
                     return
@@ -685,6 +687,7 @@ export const TaskList = forwardRef<TaskListRef, TaskListProps>(({ tasks: initial
                 <DateDisplay
                   date={row.original.dueDate}
                   mode="absolute"
+                  showTime={!DueDateUtils.isDateOnly(row.original.dueDate)}
                   className={clsx(colorClass, 'truncate')}
                 />
                 <Edit2 className="size-4 min-w-4 group-hover:block hidden"/>

web/components/tables/in-table-edit/InTableDateTimeEditPopUp.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { useState, type ComponentProps } from 'react'
 import type { ButtonProps } from '@helpwave/hightide'
-import { Button, DateTimeInput, PopUp, PopUpContext, PopUpOpener, PopUpRoot } from '@helpwave/hightide'
+import { Button, DateTimeInput, FlexibleDateTimeInput, PopUp, PopUpContext, PopUpOpener, PopUpRoot } from '@helpwave/hightide'
 import { useTasksTranslation } from '@/i18n/useTasksTranslation'
 import clsx from 'clsx'
 
@@ -21,6 +21,12 @@ type InTableDateTimeEditPopUpProps = {
   buttonProps?: ButtonProps,
   children: ReactNode,
   mode?: 'date' | 'dateTime',
+  /**
+   * When true, lets the user choose between a date-only and a date+time value via the
+   * input's built in toggle. A date-only selection is stored at the end of the day so it
+   * carries no meaningful time. `mode` is used as the initial mode.
+   */
+  flexible?: boolean,
   dateTimeInputProps?: Omit<
     ComponentProps<typeof DateTimeInput>,
     'value' | 'onValueChange' | 'onEditComplete' | 'mode'
@@ -33,6 +39,7 @@ export function InTableDateTimeEditPopUp({
   buttonProps,
   children,
   mode = 'dateTime',
+  flexible = false,
   dateTimeInputProps,
   options = { horizontalAlignment: 'afterStart', verticalAlignment: 'afterEnd' },
   className = 'p-2',
@@ -68,17 +75,31 @@ export function InTableDateTimeEditPopUp({
         }}
       </PopUpOpener>
       <PopUp options={options} className={clsx(className, 'flex-col-2 items-end')} onClick={e => e.stopPropagation()}>
-        <DateTimeInput
-          mode={mode}
-          {...dateTimeInputProps}
-          value={draft}
-          onValueChange={next => {
-            setDraft(next)
-          }}
-          onEditComplete={v => {
-            setDraft(v)
-          }}
-        />
+        {flexible ? (
+          <FlexibleDateTimeInput
+            defaultMode={mode === 'dateTime' ? 'dateTime' : 'date'}
+            {...dateTimeInputProps}
+            value={draft}
+            onValueChange={next => {
+              setDraft(next)
+            }}
+            onEditComplete={v => {
+              setDraft(v)
+            }}
+          />
+        ) : (
+          <DateTimeInput
+            mode={mode}
+            {...dateTimeInputProps}
+            value={draft}
+            onValueChange={next => {
+              setDraft(next)
+            }}
+            onEditComplete={v => {
+              setDraft(v)
+            }}
+          />
+        )}
         <PopUpContext.Consumer>
           {({ setIsOpen }) => (
             <div className="flex-row-2 justify-end items-center gap-x-2">

web/components/tasks/TaskCardView.tsx

@@ -3,6 +3,7 @@ import { AvatarStatusComponent } from '@/components/AvatarStatusComponent'
 import { Clock, Combine, User, Users, Flag } from 'lucide-react'
 import clsx from 'clsx'
 import { DateDisplay } from '@/components/Date/DateDisplay'
+import { DueDateUtils } from '@/utils/dueDate'
 import { LocationChipsBySetting } from '@/components/patients/LocationChipsBySetting'
 import type { TaskViewModel } from '@/components/tables/TaskList'
 import { useRouter } from 'next/router'
@@ -285,7 +286,7 @@ export const TaskCardView = ({ task, onToggleDone: _onToggleDone, onClick, showA
               {dueDate && (
                 <div className={clsx('flex items-center gap-2 min-w-0', dueDateColorClass)}>
                   <Clock className="size-4 shrink-0" />
-                  <DateDisplay date={dueDate} mode="absolute" showTime={true} />
+                  <DateDisplay date={dueDate} mode="absolute" showTime={!DueDateUtils.isDateOnly(dueDate)} />
                 </div>
               )}
             </div>

web/utils/dueDate.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { DueDateUtils } from '@/utils/dueDate'
+
+describe('DueDateUtils.isDateOnly', () => {
+  it('returns true for a date-only due date (end of day sentinel)', () => {
+    const date = new Date(2026, 5, 10, 23, 59, 59, 999)
+    expect(DueDateUtils.isDateOnly(date)).toBe(true)
+  })
+
+  it('returns false for a due date with a real time of day', () => {
+    const date = new Date(2026, 5, 10, 9, 30, 0, 0)
+    expect(DueDateUtils.isDateOnly(date)).toBe(false)
+  })
+
+  it('returns false when the time is only partially matching the sentinel', () => {
+    const date = new Date(2026, 5, 10, 23, 59, 59, 0)
+    expect(DueDateUtils.isDateOnly(date)).toBe(false)
+  })
+
+  it('returns false for null, undefined and invalid input', () => {
+    expect(DueDateUtils.isDateOnly(null)).toBe(false)
+    expect(DueDateUtils.isDateOnly(undefined)).toBe(false)
+    expect(DueDateUtils.isDateOnly('not-a-date')).toBe(false)
+  })
+})

web/utils/dueDate.ts

@@ -1,4 +1,22 @@
+// A "date only" due date (no time-of-day selected) is represented by fixing the time
+// component to the end of the day (23:59:59.999). This matches the sentinel used by
+// hightide's FlexibleDateTimeInput and lets us render such due dates without a
+// meaningless time component.
+const DATE_ONLY_HOURS = 23
+const DATE_ONLY_MINUTES = 59
+const DATE_ONLY_SECONDS = 59
+const DATE_ONLY_MILLISECONDS = 999
+
 export const DueDateUtils = {
+  isDateOnly: (dueDate: Date | string | undefined | null): boolean => {
+    if (!dueDate) return false
+    const date = new Date(dueDate)
+    if (Number.isNaN(date.getTime())) return false
+    return date.getHours() === DATE_ONLY_HOURS
+      && date.getMinutes() === DATE_ONLY_MINUTES
+      && date.getSeconds() === DATE_ONLY_SECONDS
+      && date.getMilliseconds() === DATE_ONLY_MILLISECONDS
+  },
   isOverdue: (dueDate: Date | undefined | null, done: boolean): boolean => {
     if (!dueDate || done) return false
     return new Date(dueDate).getTime() < Date.now()
@@ -10,4 +28,4 @@ export const DueDateUtils = {
     const oneHour = 60 * 60 * 1000
     return dueTime > now && dueTime - now <= oneHour
   }
-}
+}