DocHub
DocHub/MaxShipping/Customer Tracking Portal/Tracking Views & Package Display
Single package tracking, view all packages, status system, timelines, and consolidation handling

Tracking Views & Package Display

Status System

Internal Status to Display Name Mapping

Internal Status Display Name
received, unprocessed Received
checkin, check in Checked-In
intransit, in transit In Transit
unloaded Ready for Pickup
clientPickUp, client pickup Picked Up
consolidated Consolidated

Scan History Role to Timeline Label Mapping

userRole (from scanHistory) Timeline Label
Receiving Received
Check In Checked-In
In Transit In Transit
Container Unloading Unloaded
Client Pickup Picked Up

Single Package Tracking

View: #single-tracking-view

Flow

  1. Customer enters a tracking number
  2. Query Packages WHERE trackingNumber == input
  3. Verify the package belongs to currentClient.id (security check)
  4. If status is consolidated, look up the consolidatedInto main package and use that package’s status and scan history
  5. Query for packages consolidated into this package (to show sub-items)
  6. Build chronological timeline from scanHistory array
  7. Generate human-readable status message with estimated dates

Status Messages with Date Estimates

Status Message Logic
Received / Checked-In Next Monday as shipping date, +5 days for estimated arrival
In Transit Actual shipped date + 9 days for estimated arrival
Unloaded “Ready for pickup” message
Picked Up Timestamp of pickup + thank you message

Displayed Result

  • Status badge (color-coded)
  • Status message paragraph with dates
  • Horizontal scrollable “Tracking History” timeline (oldest to newest)
  • Consolidated-into notice (if applicable)
  • Consolidated-items notice (if applicable)

View All Packages

View: #all-packages-view

Flow

  1. Query Packages WHERE clientID == currentClient.id
  2. Skip consolidated packages (shown as sub-items under main packages)
  3. Build consolidatedMap: mainPackageId to list of consolidated tracking numbers
  4. For each main package: build timeline, fetch container info (if in transit), find last scan timestamp
  5. Sort all packages newest first by latestScanTimestamp
  6. Group into 4 sections
  7. Display summary stats grid (clickable — scrolls to section)
  8. Render collapsible sections with package cards (20 per page, “Load More” button)
  9. Show search bar that filters by tracking number (including consolidated tracking numbers)

Section Grouping

Section Statuses Included Color
Checked-In received, checkin Orange #fd7e14
In Transit intransit Teal #17a2b8
Ready for Pickup unloaded Green #28a745
Picked Up clientPickUp Grey #6c757d

Package Card Content

Each card displays:

Element Description
Tracking Number Monospace font
Status Badge Color-coded by section
Consolidated Packages List of sub-package tracking numbers (if any)
Timeline Horizontal scroll, oldest to newest with timestamps
Container Info Container name + estimated arrival (if in transit)
Last Scanned Timestamp of most recent scan

Package Data Model

Field Type Description
trackingNumber string e.g., TBA930284756123
status string received, checkin, intransit, unloaded, clientPickUp, consolidated
clientID string Firestore document ID of the client
scanHistory array Objects with userRole (string) and timestamp (Firestore Timestamp)
containerID string For in-transit packages
consolidatedInto string Firestore doc ID of the main package (if consolidated)
shippedDate timestamp When the package was shipped

Visual Elements

Flying Package Animation

A div.package-flyer element animates a package emoji flying across the screen toward the chat button, triggered periodically.

Impact Effect

When the flying package hits the chat button, a CSS chatbotImpact animation shakes the button and gold sparkle dots radiate outward.

Loading Spinner

CSS spin animation displayed during Firestore queries.