56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
import { useState } from 'react';
|
|
|
|
import { listSites } from '../api/sites';
|
|
import SiteConsentTab from '../components/SiteConsentTab';
|
|
import { Select } from '../components/ui/select';
|
|
import type { Site } from '../types/api';
|
|
|
|
export default function ConsentRecordsPage() {
|
|
const [selectedSiteId, setSelectedSiteId] = useState<string>('');
|
|
|
|
const { data: sites, isLoading: sitesLoading } = useQuery<Site[]>({
|
|
queryKey: ['sites'],
|
|
queryFn: listSites,
|
|
});
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-6">
|
|
<h1 className="font-heading text-4xl font-semibold tracking-tight text-foreground">
|
|
Consent Records
|
|
</h1>
|
|
<p className="mt-1 text-sm text-text-secondary">
|
|
View and search consent records across your sites.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-6 max-w-xs">
|
|
<label className="mb-1.5 block text-sm font-medium text-text-secondary">
|
|
Site
|
|
</label>
|
|
<Select
|
|
value={selectedSiteId}
|
|
onChange={(e) => setSelectedSiteId(e.target.value)}
|
|
disabled={sitesLoading}
|
|
>
|
|
<option value="">Select a site…</option>
|
|
{sites?.map((site) => (
|
|
<option key={site.id} value={site.id}>
|
|
{site.display_name ?? site.domain}
|
|
</option>
|
|
))}
|
|
</Select>
|
|
</div>
|
|
|
|
{selectedSiteId ? (
|
|
<SiteConsentTab siteId={selectedSiteId} />
|
|
) : (
|
|
<div className="py-12 text-center text-sm text-text-secondary">
|
|
Select a site to view its consent records.
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|