Fix timezone-independent date display

This commit is contained in:
gpt-engineer-app[bot]
2025-11-02 19:24:54 +00:00
parent 4215c8ad52
commit 0f742f36b6
7 changed files with 139 additions and 19 deletions

View File

@@ -11,6 +11,7 @@ import { toast } from 'sonner';
import { getErrorMessage } from '@/lib/errorHandler';
import { UserRideCredit } from '@/types/database';
import { convertValueFromMetric, getDisplayUnit } from '@/lib/units';
import { parseDateForDisplay } from '@/lib/dateUtils';
import {
AlertDialog,
AlertDialogAction,
@@ -233,13 +234,14 @@ export function RideCreditCard({ credit, position, maxPosition, viewMode, isEdit
{credit.first_ride_date && (
<div className="flex items-center gap-1">
<Calendar className="w-3 h-3" />
<span>First: {format(new Date(credit.first_ride_date), 'MMM d, yyyy')}</span>
{/* ⚠️ Use parseDateForDisplay to prevent timezone shifts */}
<span>First: {format(parseDateForDisplay(credit.first_ride_date), 'MMM d, yyyy')}</span>
</div>
)}
{credit.last_ride_date && (
<div className="flex items-center gap-1">
<Calendar className="w-3 h-3" />
<span>Last: {format(new Date(credit.last_ride_date), 'MMM d, yyyy')}</span>
<span>Last: {format(parseDateForDisplay(credit.last_ride_date), 'MMM d, yyyy')}</span>
</div>
)}
</div>
@@ -410,7 +412,7 @@ export function RideCreditCard({ credit, position, maxPosition, viewMode, isEdit
{credit.first_ride_date && (
<div className="text-xs text-muted-foreground">
<Calendar className="w-3 h-3 inline mr-1" />
{format(new Date(credit.first_ride_date), 'MMM d, yyyy')}
{format(parseDateForDisplay(credit.first_ride_date), 'MMM d, yyyy')}
</div>
)}

View File

@@ -3,6 +3,7 @@ import { Badge } from '@/components/ui/badge';
import { History } from 'lucide-react';
import { RideNameHistory } from '@/types/database';
import { format } from 'date-fns';
import { parseDateForDisplay } from '@/lib/dateUtils';
interface FormerName {
name: string;
@@ -83,7 +84,7 @@ export function FormerNames({ formerNames, nameHistory, currentName }: FormerNam
</div>
)}
{former.date_changed && (
<div>Changed: {format(new Date(former.date_changed), 'MMM d, yyyy')}</div>
<div>Changed: {format(parseDateForDisplay(former.date_changed), 'MMM d, yyyy')}</div>
)}
{former.reason && (
<div className="italic">{former.reason}</div>

View File

@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { format } from 'date-fns';
import { parseDateForDisplay } from '@/lib/dateUtils';
import type { TimelineEvent } from '@/types/timeline';
interface TimelineEventCardProps {
@@ -14,8 +15,10 @@ interface TimelineEventCardProps {
isPending?: boolean;
}
// ⚠️ IMPORTANT: Use parseDateForDisplay to prevent timezone shifts
// YYYY-MM-DD strings must be interpreted as local dates, not UTC
const formatEventDate = (date: string, precision: string = 'day') => {
const dateObj = new Date(date);
const dateObj = parseDateForDisplay(date);
switch (precision) {
case 'year':

View File

@@ -1,4 +1,5 @@
import { format } from 'date-fns';
import { parseDateForDisplay } from '@/lib/dateUtils';
import type { DatePrecision } from './flexible-date-input';
interface FlexibleDateDisplayProps {
@@ -18,7 +19,9 @@ export function FlexibleDateDisplay({
return <span className={className || "text-muted-foreground"}>{fallback}</span>;
}
const dateObj = typeof date === 'string' ? new Date(date) : date;
// ⚠️ IMPORTANT: Use parseDateForDisplay to prevent timezone shifts
// YYYY-MM-DD strings must be interpreted as local dates, not UTC
const dateObj = parseDateForDisplay(date);
// Check for invalid date
if (isNaN(dateObj.getTime())) {

View File

@@ -3,6 +3,7 @@ import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Calendar, MapPin, ArrowRight, Building2 } from 'lucide-react';
import { format } from 'date-fns';
import { parseDateForDisplay } from '@/lib/dateUtils';
interface HistoricalEntityCardProps {
type: 'park' | 'ride';
@@ -65,9 +66,10 @@ export function HistoricalEntityCard({ type, entity, onViewDetails }: Historical
<span>Operated:</span>
</div>
<div className="font-medium">
{entity.operated_from && format(new Date(entity.operated_from), 'MMM d, yyyy')}
{/* ⚠️ Use parseDateForDisplay to prevent timezone shifts */}
{entity.operated_from && format(parseDateForDisplay(entity.operated_from), 'MMM d, yyyy')}
{' - '}
{entity.operated_until && format(new Date(entity.operated_until), 'MMM d, yyyy')}
{entity.operated_until && format(parseDateForDisplay(entity.operated_until), 'MMM d, yyyy')}
</div>
</div>