Approve timeline integration plan

src/components/history/EntityHistoryTabs.tsx

@@ -1,14 +1,14 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { EntityHistoryTimeline, HistoryEvent } from './EntityHistoryTimeline';
+import { EntityTimelineManager } from '@/components/timeline/EntityTimelineManager';
 import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
 import { FormerNamesSection } from './FormerNamesSection';
 import { RideNameHistory } from '@/types/database';
+import type { EntityType } from '@/types/timeline';
 
 interface EntityHistoryTabsProps {
-  entityType: 'park' | 'ride' | 'company';
+  entityType: EntityType;
   entityId: string;
   entityName: string;
-  events: HistoryEvent[];
   formerNames?: RideNameHistory[];
   currentName?: string;
 }
@@ -43,7 +43,6 @@ export function EntityHistoryTabs({
   entityType,
   entityId,
   entityName,
-  events,
   formerNames,
   currentName,
 }: EntityHistoryTabsProps) {
@@ -66,7 +65,12 @@ export function EntityHistoryTabs({
           />
         )}
 
-        <EntityHistoryTimeline events={events} entityName={entityName} />
+        {/* Dynamic Timeline Manager with Edit/Delete */}
+        <EntityTimelineManager
+          entityType={entityType}
+          entityId={entityId}
+          entityName={entityName}
+        />
       </TabsContent>
 
       <TabsContent value="version-history" className="mt-6">

src/components/timeline/EntityTimelineManager.tsx

@@ -1,11 +1,15 @@
 import { useState } from 'react';
-import { Plus } from 'lucide-react';
+import { Plus, Clock, CheckCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
 import { TimelineEventEditorDialog } from './TimelineEventEditorDialog';
+import { TimelineEventCard } from './TimelineEventCard';
 import { EntityHistoryTimeline } from '@/components/history/EntityHistoryTimeline';
 import { useQuery } from '@tanstack/react-query';
 import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/hooks/useAuth';
+import { toast } from 'sonner';
+import { deleteTimelineEvent } from '@/lib/entitySubmissionHelpers';
 import type { EntityType, TimelineEvent } from '@/types/timeline';
 
 interface EntityTimelineManagerProps {
@@ -20,10 +24,13 @@ export function EntityTimelineManager({
   entityName,
 }: EntityTimelineManagerProps) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [editingEvent, setEditingEvent] = useState<TimelineEvent | null>(null);
+  const [showPending, setShowPending] = useState(true);
+  const { user } = useAuth();
 
-  // Fetch timeline events
-  const { data: events, refetch } = useQuery({
-    queryKey: ['timeline-events', entityType, entityId],
+  // Fetch approved timeline events
+  const { data: approvedEvents, refetch: refetchApproved } = useQuery({
+    queryKey: ['timeline-events', 'approved', entityType, entityId],
     queryFn: async () => {
       const { data, error } = await supabase
         .from('entity_timeline_events')
@@ -39,9 +46,35 @@ export function EntityTimelineManager({
     },
   });
 
-  // Convert to HistoryEvent format for display
-  const historyEvents = events?.map((event) => {
-    // Map timeline event types to history event types
+  // Fetch user's pending timeline events
+  const { data: pendingEvents, refetch: refetchPending } = useQuery({
+    queryKey: ['timeline-events', 'pending', entityType, entityId, user?.id],
+    queryFn: async () => {
+      if (!user) return [];
+      
+      const { data, error } = await supabase
+        .from('entity_timeline_events')
+        .select('*')
+        .eq('entity_type', entityType)
+        .eq('entity_id', entityId)
+        .eq('created_by', user.id)
+        .is('approved_by', null)
+        .order('created_at', { ascending: false });
+
+      if (error) throw error;
+      return data as TimelineEvent[];
+    },
+    enabled: !!user,
+  });
+
+  // Refetch both queries
+  const refetchAll = () => {
+    refetchApproved();
+    refetchPending();
+  };
+
+  // Convert approved events to HistoryEvent format for EntityHistoryTimeline
+  const historyEvents = approvedEvents?.map((event) => {
     let mappedType: 'name_change' | 'status_change' | 'ownership_change' | 'relocation' | 'milestone' = 'milestone';
     
     if (event.event_type === 'name_change') mappedType = 'name_change';
@@ -59,34 +92,125 @@ export function EntityTimelineManager({
     };
   }) || [];
 
+  // Handle edit
+  const handleEdit = (event: TimelineEvent) => {
+    setEditingEvent(event);
+    setIsDialogOpen(true);
+  };
+
+  // Handle delete
+  const handleDelete = async (eventId: string) => {
+    if (!user) {
+      toast.error('Authentication required', {
+        description: 'Please sign in to delete timeline events.'
+      });
+      return;
+    }
+
+    try {
+      await deleteTimelineEvent(eventId, user.id);
+      refetchAll();
+      toast.success('Event deleted', {
+        description: 'Your timeline event has been deleted successfully.'
+      });
+    } catch (error: any) {
+      console.error('Delete error:', error);
+      toast.error('Failed to delete event', {
+        description: error.message || 'Please try again.'
+      });
+    }
+  };
+
+  // Handle dialog close
+  const handleDialogChange = (open: boolean) => {
+    setIsDialogOpen(open);
+    if (!open) {
+      setEditingEvent(null);
+    }
+  };
+
+  // Handle success
+  const handleSuccess = () => {
+    refetchAll();
+    setEditingEvent(null);
+    setIsDialogOpen(false);
+  };
+
+  const hasPendingEvents = pendingEvents && pendingEvents.length > 0;
+
   return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle>Timeline & History</CardTitle>
-            <CardDescription>
-              Historical events and milestones for {entityName}
-            </CardDescription>
-          </div>
+    <div className="space-y-6">
+      {/* Header with Add Event button */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {user && hasPendingEvents && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowPending(!showPending)}
+            >
+              <Clock className="mr-2 h-4 w-4" />
+              Pending ({pendingEvents.length})
+            </Button>
+          )}
+        </div>
+        {user && (
           <Button onClick={() => setIsDialogOpen(true)} size="sm">
             <Plus className="mr-2 h-4 w-4" />
             Add Event
           </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <EntityHistoryTimeline events={historyEvents} entityName={entityName} />
-      </CardContent>
+        )}
+      </div>
 
+      {/* Pending Events Section */}
+      {user && hasPendingEvents && showPending && (
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Clock className="w-5 h-5 text-yellow-500" />
+            <h3 className="text-lg font-semibold">Pending Submissions</h3>
+          </div>
+          <div className="space-y-3">
+            {pendingEvents.map((event) => (
+              <TimelineEventCard
+                key={event.id}
+                event={event}
+                onEdit={handleEdit}
+                onDelete={handleDelete}
+                canEdit={true}
+                canDelete={true}
+                isPending={true}
+              />
+            ))}
+          </div>
+          <Separator className="my-6" />
+        </div>
+      )}
+
+      {/* Approved Timeline Events */}
+      <div className="space-y-3">
+        <div className="flex items-center gap-2">
+          <CheckCircle className="w-5 h-5 text-green-500" />
+          <h3 className="text-lg font-semibold">Timeline History</h3>
+        </div>
+        {historyEvents.length > 0 ? (
+          <EntityHistoryTimeline events={historyEvents} entityName={entityName} />
+        ) : (
+          <p className="text-sm text-muted-foreground py-8 text-center">
+            No timeline events yet. Be the first to add one!
+          </p>
+        )}
+      </div>
+
+      {/* Editor Dialog */}
       <TimelineEventEditorDialog
         open={isDialogOpen}
-        onOpenChange={setIsDialogOpen}
+        onOpenChange={handleDialogChange}
         entityType={entityType}
         entityId={entityId}
         entityName={entityName}
-        onSuccess={() => refetch()}
+        existingEvent={editingEvent}
+        onSuccess={handleSuccess}
       />
-    </Card>
+    </div>
   );
-}
+}

src/components/timeline/TimelineEventCard.tsx

@@ -0,0 +1,117 @@
+import { Edit, Trash, Clock, CheckCircle } from 'lucide-react';
+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 type { TimelineEvent } from '@/types/timeline';
+
+interface TimelineEventCardProps {
+  event: TimelineEvent;
+  onEdit?: (event: TimelineEvent) => void;
+  onDelete?: (eventId: string) => void;
+  canEdit: boolean;
+  canDelete: boolean;
+  isPending?: boolean;
+}
+
+const formatEventDate = (date: string, precision: string = 'day') => {
+  const dateObj = new Date(date);
+  
+  switch (precision) {
+    case 'year':
+      return format(dateObj, 'yyyy');
+    case 'month':
+      return format(dateObj, 'MMMM yyyy');
+    case 'day':
+    default:
+      return format(dateObj, 'MMMM d, yyyy');
+  }
+};
+
+const getEventTypeLabel = (type: string): string => {
+  return type.split('_').map(word => 
+    word.charAt(0).toUpperCase() + word.slice(1)
+  ).join(' ');
+};
+
+export function TimelineEventCard({
+  event,
+  onEdit,
+  onDelete,
+  canEdit,
+  canDelete,
+  isPending = false
+}: TimelineEventCardProps) {
+  return (
+    <Card className={isPending ? 'border-yellow-500/50 bg-yellow-500/5' : ''}>
+      <CardContent className="p-4">
+        <div className="flex justify-between items-start gap-4">
+          <div className="flex-1 space-y-2">
+            <div className="flex items-center gap-2 flex-wrap">
+              <Badge variant={isPending ? 'secondary' : 'default'}>
+                {getEventTypeLabel(event.event_type)}
+              </Badge>
+              {isPending && (
+                <Badge variant="outline" className="gap-1">
+                  <Clock className="w-3 h-3" />
+                  Pending Approval
+                </Badge>
+              )}
+              {!isPending && (
+                <Badge variant="outline" className="gap-1">
+                  <CheckCircle className="w-3 h-3" />
+                  Approved
+                </Badge>
+              )}
+            </div>
+            
+            <div>
+              <h4 className="font-semibold text-lg">{event.title}</h4>
+              <p className="text-sm text-muted-foreground">
+                {formatEventDate(event.event_date, event.event_date_precision)}
+              </p>
+            </div>
+            
+            {event.description && (
+              <p className="text-sm">{event.description}</p>
+            )}
+            
+            {(event.from_value || event.to_value) && (
+              <div className="text-sm text-muted-foreground">
+                {event.from_value && <span>From: {event.from_value}</span>}
+                {event.from_value && event.to_value && <span className="mx-2">→</span>}
+                {event.to_value && <span>To: {event.to_value}</span>}
+              </div>
+            )}
+          </div>
+          
+          {(canEdit || canDelete) && (
+            <div className="flex gap-2">
+              {canEdit && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={() => onEdit?.(event)}
+                  title="Edit event"
+                >
+                  <Edit className="w-4 h-4" />
+                </Button>
+              )}
+              {canDelete && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  onClick={() => onDelete?.(event.id)}
+                  title="Delete event"
+                  className="text-destructive hover:text-destructive"
+                >
+                  <Trash className="w-4 h-4" />
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/timeline/TimelineEventEditorDialog.tsx

@@ -10,6 +10,17 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
 import {
   Form,
   FormControl,
@@ -31,10 +42,10 @@ import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
 import { DatePicker } from '@/components/ui/date-picker';
 import { Switch } from '@/components/ui/switch';
-import { Loader2 } from 'lucide-react';
+import { Loader2, Trash } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/hooks/use-toast';
-import { submitTimelineEvent, submitTimelineEventUpdate } from '@/lib/entitySubmissionHelpers';
+import { submitTimelineEvent, submitTimelineEventUpdate, deleteTimelineEvent } from '@/lib/entitySubmissionHelpers';
 import type {
   EntityType,
   TimelineEventFormData,
@@ -97,8 +108,12 @@ export function TimelineEventEditorDialog({
   const { user } = useAuth();
   const { toast } = useToast();
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
   
   const isEditing = !!existingEvent;
+  const dialogTitle = isEditing ? 'Edit Timeline Event' : 'Add Timeline Event';
+  const submitButtonText = isEditing ? 'Update Event' : 'Submit for Review';
 
   const form = useForm<TimelineEventFormData>({
     resolver: zodResolver(timelineEventSchema),
@@ -168,6 +183,32 @@ export function TimelineEventEditorDialog({
     }
   };
 
+  const handleDelete = async () => {
+    if (!existingEvent || !user) return;
+    
+    setIsDeleting(true);
+    try {
+      await deleteTimelineEvent(existingEvent.id, user.id);
+      toast({
+        title: 'Event deleted',
+        description: 'Your timeline event has been deleted successfully.',
+      });
+      onSuccess?.();
+      onOpenChange(false);
+      setShowDeleteConfirm(false);
+      form.reset();
+    } catch (error: any) {
+      console.error('Delete error:', error);
+      toast({
+        title: 'Failed to delete event',
+        description: error.message || 'Please try again.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
   // Event type configurations for conditional field rendering
   const showFromTo = [
     'name_change',
@@ -181,7 +222,7 @@ export function TimelineEventEditorDialog({
       <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>
-            {isEditing ? 'Edit' : 'Add'} Timeline Event
+            {dialogTitle}
           </DialogTitle>
           <DialogDescription>
             Add a historical milestone or event for {entityName}. 
@@ -366,7 +407,40 @@ export function TimelineEventEditorDialog({
               )}
             />
 
-            <DialogFooter>
+            <DialogFooter className="gap-3 sm:gap-0">
+              {isEditing && existingEvent?.approved_by === null && (
+                <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="destructive"
+                      disabled={isSubmitting}
+                      className="sm:mr-auto"
+                    >
+                      <Trash className="w-4 h-4 mr-2" />
+                      Delete Event
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Delete Timeline Event?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This will permanently delete this timeline event. This action cannot be undone.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        onClick={handleDelete}
+                        disabled={isDeleting}
+                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                      >
+                        {isDeleting ? "Deleting..." : "Delete"}
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              )}
               <Button
                 type="button"
                 variant="outline"
@@ -377,7 +451,7 @@ export function TimelineEventEditorDialog({
               </Button>
               <Button type="submit" disabled={isSubmitting}>
                 {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                {isEditing ? 'Submit Update' : 'Submit for Review'}
+                {submitButtonText}
               </Button>
             </DialogFooter>
           </form>

src/components/timeline/index.ts

@@ -7,3 +7,4 @@
 
 export { TimelineEventEditorDialog } from './TimelineEventEditorDialog';
 export { EntityTimelineManager } from './EntityTimelineManager';
+export { TimelineEventCard } from './TimelineEventCard';