Initial commit: Port Nimara CRM (Layers 0-4)
Full CRM rebuild with Next.js 15, TypeScript, Tailwind, Drizzle ORM, PostgreSQL, Redis, BullMQ, MinIO, and Socket.io. Includes 461 source files covering clients, berths, interests/pipeline, documents/EOI, expenses/invoices, email, notifications, dashboard, admin, and client portal. CI/CD via Gitea Actions with Docker builds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
250
src/app/(dashboard)/[portSlug]/admin/webhooks/page.tsx
Normal file
250
src/app/(dashboard)/[portSlug]/admin/webhooks/page.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import { apiFetch } from '@/lib/api/client';
|
||||
import { WebhookForm } from '@/components/admin/webhooks/webhook-form';
|
||||
import { WebhookDeliveryLog } from '@/components/admin/webhooks/webhook-delivery-log';
|
||||
import { WebhookSecretDisplay } from '@/components/admin/webhooks/webhook-secret-display';
|
||||
|
||||
interface Webhook {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
events: string[];
|
||||
isActive: boolean;
|
||||
secretMasked: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export default function WebhooksPage() {
|
||||
const [webhooks, setWebhooks] = useState<Webhook[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [formOpen, setFormOpen] = useState(false);
|
||||
const [editTarget, setEditTarget] = useState<Webhook | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState<Webhook | null>(null);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [regenerating, setRegenerating] = useState<string | null>(null);
|
||||
const [newSecret, setNewSecret] = useState<{ webhookId: string; secret: string; masked: string } | null>(null);
|
||||
|
||||
const loadWebhooks = useCallback(async () => {
|
||||
try {
|
||||
const result = await apiFetch<{ data: Webhook[] }>('/api/v1/admin/webhooks');
|
||||
setWebhooks(result.data);
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadWebhooks();
|
||||
}, [loadWebhooks]);
|
||||
|
||||
async function handleDelete() {
|
||||
if (!deleteTarget) return;
|
||||
try {
|
||||
await apiFetch(`/api/v1/admin/webhooks/${deleteTarget.id}`, { method: 'DELETE' });
|
||||
setDeleteTarget(null);
|
||||
void loadWebhooks();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRegenerate(webhookId: string) {
|
||||
setRegenerating(webhookId);
|
||||
try {
|
||||
const result = await apiFetch<{ data: { secret: string; secretMasked: string } }>(
|
||||
`/api/v1/admin/webhooks/${webhookId}/regenerate-secret`,
|
||||
{ method: 'POST' },
|
||||
);
|
||||
setNewSecret({ webhookId, secret: result.data.secret, masked: result.data.secretMasked });
|
||||
void loadWebhooks();
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
setRegenerating(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleToggleActive(webhook: Webhook) {
|
||||
try {
|
||||
await apiFetch(`/api/v1/admin/webhooks/${webhook.id}`, {
|
||||
method: 'PATCH',
|
||||
body: { isActive: !webhook.isActive },
|
||||
});
|
||||
void loadWebhooks();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
function toggleExpand(id: string) {
|
||||
setExpandedId((prev) => (prev === id ? null : id));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Webhooks</h1>
|
||||
<p className="text-muted-foreground">Configure outgoing webhook integrations</p>
|
||||
</div>
|
||||
<Button onClick={() => { setEditTarget(null); setFormOpen(true); }}>
|
||||
Add Webhook
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : webhooks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
|
||||
<p className="text-lg font-medium text-muted-foreground">No webhooks configured</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Add a webhook to receive real-time notifications of CRM events.
|
||||
</p>
|
||||
<Button className="mt-4" onClick={() => { setEditTarget(null); setFormOpen(true); }}>
|
||||
Add Webhook
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{webhooks.map((webhook) => (
|
||||
<div key={webhook.id} className="rounded-lg border bg-card">
|
||||
<div className="flex items-center gap-4 p-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium truncate">{webhook.name}</span>
|
||||
<Badge variant={webhook.isActive ? 'default' : 'secondary'}>
|
||||
{webhook.isActive ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground font-mono truncate mt-0.5">
|
||||
{webhook.url}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{webhook.events.length} event{webhook.events.length !== 1 ? 's' : ''}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleToggleActive(webhook)}
|
||||
>
|
||||
{webhook.isActive ? 'Disable' : 'Enable'}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => { setEditTarget(webhook); setFormOpen(true); }}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive"
|
||||
onClick={() => setDeleteTarget(webhook)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => toggleExpand(webhook.id)}
|
||||
>
|
||||
{expandedId === webhook.id ? 'Collapse' : 'Details'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{expandedId === webhook.id && (
|
||||
<div className="border-t px-4 py-4 space-y-6">
|
||||
{/* Events */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium mb-2">Subscribed Events</h3>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{webhook.events.map((e) => (
|
||||
<Badge key={e} variant="outline" className="font-mono text-xs">
|
||||
{e}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secret */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium mb-2">Signing Secret</h3>
|
||||
{newSecret?.webhookId === webhook.id ? (
|
||||
<WebhookSecretDisplay
|
||||
plaintext={newSecret.secret}
|
||||
masked={newSecret.masked}
|
||||
/>
|
||||
) : (
|
||||
<WebhookSecretDisplay masked={webhook.secretMasked} />
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-2"
|
||||
disabled={regenerating === webhook.id}
|
||||
onClick={() => handleRegenerate(webhook.id)}
|
||||
>
|
||||
{regenerating === webhook.id ? 'Regenerating...' : 'Regenerate Secret'}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Delivery Log */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium mb-2">Delivery Log</h3>
|
||||
<WebhookDeliveryLog webhookId={webhook.id} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<WebhookForm
|
||||
open={formOpen}
|
||||
onOpenChange={setFormOpen}
|
||||
webhook={editTarget}
|
||||
onSuccess={loadWebhooks}
|
||||
/>
|
||||
|
||||
<AlertDialog open={!!deleteTarget} onOpenChange={(open) => { if (!open) setDeleteTarget(null); }}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete Webhook</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Delete "{deleteTarget?.name}"? This will also delete all delivery history. This action
|
||||
cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground">
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user