tenantpilot/components/search/ResultsTable.tsx
2025-12-05 22:06:22 +01:00

65 lines
1.9 KiB
TypeScript

'use client';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import { Card, CardContent } from '@/components/ui/card';
import type { PolicySettingSearchResult } from '@/lib/actions/policySettings';
import { formatDistanceToNow } from 'date-fns';
interface ResultsTableProps {
results: PolicySettingSearchResult[];
}
export function ResultsTable({ results }: ResultsTableProps) {
if (results.length === 0) {
return null;
}
return (
<Card>
<CardContent className="p-0">
<div className="overflow-x-auto">
<Table>
<TableHeader>
<TableRow>
<TableHead>Setting Name</TableHead>
<TableHead>Setting Value</TableHead>
<TableHead>Policy Name</TableHead>
<TableHead>Policy Type</TableHead>
<TableHead>Last Synced</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{results.map((result) => (
<TableRow key={result.id}>
<TableCell className="font-medium">
{result.settingName}
</TableCell>
<TableCell className="max-w-xs truncate">
{result.settingValue}
</TableCell>
<TableCell>{result.policyName}</TableCell>
<TableCell className="capitalize">
{result.policyType.replace(/([A-Z])/g, ' $1').trim()}
</TableCell>
<TableCell className="text-muted-foreground">
{formatDistanceToNow(new Date(result.lastSyncedAt), {
addSuffix: true,
})}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</CardContent>
</Card>
);
}