feat(frontend): render ai generated itinerary ui

[RANDAAAALL]

Description

Add temporary UI implementation to visualize full AI itinerary data while waiting for finalized UI/UX designs.

• Add shadcn Dialog and Badge components for itinerary modal
• Implement TripDayTimeline to render day-by-day activities
• Implement ActivityTimelineItem with dynamic Lucide icons and cost badges
• Update ItinerarySummaryCard to open full-screen responsive Dialog
• Render tips, packing suggestions, and total estimated costs
• Add global custom scrollbar styling in index.css

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Code refactoring
• Performance improvement
• Other (please describe):

Testing

• Build passes (npm run build for frontend, pytest for backend)
• Type check passes (npm run typecheck for frontend)
• Tested locally
• All existing tests pass

Screenshots / Visual Changes

After

Modal Desktop Screen:

Modal Mobile Screen:

Related Issues

• Related to [Frontend]: Render itinerary results from AI response #27

Checklist

• Code follows project conventions (see ARCHITECTURE.md)
• No any types used unnecessarily (TypeScript)
• Proper error handling implemented
• Loading states added (if applicable)
• Responsive design tested (if UI changes)
• Self-review completed
• Comments added for complex logic
• Documentation updated (if needed)

Breaking Changes

None

Deployment Notes

None

---

Review Notes:

Reviewer: Please indicate whether to squash commits or preserve history when merging.

[Hanseooo]

PR Assessment

Status: Good progress, but the PR does not fully satisfy Issue #27 yet.
I recommend marking it not ready to merge until a few remaining gaps are addressed.

---

Gaps vs Issue #27 Acceptance Criteria

1. Cost breakdown missing

Issue #27 requires:

“Estimated cost breakdown (PHP)”

Currently the UI mostly displays a total range, but does not provide a clear breakdown by category.

Expected example categories:

• Accommodation
• Activities
• Food
• Transport

A simple breakdown table or section would satisfy this requirement.

---

2. Partial / Empty Data Handling

Some optional fields currently render without guards.

Examples

• budget and companions are displayed in the dialog header without fallbacks

  • ItinerarySummaryCard.tsx:125
  • ItinerarySummaryCard.tsx:129

  These can render "undefined" if values are missing.

• Total cost range

  • ItinerarySummaryCard.tsx:134–136

• Highlights section

  • Assumes array content
  • No explicit empty-state message

Not critical, but it does not fully meet the “graceful handling of partial data” requirement.

---

Merge Recommendation

Request changes before merge (these should be relatively small/targeted fixes):

1. Add an estimated cost breakdown section

   • Show category buckets when data exists
   • Format values in PHP

2. Add safe fallbacks for optional fields

   • budget
   • companions
   • highlights
   • totalCost values

3. Ensure explicit empty states
   Examples:

   • "No highlights available"
   • "Cost estimate pending"
   • "Budget not specified"

---

Once these gaps are addressed, the implementation should fully satisfy Issue #27.

[RANDAAAALL]

@Hanseooo Thanks for the great feedback! I have pushed a commit (55a33e3) that addresses all the requested changes.

Here is the sample Estimated Cost Breakdown UI:

Desktop View:

Mobile View:

Please let me know if everything looks good now.