Skip to content

[Frontend] Build StatusTimeline Component #574

@mftee

Description

@mftee

Description:
Create a visual timeline component that displays the shipment's status history as a vertical list. Used on the shipment detail page sidebar.

Create frontend/components/shipment/status-timeline.tsx.

Acceptance Criteria:

  • 'use client' directive
  • Accepts history: ShipmentStatusHistory[] prop
  • Renders an ordered list with a left vertical border
  • Each entry shows: a colored circular dot (matching the status color), status name (humanized), date/time formatted with month/day/year + time, "by FirstName LastName", and reason in italics (if present)
  • Dot colors match the StatusBadge color scheme per status
  • Shows a short icon/symbol inside the dot per status (e.g. for accepted, for in-transit, for completed, for cancelled, ! for disputed)
  • If history.length === 0, shows "No history yet."
  • Uses cn() for dynamic class composition

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions