egullickson/motovaultpro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance Documents UX with detail view, type-specific cards, and expiration alerts (#43) #44

Merged
egullickson merged 2 commits from issue-43-documents-ux-enhancement into main 2026-01-18 03:04:19 +00:00
Conversation 0 Commits 2 Files Changed 8
+765 -55
egullickson commented 2026-01-18 02:30:20 +00:00
Owner
Copy Link
Copy Source

Summary

Fixes #43

This PR enhances the Documents feature with:

  • ExpirationBadge component: Visual indicators for documents expiring within 30 days (amber) or already expired (red)
  • DocumentCardMetadata component: Type-specific metadata display that adapts based on document type (insurance, registration, manual) and variant (card, mobile, detail)
  • Updated DocumentsPage: Desktop list cards now show metadata and expiration badges
  • Updated DocumentsMobileScreen: Mobile cards with compact metadata display
  • Redesigned DocumentDetailPage: Side-by-side layout on desktop (preview left, metadata right) and stacked layout on mobile with full metadata visibility

Changes

File Change
ExpirationBadge.tsx NEW - Expiration warning/expired badge component
ExpirationBadge.test.tsx NEW - 15 unit tests
DocumentCardMetadata.tsx NEW - Type-specific metadata display
DocumentCardMetadata.test.tsx NEW - 18 unit tests
DocumentsPage.tsx MODIFIED - Added badges and metadata to cards
DocumentsMobileScreen.tsx MODIFIED - Added badges and metadata to mobile cards
DocumentDetailPage.tsx MODIFIED - Complete redesign with side-by-side layout
jest.config.ts MODIFIED - Fixed testMatch pattern

Test Plan

  • ExpirationBadge unit tests pass (15 tests)
  • DocumentCardMetadata unit tests pass (18 tests)
  • npm run lint - passes (only pre-existing warnings)
  • npm run type-check - passes
  • Manual testing on desktop viewport (1920px)
  • Manual testing on tablet viewport (768px)
  • Manual testing on mobile viewport (320px, 375px)
  • Verify expiration badges show correctly for expiring/expired documents
  • Verify metadata displays correctly for insurance, registration, manual types

Screenshots

To be added during review

🤖 Generated with Claude Code

## Summary Fixes #43 This PR enhances the Documents feature with: - **ExpirationBadge component**: Visual indicators for documents expiring within 30 days (amber) or already expired (red) - **DocumentCardMetadata component**: Type-specific metadata display that adapts based on document type (insurance, registration, manual) and variant (card, mobile, detail) - **Updated DocumentsPage**: Desktop list cards now show metadata and expiration badges - **Updated DocumentsMobileScreen**: Mobile cards with compact metadata display - **Redesigned DocumentDetailPage**: Side-by-side layout on desktop (preview left, metadata right) and stacked layout on mobile with full metadata visibility ## Changes | File | Change | |------|--------| | `ExpirationBadge.tsx` | NEW - Expiration warning/expired badge component | | `ExpirationBadge.test.tsx` | NEW - 15 unit tests | | `DocumentCardMetadata.tsx` | NEW - Type-specific metadata display | | `DocumentCardMetadata.test.tsx` | NEW - 18 unit tests | | `DocumentsPage.tsx` | MODIFIED - Added badges and metadata to cards | | `DocumentsMobileScreen.tsx` | MODIFIED - Added badges and metadata to mobile cards | | `DocumentDetailPage.tsx` | MODIFIED - Complete redesign with side-by-side layout | | `jest.config.ts` | MODIFIED - Fixed testMatch pattern | ## Test Plan - [x] ExpirationBadge unit tests pass (15 tests) - [x] DocumentCardMetadata unit tests pass (18 tests) - [x] npm run lint - passes (only pre-existing warnings) - [x] npm run type-check - passes - [ ] Manual testing on desktop viewport (1920px) - [ ] Manual testing on tablet viewport (768px) - [ ] Manual testing on mobile viewport (320px, 375px) - [ ] Verify expiration badges show correctly for expiring/expired documents - [ ] Verify metadata displays correctly for insurance, registration, manual types ## Screenshots _To be added during review_ --- 🤖 Generated with [Claude Code](https://claude.com/claude-code)
egullickson added 1 commit 2026-01-18 02:30:21 +00:00
feat: add type-specific metadata and expiration badges to documents UX (refs #43)
Deploy to Staging / Build Images (pull_request) Successful in 2m46s
Details
Deploy to Staging / Deploy to Staging (pull_request) Successful in 37s
Details
Deploy to Staging / Verify Staging (pull_request) Successful in 6s
Details
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 6s
Details
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
Details
b0e392fef1 
- Create ExpirationBadge component with 30-day warning and expired states
- Create DocumentCardMetadata component for type-specific field display
- Update DocumentsPage to show metadata and expiration badges on cards
- Update DocumentsMobileScreen with metadata and badges (mobile variant)
- Redesign DocumentDetailPage with side-by-side layout (desktop) and
  stacked layout (mobile) showing full metadata panel
- Add 33 unit tests for new components
- Fix jest.config.ts testMatch pattern for test discovery

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
egullickson added 1 commit 2026-01-18 02:57:28 +00:00
fix: rename Open to View Details and hide empty Details section (refs #43)
Deploy to Staging / Build Images (pull_request) Successful in 2m45s
Details
Deploy to Staging / Deploy to Staging (pull_request) Successful in 37s
Details
Deploy to Staging / Verify Staging (pull_request) Successful in 7s
Details
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 6s
Details
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped
Details
7c3eaeb5a3 
- Rename "Open" button to "View Details" on desktop and mobile document lists
- Add hasDisplayableMetadata helper to check if document has metadata to display
- Conditionally render Details section only when metadata exists
- Prevents showing empty "Details" header for documents without metadata

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>
egullickson merged commit ef9a48d850 into main 2026-01-18 03:04:19 +00:00
egullickson deleted branch issue-43-documents-ux-enhancement 2026-01-18 03:04:19 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
status
backlog
status/blocked
status
done
status
in-progress
status
ready
status
review
type
bug
type
chore
type
docs
type
feature
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#44