Project Initialization

apps/edr-freight-web/portal/src/components/tracking/TrackingTimeline.tsx

@@ -0,0 +1,35 @@
+import type { Freight } from '@edr/types';
+import { Badge } from '@edr/ui-common';
+
+export interface TrackingTimelineProps {
+  events: Freight.ITrackingEvent[];
+}
+
+const TrackingTimeline = ({ events }: TrackingTimelineProps) => {
+  if (events.length === 0) {
+    return <div className="text-sm text-gray-500">No tracking events yet.</div>;
+  }
+  return (
+    <ol className="relative ml-3 border-l border-gray-200">
+      {events.map((event) => (
+        <li key={event.id} className="mb-4 ml-4">
+          <div className="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full bg-blue-500" />
+          <div className="flex flex-col gap-1">
+            <div className="flex items-center gap-2 text-sm font-medium text-gray-900">
+              <span>{event.location}</span>
+              <Badge tone="info">{event.status}</Badge>
+            </div>
+            <time className="text-xs text-gray-500">
+              {new Date(event.occurredAt).toLocaleString()}
+            </time>
+            {event.description ? (
+              <p className="text-sm text-gray-700">{event.description}</p>
+            ) : null}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+};
+
+export default TrackingTimeline;