feat: Add expandable animated Batch Journey Timeline with metadata view

[navin-oss]

📌 Overview

This PR enhances the Batch Journey Timeline by introducing expandable step micro-interactions. Each timeline step can now expand inline to reveal detailed metadata, including:

• Timestamp
• Actor
• Location
• Certifications
• Notes (if available)

The implementation uses TailwindCSS for consistent styling and framer-motion for smooth expand/collapse animations. The timeline has also been modularized for better maintainability, reusability, and scalability.

Additionally, minor runtime issues in main.tsx and Header.tsx were fixed to ensure proper app initialization.

---

🛠️ Type of Change

• ⛓️ Smart Contract
• 💻 Frontend (UI/UX, React components, Tailwind)
• ⚙️ Backend
• 📄 Documentation
• 🧪 Testing

---

🔗 Related Issue

Closes #73

---

✨ Key Changes

• Refactored Timeline into modular components:

  • Timeline.tsx
  • TimelineStep.tsx
  • TimelineStepDetails.tsx
  • types.ts

• Added expandable inline metadata section per step

• Implemented smooth animations using AnimatePresence and motion

• Added arrow rotation micro-interaction

• Preserved full mobile responsiveness

• Integrated Timeline into:

  • TrackBatch.tsx
  • UpdateBatch.tsx

• Removed deprecated legacy Timeline file

---

🧪 Testing & Verification

• Verified expand/collapse behavior
• Verified smooth animation (no layout shift)
• Tested mobile responsiveness
• Verified metadata rendering (timestamp, actor, location, certifications)
• Ensured no runtime errors

---

📸 Screenshots / Demos

• Collapsed state
• Expanded state
• Mobile responsiveness view

(Attached in PR)

---

✅ PR Checklist

• Code follows the project’s style guidelines
• Components are modular and reusable
• No console warnings
• No breaking changes
• Clean commit history

---

💬 Additional Notes

• Timeline animations use staggered fade-in for improved visual flow
• Expandable sections use height-based animation for smoother UX
• Inline expansion chosen over popovers to improve mobile usability

[netlify]

❌ Deploy Preview for roaring-ganache-c7465f failed. Why did it fail? →

Name	Link
🔨 Latest commit	4705c3b
🔍 Latest deploy log	https://app.netlify.com/projects/roaring-ganache-c7465f/deploys/698f3c12440f880008d98ea6

[Nitya-003]

@navin-oss This has conflicts. Check:

[Nitya-003]

@thank you for solving the conflicts.

[navin-oss]

Thank you for the review and for assigning this to me.