feat(clients): hard-delete with email-code confirmation (single + bulk)
Permanent client deletion is now reachable from: - archived single-client detail page (icon button, gated by new admin.permanently_delete_clients perm) - archived clients list bulk action Both flows are 2-stage: request a 4-digit code (sent to operator's account email, 10min Redis TTL), then enter both code AND a typed confirmation (client name single, "DELETE N CLIENTS" bulk). Cascade strategy preserves audit trails: signed documents, email threads, files and reminders are detached but retained; addresses, contacts, notes, portal user, GDPR records, interests and reservations are deleted via FK cascade or explicit tx delete. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
@@ -84,6 +84,7 @@ const DEFAULT_PERMISSIONS: Record<string, Record<string, boolean>> = {
|
||||
manage_forms: false,
|
||||
manage_tags: false,
|
||||
system_backup: false,
|
||||
permanently_delete_clients: false,
|
||||
},
|
||||
residential_clients: { view: false, create: false, edit: false, delete: false },
|
||||
residential_interests: {
|
||||
|
||||
190
src/components/clients/bulk-hard-delete-dialog.tsx
Normal file
190
src/components/clients/bulk-hard-delete-dialog.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { AlertTriangle, Loader2, Mail } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
clientIds: string[];
|
||||
onDeleted?: (deletedCount: number) => void;
|
||||
}
|
||||
|
||||
type Stage = 'intent' | 'confirm';
|
||||
|
||||
export function BulkHardDeleteDialog({ open, onOpenChange, clientIds, onDeleted }: Props) {
|
||||
const qc = useQueryClient();
|
||||
const [stage, setStage] = useState<Stage>('intent');
|
||||
const [code, setCode] = useState('');
|
||||
const [typedPhrase, setTypedPhrase] = useState('');
|
||||
const [maskedEmail, setMaskedEmail] = useState<string | null>(null);
|
||||
|
||||
const expectedPhrase = `DELETE ${clientIds.length} CLIENT${clientIds.length === 1 ? '' : 'S'}`;
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setStage('intent');
|
||||
setCode('');
|
||||
setTypedPhrase('');
|
||||
setMaskedEmail(null);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const requestCode = useMutation({
|
||||
mutationFn: () =>
|
||||
apiFetch<{ data: { count: number; sentToMaskedEmail: string } }>(
|
||||
'/api/v1/clients/bulk-hard-delete-request',
|
||||
{ method: 'POST', body: { ids: clientIds } },
|
||||
),
|
||||
onSuccess: (res) => {
|
||||
setMaskedEmail(res.data.sentToMaskedEmail);
|
||||
setStage('confirm');
|
||||
toast.success(`Code sent to ${res.data.sentToMaskedEmail}`);
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to send code');
|
||||
},
|
||||
});
|
||||
|
||||
const bulkDelete = useMutation({
|
||||
mutationFn: () =>
|
||||
apiFetch<{ data: { deletedCount: number } }>('/api/v1/clients/bulk-hard-delete', {
|
||||
method: 'POST',
|
||||
body: { ids: clientIds, code, typedPhrase },
|
||||
}),
|
||||
onSuccess: (res) => {
|
||||
const n = res.data.deletedCount;
|
||||
const failed = clientIds.length - n;
|
||||
if (failed === 0) {
|
||||
toast.success(`${n} client${n === 1 ? '' : 's'} permanently deleted.`);
|
||||
} else {
|
||||
toast.warning(`${n} of ${clientIds.length} deleted. ${failed} failed (see audit log).`);
|
||||
}
|
||||
qc.invalidateQueries({ queryKey: ['clients'] });
|
||||
onOpenChange(false);
|
||||
onDeleted?.(n);
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toast.error(err instanceof Error ? err.message : 'Bulk delete failed');
|
||||
},
|
||||
});
|
||||
|
||||
const phraseMatches = typedPhrase.trim().toUpperCase() === expectedPhrase;
|
||||
const codeValid = /^\d{4}$/.test(code.trim());
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 text-destructive">
|
||||
<AlertTriangle className="h-5 w-5" />
|
||||
Permanently delete {clientIds.length} client{clientIds.length === 1 ? '' : 's'}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
All selected clients must already be archived. This cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{stage === 'intent' ? (
|
||||
<div className="space-y-3 text-sm text-muted-foreground">
|
||||
<p>
|
||||
We’ll email a 4-digit confirmation code to your account address. The code is
|
||||
tied to this exact set of clients and expires in 10 minutes.
|
||||
</p>
|
||||
<div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900 text-xs">
|
||||
For each client we delete: client record + addresses, contacts, notes, tags, portal
|
||||
user, GDPR records, all interests, all reservations. Signed documents, email threads,
|
||||
files and reminders are detached but kept.
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-2 rounded-md border border-blue-300 bg-blue-50 p-3 text-xs text-blue-900">
|
||||
<Mail className="h-4 w-4 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
Code sent to <span className="font-mono">{maskedEmail}</span>. Enter both fields
|
||||
below.
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="bhd-code">4-digit code from email</Label>
|
||||
<Input
|
||||
id="bhd-code"
|
||||
inputMode="numeric"
|
||||
maxLength={4}
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
|
||||
placeholder="0000"
|
||||
className="font-mono tracking-[0.4em] text-center text-lg"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="bhd-phrase">
|
||||
Type <span className="font-mono font-semibold">{expectedPhrase}</span> to confirm
|
||||
</Label>
|
||||
<Input
|
||||
id="bhd-phrase"
|
||||
value={typedPhrase}
|
||||
onChange={(e) => setTypedPhrase(e.target.value)}
|
||||
placeholder={expectedPhrase}
|
||||
autoComplete="off"
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
{stage === 'intent' ? (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => requestCode.mutate()}
|
||||
disabled={requestCode.isPending}
|
||||
>
|
||||
{requestCode.isPending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Sending…
|
||||
</>
|
||||
) : (
|
||||
'Send confirmation code'
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => bulkDelete.mutate()}
|
||||
disabled={!codeValid || !phraseMatches || bulkDelete.isPending}
|
||||
>
|
||||
{bulkDelete.isPending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Deleting…
|
||||
</>
|
||||
) : (
|
||||
`Permanently delete ${clientIds.length}`
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { Plus, Archive, Tag as TagIcon, TagsIcon } from 'lucide-react';
|
||||
import { Plus, Archive, Tag as TagIcon, TagsIcon, Trash2 } from 'lucide-react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -15,6 +15,8 @@ import { TableSkeleton } from '@/components/shared/loading-skeleton';
|
||||
import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
|
||||
import { PermissionGate } from '@/components/shared/permission-gate';
|
||||
import { TagPicker } from '@/components/shared/tag-picker';
|
||||
import { BulkHardDeleteDialog } from '@/components/clients/bulk-hard-delete-dialog';
|
||||
import { usePermissions } from '@/hooks/use-permissions';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -43,6 +45,10 @@ export function ClientList() {
|
||||
null,
|
||||
);
|
||||
const [tagChoice, setTagChoice] = useState<string[]>([]);
|
||||
const [bulkDeleteIds, setBulkDeleteIds] = useState<string[]>([]);
|
||||
|
||||
const { can } = usePermissions();
|
||||
const canHardDelete = can('admin', 'permanently_delete_clients');
|
||||
|
||||
const {
|
||||
data,
|
||||
@@ -187,6 +193,19 @@ export function ClientList() {
|
||||
bulkMutation.mutate({ action: 'archive', ids });
|
||||
},
|
||||
},
|
||||
...(canHardDelete
|
||||
? [
|
||||
{
|
||||
label: 'Permanently delete (archived only)',
|
||||
icon: Trash2,
|
||||
variant: 'destructive' as const,
|
||||
onClick: (ids: string[]) => {
|
||||
if (ids.length === 0) return;
|
||||
setBulkDeleteIds(ids);
|
||||
},
|
||||
},
|
||||
]
|
||||
: []),
|
||||
]}
|
||||
cardRender={(row) => (
|
||||
<ClientCard
|
||||
@@ -272,6 +291,13 @@ export function ClientList() {
|
||||
onConfirm={() => archiveClient && archiveMutation.mutate(archiveClient.id)}
|
||||
isLoading={archiveMutation.isPending}
|
||||
/>
|
||||
|
||||
<BulkHardDeleteDialog
|
||||
open={bulkDeleteIds.length > 0}
|
||||
onOpenChange={(open) => !open && setBulkDeleteIds([])}
|
||||
clientIds={bulkDeleteIds}
|
||||
onDeleted={() => setBulkDeleteIds([])}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
195
src/components/clients/hard-delete-dialog.tsx
Normal file
195
src/components/clients/hard-delete-dialog.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { AlertTriangle, Loader2, Mail } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
clientId: string;
|
||||
clientName: string;
|
||||
/** Called after successful delete, e.g. to navigate away. */
|
||||
onDeleted?: () => void;
|
||||
}
|
||||
|
||||
type Stage = 'intent' | 'confirm';
|
||||
|
||||
export function HardDeleteDialog({ open, onOpenChange, clientId, clientName, onDeleted }: Props) {
|
||||
const qc = useQueryClient();
|
||||
const [stage, setStage] = useState<Stage>('intent');
|
||||
const [code, setCode] = useState('');
|
||||
const [typedName, setTypedName] = useState('');
|
||||
const [maskedEmail, setMaskedEmail] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setStage('intent');
|
||||
setCode('');
|
||||
setTypedName('');
|
||||
setMaskedEmail(null);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const requestCode = useMutation({
|
||||
mutationFn: () =>
|
||||
apiFetch<{ data: { sentToMaskedEmail: string } }>(
|
||||
`/api/v1/clients/${clientId}/hard-delete-request`,
|
||||
{ method: 'POST' },
|
||||
),
|
||||
onSuccess: (res) => {
|
||||
setMaskedEmail(res.data.sentToMaskedEmail);
|
||||
setStage('confirm');
|
||||
toast.success(`Code sent to ${res.data.sentToMaskedEmail}`);
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to send code');
|
||||
},
|
||||
});
|
||||
|
||||
const hardDelete = useMutation({
|
||||
mutationFn: () =>
|
||||
apiFetch<{ data: { deletedClientId: string } }>(`/api/v1/clients/${clientId}/hard-delete`, {
|
||||
method: 'POST',
|
||||
body: { code, typedName },
|
||||
}),
|
||||
onSuccess: () => {
|
||||
toast.success(`${clientName} permanently deleted.`);
|
||||
qc.invalidateQueries({ queryKey: ['clients'] });
|
||||
onOpenChange(false);
|
||||
onDeleted?.();
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toast.error(err instanceof Error ? err.message : 'Delete failed');
|
||||
},
|
||||
});
|
||||
|
||||
const nameMatches = typedName.trim().toLowerCase() === clientName.trim().toLowerCase();
|
||||
const codeValid = /^\d{4}$/.test(code.trim());
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 text-destructive">
|
||||
<AlertTriangle className="h-5 w-5" />
|
||||
Permanently delete {clientName}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
This permanently removes the client record and detaches all related history (signed
|
||||
documents, emails, files). It cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{stage === 'intent' ? (
|
||||
<div className="space-y-3 text-sm">
|
||||
<p className="text-muted-foreground">
|
||||
Permanent deletion is reserved for archived clients only. We’ll email a 4-digit
|
||||
confirmation code to your account address. The code expires in 10 minutes.
|
||||
</p>
|
||||
<div className="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900">
|
||||
<p className="font-medium flex items-center gap-2">
|
||||
<AlertTriangle className="h-4 w-4" /> What gets deleted
|
||||
</p>
|
||||
<ul className="mt-1.5 list-disc pl-5 text-xs space-y-0.5">
|
||||
<li>Client record + addresses, contacts, notes, tags</li>
|
||||
<li>Portal user account + GDPR consent records</li>
|
||||
<li>All pipeline interests + reservations for this client</li>
|
||||
</ul>
|
||||
<p className="font-medium mt-2 flex items-center gap-2">What is preserved</p>
|
||||
<ul className="mt-1.5 list-disc pl-5 text-xs space-y-0.5">
|
||||
<li>Signed documents (detached from client, kept for legal history)</li>
|
||||
<li>Email threads, files, reminders (detached)</li>
|
||||
<li>Audit log entries</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-2 rounded-md border border-blue-300 bg-blue-50 p-3 text-xs text-blue-900">
|
||||
<Mail className="h-4 w-4 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
Code sent to <span className="font-mono">{maskedEmail}</span>. It expires in 10
|
||||
minutes. Check your inbox and enter both fields below.
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="hd-code">4-digit code from email</Label>
|
||||
<Input
|
||||
id="hd-code"
|
||||
inputMode="numeric"
|
||||
maxLength={4}
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
|
||||
placeholder="0000"
|
||||
className="font-mono tracking-[0.4em] text-center text-lg"
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="hd-name">
|
||||
Type <span className="font-semibold">{clientName}</span> to confirm
|
||||
</Label>
|
||||
<Input
|
||||
id="hd-name"
|
||||
value={typedName}
|
||||
onChange={(e) => setTypedName(e.target.value)}
|
||||
placeholder={clientName}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
{stage === 'intent' ? (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => requestCode.mutate()}
|
||||
disabled={requestCode.isPending}
|
||||
>
|
||||
{requestCode.isPending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Sending…
|
||||
</>
|
||||
) : (
|
||||
'Send confirmation code'
|
||||
)}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => hardDelete.mutate()}
|
||||
disabled={!codeValid || !nameMatches || hardDelete.isPending}
|
||||
>
|
||||
{hardDelete.isPending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-1.5" /> Deleting…
|
||||
</>
|
||||
) : (
|
||||
'Permanently delete'
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user