From b189f40c1f16559380c71e1f8a69739a1942c4bb Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 6 Nov 2025 05:01:51 +0000
Subject: [PATCH] Fix date display and edit form issues

---
 .../displays/RichCompanyDisplay.tsx           | 13 ++++++------
 .../moderation/displays/RichParkDisplay.tsx   | 20 +++++++++++--------
 .../moderation/displays/RichRideDisplay.tsx   | 20 +++++++++++--------
 src/pages/ParkDetail.tsx                      | 14 +++++++++++++
 .../process-selective-approval/index.ts       |  7 ++++---
 5 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/src/components/moderation/displays/RichCompanyDisplay.tsx b/src/components/moderation/displays/RichCompanyDisplay.tsx
index 2b96f324..b2b85646 100644
--- a/src/components/moderation/displays/RichCompanyDisplay.tsx
+++ b/src/components/moderation/displays/RichCompanyDisplay.tsx
@@ -1,6 +1,8 @@
 import { Building, MapPin, Calendar, Globe, ExternalLink, AlertCircle } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { FlexibleDateDisplay } from '@/components/ui/flexible-date-display';
+import type { DatePrecision } from '@/components/ui/flexible-date-input';
 import type { CompanySubmissionData } from '@/types/submission-data';
 
 interface RichCompanyDisplayProps {
@@ -63,12 +65,11 @@ export function RichCompanyDisplay({ data, actionType, showAllFields = true }: R
             </div>
             <div className="text-sm ml-6">
               {data.founded_date ? (
-                <>
-                  <span className="font-medium">{new Date(data.founded_date).toLocaleDateString()}</span>
-                  {data.founded_date_precision && data.founded_date_precision !== 'day' && (
-                    <span className="text-xs text-muted-foreground ml-1">({data.founded_date_precision})</span>
-                  )}
-                </>
+                <FlexibleDateDisplay 
+                  date={data.founded_date} 
+                  precision={(data.founded_date_precision as DatePrecision) || 'day'} 
+                  className="font-medium"
+                />
               ) : (
                 <span className="font-medium">{data.founded_year}</span>
               )}
diff --git a/src/components/moderation/displays/RichParkDisplay.tsx b/src/components/moderation/displays/RichParkDisplay.tsx
index c37a37cc..0adf7155 100644
--- a/src/components/moderation/displays/RichParkDisplay.tsx
+++ b/src/components/moderation/displays/RichParkDisplay.tsx
@@ -1,6 +1,8 @@
 import { Building2, MapPin, Calendar, Globe, ExternalLink, Users, AlertCircle } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { FlexibleDateDisplay } from '@/components/ui/flexible-date-display';
+import type { DatePrecision } from '@/components/ui/flexible-date-input';
 import type { ParkSubmissionData } from '@/types/submission-data';
 import { useEffect, useState } from 'react';
 import { supabase } from '@/lib/supabaseClient';
@@ -154,19 +156,21 @@ export function RichParkDisplay({ data, actionType, showAllFields = true }: Rich
               {data.opening_date && (
                 <div>
                   <span className="text-muted-foreground">Opened:</span>{' '}
-                  <span className="font-medium">{new Date(data.opening_date).toLocaleDateString()}</span>
-                  {data.opening_date_precision && data.opening_date_precision !== 'day' && (
-                    <span className="text-xs text-muted-foreground ml-1">({data.opening_date_precision})</span>
-                  )}
+                  <FlexibleDateDisplay 
+                    date={data.opening_date} 
+                    precision={(data.opening_date_precision as DatePrecision) || 'day'} 
+                    className="font-medium"
+                  />
                 </div>
               )}
               {data.closing_date && (
                 <div>
                   <span className="text-muted-foreground">Closed:</span>{' '}
-                  <span className="font-medium">{new Date(data.closing_date).toLocaleDateString()}</span>
-                  {data.closing_date_precision && data.closing_date_precision !== 'day' && (
-                    <span className="text-xs text-muted-foreground ml-1">({data.closing_date_precision})</span>
-                  )}
+                  <FlexibleDateDisplay 
+                    date={data.closing_date} 
+                    precision={(data.closing_date_precision as DatePrecision) || 'day'} 
+                    className="font-medium"
+                  />
                 </div>
               )}
             </div>
diff --git a/src/components/moderation/displays/RichRideDisplay.tsx b/src/components/moderation/displays/RichRideDisplay.tsx
index 434d194f..e3f675aa 100644
--- a/src/components/moderation/displays/RichRideDisplay.tsx
+++ b/src/components/moderation/displays/RichRideDisplay.tsx
@@ -1,6 +1,8 @@
 import { Train, Gauge, Ruler, Zap, Calendar, Building, User, ExternalLink, AlertCircle, TrendingUp, Droplets, Sparkles, RotateCw, Baby, Navigation } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { FlexibleDateDisplay } from '@/components/ui/flexible-date-display';
+import type { DatePrecision } from '@/components/ui/flexible-date-input';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import type { RideSubmissionData } from '@/types/submission-data';
@@ -602,19 +604,21 @@ export function RichRideDisplay({ data, actionType, showAllFields = true }: Rich
             {data.opening_date && (
               <div>
                 <span className="text-muted-foreground">Opened:</span>{' '}
-                <span className="font-medium">{new Date(data.opening_date).toLocaleDateString()}</span>
-                {data.opening_date_precision && data.opening_date_precision !== 'day' && (
-                  <span className="text-xs text-muted-foreground ml-1">({data.opening_date_precision})</span>
-                )}
+                <FlexibleDateDisplay 
+                  date={data.opening_date} 
+                  precision={(data.opening_date_precision as DatePrecision) || 'day'} 
+                  className="font-medium"
+                />
               </div>
             )}
             {data.closing_date && (
               <div>
                 <span className="text-muted-foreground">Closed:</span>{' '}
-                <span className="font-medium">{new Date(data.closing_date).toLocaleDateString()}</span>
-                {data.closing_date_precision && data.closing_date_precision !== 'day' && (
-                  <span className="text-xs text-muted-foreground ml-1">({data.closing_date_precision})</span>
-                )}
+                <FlexibleDateDisplay 
+                  date={data.closing_date} 
+                  precision={(data.closing_date_precision as DatePrecision) || 'day'} 
+                  className="font-medium"
+                />
               </div>
             )}
           </div>
diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 278238ae..a2e048c6 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -644,7 +644,21 @@ export default function ParkDetail() {
                     park_type: park?.park_type,
                     status: park?.status,
                     opening_date: park?.opening_date ?? undefined,
+                    opening_date_precision: (park?.opening_date_precision as 'day' | 'month' | 'year') ?? undefined,
                     closing_date: park?.closing_date ?? undefined,
+                    closing_date_precision: (park?.closing_date_precision as 'day' | 'month' | 'year') ?? undefined,
+                    location_id: park?.location?.id,
+                    location: park?.location ? {
+                      name: park.location.name || '',
+                      city: park.location.city || '',
+                      state_province: park.location.state_province || '',
+                      country: park.location.country || '',
+                      postal_code: park.location.postal_code || '',
+                      latitude: park.location.latitude || 0,
+                      longitude: park.location.longitude || 0,
+                      timezone: park.location.timezone || '',
+                      display_name: park.location.name || '',
+                    } : undefined,
                     website_url: park?.website_url ?? undefined,
                     phone: park?.phone ?? undefined,
                     email: park?.email ?? undefined,
diff --git a/supabase/functions/process-selective-approval/index.ts b/supabase/functions/process-selective-approval/index.ts
index 4d6ab8f0..4f6c1526 100644
--- a/supabase/functions/process-selective-approval/index.ts
+++ b/supabase/functions/process-selective-approval/index.ts
@@ -406,7 +406,8 @@ interface ApprovalRequest {
 const RIDE_FIELDS = [
   'name', 'slug', 'description', 'park_id', 'ride_model_id', 
   'manufacturer_id', 'designer_id', 'category', 'status',
-  'opening_date', 'closing_date', 'height_requirement', 'age_requirement',
+  'opening_date', 'opening_date_precision', 'closing_date', 'closing_date_precision',
+  'height_requirement', 'age_requirement',
   'capacity_per_hour', 'duration_seconds', 'max_speed_kmh', 
   'max_height_meters', 'length_meters', 'inversions',
   'ride_sub_type', 'coaster_type', 'seating_type', 'intensity_level',
@@ -416,8 +417,8 @@ const RIDE_FIELDS = [
 
 const PARK_FIELDS = [
   'name', 'slug', 'description', 'park_type', 'status',
-  'opening_date', 'closing_date', 'location_id', 'operator_id',
-  'property_owner_id', 'website_url', 'phone', 'email',
+  'opening_date', 'opening_date_precision', 'closing_date', 'closing_date_precision',
+  'location_id', 'operator_id', 'property_owner_id', 'website_url', 'phone', 'email',
   'banner_image_url', 'banner_image_id', 'card_image_url', 'card_image_id'
 ];