mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 21:31:14 -05:00
Fix timezone-independent date display
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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':
|
||||
|
||||
@@ -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())) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user