Approve timeline integration plan

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>