UI/UX: Implement Visual Timeline for Batch Tracking (TrackBatch) (Apertre3.0) #94
Description
Description:
Currently, the TrackBatch page likely displays batch details in a simple list or text format. To make the supply chain journey intuitive, we need a visual Timeline Component.
Task:
Create a vertical or horizontal "Stepper" component in src/pages/TrackBatch.tsx.
Visuals:
Completed Steps: Green circle with a checkmark + solid connecting line.
Current Step: Pulsing green/blue circle (active state).
Future Steps: Gray circle + dotted connecting line.
Data: Map the blockchain status (e.g., Harvested -> Processed -> Shipped -> Retailer) to these steps.
Technical Scope:
Component: Create components/Timeline.tsx.
Styling: Use Tailwind CSS for the connecting lines (absolute positioning) and icons (Lucide-React).
Props: The component should accept an array of events (Date, Location, Status).