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

feat: display vehicle names instead of UUIDs in document views (refs #31)

Browse Source 
- Created shared utility getVehicleLabel() for consistent vehicle display
- Updated DocumentsPage to show vehicle names with clickable links
- Added "Shared with X vehicles" indicator for multi-vehicle docs
- Updated DocumentDetailPage with vehicle name and shared vehicle list
- Updated DocumentsMobileScreen with vehicle names and "Shared" indicator
- All vehicle names link to vehicle detail pages
- Mobile-first with 44px touch targets on all links

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-01-14 19:34:02 -06:00
parent e558fdf8f9
commit 8968cad805
4 changed files with 103 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,23 @@
import React from 'react';
import React, { useMemo } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { useDocumentsList, useDeleteDocument } from '../hooks/useDocuments';
import { Card } from '../../../shared-minimal/components/Card';
import { Button } from '../../../shared-minimal/components/Button';
import { useNavigate } from 'react-router-dom';
import { AddDocumentDialog } from '../components/AddDocumentDialog';
import { useVehicles } from '../../vehicles/hooks/useVehicles';
import { getVehicleLabel } from '../utils/vehicleLabel';
export const DocumentsPage: React.FC = () => {
const { isAuthenticated, isLoading: authLoading, loginWithRedirect } = useAuth0();
const { data, isLoading, error } = useDocumentsList();
const { data: vehicles } = useVehicles();
const navigate = useNavigate();
const removeDoc = useDeleteDocument();
const [isAddOpen, setIsAddOpen] = React.useState(false);
const vehiclesMap = useMemo(() => new Map(vehicles?.map(v => [v.id, v]) || []), [vehicles]);
// Show loading while auth is initializing
if (authLoading) {
return (
@@ -124,19 +129,36 @@ export const DocumentsPage: React.FC = () => {
{!isLoading && !error && data && data.length > 0 && (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{data.map((doc) => (
<Card key={doc.id}>
<div className="p-4 space-y-2">
<div className="font-medium">{doc.title}</div>
<div className="text-sm text-slate-500">Type: {doc.documentType}</div>
<div className="text-sm text-slate-500">Vehicle: {doc.vehicleId}</div>
<div className="flex gap-2 pt-2">
<Button onClick={() => navigate(`/garage/documents/${doc.id}`)}>Open</Button>
<Button variant="danger" onClick={() => removeDoc.mutate(doc.id)}>Delete</Button>
{data.map((doc) => {
const vehicle = vehiclesMap.get(doc.vehicleId);
const vehicleLabel = getVehicleLabel(vehicle);
return (
<Card key={doc.id}>
<div className="p-4 space-y-2">
<div className="font-medium">{doc.title}</div>
<div className="text-sm text-slate-500">Type: {doc.documentType}</div>
<div className="text-sm">
<span className="text-slate-500">Vehicle: </span>
<button
onClick={() => navigate(`/garage/vehicles/${doc.vehicleId}`)}
className="text-blue-600 hover:text-blue-800 underline min-h-[44px] inline-flex items-center"
>
{vehicleLabel}
</button>
</div>
{doc.sharedVehicleIds.length > 0 && (
<div className="text-xs text-slate-500">
Shared with {doc.sharedVehicleIds.length} other vehicle{doc.sharedVehicleIds.length > 1 ? 's' : ''}
</div>
)}
<div className="flex gap-2 pt-2">
<Button onClick={() => navigate(`/garage/documents/${doc.id}`)}>Open</Button>
<Button variant="danger" onClick={() => removeDoc.mutate(doc.id)}>Delete</Button>
</div>
</div>
</div>
</Card>
))}
</Card>
);
})}
</div>
)}
</div>