Redesigned Vendor File Details page with archive (Parent ZIP) origin details
Executive summary
The Vendor portal's File Details page (/files/[mailId]) has been rebuilt with a modern, visually richer layout, and now shows where a file came from when it was extracted from a ZIP archive. This batch promotes the work from development to the QA environment for testing.
Why this was needed
The previous File Details page presented file information as plain stacked cards and gave no indication when a file originated inside an uploaded ZIP archive. Vendors had no way to see the parent ZIP it came from or its location within that archive, and the layout made key actions (view, download, compare original vs processed) harder to scan. This redesign improves clarity and adds the missing archive-origin context.
Client / user impact
Vendors get a clearer, more polished File Details experience: a prominent file preview with at-a-glance metadata, collapsible information sections, a side-by-side original-vs-processed comparison with size-reduction percentage, and a version-history timeline. For files extracted from an archive, they can now see the parent ZIP filename, the file's path within the archive, and View/Download actions for the ZIP itself. Loading, error, and invalid-ID states were also refreshed for consistency.
Technical scope
Frontend only, scoped to the vendor app (apps/vendor). Batch merge of dev into QA covering PR #786.
- Rewrote
files/[mailId]/page.tsxto compose new sections with Framer Motion staggered animations and a glassmorphism background; replaced the old cards and consolidated error/invalid states into a sharedErrorState. - Added components under
FileDetailsModal/:HeroPreviewSection(preview + floating metadata + copy-file-ID),MetadataAccordion(Radix accordion of file/upload/conversion info),FileComparisonCarousel(original vs processed with size-reduction badge),StatusPill(animated status badge), andVersionHistoryTimeline. - Added
file-details.constants.tswith shared animation springs, status/file-type config, and helpers (formatFileSize,calculateSizeReduction,formatDate,getFileTypeConfig,openInNewTab). - Parent ZIP support: comparison views read
parent_zip_file_id,parent_zip_filename,parent_zip_view_url,parent_zip_download_url, andoriginal_relpath; visibility check was extended to also includeparent_zip_download_url.
Risk & mitigation
Low-to-moderate, contained to the vendor File Details page. Risk is mainly visual/layout regressions and the new Parent ZIP block depending on backend-provided parent_zip_* fields — if those are absent the section simply hides. The change adds a Framer Motion-driven UI; mitigation is QA verification across viewports and with both archive-extracted and non-archive files before promotion beyond QA.
QA validation focus
On QA, open File Details at /files/[mailId] and verify: hero preview, metadata accordion expand/collapse, and original-vs-processed comparison (including the size-reduction badge). Confirm the version-history timeline renders. For a file extracted from a ZIP, confirm the Parent ZIP section appears with the ZIP filename, path-in-archive, and working View/Download buttons; for a non-archive file, confirm the section is hidden. Check the copy-file-ID action, loading skeletons, the File Not Found / Invalid File ID states, the Back button, and behaviour on mobile/narrow viewports.