feat: consent records page, tab persistence, and snippet copy fix (#9)
feat: consent records list endpoint and top-level admin page
This commit is contained in:
James Cottrill
235
apps/admin-ui/src/components/SiteConsentTab.tsx
Normal file
235
apps/admin-ui/src/components/SiteConsentTab.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { listConsentRecords } from '../api/consent';
|
||||
import type { ConsentRecord } from '../types/api';
|
||||
import { Badge } from './ui/badge';
|
||||
import { Button } from './ui/button';
|
||||
import { Card } from './ui/card';
|
||||
import { LoadingState } from './ui/loading-state';
|
||||
|
||||
interface Props {
|
||||
siteId: string;
|
||||
}
|
||||
|
||||
function actionVariant(action: string): 'success' | 'error' | 'warning' | 'neutral' {
|
||||
const map: Record<string, 'success' | 'error' | 'warning'> = {
|
||||
accept_all: 'success',
|
||||
reject_all: 'error',
|
||||
custom: 'warning',
|
||||
withdraw: 'error',
|
||||
};
|
||||
return map[action] ?? 'neutral';
|
||||
}
|
||||
|
||||
function actionLabel(action: string): string {
|
||||
const map: Record<string, string> = {
|
||||
accept_all: 'Accept all',
|
||||
reject_all: 'Reject all',
|
||||
custom: 'Custom',
|
||||
withdraw: 'Withdrawn',
|
||||
};
|
||||
return map[action] ?? action;
|
||||
}
|
||||
|
||||
function RecordDetail({ record }: { record: ConsentRecord }) {
|
||||
return (
|
||||
<tr>
|
||||
<td colSpan={5} className="bg-mist px-4 py-3">
|
||||
<div className="grid gap-3 text-xs sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div>
|
||||
<span className="font-medium text-text-secondary">Visitor ID</span>
|
||||
<p className="mt-0.5 break-all font-mono">{record.visitor_id}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-text-secondary">Page URL</span>
|
||||
<p className="mt-0.5 break-all">{record.page_url ?? '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-text-secondary">Accepted</span>
|
||||
<p className="mt-0.5">{record.categories_accepted.join(', ') || '—'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium text-text-secondary">Rejected</span>
|
||||
<p className="mt-0.5">{record.categories_rejected?.join(', ') || '—'}</p>
|
||||
</div>
|
||||
{record.country_code && (
|
||||
<div>
|
||||
<span className="font-medium text-text-secondary">Location</span>
|
||||
<p className="mt-0.5">{record.region_code ? `${record.country_code}-${record.region_code}` : record.country_code}</p>
|
||||
</div>
|
||||
)}
|
||||
{record.tc_string && (
|
||||
<div>
|
||||
<span className="font-medium text-text-secondary">TC String</span>
|
||||
<p className="mt-0.5 break-all font-mono text-[11px]">{record.tc_string}</p>
|
||||
</div>
|
||||
)}
|
||||
{record.gpc_detected != null && (
|
||||
<div>
|
||||
<span className="font-medium text-text-secondary">GPC</span>
|
||||
<p className="mt-0.5">
|
||||
Detected: {record.gpc_detected ? 'Yes' : 'No'}
|
||||
{record.gpc_honoured != null && ` · Honoured: ${record.gpc_honoured ? 'Yes' : 'No'}`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SiteConsentTab({ siteId }: Props) {
|
||||
const [search, setSearch] = useState('');
|
||||
const [activeSearch, setActiveSearch] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const pageSize = 25;
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['consent', siteId, activeSearch, page],
|
||||
queryFn: () =>
|
||||
listConsentRecords(siteId, {
|
||||
visitor_id: activeSearch || undefined,
|
||||
page,
|
||||
page_size: pageSize,
|
||||
}),
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
setActiveSearch(search.trim());
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
const totalPages = data ? Math.ceil(data.total / pageSize) : 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Search */}
|
||||
<Card className="mb-6 p-5">
|
||||
<h3 className="font-heading mb-3 text-sm font-semibold text-foreground">
|
||||
Search Consent Records
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<input
|
||||
type="text"
|
||||
className="min-w-[280px] flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-text-tertiary focus:border-copper focus:outline-none"
|
||||
placeholder="Search by visitor ID..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
|
||||
/>
|
||||
<Button onClick={handleSearch}>Search</Button>
|
||||
{activeSearch && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
setSearch('');
|
||||
setActiveSearch('');
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{activeSearch && (
|
||||
<p className="mt-2 text-xs text-text-secondary">
|
||||
Showing results for visitor: <code className="rounded bg-mist px-1.5 py-0.5 font-mono">{activeSearch}</code>
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Results */}
|
||||
{isLoading ? (
|
||||
<LoadingState message="Loading consent records..." />
|
||||
) : !data || data.items.length === 0 ? (
|
||||
<div className="py-8 text-center text-sm text-text-secondary">
|
||||
{activeSearch
|
||||
? 'No consent records found for this visitor.'
|
||||
: 'No consent records yet.'}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-3 flex items-center justify-between text-xs text-text-secondary">
|
||||
<span>{data.total} record{data.total !== 1 ? 's' : ''}</span>
|
||||
<span>Page {page} of {totalPages}</span>
|
||||
</div>
|
||||
<div className="overflow-hidden rounded-lg border border-border">
|
||||
<table className="min-w-full divide-y divide-border text-sm">
|
||||
<thead className="bg-background">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-medium text-text-secondary">Visitor</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-text-secondary">Action</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-text-secondary">Categories</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-text-secondary">Date</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-text-secondary" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{data.items.map((record) => (
|
||||
<>
|
||||
<tr
|
||||
key={record.id}
|
||||
className="cursor-pointer hover:bg-mist"
|
||||
onClick={() => setExpandedId(expandedId === record.id ? null : record.id)}
|
||||
>
|
||||
<td className="px-4 py-3 font-mono text-xs">
|
||||
{record.visitor_id.length > 16
|
||||
? record.visitor_id.slice(0, 8) + '…' + record.visitor_id.slice(-8)
|
||||
: record.visitor_id}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<Badge variant={actionVariant(record.action)}>
|
||||
{actionLabel(record.action)}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-text-secondary">
|
||||
{record.categories_accepted.join(', ')}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-text-secondary">
|
||||
{new Date(record.consented_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-text-tertiary">
|
||||
{expandedId === record.id ? '▲' : '▼'}
|
||||
</td>
|
||||
</tr>
|
||||
{expandedId === record.id && (
|
||||
<RecordDetail key={`${record.id}-detail`} record={record} />
|
||||
)}
|
||||
</>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="mt-4 flex items-center justify-center gap-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage((p) => p - 1)}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<span className="text-xs text-text-secondary">
|
||||
{page} / {totalPages}
|
||||
</span>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user