Enhance file upload UX with previews and detailed parsing progress

[AhmedTMM]

Summary

Improved the file upload experience across the files and flights pages by adding file previews, detailed parsing step indicators, and better visual feedback during document analysis.

Key Changes

Files Page (app/files/page.tsx)

• Added file preview thumbnails for image files and PDF icons for document files
• Introduced ANALYSIS_STEPS constant with granular step descriptions (queued, uploading, parsing_init, parsing_ocr, parsing_ai, parsing_extract, parsing_validate, completed, failed)
• Enhanced queue items with:
  • previewUrl for image file previews
  • analysisStep to track current parsing stage
  • parsedSummary to display extracted data (entries count, hours, document type)
• Added animated progress bars that advance through parsing stages
• Improved queue item UI with larger preview area, file size display, and summary statistics
• Better error messaging with icons and improved visual hierarchy

Flights Page (app/flights/page.tsx)

• Added PARSING_STEPS constant with 4-step parsing workflow (upload, ocr, extract, match)
• Enhanced flight plan upload modal with:
  • File preview thumbnails (images and PDF icons)
  • Step-by-step progress indicator with animated icons
  • Visual feedback for completed vs. active vs. pending steps
  • Improved parsed data display with card-based layout
  • Success banner showing analysis completion and confidence score
• Better file selection UX with "Click to change file" hint
• Disabled interactions during upload to prevent conflicts

Implementation Details

• Preview URLs are created using URL.createObjectURL() for image files only
• Parsing steps progress automatically via setTimeout intervals (500ms-4000ms) for better perceived responsiveness
• Progress bars use conditional styling to show different widths based on current parsing stage
• All new icons imported from lucide-react (Image, FileImage, Eye, ChevronRight, FileText, Loader2)
• Modal scrolling enabled with max-h-[90vh] overflow-y-auto for better mobile experience
• Consistent styling with existing design system (zinc color palette, rounded corners, transitions)

https://claude.ai/code/session_01WHYJMpXoao72STGmWxpWYS