tenantpilot/app/(app)/settings-overview/page.tsx
Ahmed Darrazi 2592b89bc6
All checks were successful
Trigger Cloudarix Deploy / call-webhook (push) Successful in 1s
feat: Add settings overview page with getAllPolicySettings
- Add new /settings-overview route displaying all policy settings in table
- Implement getAllPolicySettings() server action with tenant isolation
- Add 'All Settings' navigation item with Database icon
- Use date-fns for relative time display (lastSyncedAt)
- Server-side rendering for optimal performance
2025-12-07 01:50:34 +01:00

101 lines
3.7 KiB
TypeScript

import { getAllPolicySettings } from '@/lib/actions/policySettings';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
import { formatDistanceToNow } from 'date-fns';
import { de } from 'date-fns/locale';
export default async function SettingsOverviewPage() {
const result = await getAllPolicySettings();
if (!result.success) {
return (
<main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
<div className="mx-auto w-full max-w-6xl">
<Card>
<CardHeader>
<CardTitle>Policy Settings Overview</CardTitle>
<CardDescription>
{result.error || 'Failed to load settings'}
</CardDescription>
</CardHeader>
</Card>
</div>
</main>
);
}
const settings = result.data || [];
return (
<main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
<div className="mx-auto w-full max-w-6xl">
<Card>
<CardHeader>
<CardTitle>Policy Settings Overview</CardTitle>
<CardDescription>
{settings.length} policy setting{settings.length !== 1 ? 's' : ''} found
</CardDescription>
</CardHeader>
<CardContent>
{settings.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<p className="text-muted-foreground">No policy settings found</p>
<p className="mt-2 text-sm text-muted-foreground">
Try syncing your policies first
</p>
</div>
) : (
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Policy Name</TableHead>
<TableHead>Policy Type</TableHead>
<TableHead>Setting Name</TableHead>
<TableHead>Setting Value</TableHead>
<TableHead className="text-right">Last Synced</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{settings.map((setting) => (
<TableRow key={setting.id}>
<TableCell className="font-medium">
{setting.policyName}
</TableCell>
<TableCell>
<span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
{setting.policyType}
</span>
</TableCell>
<TableCell className="font-mono text-xs">
{setting.settingName}
</TableCell>
<TableCell className="max-w-md truncate">
{setting.settingValue}
</TableCell>
<TableCell className="text-right text-sm text-muted-foreground">
{formatDistanceToNow(new Date(setting.lastSyncedAt), {
addSuffix: true,
locale: de,
})}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
</CardContent>
</Card>
</div>
</main>
);
}