Refactor: Implement milestone moderation fixes

This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 17:21:21 +00:00
parent 62c8b7f2c3
commit 026f402057
4 changed files with 103 additions and 44 deletions

View File

@@ -6,7 +6,9 @@ import { PhotoAdditionPreview, PhotoEditPreview, PhotoDeletionPreview } from './
import { detectChanges, type ChangesSummary } from '@/lib/submissionChangeDetection';
import type { SubmissionItemData } from '@/types/submissions';
import type { SubmissionItemWithDeps } from '@/lib/submissionItemsService';
import { Building2, Train, MapPin, Building, User, ImageIcon, Trash2, Edit, Plus, AlertTriangle } from 'lucide-react';
import { Building2, Train, MapPin, Building, User, ImageIcon, Trash2, Edit, Plus, AlertTriangle, Calendar } from 'lucide-react';
import { TimelineEventPreview } from './TimelineEventPreview';
import type { TimelineSubmissionData } from '@/types/timeline';
interface SubmissionChangesDisplayProps {
item: SubmissionItemData | SubmissionItemWithDeps | { item_data?: any; original_data?: any; item_type: string; action_type?: 'create' | 'edit' | 'delete' };
@@ -62,6 +64,8 @@ export function SubmissionChangesDisplay({
case 'photo':
case 'photo_edit':
case 'photo_delete': return <ImageIcon className={iconClass} />;
case 'milestone':
case 'timeline_event': return <Calendar className={iconClass} />;
default: return <MapPin className={iconClass} />;
}
};
@@ -111,6 +115,35 @@ export function SubmissionChangesDisplay({
</div>
);
}
// Special compact display for milestone/timeline events
if (item.item_type === 'milestone' || item.item_type === 'timeline_event') {
const milestoneData = item.item_data as TimelineSubmissionData;
const eventType = milestoneData.event_type?.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()) || 'Event';
const eventDate = milestoneData.event_date ? new Date(milestoneData.event_date).toLocaleDateString() : 'No date';
return (
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2 flex-wrap">
{getEntityIcon()}
<span className="font-medium">{milestoneData.title}</span>
{getActionBadge()}
<Badge variant="secondary" className="text-xs">
{eventType}
</Badge>
</div>
<div className="text-xs text-muted-foreground flex items-center gap-2">
<Calendar className="h-3 w-3" />
{eventDate}
{milestoneData.from_value && milestoneData.to_value && (
<span className="ml-1">
{milestoneData.from_value} {milestoneData.to_value}
</span>
)}
</div>
</div>
);
}
return (
<div className="flex flex-col gap-2">
@@ -193,6 +226,23 @@ export function SubmissionChangesDisplay({
</div>
);
}
// Detailed view - special handling for milestone/timeline events
if (item.item_type === 'milestone' || item.item_type === 'timeline_event') {
const milestoneData = item.item_data as TimelineSubmissionData;
return (
<div className="flex flex-col gap-4">
<div className="flex items-center gap-2">
{getEntityIcon()}
<h3 className="text-lg font-semibold">{milestoneData.title}</h3>
{getActionBadge()}
<Badge variant="secondary">Timeline Event</Badge>
</div>
<TimelineEventPreview data={milestoneData} />
</div>
);
}
// Detailed view for other items
return (