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

chore: improve document card with upload date and file type icon (#162) #172

New Issue
Closed
opened 2026-02-13 22:24:03 +00:00 by egullickson · 2 comments
egullickson commented 2026-02-13 22:24:03 +00:00
Owner
Copy Link
Copy Source

Relates to #162

Severity: Medium

Problem

The document card shows "Maintenance / Type: manual / Vehicle: YOTA" with view/edit/delete icons, but no upload date, no file size, no thumbnail preview. It's hard to identify documents at scale.

Recommendation

  • Add upload date to document cards
  • Add file type icon (PDF, image, etc.)
  • Consider a thumbnail preview for image/PDF documents

Acceptance Criteria

  • Document cards show upload date
  • Document cards show a file type icon
  • Cards remain scannable and not cluttered
  • Tested on mobile (320px, 768px) and desktop (1920px)
Relates to #162 ## Severity: Medium ## Problem The document card shows "Maintenance / Type: manual / Vehicle: YOTA" with view/edit/delete icons, but no upload date, no file size, no thumbnail preview. It's hard to identify documents at scale. ## Recommendation - Add upload date to document cards - Add file type icon (PDF, image, etc.) - Consider a thumbnail preview for image/PDF documents ## Acceptance Criteria - Document cards show upload date - Document cards show a file type icon - Cards remain scannable and not cluttered - Tested on mobile (320px, 768px) and desktop (1920px)
egullickson added the
status
backlog
type
chore
 labels 2026-02-13 22:24:36 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:24:55 +00:00
egullickson commented 2026-02-14 01:17:04 +00:00
Author
Owner
Copy Link
Copy Source

Implementation Plan (from #162 -- Milestone 16)

Phase: 7 (Document improvements) | Priority: Medium | Depends on: None | Blocks: None

Context

Document cards lack upload date and file type information, making it harder to scan and identify documents at a glance.

Implementation

1. In frontend/src/features/documents/components/DocumentCardMetadata.tsx:

  • Add upload date display using createdAt field from DocumentRecord type (line 22 of documents.types.ts)
  • Format as "Uploaded {relative time}" using date-fns/formatDistanceToNow or similar (e.g., "Uploaded 3 days ago")
  • Add file type icon based on contentType field:
    • application/pdf -> PictureAsPdfRoundedIcon
    • image/* -> ImageRoundedIcon
    • Everything else -> InsertDriveFileRoundedIcon
  • Place icon and upload date in card header area

2. Ensure consistent rendering in:

  • frontend/src/features/documents/pages/DocumentsPage.tsx (desktop card grid)
  • frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx (same card rendering pattern)

Files

  • frontend/src/features/documents/components/DocumentCardMetadata.tsx
  • frontend/src/features/documents/pages/DocumentsPage.tsx (card rendering)
  • frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx

Commit Convention

chore: add upload date and file type icon to document cards (refs #172)

Test Criteria

  • Cards show relative upload date (e.g., "Uploaded 3 days ago")
  • Cards show appropriate file type icon (PDF, image, or generic file)
  • Cards remain clean and scannable (not cluttered)
  • Both desktop card grid and mobile card views show the new metadata
  • Verify on mobile (320px, 768px) and desktop (1920px) viewports

Branch

Work on branch issue-162-ux-design-audit-cleanup (shared with all #162 sub-issues)

## Implementation Plan (from #162 -- Milestone 16) **Phase**: 7 (Document improvements) | **Priority**: Medium | **Depends on**: None | **Blocks**: None ### Context Document cards lack upload date and file type information, making it harder to scan and identify documents at a glance. ### Implementation **1. In `frontend/src/features/documents/components/DocumentCardMetadata.tsx`:** - Add upload date display using `createdAt` field from `DocumentRecord` type (line 22 of `documents.types.ts`) - Format as "Uploaded {relative time}" using `date-fns/formatDistanceToNow` or similar (e.g., "Uploaded 3 days ago") - Add file type icon based on `contentType` field: - `application/pdf` -> `PictureAsPdfRoundedIcon` - `image/*` -> `ImageRoundedIcon` - Everything else -> `InsertDriveFileRoundedIcon` - Place icon and upload date in card header area **2. Ensure consistent rendering in:** - `frontend/src/features/documents/pages/DocumentsPage.tsx` (desktop card grid) - `frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx` (same card rendering pattern) ### Files - `frontend/src/features/documents/components/DocumentCardMetadata.tsx` - `frontend/src/features/documents/pages/DocumentsPage.tsx` (card rendering) - `frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx` ### Commit Convention ``` chore: add upload date and file type icon to document cards (refs #172) ``` ### Test Criteria - Cards show relative upload date (e.g., "Uploaded 3 days ago") - Cards show appropriate file type icon (PDF, image, or generic file) - Cards remain clean and scannable (not cluttered) - Both desktop card grid and mobile card views show the new metadata - Verify on mobile (320px, 768px) and desktop (1920px) viewports ### Branch Work on branch `issue-162-ux-design-audit-cleanup` (shared with all #162 sub-issues)
egullickson added
status
in-progress
 and removed
status
backlog
 labels 2026-02-14 01:56:51 +00:00
egullickson commented 2026-02-14 02:00:59 +00:00
Author
Owner
Copy Link
Copy Source

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: PASS

Changes

  • DocumentsPage.tsx (desktop): Added file type icon (PDF=red, image=blue, generic=grey) and relative upload date ("Uploaded 3 days ago") to card header
  • DocumentsMobileScreen.tsx (mobile): Same file type icon and relative upload date in compact mobile card layout
  • Both use dayjs with relativeTime plugin for "X days ago" formatting
  • Icons: PictureAsPdfRoundedIcon, ImageRoundedIcon, InsertDriveFileRoundedIcon based on contentType

Verification

  • ESLint: PASS (0 errors, pre-existing warnings only)
  • TypeScript: PASS
  • Commit: 553877b

Verdict: PASS | Next: Move to status/done

## Milestone: Implementation Complete **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Changes - **DocumentsPage.tsx** (desktop): Added file type icon (PDF=red, image=blue, generic=grey) and relative upload date ("Uploaded 3 days ago") to card header - **DocumentsMobileScreen.tsx** (mobile): Same file type icon and relative upload date in compact mobile card layout - Both use `dayjs` with `relativeTime` plugin for "X days ago" formatting - Icons: `PictureAsPdfRoundedIcon`, `ImageRoundedIcon`, `InsertDriveFileRoundedIcon` based on `contentType` ### Verification - ESLint: PASS (0 errors, pre-existing warnings only) - TypeScript: PASS - Commit: `553877b` *Verdict*: PASS | *Next*: Move to status/done
egullickson added
status
done
 and removed
status
in-progress
 labels 2026-02-14 02:01:00 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
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
status
done
type
chore
Milestone
No items
No Milestone Sprint 2026-02-02
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#172