Files
GibSend/apps/web/src/app/(dashboard)/admin/ses-configurations.tsx
2025-09-26 14:30:57 -05:00

85 lines
3.0 KiB
TypeScript

'use client';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@usesend/ui/src/table';
import { formatDistanceToNow } from 'date-fns';
import { api } from '~/trpc/react';
import Spinner from '@usesend/ui/src/spinner';
import EditSesConfiguration from './edit-ses-configuration';
import { TextWithCopyButton } from '@usesend/ui/src/text-with-copy';
export default function SesConfigurations() {
const sesSettingsQuery = api.admin.getSesSettings.useQuery();
return (
<div className="">
<div className="rounded-xl border shadow">
<Table className="">
<TableHeader className="">
<TableRow className="bg-muted/30">
<TableHead className="rounded-tl-xl">Region</TableHead>
<TableHead>Prefix Key</TableHead>
<TableHead>Callback URL</TableHead>
<TableHead>Callback status</TableHead>
<TableHead>Created at</TableHead>
<TableHead>Send rate</TableHead>
<TableHead>Transactional quota</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{sesSettingsQuery.isLoading ? (
<TableRow className="h-32">
<TableCell colSpan={6} className="py-4 text-center">
<Spinner
className="mx-auto h-6 w-6"
innerSvgClass="stroke-primary"
/>
</TableCell>
</TableRow>
) : sesSettingsQuery.data?.length === 0 ? (
<TableRow className="h-32">
<TableCell colSpan={6} className="py-4 text-center">
<p>No SES configurations added</p>
</TableCell>
</TableRow>
) : (
sesSettingsQuery.data?.map((sesSetting) => (
<TableRow key={sesSetting.id}>
<TableCell>{sesSetting.region}</TableCell>
<TableCell>{sesSetting.idPrefix}</TableCell>
<TableCell>
<div className="w-[200px] overflow-hidden text-ellipsis">
<TextWithCopyButton
value={sesSetting.callbackUrl}
className="w-[200px] overflow-hidden text-ellipsis"
/>
</div>
</TableCell>
<TableCell>
{sesSetting.callbackSuccess ? 'Success' : 'Failed'}
</TableCell>
<TableCell>
{formatDistanceToNow(sesSetting.createdAt)} ago
</TableCell>
<TableCell>{sesSetting.sesEmailRateLimit}</TableCell>
<TableCell>{sesSetting.transactionalQuota}%</TableCell>
<TableCell>
<EditSesConfiguration setting={sesSetting} />
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</div>
);
}