fix: replace new Date() with dayjs for DATE column display and sorting (refs #237)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 1m19s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 44s
Deploy to Staging / Verify Staging (pull_request) Successful in 4s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 4s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped

new Date("YYYY-MM-DD") parses as UTC midnight per ES2015. toLocaleDateString()
then displays in local time, shifting the date back one day for users west of
UTC. This caused the list view and edit dialog to show different dates.

Fixed in: MaintenanceRecordsList (display + sort + delete confirm),
VehicleDetailPage (display + sort), VehicleDetailMobile (display + sort),
MaintenanceRecordForm (receipt title), OwnershipCostsList (formatDate).

Sorting now uses string comparison (YYYY-MM-DD is lexicographically sortable).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-03-23 21:18:30 -05:00
parent 087f7b9fa5
commit 1e056f0b01
5 changed files with 13 additions and 9 deletions

View File

@@ -3,6 +3,7 @@
*/
import React, { useMemo, useState } from 'react';
import dayjs from 'dayjs';
import { Box, Typography, Button, Card, CardContent, Divider, FormControl, InputLabel, Select, MenuItem, List, ListItem, ListItemButton, Dialog, DialogTitle, DialogContent } from '@mui/material';
import { useQueryClient } from '@tanstack/react-query';
import { Vehicle } from '../types/vehicles.types';
@@ -123,7 +124,7 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
});
}
}
return list.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
return list.sort((a, b) => b.date.localeCompare(a.date));
}, [fuelLogs]);
const filteredRecords = useMemo(() => {
@@ -286,7 +287,7 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
</Box>
{/* Secondary line: Grade • Date • Type */}
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.25 }}>
{rec.secondary || `${new Date(rec.date).toLocaleDateString()}${rec.type}`}
{rec.secondary || `${dayjs(rec.date).format('M/D/YYYY')}${rec.type}`}
</Typography>
</Box>
</ListItemButton>