bullitt/trackbox

Fork 0

Detail: Standardize date display around Last carrier update and short absolute dates #31

New issue

Closed

opened 2026-06-27 15:41:15 +02:00 by bullitt · 1 comment

bullitt commented

2026-06-27 15:41:15 +02:00

Owner

Problem

The Shipment Detail page uses two different date formats simultaneously:

Metadata section (Carrier, First Seen, Last Updated) shows relative dates: "14h ago"
Event History "When" column shows absolute dates: "16.6.2026"

The mix reads as a bug and creates a jarring inconsistency within a single page.

Implementation

File: frontend/src/pages/ShipmentDetail.tsx — EventRow component around line 127.

The occurred_at field in events is an ISO date string. Apply the same relativeTime() utility already used everywhere else, but fall back to absolute for dates older than 7 days:

Update relativeTime in frontend/src/lib/utils.ts (or create a smartDate wrapper) to handle this:

export function smartDate(iso: string | null): string {
  if (!iso) return "—"
  const diff = Date.now() - new Date(iso).getTime()
  if (diff < 7 * 86400_000) return relativeTime(iso)  // < 7 days → relative
  return new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" })
}

In EventRow:

<td className="py-2.5 pr-4 text-sm text-muted-foreground">
  {event.occurred_at ? smartDate(event.occurred_at) : "—"}
</td>

Apply smartDate consistently to all date fields in the detail page.

Acceptance criteria

All dates on the detail page use the same convention: relative for < 7 days, short absolute for older
"16.6.2026" style is replaced
No dates in the metadata grid use a different format than the event history

Brand identity alignment

Date display is part of Trackbox's transparency promise. The UI should distinguish recent operational freshness from older historical events without mixing formats arbitrarily.

Brand-compliant implementation notes

Use Last carrier update / Last sync labels where relevant.
Use relative dates only for recent operational freshness (for example under 7 days).
Use short absolute dates for older history so the event timeline remains auditable.
Keep all date text subdued and use tabular numerals where times are shown.

Additional acceptance criteria

Metadata and event history use the same date convention.
The timeline does not imply false precision when only date-level data exists.
Users can quickly tell what is recent and what is historical.

Migrated from GitHub issue #10: https://github.com/bullitt186/trackbox/issues/10
Original author: @bullitt186
Original created: 2026-06-27T13:23:29Z
Original labels: ux

## Problem The Shipment Detail page uses two different date formats simultaneously: - Metadata section (Carrier, First Seen, Last Updated) shows **relative** dates: "14h ago" - Event History "When" column shows **absolute** dates: "16.6.2026" The mix reads as a bug and creates a jarring inconsistency within a single page. ## Implementation File: `frontend/src/pages/ShipmentDetail.tsx` — `EventRow` component around line 127. The `occurred_at` field in events is an ISO date string. Apply the same `relativeTime()` utility already used everywhere else, but fall back to absolute for dates older than 7 days: Update `relativeTime` in `frontend/src/lib/utils.ts` (or create a `smartDate` wrapper) to handle this: ```ts export function smartDate(iso: string | null): string { if (!iso) return "—" const diff = Date.now() - new Date(iso).getTime() if (diff < 7 * 86400_000) return relativeTime(iso) // < 7 days → relative return new Date(iso).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" }) } ``` In `EventRow`: ```tsx <td className="py-2.5 pr-4 text-sm text-muted-foreground"> {event.occurred_at ? smartDate(event.occurred_at) : "—"} </td> ``` Apply `smartDate` consistently to all date fields in the detail page. ## Acceptance criteria - All dates on the detail page use the same convention: relative for < 7 days, short absolute for older - "16.6.2026" style is replaced - No dates in the metadata grid use a different format than the event history ## Brand identity alignment Date display is part of Trackbox's transparency promise. The UI should distinguish recent operational freshness from older historical events without mixing formats arbitrarily. ## Brand-compliant implementation notes - Use `Last carrier update` / `Last sync` labels where relevant. - Use relative dates only for recent operational freshness (for example under 7 days). - Use short absolute dates for older history so the event timeline remains auditable. - Keep all date text subdued and use tabular numerals where times are shown. ## Additional acceptance criteria - Metadata and event history use the same date convention. - The timeline does not imply false precision when only date-level data exists. - Users can quickly tell what is recent and what is historical. --- Migrated from GitHub issue #10: https://github.com/bullitt186/trackbox/issues/10 Original author: @bullitt186 Original created: 2026-06-27T13:23:29Z Original labels: ux

bullitt added the

label

2026-06-27 15:41:15 +02:00

bullitt changed title from ~~Detail: Fix date format inconsistency — Event History uses absolute dates, metadata uses relative~~ to Detail: Standardize date display around Last carrier update and short absolute dates

2026-06-27 15:46:21 +02:00

bullitt commented

2026-06-27 16:02:36 +02:00

Author

Owner

Implemented in commit bd6b0e7. Added smartDate() utility in lib/utils.ts: dates under 7 days show relative format via relativeTime(), dates 7+ days old show a short absolute format (e.g. '16 Jun 2026'). Applied in ShipmentDetail's EventRow, metadata fields (First Seen, Last carrier update, Last sync), and scrape log timestamps. Recent events stay operationally fresh; historical events become auditable dates.

Implemented in commit bd6b0e7. Added `smartDate()` utility in `lib/utils.ts`: dates under 7 days show relative format via `relativeTime()`, dates 7+ days old show a short absolute format (e.g. '16 Jun 2026'). Applied in ShipmentDetail's EventRow, metadata fields (First Seen, Last carrier update, Last sync), and scrape log timestamps. Recent events stay operationally fresh; historical events become auditable dates.

bullitt closed this issue

2026-06-27 16:02:36 +02:00

No labels

arch

harness

security

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

bullitt/trackbox#31

No description provided.

Rows
Columns