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

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

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-02-13 20:00:49 -06:00
parent daa0cd072e
commit 553877bfc6
2 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx
View File

@@ -11,6 +11,13 @@ import { ExpirationBadge } from '../components/ExpirationBadge';
import { DocumentCardMetadata } from '../components/DocumentCardMetadata';
import { useVehicles } from '../../vehicles/hooks/useVehicles';
import { getVehicleLabel } from '@/core/utils/vehicleDisplay';
import PictureAsPdfRoundedIcon from '@mui/icons-material/PictureAsPdfRounded';
import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRounded';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
export const DocumentsMobileScreen: React.FC = () => {
console.log('[DocumentsMobileScreen] Component initializing');
@@ -30,6 +37,13 @@ export const DocumentsMobileScreen: React.FC = () => {
const vehiclesMap = useMemo(() => new Map(vehicles?.map(v => [v.id, v]) || []), [vehicles]);
const getFileTypeIcon = (contentType: string | null | undefined) => {
if (!contentType) return <InsertDriveFileRoundedIcon sx={{ fontSize: 14, color: 'text.secondary' }} />;
if (contentType === 'application/pdf') return <PictureAsPdfRoundedIcon sx={{ fontSize: 14, color: 'error.main' }} />;
if (contentType.startsWith('image/')) return <ImageRoundedIcon sx={{ fontSize: 14, color: 'info.main' }} />;
return <InsertDriveFileRoundedIcon sx={{ fontSize: 14, color: 'text.secondary' }} />;
};
const triggerUpload = (docId: string) => {
try {
setCurrentId(docId);
@@ -187,9 +201,13 @@ export const DocumentsMobileScreen: React.FC = () => {
<span className="font-medium text-slate-800 dark:text-avus">{doc.title}</span>
<ExpirationBadge expirationDate={doc.expirationDate} />
</div>
<div className="text-xs text-slate-500 dark:text-titanio">
<div className="text-xs text-slate-500 dark:text-titanio flex items-center gap-1">
{getFileTypeIcon(doc.contentType)}
<span>
{doc.documentType}
{isShared && ' • Shared'}
{doc.createdAt && ` \u00B7 ${dayjs(doc.createdAt).fromNow()}`}
{isShared && ' \u00B7 Shared'}
</span>
</div>
<DocumentCardMetadata doc={doc} variant="mobile" />
<button

21
frontend/src/features/documents/pages/DocumentsPage.tsx
View File

@@ -14,7 +14,14 @@ import {
import VisibilityIcon from '@mui/icons-material/Visibility';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import PictureAsPdfRoundedIcon from '@mui/icons-material/PictureAsPdfRounded';
import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRounded';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
import { AddDocumentDialog } from '../components/AddDocumentDialog';
import { EditDocumentDialog } from '../components/EditDocumentDialog';
import { ExpirationBadge } from '../components/ExpirationBadge';
@@ -36,6 +43,13 @@ export const DocumentsPage: React.FC = () => {
const vehiclesMap = useMemo(() => new Map(vehicles?.map(v => [v.id, v]) || []), [vehicles]);
const getFileTypeIcon = (contentType: string | null | undefined) => {
if (!contentType) return <InsertDriveFileRoundedIcon fontSize="small" sx={{ color: 'text.secondary' }} />;
if (contentType === 'application/pdf') return <PictureAsPdfRoundedIcon fontSize="small" sx={{ color: 'error.main' }} />;
if (contentType.startsWith('image/')) return <ImageRoundedIcon fontSize="small" sx={{ color: 'info.main' }} />;
return <InsertDriveFileRoundedIcon fontSize="small" sx={{ color: 'text.secondary' }} />;
};
// Show loading while auth is initializing
if (authLoading) {
return (
@@ -186,7 +200,12 @@ export const DocumentsPage: React.FC = () => {
<Typography variant="subtitle1" fontWeight={500}>{doc.title}</Typography>
<ExpirationBadge expirationDate={doc.expirationDate} />
</Box>
<Typography variant="body2" color="text.secondary">Type: {doc.documentType}</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
{getFileTypeIcon(doc.contentType)}
<Typography variant="body2" color="text.secondary">
{doc.documentType} {doc.createdAt && `\u00B7 Uploaded ${dayjs(doc.createdAt).fromNow()}`}
</Typography>
</Box>
<DocumentCardMetadata doc={doc} variant="card" />
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<Typography variant="body2" color="text.secondary">Vehicle:</Typography>