Approve database migration

src/components/admin/DesignerForm.tsx

@@ -14,6 +14,7 @@ import { Combobox } from '@/components/ui/combobox';
 import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
+import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 
 type DesignerFormData = z.infer<typeof entitySchemas.designer>;
 

src/components/admin/ManufacturerForm.tsx

@@ -14,6 +14,7 @@ import { Combobox } from '@/components/ui/combobox';
 import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
+import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 
 type ManufacturerFormData = z.infer<typeof entitySchemas.manufacturer>;
 
@@ -24,7 +25,9 @@ type ManufacturerFormInput = {
   description?: string;
   person_type: 'company' | 'individual' | 'firm' | 'organization';
   website_url?: string;
-  founded_year?: string;
+  founded_year?: string; // Legacy support
+  founded_date?: string;
+  founded_date_precision?: string;
   headquarters_location?: string;
   images?: {
     uploaded: Array<{
@@ -68,6 +71,8 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
       person_type: initialData?.person_type || 'company',
       website_url: initialData?.website_url || '',
       founded_year: initialData?.founded_year ? String(initialData.founded_year) : '',
+      founded_date: initialData?.founded_date || (initialData?.founded_year ? `${initialData.founded_year}-01-01` : ''),
+      founded_date_precision: initialData?.founded_date_precision || (initialData?.founded_year ? 'year' : 'day'),
       headquarters_location: initialData?.headquarters_location || '',
       images: initialData?.images || { uploaded: [] }
     }
@@ -146,20 +151,18 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
 
           {/* Additional Details */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div className="space-y-2">
-              <Label htmlFor="founded_year">Founded Year</Label>
-              <Input
-                id="founded_year"
-                type="number"
-                min="1800"
-                max={new Date().getFullYear()}
-                {...register('founded_year')}
-                placeholder="e.g. 1972"
-              />
-              {errors.founded_year && (
-                <p className="text-sm text-destructive">{errors.founded_year.message}</p>
-              )}
-            </div>
+            <FlexibleDateInput
+              value={watch('founded_date') ? new Date(watch('founded_date')) : undefined}
+              precision={(watch('founded_date_precision') as DatePrecision) || 'year'}
+              onChange={(date, precision) => {
+                setValue('founded_date', date ? date.toISOString().split('T')[0] : undefined);
+                setValue('founded_date_precision', precision);
+              }}
+              label="Founded Date"
+              placeholder="Select founded date"
+              disableFuture={true}
+              fromYear={1800}
+            />
 
             <div className="space-y-2">
               <Label htmlFor="headquarters_location">Headquarters Location</Label>

src/components/admin/OperatorForm.tsx

@@ -14,6 +14,7 @@ import { Combobox } from '@/components/ui/combobox';
 import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
+import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 
 type OperatorFormData = z.infer<typeof entitySchemas.operator>;
 
@@ -25,6 +26,8 @@ type OperatorFormInput = {
   person_type: 'company' | 'individual' | 'firm' | 'organization';
   website_url?: string;
   founded_year?: string;
+  founded_date?: string;
+  founded_date_precision?: string;
   headquarters_location?: string;
   images?: {
     uploaded: Array<{

src/components/admin/ParkForm.tsx

@@ -12,6 +12,7 @@ import { Label } from '@/components/ui/label';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { DatePicker } from '@/components/ui/date-picker';
+import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 import { SlugField } from '@/components/ui/slug-field';
 import { toast } from '@/hooks/use-toast';
 import { MapPin, Save, X, Plus } from 'lucide-react';
@@ -29,7 +30,9 @@ const parkSchema = z.object({
   park_type: z.string().min(1, 'Park type is required'),
   status: z.string().min(1, 'Status is required'),
   opening_date: z.string().optional(),
+  opening_date_precision: z.enum(['day', 'month', 'year']).optional(),
   closing_date: z.string().optional(),
+  closing_date_precision: z.enum(['day', 'month', 'year']).optional(),
   location: z.object({
     name: z.string(),
     city: z.string().optional(),
@@ -279,27 +282,31 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
 
           {/* Dates */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div className="space-y-2">
-              <Label>Opening Date</Label>
-              <DatePicker
-                date={watch('opening_date') ? new Date(watch('opening_date')) : undefined}
-                onSelect={(date) => setValue('opening_date', date ? date.toISOString().split('T')[0] : undefined)}
-                placeholder="Select opening date"
-                disableFuture={true}
-                fromYear={1800}
-              />
-            </div>
+            <FlexibleDateInput
+              value={watch('opening_date') ? new Date(watch('opening_date')) : undefined}
+              precision={(watch('opening_date_precision') as DatePrecision) || 'day'}
+              onChange={(date, precision) => {
+                setValue('opening_date', date ? date.toISOString().split('T')[0] : undefined);
+                setValue('opening_date_precision', precision);
+              }}
+              label="Opening Date"
+              placeholder="Select opening date"
+              disableFuture={true}
+              fromYear={1800}
+            />
 
-            <div className="space-y-2">
-              <Label>Closing Date (if applicable)</Label>
-              <DatePicker
-                date={watch('closing_date') ? new Date(watch('closing_date')) : undefined}
-                onSelect={(date) => setValue('closing_date', date ? date.toISOString().split('T')[0] : undefined)}
-                placeholder="Select closing date"
-                disablePast={false}
-                fromYear={1800}
-              />
-            </div>
+            <FlexibleDateInput
+              value={watch('closing_date') ? new Date(watch('closing_date')) : undefined}
+              precision={(watch('closing_date_precision') as DatePrecision) || 'day'}
+              onChange={(date, precision) => {
+                setValue('closing_date', date ? date.toISOString().split('T')[0] : undefined);
+                setValue('closing_date_precision', precision);
+              }}
+              label="Closing Date (if applicable)"
+              placeholder="Select closing date"
+              disablePast={false}
+              fromYear={1800}
+            />
           </div>
 
           {/* Location */}

src/components/admin/PropertyOwnerForm.tsx

@@ -13,6 +13,7 @@ import { Combobox } from '@/components/ui/combobox';
 import { useCompanyHeadquarters } from '@/hooks/useAutocompleteData';
 import { useUserRole } from '@/hooks/useUserRole';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
+import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 
 const propertyOwnerSchema = z.object({
   name: z.string().min(1, 'Name is required'),

src/components/admin/RideForm.tsx

@@ -13,6 +13,7 @@ import { Badge } from '@/components/ui/badge';
 import { EntityMultiImageUploader, ImageAssignments } from '@/components/upload/EntityMultiImageUploader';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { DatePicker } from '@/components/ui/date-picker';
+import { FlexibleDateInput, type DatePrecision } from '@/components/ui/flexible-date-input';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Combobox } from '@/components/ui/combobox';
 import { SlugField } from '@/components/ui/slug-field';
@@ -158,7 +159,9 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
         ? STATUS_DB_TO_DISPLAY[initialData.status] || 'Operating'
         : 'Operating',
       opening_date: initialData?.opening_date || '',
+      opening_date_precision: initialData?.opening_date_precision || 'day',
       closing_date: initialData?.closing_date || '',
+      closing_date_precision: initialData?.closing_date_precision || 'day',
       // Convert metric values to user's preferred unit for display
       height_requirement: initialData?.height_requirement 
         ? convertValueFromMetric(initialData.height_requirement, getDisplayUnit('cm', measurementSystem), 'cm') 
@@ -486,27 +489,31 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
 
           {/* Dates */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div className="space-y-2">
-              <Label>Opening Date</Label>
-              <DatePicker
-                date={watch('opening_date') ? new Date(watch('opening_date')) : undefined}
-                onSelect={(date) => setValue('opening_date', date ? date.toISOString().split('T')[0] : undefined)}
-                placeholder="Select opening date"
-                disableFuture={true}
-                fromYear={1800}
-              />
-            </div>
+            <FlexibleDateInput
+              value={watch('opening_date') ? new Date(watch('opening_date')) : undefined}
+              precision={(watch('opening_date_precision') as DatePrecision) || 'day'}
+              onChange={(date, precision) => {
+                setValue('opening_date', date ? date.toISOString().split('T')[0] : undefined);
+                setValue('opening_date_precision', precision);
+              }}
+              label="Opening Date"
+              placeholder="Select opening date"
+              disableFuture={true}
+              fromYear={1800}
+            />
 
-            <div className="space-y-2">
-              <Label>Closing Date (if applicable)</Label>
-              <DatePicker
-                date={watch('closing_date') ? new Date(watch('closing_date')) : undefined}
-                onSelect={(date) => setValue('closing_date', date ? date.toISOString().split('T')[0] : undefined)}
-                placeholder="Select closing date"
-                disablePast={false}
-                fromYear={1800}
-              />
-            </div>
+            <FlexibleDateInput
+              value={watch('closing_date') ? new Date(watch('closing_date')) : undefined}
+              precision={(watch('closing_date_precision') as DatePrecision) || 'day'}
+              onChange={(date, precision) => {
+                setValue('closing_date', date ? date.toISOString().split('T')[0] : undefined);
+                setValue('closing_date_precision', precision);
+              }}
+              label="Closing Date (if applicable)"
+              placeholder="Select closing date"
+              disablePast={false}
+              fromYear={1800}
+            />
           </div>
 
           {/* Requirements */}