Merge pull request 'fix: Maintenance dates display one day off due to timezone conversion (#237)' (#238) from issue-237-fix-date-timezone into main

Reviewed-on: #238

backend/src/core/config/database.ts

@@ -2,10 +2,15 @@
  * @ai-summary PostgreSQL connection pool configuration
  * @ai-context Shared pool for all feature repositories
  */
-import { Pool } from 'pg';
+import { Pool, types } from 'pg';
 import { logger } from '../logging/logger';
 import { appConfig } from './config-loader';
 
+// Override DATE type parser to return plain YYYY-MM-DD strings instead of Date objects.
+// Default pg behavior creates Date objects at local midnight, which shift dates when
+// serialized to JSON via toISOString() (UTC conversion) for clients in other timezones.
+types.setTypeParser(1082, (val: string) => val);
+
 export const pool = new Pool({
   connectionString: appConfig.getDatabaseUrl(),
   max: 10,

frontend/src/features/maintenance/components/MaintenanceRecordEditDialog.tsx

@@ -335,9 +335,9 @@ export const MaintenanceRecordEditDialog: React.FC<MaintenanceRecordEditDialogPr
               <Grid item xs={12} sm={6}>
                 <DatePicker
                   label="Service Date *"
-                  value={formData.date ? dayjs(formData.date) : null}
+                  value={formData.date ? dayjs(String(formData.date).substring(0, 10)) : null}
                   onChange={(newValue) =>
-                    handleInputChange('date', newValue?.toISOString().split('T')[0] || '')
+                    handleInputChange('date', newValue?.format('YYYY-MM-DD') || '')
                   }
                   format="MM/DD/YYYY"
                   slotProps={{

frontend/src/features/maintenance/components/MaintenanceRecordForm.tsx

@@ -111,9 +111,9 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
     mode: 'onChange',
     defaultValues: {
       vehicle_id: vehicleId || '',
-      category: undefined as any,
+      category: '' as any,
       subtypes: [],
-      date: new Date().toISOString().split('T')[0],
+      date: dayjs().format('YYYY-MM-DD'),
       odometer_reading: '' as any,
       cost: '' as any,
       shop_name: '',
@@ -132,6 +132,8 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
     if (watchedCategory) {
       setSelectedCategory(watchedCategory as MaintenanceCategory);
       setValue('subtypes', []);
+    } else {
+      setSelectedCategory(null);
     }
   }, [watchedCategory, setValue]);
 
@@ -188,7 +190,7 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
           const doc = await documentsApi.create({
             vehicleId: data.vehicle_id,
             documentType: 'manual',
-            title: `Maintenance Receipt - ${new Date(data.date).toLocaleDateString()}`,
+            title: `Maintenance Receipt - ${dayjs(data.date).format('M/D/YYYY')}`,
           });
           await documentsApi.upload(doc.id, capturedReceiptFile);
           receiptDocumentId = doc.id;
@@ -217,9 +219,9 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
       // Reset form
       reset({
         vehicle_id: '',
-        category: undefined as any,
+        category: '' as any,
         subtypes: [],
-        date: new Date().toISOString().split('T')[0],
+        date: dayjs().format('YYYY-MM-DD'),
         odometer_reading: '' as any,
         cost: '' as any,
         shop_name: '',
@@ -385,7 +387,7 @@ export const MaintenanceRecordForm: React.FC<MaintenanceRecordFormProps> = ({ ve
                       label="Date *"
                       value={field.value ? dayjs(field.value) : null}
                       onChange={(newValue) =>
-                        field.onChange(newValue?.toISOString().split('T')[0] || '')
+                        field.onChange(newValue?.format('YYYY-MM-DD') || '')
                       }
                       format="MM/DD/YYYY"
                       slotProps={{

frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx

@@ -4,6 +4,7 @@
  */
 
 import React, { useState } from 'react';
+import dayjs from 'dayjs';
 import {
   Card,
   CardContent,
@@ -74,14 +75,14 @@ export const MaintenanceRecordsList: React.FC<MaintenanceRecordsListProps> = ({
 
   // Sort records by date DESC (newest first)
   const sortedRecords = [...records].sort(
-    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+    (a, b) => b.date.localeCompare(a.date)
   );
 
   return (
     <>
       <Stack spacing={2}>
         {sortedRecords.map((record) => {
-          const dateText = new Date(record.date).toLocaleDateString();
+          const dateText = dayjs(record.date).format('M/D/YYYY');
           const categoryDisplay = getCategoryDisplayName(record.category);
           const subtypeCount = record.subtypeCount || record.subtypes?.length || 0;
 
@@ -204,7 +205,7 @@ export const MaintenanceRecordsList: React.FC<MaintenanceRecordsListProps> = ({
           </Typography>
           {recordToDelete && (
             <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
-              {new Date(recordToDelete.date).toLocaleDateString()} -{' '}
+              {dayjs(recordToDelete.date).format('M/D/YYYY')} -{' '}
               {getCategoryDisplayName(recordToDelete.category)}
             </Typography>
           )}

frontend/src/features/maintenance/components/MaintenanceScheduleEditDialog.tsx

@@ -335,9 +335,9 @@ export const MaintenanceScheduleEditDialog: React.FC<MaintenanceScheduleEditDial
                 <Grid item xs={12}>
                   <DatePicker
                     label="Due Date"
-                    value={formData.fixedDueDate ? dayjs(formData.fixedDueDate) : null}
+                    value={formData.fixedDueDate ? dayjs(String(formData.fixedDueDate).substring(0, 10)) : null}
                     onChange={(newValue) =>
-                      handleInputChange('fixedDueDate', newValue?.toISOString().split('T')[0] || undefined)
+                      handleInputChange('fixedDueDate', newValue?.format('YYYY-MM-DD') || undefined)
                     }
                     format="MM/DD/YYYY"
                     slotProps={{

frontend/src/features/maintenance/components/MaintenanceScheduleForm.tsx

@@ -119,7 +119,7 @@ export const MaintenanceScheduleForm: React.FC<MaintenanceScheduleFormProps> = (
     mode: 'onChange',
     defaultValues: {
       vehicle_id: vehicleId || '',
-      category: undefined as any,
+      category: '' as any,
       subtypes: [],
       schedule_type: 'interval' as ScheduleType,
       interval_months: '' as any,
@@ -145,6 +145,8 @@ export const MaintenanceScheduleForm: React.FC<MaintenanceScheduleFormProps> = (
     if (watchedCategory) {
       setSelectedCategory(watchedCategory as MaintenanceCategory);
       setValue('subtypes', []);
+    } else {
+      setSelectedCategory(null);
     }
   }, [watchedCategory, setValue]);
 
@@ -170,7 +172,7 @@ export const MaintenanceScheduleForm: React.FC<MaintenanceScheduleFormProps> = (
       // Reset form
       reset({
         vehicle_id: '',
-        category: undefined as any,
+        category: '' as any,
         subtypes: [],
         schedule_type: 'interval' as ScheduleType,
         interval_months: '' as any,
@@ -410,7 +412,7 @@ export const MaintenanceScheduleForm: React.FC<MaintenanceScheduleFormProps> = (
                         label="Fixed Due Date *"
                         value={field.value ? dayjs(field.value) : null}
                         onChange={(newValue) =>
-                          field.onChange(newValue?.toISOString().split('T')[0] || '')
+                          field.onChange(newValue?.format('YYYY-MM-DD') || '')
                         }
                         format="MM/DD/YYYY"
                         slotProps={{

frontend/src/features/maintenance/hooks/useMaintenanceReceiptOcr.ts

@@ -107,17 +107,17 @@ function parseServiceDate(value: string | number | null): string | undefined {
   // Try standard parsing
   const date = new Date(dateStr);
   if (!isNaN(date.getTime())) {
-    return date.toISOString().split('T')[0];
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
   }
 
   // Try MM/DD/YYYY format
   const mdyMatch = dateStr.match(/(\d{1,2})\/(\d{1,2})\/(\d{4})/);
   if (mdyMatch) {
     const [, month, day, year] = mdyMatch;
-    const parsed = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-    if (!isNaN(parsed.getTime())) {
-      return parsed.toISOString().split('T')[0];
-    }
+    return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
   }
 
   return undefined;

frontend/src/features/ownership-costs/components/OwnershipCostsList.tsx

@@ -3,6 +3,7 @@
  */
 
 import React from 'react';
+import dayjs from 'dayjs';
 import type { OwnershipCost, OwnershipCostType } from '../types/ownership-costs.types';
 import { useOwnershipCostsList, useDeleteOwnershipCost } from '../hooks/useOwnershipCosts';
 
@@ -42,7 +43,7 @@ export const OwnershipCostsList: React.FC<OwnershipCostsListProps> = ({ vehicleI
   };
 
   const formatDate = (dateString: string): string => {
-    return new Date(dateString).toLocaleDateString();
+    return dayjs(dateString).format('M/D/YYYY');
   };
 
   if (isLoading) {

frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx

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

frontend/src/features/vehicles/pages/VehicleDetailPage.tsx

@@ -3,6 +3,7 @@
  */
 
 import React, { useMemo, useState, useEffect } from 'react';
+import dayjs from 'dayjs';
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
 import { Box, Typography, Button as MuiButton, Divider, FormControl, InputLabel, Select, MenuItem, Table, TableHead, TableRow, TableCell, TableBody, Dialog, DialogTitle, DialogContent, useMediaQuery, IconButton } from '@mui/material';
 import { useQueryClient } from '@tanstack/react-query';
@@ -132,7 +133,7 @@ export const VehicleDetailPage: React.FC = () => {
       }
     }
 
-    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, documents]);
 
   const filteredRecords = useMemo(() => {
@@ -490,7 +491,7 @@ export const VehicleDetailPage: React.FC = () => {
               )}
               {!isFuelLoading && !isDocumentsLoading && filteredRecords.map((rec) => (
                 <TableRow key={rec.id} hover sx={{ cursor: rec.type === 'Documents' ? 'default' : 'pointer' }} onClick={() => handleRowClick(rec.id, rec.type)}>
-                  <TableCell>{new Date(rec.date).toLocaleDateString()}</TableCell>
+                  <TableCell>{dayjs(rec.date).format('M/D/YYYY')}</TableCell>
                   <TableCell>{rec.type}</TableCell>
                   <TableCell>{rec.summary}</TableCell>
                   <TableCell align="right">{rec.amount || '—'}</TableCell>