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

chore: add Year Make Model subtitle to vehicle cards and hide empty VIN (refs #167)

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-02-13 19:41:23 -06:00
parent bc9c386300
commit 56be3ed348
2 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/features/vehicles/components/VehicleCard.tsx
View File

@@ -9,7 +9,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
import { Vehicle } from '../types/vehicles.types'; import { Vehicle } from '../types/vehicles.types';
import { useUnits } from '../../../core/units/UnitsContext'; import { useUnits } from '../../../core/units/UnitsContext';
import { VehicleImage } from './VehicleImage'; import { VehicleImage } from './VehicleImage';
import { getVehicleLabel } from '@/core/utils/vehicleDisplay'; import { getVehicleLabel, getVehicleSubtitle } from '@/core/utils/vehicleDisplay';
interface VehicleCardProps { interface VehicleCardProps {
vehicle: Vehicle; vehicle: Vehicle;
@@ -26,6 +26,7 @@ export const VehicleCard: React.FC<VehicleCardProps> = ({
}) => { }) => {
const { formatDistance } = useUnits(); const { formatDistance } = useUnits();
const displayName = getVehicleLabel(vehicle); const displayName = getVehicleLabel(vehicle);
const subtitle = getVehicleSubtitle(vehicle);
return ( return (
<Card <Card
@@ -46,13 +47,21 @@ export const VehicleCard: React.FC<VehicleCardProps> = ({
<CardContent> <CardContent>
<VehicleImage vehicle={vehicle} height={96} /> <VehicleImage vehicle={vehicle} height={96} />
<Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}> <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
{displayName} {displayName}
</Typography> </Typography>
{subtitle && (
<Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
{subtitle}
</Typography>
)}
{vehicle.vin && (
<Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}> <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
VIN: {vehicle.vin} VIN: {vehicle.vin}
</Typography> </Typography>
)}
{vehicle.licensePlate && ( {vehicle.licensePlate && (
<Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}> <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>

8
frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx
View File

@@ -6,7 +6,7 @@ import React from 'react';
import { Card, CardActionArea, Box, Typography } from '@mui/material'; import { Card, CardActionArea, Box, Typography } from '@mui/material';
import { Vehicle } from '../types/vehicles.types'; import { Vehicle } from '../types/vehicles.types';
import { VehicleImage } from '../components/VehicleImage'; import { VehicleImage } from '../components/VehicleImage';
import { getVehicleLabel } from '@/core/utils/vehicleDisplay'; import { getVehicleLabel, getVehicleSubtitle } from '@/core/utils/vehicleDisplay';
interface VehicleMobileCardProps { interface VehicleMobileCardProps {
vehicle: Vehicle; vehicle: Vehicle;
@@ -20,7 +20,7 @@ export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
compact = false compact = false
}) => { }) => {
const displayName = getVehicleLabel(vehicle); const displayName = getVehicleLabel(vehicle);
const displayModel = vehicle.model || 'Unknown Model'; const subtitle = getVehicleSubtitle(vehicle);
return ( return (
<Card <Card
@@ -37,9 +37,11 @@ export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
<Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}> <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
{displayName} {displayName}
</Typography> </Typography>
{subtitle && (
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
{displayModel} {subtitle}
</Typography> </Typography>
)}
{vehicle.licensePlate && ( {vehicle.licensePlate && (
<Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}> <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
{vehicle.licensePlate} {vehicle.licensePlate}