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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/features/documents/mobile/DocumentsMobileScreen.tsx

@@ -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">
-                      {doc.documentType}
+                      {getFileTypeIcon(doc.contentType)}
-                      {isShared && ' • Shared'}
+                      <span>
+                        {doc.documentType}
+                        {doc.createdAt && ` \u00B7 ${dayjs(doc.createdAt).fromNow()}`}
+                        {isShared && ' \u00B7 Shared'}
+                      </span>
                     </div>
                     <DocumentCardMetadata doc={doc} variant="mobile" />
                     <button

frontend/src/features/documents/pages/DocumentsPage.tsx

@@ -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>