Skip to content

[Frontend] Build ShipmentCard Component #573

@mftee

Description

@mftee

Description:
Create a ShipmentCard reusable component used in the shipments list, marketplace, and dashboard recent-shipments grid. Clicking anywhere on the card navigates to the shipment detail page.

Create frontend/components/shipment/shipment-card.tsx.

Acceptance Criteria:

  • 'use client' directive
  • Accepts shipment: Shipment prop
  • Entire card is wrapped in a <Link href={/shipments/${shipment.id}}> with hover shadow effect
  • Displays: trackingNumber (monospace, small), origin → destination (bold), StatusBadge, cargo description (2-line truncate), weight in kg, volume in m³ (if present), formatted price using Intl.NumberFormat
  • Shows estimated delivery date if present, formatted as "ETA: Mar 5, 2025"
  • Uses Card, CardHeader, CardContent from the UI library
  • StatusBadge aligned to top-right of the header

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