Task 5.23: Deduplication / Merge — ContactMergeHistory model, dedup service, API routes (duplicates/merge/merge-history), DedupDialog frontend, i18n, 5 tests
This commit is contained in:
Agent Zero
@@ -0,0 +1,195 @@
|
||||
/**
|
||||
* DedupDialog — UI for finding and merging duplicate contacts (Task 5.23).
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { useFindDuplicates, useMergeContacts, type DuplicatePair } from '@/api/dedup';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { GitMerge, Search, AlertTriangle, Check } from 'lucide-react';
|
||||
|
||||
export function DedupDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
|
||||
const { t } = useTranslation();
|
||||
const { success, error: showError } = useToast();
|
||||
const findDuplicates = useFindDuplicates();
|
||||
const mergeContacts = useMergeContacts();
|
||||
|
||||
const [duplicates, setDuplicates] = useState<DuplicatePair[]>([]);
|
||||
const [selectedPair, setSelectedPair] = useState<number | null>(null);
|
||||
const [fieldOverrides, setFieldOverrides] = useState<Record<string, string>>({});
|
||||
|
||||
const handleSearch = useCallback(async () => {
|
||||
try {
|
||||
const result = await findDuplicates.mutateAsync({ threshold: 0.7, limit: 50 });
|
||||
setDuplicates(result || []);
|
||||
setSelectedPair(null);
|
||||
} catch {
|
||||
showError(t('dedup.searchFailed'));
|
||||
}
|
||||
}, [findDuplicates, showError, t]);
|
||||
|
||||
const handleMerge = useCallback(async () => {
|
||||
if (selectedPair === null) return;
|
||||
const pair = duplicates[selectedPair];
|
||||
if (!pair) return;
|
||||
|
||||
try {
|
||||
const overrides: Record<string, unknown> = {};
|
||||
for (const [field, value] of Object.entries(fieldOverrides)) {
|
||||
if (value === 'source') {
|
||||
overrides[field] = (pair.source_contact as Record<string, unknown>)[field];
|
||||
} else if (value === 'target') {
|
||||
overrides[field] = (pair.target_contact as Record<string, unknown>)[field];
|
||||
}
|
||||
}
|
||||
|
||||
await mergeContacts.mutateAsync({
|
||||
source_contact_id: pair.source_contact.id,
|
||||
target_contact_id: pair.target_contact.id,
|
||||
field_overrides: Object.keys(overrides).length > 0 ? overrides : undefined,
|
||||
});
|
||||
|
||||
success(t('dedup.mergeSuccess'));
|
||||
setDuplicates((prev) => prev.filter((_, i) => i !== selectedPair));
|
||||
setSelectedPair(null);
|
||||
setFieldOverrides({});
|
||||
} catch {
|
||||
showError(t('dedup.mergeFailed'));
|
||||
}
|
||||
}, [duplicates, selectedPair, fieldOverrides, mergeContacts, success, showError, t]);
|
||||
|
||||
const compareFields = [
|
||||
{ key: 'displayname', label: t('dedup.fields.displayName') },
|
||||
{ key: 'email_1', label: t('dedup.fields.email') },
|
||||
{ key: 'phone_1', label: t('dedup.fields.phone') },
|
||||
{ key: 'mailing_city', label: t('dedup.fields.city') },
|
||||
{ key: 'mailing_postalcode', label: t('dedup.fields.postalCode') },
|
||||
];
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} title={t('dedup.title')} size="xl">
|
||||
<div className="space-y-4" data-testid="dedup-dialog">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={<Search className="w-4 h-4" />}
|
||||
onClick={handleSearch}
|
||||
isLoading={findDuplicates.isPending}
|
||||
data-testid="dedup-search-btn"
|
||||
>
|
||||
{t('dedup.findDuplicates')}
|
||||
</Button>
|
||||
{duplicates.length > 0 && (
|
||||
<Badge variant="info">{duplicates.length} {t('dedup.pairsFound')}</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{duplicates.length === 0 && !findDuplicates.isPending && (
|
||||
<p className="text-sm text-secondary-500" data-testid="dedup-empty">
|
||||
{t('dedup.noDuplicates')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{duplicates.map((pair, idx) => (
|
||||
<div
|
||||
key={`${pair.source_contact.id}-${pair.target_contact.id}`}
|
||||
className={`border rounded-lg p-4 cursor-pointer transition-colors ${
|
||||
selectedPair === idx ? 'border-primary-500 bg-primary-50' : 'border-secondary-200'
|
||||
}`}
|
||||
onClick={() => setSelectedPair(idx)}
|
||||
data-testid={`dedup-pair-${idx}`}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="w-4 h-4 text-warning-500" />
|
||||
<span className="font-medium">
|
||||
{t('dedup.similarity')}: {Math.round(pair.similarity_score * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{pair.match_reasons.map((reason) => (
|
||||
<Badge key={reason} variant="warning">{reason}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedPair === idx && (
|
||||
<div className="mt-4 space-y-3">
|
||||
<div className="grid grid-cols-3 gap-2 text-sm font-medium text-secondary-600">
|
||||
<div>{t('dedup.field')}</div>
|
||||
<div className="text-center">{t('dedup.source')}</div>
|
||||
<div className="text-center">{t('dedup.target')}</div>
|
||||
</div>
|
||||
{compareFields.map((field) => {
|
||||
const sourceVal = (pair.source_contact as Record<string, unknown>)[field.key] as string | null;
|
||||
const targetVal = (pair.target_contact as Record<string, unknown>)[field.key] as string | null;
|
||||
return (
|
||||
<div key={field.key} className="grid grid-cols-3 gap-2 text-sm">
|
||||
<div className="text-secondary-700">{field.label}</div>
|
||||
<div className="text-center">
|
||||
<button
|
||||
className={`px-2 py-1 rounded ${
|
||||
fieldOverrides[field.key] === 'source' ? 'bg-primary-100 text-primary-700' : 'hover:bg-secondary-100'
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFieldOverrides((prev) => ({ ...prev, [field.key]: 'source' }));
|
||||
}}
|
||||
data-testid={`dedup-field-${field.key}-source`}
|
||||
>
|
||||
{sourceVal || '—'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<button
|
||||
className={`px-2 py-1 rounded ${
|
||||
fieldOverrides[field.key] === 'target' ? 'bg-primary-100 text-primary-700' : 'hover:bg-secondary-100'
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setFieldOverrides((prev) => ({ ...prev, [field.key]: 'target' }));
|
||||
}}
|
||||
data-testid={`dedup-field-${field.key}-target`}
|
||||
>
|
||||
{targetVal || '—'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
icon={<GitMerge className="w-4 h-4" />}
|
||||
onClick={handleMerge}
|
||||
isLoading={mergeContacts.isPending}
|
||||
data-testid="dedup-merge-btn"
|
||||
>
|
||||
{t('dedup.merge')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedPair !== idx && (
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="font-medium text-secondary-800">{pair.source_contact.displayname}</div>
|
||||
<div className="text-secondary-500">{pair.source_contact.email_1 || '—'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-secondary-800">{pair.target_contact.displayname}</div>
|
||||
<div className="text-secondary-500">{pair.target_contact.email_1 || '—'}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user