feat(gdpr): staff-triggered client-data export bundle (Article 15)
Adds a full GDPR Article 15 (right of access) workflow. Staff trigger an export from the client detail; a BullMQ worker assembles every row keyed to that client (profile, contacts, addresses, notes, tags, yachts, company memberships, interests, reservations, invoices, documents, last 500 audit events) into JSON + a self-contained HTML report, ZIPs them, uploads to MinIO, and optionally emails the client a 7-day signed download link. - New table gdpr_exports tracks lifecycle (pending → building → ready → sent / failed) with a 30-day cleanup target - Bundle builder (gdpr-bundle-builder.ts) — pure read-side, tenant- scoped, with HTML escaping to block injection from rogue field values - Worker hook in export queue dispatches on job name 'gdpr-export' - New audit actions: 'request_gdpr_export', 'send_gdpr_export' - API: POST/GET /api/v1/clients/:id/gdpr-export (admin-gated, exports rate-limit, Article-15 audit on POST); GET /:exportId returns a fresh signed URL - UI: <GdprExportButton> dialog on client detail header — admin-only, shows recent exports, supports email-to-client + override recipient, polls every 5s while open - Validation: refuses email-to-client when no primary email + no override (rather than silently dropping the send) Tests: 778/778 vitest (was 771) — +7 covering builder happy path, HTML escaping, tenant isolation, empty client, request-flow validation, and audit / queue interaction. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
@@ -10,6 +10,7 @@ import { TagBadge } from '@/components/shared/tag-badge';
|
||||
import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
|
||||
import { DetailHeaderStrip } from '@/components/shared/detail-header-strip';
|
||||
import { PortalInviteButton } from '@/components/clients/portal-invite-button';
|
||||
import { GdprExportButton } from '@/components/clients/gdpr-export-button';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
|
||||
interface ClientDetailHeaderProps {
|
||||
@@ -122,6 +123,7 @@ export function ClientDetailHeader({ client }: ClientDetailHeaderProps) {
|
||||
defaultEmail={primaryEmail?.value}
|
||||
/>
|
||||
)}
|
||||
<GdprExportButton clientId={client.id} />
|
||||
<Button
|
||||
variant={isArchived ? 'outline' : 'outline'}
|
||||
size="sm"
|
||||
|
||||
207
src/components/clients/gdpr-export-button.tsx
Normal file
207
src/components/clients/gdpr-export-button.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { format } from 'date-fns';
|
||||
import { Download, FileDown, Loader2, Mail } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { usePermissions } from '@/hooks/use-permissions';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
|
||||
interface ExportRow {
|
||||
id: string;
|
||||
status: 'pending' | 'building' | 'ready' | 'sent' | 'failed';
|
||||
storageKey: string | null;
|
||||
sizeBytes: number | null;
|
||||
createdAt: string;
|
||||
readyAt: string | null;
|
||||
sentAt: string | null;
|
||||
sentTo: string | null;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
interface ListResp {
|
||||
data: ExportRow[];
|
||||
}
|
||||
|
||||
const STATUS_VARIANT: Record<ExportRow['status'], 'secondary' | 'outline' | 'destructive'> = {
|
||||
pending: 'outline',
|
||||
building: 'outline',
|
||||
ready: 'secondary',
|
||||
sent: 'secondary',
|
||||
failed: 'destructive',
|
||||
};
|
||||
|
||||
export function GdprExportButton({ clientId }: { clientId: string }) {
|
||||
const { can, isSuperAdmin } = usePermissions();
|
||||
const qc = useQueryClient();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [emailToClient, setEmailToClient] = useState(false);
|
||||
const [emailOverride, setEmailOverride] = useState('');
|
||||
|
||||
const allowed = isSuperAdmin || can('admin', 'manage_settings');
|
||||
|
||||
const queryKey = ['gdpr-exports', clientId];
|
||||
const { data, isLoading } = useQuery<ListResp>({
|
||||
queryKey,
|
||||
queryFn: () => apiFetch<ListResp>(`/api/v1/clients/${clientId}/gdpr-export`),
|
||||
enabled: open && allowed,
|
||||
refetchInterval: open && allowed ? 5_000 : false,
|
||||
});
|
||||
|
||||
const request = useMutation({
|
||||
mutationFn: () =>
|
||||
apiFetch(`/api/v1/clients/${clientId}/gdpr-export`, {
|
||||
method: 'POST',
|
||||
body: {
|
||||
emailToClient,
|
||||
emailOverride: emailOverride.trim() || null,
|
||||
},
|
||||
}),
|
||||
onSuccess: () => {
|
||||
toast.success('Export queued — refresh in ~30 seconds');
|
||||
qc.invalidateQueries({ queryKey });
|
||||
setEmailOverride('');
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to queue export');
|
||||
},
|
||||
});
|
||||
|
||||
if (!allowed) return null;
|
||||
|
||||
async function downloadById(exportId: string) {
|
||||
try {
|
||||
const res = await apiFetch<{ data: { url: string } }>(
|
||||
`/api/v1/clients/${clientId}/gdpr-export/${exportId}`,
|
||||
);
|
||||
window.open(res.data.url, '_blank', 'noopener');
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to fetch download URL');
|
||||
}
|
||||
}
|
||||
|
||||
const rows = data?.data ?? [];
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="sm">
|
||||
<FileDown className="mr-1.5 h-3.5 w-3.5" />
|
||||
GDPR export
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Personal data export</DialogTitle>
|
||||
<DialogDescription>
|
||||
Bundles every record we hold about this client (profile, contacts, addresses, yachts,
|
||||
companies, interests, reservations, invoices, documents, audit log) into a ZIP with JSON
|
||||
and HTML copies. Used to satisfy GDPR Article 15 access requests.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-2 rounded-lg border border-border bg-muted/30 p-3">
|
||||
<Checkbox
|
||||
id="email-to-client"
|
||||
checked={emailToClient}
|
||||
onCheckedChange={(v) => setEmailToClient(v === true)}
|
||||
/>
|
||||
<div className="space-y-2 flex-1 min-w-0">
|
||||
<Label htmlFor="email-to-client" className="text-sm font-medium">
|
||||
Email the bundle when ready
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Sends a 7-day signed download link to the client's primary email — or to the
|
||||
override below.
|
||||
</p>
|
||||
{emailToClient ? (
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="optional override (defaults to primary contact)"
|
||||
value={emailOverride}
|
||||
onChange={(e) => setEmailOverride(e.target.value)}
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button onClick={() => request.mutate()} disabled={request.isPending}>
|
||||
{request.isPending ? (
|
||||
<Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<FileDown className="mr-1.5 h-3.5 w-3.5" />
|
||||
)}
|
||||
Queue export
|
||||
</Button>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-2">Recent exports</h4>
|
||||
{isLoading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading…</p>
|
||||
) : rows.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No exports yet.</p>
|
||||
) : (
|
||||
<ul className="text-sm divide-y border rounded-lg">
|
||||
{rows.map((r) => (
|
||||
<li key={r.id} className="flex items-center gap-2 py-2 px-3 hover:bg-muted/50">
|
||||
<Badge variant={STATUS_VARIANT[r.status]} className="capitalize text-xs">
|
||||
{r.status}
|
||||
</Badge>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-xs">
|
||||
Requested {format(new Date(r.createdAt), 'MMM d, yyyy HH:mm')}
|
||||
</div>
|
||||
{r.sentTo ? (
|
||||
<div className="text-xs text-muted-foreground inline-flex items-center gap-1">
|
||||
<Mail className="h-3 w-3" />
|
||||
Sent to {r.sentTo}
|
||||
</div>
|
||||
) : null}
|
||||
{r.error ? (
|
||||
<div className="text-xs text-destructive truncate">{r.error}</div>
|
||||
) : null}
|
||||
</div>
|
||||
{(r.status === 'ready' || r.status === 'sent') && r.storageKey ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => downloadById(r.id)}
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="ghost" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user