feat: Implement comprehensive change display

This commit is contained in:
gpt-engineer-app[bot]
2025-10-03 15:46:55 +00:00
parent fe33169ed7
commit 86fb99c696
6 changed files with 372 additions and 18 deletions

View File

@@ -3,7 +3,7 @@ import { FieldDiff, ImageDiff, LocationDiff } from './FieldComparison';
import { detectChanges } 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 } from 'lucide-react';
import { Building2, Train, MapPin, Building, User, ImageIcon, Trash2, Edit, Plus, AlertTriangle } from 'lucide-react';
interface SubmissionChangesDisplayProps {
item: SubmissionItemData | SubmissionItemWithDeps;
@@ -11,6 +11,16 @@ interface SubmissionChangesDisplayProps {
showImages?: boolean;
}
// Helper to determine change magnitude
function getChangeMagnitude(totalChanges: number, hasImages: boolean, action: string) {
if (action === 'delete') return { label: 'Deletion', variant: 'destructive' as const, icon: AlertTriangle };
if (action === 'create') return { label: 'New', variant: 'default' as const, icon: Plus };
if (hasImages) return { label: 'Major', variant: 'default' as const, icon: Edit };
if (totalChanges >= 5) return { label: 'Major', variant: 'default' as const, icon: Edit };
if (totalChanges >= 3) return { label: 'Moderate', variant: 'secondary' as const, icon: Edit };
return { label: 'Minor', variant: 'outline' as const, icon: Edit };
}
export function SubmissionChangesDisplay({
item,
view = 'summary',
@@ -45,13 +55,24 @@ export function SubmissionChangesDisplay({
}
};
const magnitude = getChangeMagnitude(
changes.totalChanges,
changes.imageChanges.length > 0,
changes.action
);
if (view === 'summary') {
return (
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 flex-wrap">
{getEntityIcon()}
<span className="font-medium">{changes.entityName}</span>
{getActionBadge()}
{changes.action === 'edit' && (
<Badge variant={magnitude.variant} className="text-xs">
{magnitude.label} Change
</Badge>
)}
</div>
{changes.action === 'edit' && changes.totalChanges > 0 && (
@@ -75,9 +96,9 @@ export function SubmissionChangesDisplay({
</div>
)}
{changes.action === 'create' && (
<div className="text-sm text-muted-foreground">
New {item.item_type}
{changes.action === 'create' && item.item_data?.description && (
<div className="text-sm text-muted-foreground line-clamp-2">
{item.item_data.description}
</div>
)}