Consolidate audit-fixes branch: webhooks, integrations, and deploy hardening
Batch commit of the pending working tree on security/audit-fixes-2026-07. Major areas: - Outbound webhooks / Zapier: schema + signed delivery with retries, public v1 API (REST-hook subscribe/unsubscribe), settings UI, cron drain. - Deploy hardening: email via SMTP2GO (Resend fully removed), verified DB TLS (DATABASE_SSL=require + DATABASE_CA), storage fails loud in production when Spaces is unconfigured instead of silently using ephemeral disk. - Integrations & features (concurrent work): accounting (QuickBooks/Xero), e-signature (DocuSign/Dropbox Sign), PayPal, geocoding/maps, onboarding, expanded legal pages. - DB migrations 0006–0009. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Leon Serfaty
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
969d5d4c8a
commit
c9968531e4
@@ -0,0 +1,164 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState, useTransition } from "react"
|
||||
import { toast } from "sonner"
|
||||
import { RefreshCw, Link2, CheckCircle2, AlertTriangle, BookOpen } from "lucide-react"
|
||||
import { formatDate } from "@/lib/utils"
|
||||
import { syncAccountingNow, disconnectAccounting } from "@/app/actions/accounting"
|
||||
|
||||
type Conn = { provider: string; orgName: string | null; status: string; lastSyncAt: string | null; lastError: string | null }
|
||||
type Prov = { id: string; label: string; configured: boolean }
|
||||
|
||||
const ERR_MSG: Record<string, string> = {
|
||||
connect_failed: "Connection failed — please try again.",
|
||||
invalid_state: "The callback was invalid. Please retry the connection.",
|
||||
owner_only: "Only the account owner can manage integrations.",
|
||||
not_configured: "That provider isn't configured on the server yet.",
|
||||
unknown_provider: "Unknown provider.",
|
||||
}
|
||||
|
||||
export function AccountingIntegrations({
|
||||
providers,
|
||||
connections,
|
||||
isOwner,
|
||||
flash,
|
||||
}: {
|
||||
providers: Prov[]
|
||||
connections: Conn[]
|
||||
isOwner: boolean
|
||||
flash: { connected?: string; error?: string }
|
||||
}) {
|
||||
const connByProvider: Record<string, Conn> = Object.fromEntries(connections.map((c) => [c.provider, c]))
|
||||
const [pending, start] = useTransition()
|
||||
const [busy, setBusy] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (flash.connected) toast.success(`Connected to ${flash.connected === "quickbooks" ? "QuickBooks" : "Xero"}`)
|
||||
if (flash.error) toast.error(ERR_MSG[flash.error] ?? "Something went wrong")
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
|
||||
function sync(id: string) {
|
||||
setBusy(id)
|
||||
start(async () => {
|
||||
try {
|
||||
const r = await syncAccountingNow(id)
|
||||
toast.success(`Synced ${r.income} income + ${r.expense} expense entries`)
|
||||
} catch (e) {
|
||||
toast.error((e as Error).message || "Sync failed")
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function remove(id: string) {
|
||||
if (!confirm("Disconnect this integration? Future income/expenses won't sync until you reconnect.")) return
|
||||
setBusy(id)
|
||||
start(async () => {
|
||||
try {
|
||||
await disconnectAccounting(id)
|
||||
toast.success("Disconnected")
|
||||
} catch {
|
||||
toast.error("Couldn't disconnect")
|
||||
} finally {
|
||||
setBusy(null)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (!isOwner) {
|
||||
return (
|
||||
<div className="rounded-xl border border-white/[0.06] bg-[#16161f] p-6 text-sm text-white/50">
|
||||
Only the account owner can manage accounting integrations.
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{providers.map((p) => {
|
||||
const conn = connByProvider[p.id]
|
||||
const isBusy = pending && busy === p.id
|
||||
return (
|
||||
<div key={p.id} className="rounded-2xl border border-white/[0.06] bg-[#16161f] p-5">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/[0.04] text-white/70">
|
||||
<BookOpen className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-white">{p.label}</p>
|
||||
{conn ? (
|
||||
<p className="text-xs text-white/40">
|
||||
{conn.orgName ?? "Connected"} · Last sync {conn.lastSyncAt ? formatDate(conn.lastSyncAt) : "never"}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-white/40">Push rent income & expenses to {p.label}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{conn ? (
|
||||
<span
|
||||
className={`flex shrink-0 items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium ${
|
||||
conn.status === "error"
|
||||
? "border-red-500/20 bg-red-500/10 text-red-400"
|
||||
: "border-emerald-500/20 bg-emerald-500/10 text-emerald-400"
|
||||
}`}
|
||||
>
|
||||
{conn.status === "error" ? <AlertTriangle className="h-3 w-3" /> : <CheckCircle2 className="h-3 w-3" />}
|
||||
{conn.status === "error" ? "Error" : "Connected"}
|
||||
</span>
|
||||
) : p.configured ? null : (
|
||||
<span className="shrink-0 rounded-full border border-amber-500/20 bg-amber-500/10 px-2.5 py-1 text-[11px] font-medium text-amber-400">
|
||||
Not configured
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{conn?.status === "error" && conn.lastError && (
|
||||
<p className="mt-3 rounded-lg border border-red-500/15 bg-red-500/[0.06] px-3 py-2 text-xs text-red-300/90">{conn.lastError}</p>
|
||||
)}
|
||||
|
||||
<div className="mt-4 flex items-center gap-2">
|
||||
{conn ? (
|
||||
<>
|
||||
<button
|
||||
onClick={() => sync(p.id)}
|
||||
disabled={isBusy}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-indigo-500 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`h-3.5 w-3.5 ${isBusy ? "animate-spin" : ""}`} /> Sync now
|
||||
</button>
|
||||
<button
|
||||
onClick={() => remove(p.id)}
|
||||
disabled={isBusy}
|
||||
className="rounded-lg border border-white/10 px-3 py-1.5 text-xs font-medium text-white/60 transition hover:bg-white/[0.06] hover:text-white disabled:opacity-50"
|
||||
>
|
||||
Disconnect
|
||||
</button>
|
||||
</>
|
||||
) : p.configured ? (
|
||||
<a
|
||||
href={`/api/integrations/${p.id}/connect`}
|
||||
className="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-indigo-500"
|
||||
>
|
||||
<Link2 className="h-3.5 w-3.5" /> Connect {p.label}
|
||||
</a>
|
||||
) : (
|
||||
<p className="text-xs text-white/30">
|
||||
Set this provider's OAuth credentials on the server to enable connecting.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<p className="px-1 text-[11px] text-white/30">
|
||||
One-way sync — paid rent is pushed as income and expenses as bills/purchases. We never read or modify existing data in your books.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { toast } from "sonner"
|
||||
import { Check, Copy, KeyRound, Loader2, Plus, Trash2, TriangleAlert } from "lucide-react"
|
||||
import { createApiKey, revokeApiKey } from "@/app/actions/api-keys"
|
||||
|
||||
export type ApiKeyRow = {
|
||||
id: string
|
||||
name: string
|
||||
key_prefix: string
|
||||
created_at: string
|
||||
last_used_at: string | null
|
||||
revoked_at: string | null
|
||||
}
|
||||
|
||||
const inputClass =
|
||||
"w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none ring-indigo-500 transition focus:border-indigo-500/50 focus:ring-1"
|
||||
|
||||
function formatDate(value: string | null): string {
|
||||
if (!value) return "Never"
|
||||
const d = new Date(value)
|
||||
return Number.isNaN(d.getTime())
|
||||
? "—"
|
||||
: d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })
|
||||
}
|
||||
|
||||
export function ApiKeyManager({ initialKeys }: { initialKeys: ApiKeyRow[] }) {
|
||||
const router = useRouter()
|
||||
const [name, setName] = useState("")
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [busyId, setBusyId] = useState<string | null>(null)
|
||||
const [newKey, setNewKey] = useState<{ plaintext: string; prefix: string } | null>(null)
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
async function handleCreate(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
const trimmed = name.trim()
|
||||
if (!trimmed) return
|
||||
setCreating(true)
|
||||
try {
|
||||
const result = await createApiKey(trimmed)
|
||||
setNewKey(result)
|
||||
setName("")
|
||||
setCopied(false)
|
||||
toast.success("API key created")
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Failed to create API key")
|
||||
} finally {
|
||||
setCreating(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCopy() {
|
||||
if (!newKey) return
|
||||
try {
|
||||
await navigator.clipboard.writeText(newKey.plaintext)
|
||||
setCopied(true)
|
||||
toast.success("Copied to clipboard")
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch {
|
||||
toast.error("Copy failed — select and copy the key manually")
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRevoke(key: ApiKeyRow) {
|
||||
setBusyId(key.id)
|
||||
try {
|
||||
await revokeApiKey(key.id)
|
||||
toast.success(`Revoked "${key.name}"`)
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Failed to revoke key")
|
||||
} finally {
|
||||
setBusyId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* One-time plaintext reveal */}
|
||||
{newKey && (
|
||||
<div className="rounded-xl border border-amber-500/25 bg-amber-500/[0.06] p-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="rounded-lg bg-amber-500/10 p-2">
|
||||
<TriangleAlert className="h-5 w-5 text-amber-400" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-semibold text-white">Copy your new API key now</p>
|
||||
<p className="mt-0.5 text-xs text-amber-200/70">
|
||||
This is the only time it will be shown. Store it somewhere safe — you will not see it again.
|
||||
</p>
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<code className="min-w-0 flex-1 overflow-x-auto rounded-lg border border-white/10 bg-[#0a0a12] px-3 py-2.5 font-mono text-xs text-emerald-300">
|
||||
{newKey.plaintext}
|
||||
</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopy}
|
||||
className="inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-white/10 px-3 py-2.5 text-xs font-medium text-white/70 transition hover:bg-white/5"
|
||||
>
|
||||
{copied ? (
|
||||
<Check className="h-3.5 w-3.5 text-emerald-400" />
|
||||
) : (
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
)}
|
||||
{copied ? "Copied" : "Copy"}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setNewKey(null)}
|
||||
className="mt-3 text-xs font-medium text-white/40 transition hover:text-white/70"
|
||||
>
|
||||
I've saved it — dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create form */}
|
||||
<form
|
||||
onSubmit={handleCreate}
|
||||
className="space-y-4 rounded-xl border border-white/[0.06] bg-[#16161f] p-6"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white">Create an API key</h3>
|
||||
<p className="mt-0.5 text-xs text-white/40">
|
||||
Use API keys to authenticate requests to the public REST API.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
maxLength={100}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g. Production integration"
|
||||
className={inputClass + " sm:flex-1"}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={creating || !name.trim()}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-500 disabled:opacity-50 sm:w-auto"
|
||||
>
|
||||
{creating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
|
||||
Create key
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Keys list */}
|
||||
<div className="rounded-xl border border-white/[0.06] bg-[#16161f]">
|
||||
<div className="border-b border-white/[0.06] px-6 py-4">
|
||||
<h3 className="text-sm font-semibold text-white">
|
||||
Your API keys <span className="text-white/30">({initialKeys.length})</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{initialKeys.length === 0 ? (
|
||||
<div className="px-6 py-10 text-center text-sm text-white/40">
|
||||
No API keys yet. Create one above to start using the REST API.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-white/[0.06]">
|
||||
{initialKeys.map((key) => {
|
||||
const busy = busyId === key.id
|
||||
const revoked = !!key.revoked_at
|
||||
return (
|
||||
<li
|
||||
key={key.id}
|
||||
className="flex flex-wrap items-center justify-between gap-3 px-6 py-4"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<KeyRound className="h-4 w-4 shrink-0 text-white/30" />
|
||||
<p className="truncate text-sm font-medium text-white">{key.name}</p>
|
||||
{revoked && (
|
||||
<span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-white/40">
|
||||
Revoked
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 pl-6 text-xs text-white/40">
|
||||
<code className="font-mono text-white/60">{key.key_prefix}</code>
|
||||
<span>Created {formatDate(key.created_at)}</span>
|
||||
<span>Last used {formatDate(key.last_used_at)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!revoked && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRevoke(key)}
|
||||
disabled={busy}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border border-red-500/20 px-3 py-1.5 text-xs font-medium text-red-400 transition hover:bg-red-500/10 disabled:opacity-50"
|
||||
>
|
||||
{busy ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
)}
|
||||
Revoke
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -7,10 +7,10 @@ import { formatDate } from "@/lib/utils"
|
||||
interface Notification {
|
||||
id: string
|
||||
type: string
|
||||
title: string
|
||||
body: string
|
||||
subject: string
|
||||
read: boolean
|
||||
created_at: string
|
||||
sent_at: string
|
||||
metadata?: { body?: string } & Record<string, unknown>
|
||||
}
|
||||
|
||||
const typeIcon: Record<string, React.ElementType> = {
|
||||
@@ -127,9 +127,11 @@ export function NotificationsBell() {
|
||||
<Icon className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className={`text-sm font-medium leading-tight ${n.read ? "text-white/60" : "text-white"}`}>{n.title}</p>
|
||||
<p className="text-xs text-white/35 mt-0.5 line-clamp-2">{n.body}</p>
|
||||
<p className="text-[10px] text-white/20 mt-1">{formatDate(n.created_at)}</p>
|
||||
<p className={`text-sm font-medium leading-tight ${n.read ? "text-white/60" : "text-white"}`}>{n.subject}</p>
|
||||
{typeof n.metadata?.body === "string" && n.metadata.body && (
|
||||
<p className="text-xs text-white/35 mt-0.5 line-clamp-2">{n.metadata.body}</p>
|
||||
)}
|
||||
<p className="text-[10px] text-white/20 mt-1">{formatDate(n.sent_at)}</p>
|
||||
</div>
|
||||
{!n.read && <div className="h-2 w-2 rounded-full bg-indigo-500 shrink-0 mt-1.5" />}
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
LayoutDashboard, Building2, Users, CreditCard,
|
||||
Wrench, FileText, Receipt, Settings, LogOut,
|
||||
X, Menu, ChevronRight, Zap, Sparkles, Bot, BarChart3, Hammer, ClipboardList,
|
||||
PanelLeftClose, PanelLeftOpen, CalendarDays, Activity, Brain, Bell,
|
||||
PanelLeftClose, PanelLeftOpen, CalendarDays, Activity, Brain, Bell, Palette, KeyRound, Plug, Webhook,
|
||||
} from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Logo, LogoMark } from "@/components/shared/logo"
|
||||
@@ -43,16 +43,18 @@ const planConfig: Record<string, { label: string; color: string; bg: string; bor
|
||||
lifetime: { label: "Lifetime", color: "text-amber-300", bg: "bg-amber-500/10", border: "border-amber-500/20" },
|
||||
}
|
||||
|
||||
interface SidebarProps { profile: Profile | null }
|
||||
interface SidebarProps { profile: Profile | null; isAdmin?: boolean }
|
||||
|
||||
function NavContent({
|
||||
profile,
|
||||
collapsed,
|
||||
onClose,
|
||||
isAdmin,
|
||||
}: {
|
||||
profile: Profile | null
|
||||
collapsed?: boolean
|
||||
onClose?: () => void
|
||||
isAdmin?: boolean
|
||||
}) {
|
||||
const pathname = usePathname()
|
||||
|
||||
@@ -150,27 +152,140 @@ function NavContent({
|
||||
{!collapsed && "Settings"}
|
||||
</Link>
|
||||
|
||||
{/* Demo Data is an admin-only testing tool (seed sample data + plan
|
||||
switcher). Hidden from regular users; access is also enforced
|
||||
server-side in the page and actions. */}
|
||||
{isAdmin && (
|
||||
<Link
|
||||
href="/settings/demo"
|
||||
onClick={onClose}
|
||||
title={collapsed ? "Demo Data" : undefined}
|
||||
className={cn(
|
||||
"group relative flex items-center rounded-xl transition-all duration-200",
|
||||
collapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2.5",
|
||||
pathname === "/settings/demo"
|
||||
? "bg-indigo-600/15 text-indigo-300"
|
||||
: "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
|
||||
)}
|
||||
>
|
||||
{pathname === "/settings/demo" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-indigo-500" />
|
||||
)}
|
||||
<Sparkles className={cn(
|
||||
"h-4 w-4 shrink-0 transition-colors",
|
||||
pathname === "/settings/demo" ? "text-indigo-400" : "text-white/30 group-hover:text-white/60"
|
||||
)} />
|
||||
{!collapsed && "Demo Data"}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Link
|
||||
href="/settings/demo"
|
||||
href="/settings/api-keys"
|
||||
onClick={onClose}
|
||||
title={collapsed ? "Demo Data" : undefined}
|
||||
title={collapsed ? "API keys" : undefined}
|
||||
className={cn(
|
||||
"group relative flex items-center rounded-xl transition-all duration-200",
|
||||
collapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2.5",
|
||||
pathname === "/settings/demo"
|
||||
pathname === "/settings/api-keys"
|
||||
? "bg-indigo-600/15 text-indigo-300"
|
||||
: "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
|
||||
)}
|
||||
>
|
||||
{pathname === "/settings/demo" && (
|
||||
{pathname === "/settings/api-keys" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-indigo-500" />
|
||||
)}
|
||||
<Sparkles className={cn(
|
||||
<KeyRound className={cn(
|
||||
"h-4 w-4 shrink-0 transition-colors",
|
||||
pathname === "/settings/demo" ? "text-indigo-400" : "text-white/30 group-hover:text-white/60"
|
||||
pathname === "/settings/api-keys" ? "text-indigo-400" : "text-white/30 group-hover:text-white/60"
|
||||
)} />
|
||||
{!collapsed && "Demo Data"}
|
||||
{!collapsed && "API keys"}
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/settings/integrations"
|
||||
onClick={onClose}
|
||||
title={collapsed ? "Integrations" : undefined}
|
||||
className={cn(
|
||||
"group relative flex items-center rounded-xl transition-all duration-200",
|
||||
collapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2.5",
|
||||
pathname === "/settings/integrations"
|
||||
? "bg-indigo-600/15 text-indigo-300"
|
||||
: "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
|
||||
)}
|
||||
>
|
||||
{pathname === "/settings/integrations" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-indigo-500" />
|
||||
)}
|
||||
<Plug className={cn(
|
||||
"h-4 w-4 shrink-0 transition-colors",
|
||||
pathname === "/settings/integrations" ? "text-indigo-400" : "text-white/30 group-hover:text-white/60"
|
||||
)} />
|
||||
{!collapsed && "Integrations"}
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/settings/webhooks"
|
||||
onClick={onClose}
|
||||
title={collapsed ? "Webhooks" : undefined}
|
||||
className={cn(
|
||||
"group relative flex items-center rounded-xl transition-all duration-200",
|
||||
collapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2.5",
|
||||
pathname === "/settings/webhooks"
|
||||
? "bg-indigo-600/15 text-indigo-300"
|
||||
: "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
|
||||
)}
|
||||
>
|
||||
{pathname === "/settings/webhooks" && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-full bg-indigo-500" />
|
||||
)}
|
||||
<Webhook className={cn(
|
||||
"h-4 w-4 shrink-0 transition-colors",
|
||||
pathname === "/settings/webhooks" ? "text-indigo-400" : "text-white/30 group-hover:text-white/60"
|
||||
)} />
|
||||
{!collapsed && "Webhooks"}
|
||||
</Link>
|
||||
|
||||
{(plan === "landlord" || plan === "lifetime") && (
|
||||
<>
|
||||
<Link
|
||||
href="/settings/branding"
|
||||
onClick={onClose}
|
||||
title={collapsed ? "Branding" : undefined}
|
||||
className={cn(
|
||||
"group relative flex items-center rounded-xl transition-all duration-200",
|
||||
collapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2.5",
|
||||
pathname === "/settings/branding"
|
||||
? "bg-indigo-600/15 text-indigo-300"
|
||||
: "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
|
||||
)}
|
||||
>
|
||||
<Palette className={cn(
|
||||
"h-4 w-4 shrink-0 transition-colors",
|
||||
pathname === "/settings/branding" ? "text-indigo-400" : "text-white/30 group-hover:text-white/60"
|
||||
)} />
|
||||
{!collapsed && "Branding"}
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/settings/team"
|
||||
onClick={onClose}
|
||||
title={collapsed ? "Team" : undefined}
|
||||
className={cn(
|
||||
"group relative flex items-center rounded-xl transition-all duration-200",
|
||||
collapsed ? "justify-center p-2.5" : "gap-3 px-3 py-2.5",
|
||||
pathname === "/settings/team"
|
||||
? "bg-indigo-600/15 text-indigo-300"
|
||||
: "text-white/50 hover:bg-white/[0.05] hover:text-white/90"
|
||||
)}
|
||||
>
|
||||
<Users className={cn(
|
||||
"h-4 w-4 shrink-0 transition-colors",
|
||||
pathname === "/settings/team" ? "text-indigo-400" : "text-white/30 group-hover:text-white/60"
|
||||
)} />
|
||||
{!collapsed && "Team"}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Bottom — plan + user */}
|
||||
@@ -239,7 +354,7 @@ function NavContent({
|
||||
)
|
||||
}
|
||||
|
||||
export function Sidebar({ profile }: SidebarProps) {
|
||||
export function Sidebar({ profile, isAdmin }: SidebarProps) {
|
||||
const [mobileOpen, setMobileOpen] = useState(false)
|
||||
const [collapsed, setCollapsed] = useState(false)
|
||||
|
||||
@@ -264,7 +379,7 @@ export function Sidebar({ profile }: SidebarProps) {
|
||||
collapsed ? "w-16" : "w-60"
|
||||
)}
|
||||
>
|
||||
<NavContent profile={profile} collapsed={collapsed} />
|
||||
<NavContent profile={profile} collapsed={collapsed} isAdmin={isAdmin} />
|
||||
|
||||
{/* Collapse toggle */}
|
||||
<button
|
||||
@@ -298,7 +413,7 @@ export function Sidebar({ profile }: SidebarProps) {
|
||||
onClick={() => setMobileOpen(false)}
|
||||
/>
|
||||
<aside className="absolute left-0 top-0 flex h-full w-72 flex-col bg-[#111118] shadow-2xl">
|
||||
<NavContent profile={profile} onClose={() => setMobileOpen(false)} />
|
||||
<NavContent profile={profile} onClose={() => setMobileOpen(false)} isAdmin={isAdmin} />
|
||||
</aside>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { toast } from "sonner"
|
||||
import { Loader2, Trash2, UserPlus } from "lucide-react"
|
||||
|
||||
type MemberRole = "member" | "viewer"
|
||||
type MemberStatus = "pending" | "active" | "revoked"
|
||||
|
||||
export type TeamMember = {
|
||||
id: string
|
||||
email: string
|
||||
role: MemberRole
|
||||
status: MemberStatus
|
||||
}
|
||||
|
||||
const inputClass =
|
||||
"w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none ring-indigo-500 transition focus:border-indigo-500/50 focus:ring-1"
|
||||
|
||||
export function TeamManager({ initialMembers }: { initialMembers: TeamMember[] }) {
|
||||
const router = useRouter()
|
||||
const [members, setMembers] = useState<TeamMember[]>(initialMembers)
|
||||
const [email, setEmail] = useState("")
|
||||
const [role, setRole] = useState<MemberRole>("member")
|
||||
const [inviting, setInviting] = useState(false)
|
||||
const [busyId, setBusyId] = useState<string | null>(null)
|
||||
|
||||
async function handleInvite(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
if (!email.trim()) return
|
||||
setInviting(true)
|
||||
|
||||
const res = await fetch("/api/team", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email: email.trim(), role }),
|
||||
})
|
||||
|
||||
setInviting(false)
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}))
|
||||
toast.error(typeof data.error === "string" ? data.error : "Failed to send invite")
|
||||
return
|
||||
}
|
||||
|
||||
toast.success(`Invite sent to ${email.trim()}`)
|
||||
setEmail("")
|
||||
setRole("member")
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function handleRoleToggle(member: TeamMember) {
|
||||
const nextRole: MemberRole = member.role === "member" ? "viewer" : "member"
|
||||
setBusyId(member.id)
|
||||
|
||||
const res = await fetch(`/api/team/${member.id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ role: nextRole }),
|
||||
})
|
||||
|
||||
setBusyId(null)
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}))
|
||||
toast.error(typeof data.error === "string" ? data.error : "Failed to update role")
|
||||
return
|
||||
}
|
||||
|
||||
setMembers((prev) =>
|
||||
prev.map((m) => (m.id === member.id ? { ...m, role: nextRole } : m))
|
||||
)
|
||||
toast.success("Role updated")
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
async function handleRevoke(member: TeamMember) {
|
||||
setBusyId(member.id)
|
||||
|
||||
const res = await fetch(`/api/team/${member.id}`, { method: "DELETE" })
|
||||
|
||||
setBusyId(null)
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}))
|
||||
toast.error(typeof data.error === "string" ? data.error : "Failed to revoke access")
|
||||
return
|
||||
}
|
||||
|
||||
setMembers((prev) => prev.filter((m) => m.id !== member.id))
|
||||
toast.success(`Removed ${member.email}`)
|
||||
router.refresh()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Invite form */}
|
||||
<form
|
||||
onSubmit={handleInvite}
|
||||
className="space-y-4 rounded-xl border border-white/[0.06] bg-[#16161f] p-6"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white">Invite a team member</h3>
|
||||
<p className="mt-0.5 text-xs text-white/40">
|
||||
They'll get an email with a link to join your account.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="teammate@example.com"
|
||||
className={inputClass + " sm:flex-1"}
|
||||
/>
|
||||
<select
|
||||
value={role}
|
||||
onChange={(e) => setRole(e.target.value as MemberRole)}
|
||||
className={inputClass + " sm:w-40"}
|
||||
>
|
||||
<option value="member">Member</option>
|
||||
<option value="viewer">Viewer</option>
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={inviting}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-500 disabled:opacity-50 sm:w-auto"
|
||||
>
|
||||
{inviting ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<UserPlus className="h-4 w-4" />
|
||||
)}
|
||||
Invite
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-white/30">
|
||||
Members can view and edit your portfolio. Viewers have read-only access.
|
||||
</p>
|
||||
</form>
|
||||
|
||||
{/* Members list */}
|
||||
<div className="rounded-xl border border-white/[0.06] bg-[#16161f]">
|
||||
<div className="border-b border-white/[0.06] px-6 py-4">
|
||||
<h3 className="text-sm font-semibold text-white">
|
||||
Team members{" "}
|
||||
<span className="text-white/30">({members.length})</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{members.length === 0 ? (
|
||||
<div className="px-6 py-10 text-center text-sm text-white/40">
|
||||
No team members yet. Invite someone above to get started.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-white/[0.06]">
|
||||
{members.map((member) => {
|
||||
const busy = busyId === member.id
|
||||
return (
|
||||
<li
|
||||
key={member.id}
|
||||
className="flex flex-wrap items-center justify-between gap-3 px-6 py-4"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-medium text-white">{member.email}</p>
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
<StatusBadge status={member.status} />
|
||||
<span className="text-xs capitalize text-white/40">{member.role}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRoleToggle(member)}
|
||||
disabled={busy}
|
||||
className="rounded-lg border border-white/10 px-3 py-1.5 text-xs font-medium text-white/70 transition hover:bg-white/5 disabled:opacity-50"
|
||||
>
|
||||
Make {member.role === "member" ? "viewer" : "member"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRevoke(member)}
|
||||
disabled={busy}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border border-red-500/20 px-3 py-1.5 text-xs font-medium text-red-400 transition hover:bg-red-500/10 disabled:opacity-50"
|
||||
>
|
||||
{busy ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
)}
|
||||
Revoke
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: MemberStatus }) {
|
||||
const styles: Record<MemberStatus, string> = {
|
||||
active: "border-emerald-500/20 bg-emerald-500/10 text-emerald-400",
|
||||
pending: "border-amber-500/20 bg-amber-500/10 text-amber-400",
|
||||
revoked: "border-white/10 bg-white/5 text-white/40",
|
||||
}
|
||||
return (
|
||||
<span
|
||||
className={`rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${styles[status]}`}
|
||||
>
|
||||
{status}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,357 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { toast } from "sonner"
|
||||
import {
|
||||
Check,
|
||||
Copy,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Loader2,
|
||||
Plus,
|
||||
Power,
|
||||
RefreshCw,
|
||||
Send,
|
||||
Trash2,
|
||||
Webhook,
|
||||
} from "lucide-react"
|
||||
import { WEBHOOK_EVENTS } from "@/lib/webhooks/events"
|
||||
import {
|
||||
createWebhookEndpoint,
|
||||
deleteWebhookEndpoint,
|
||||
rotateWebhookSecret,
|
||||
sendTestWebhook,
|
||||
updateWebhookEndpoint,
|
||||
type WebhookEndpointDTO,
|
||||
} from "@/app/actions/webhooks"
|
||||
|
||||
const inputClass =
|
||||
"w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none ring-indigo-500 transition focus:border-indigo-500/50 focus:ring-1"
|
||||
|
||||
function formatDate(value: string | null): string {
|
||||
if (!value) return "Never"
|
||||
const d = new Date(value)
|
||||
return Number.isNaN(d.getTime())
|
||||
? "—"
|
||||
: d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })
|
||||
}
|
||||
|
||||
function eventsSummary(events: string[]): string {
|
||||
if (events.length === 0) return "All events"
|
||||
if (events.length === 1) return events[0]
|
||||
return `${events.length} events`
|
||||
}
|
||||
|
||||
function SecretField({ secret }: { secret: string }) {
|
||||
const [shown, setShown] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
async function copy() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(secret)
|
||||
setCopied(true)
|
||||
toast.success("Signing secret copied")
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch {
|
||||
toast.error("Copy failed — reveal and copy manually")
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="min-w-0 flex-1 truncate rounded-lg border border-white/10 bg-[#0a0a12] px-3 py-2 font-mono text-xs text-emerald-300">
|
||||
{shown ? secret : "whsec_" + "•".repeat(24)}
|
||||
</code>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShown((s) => !s)}
|
||||
title={shown ? "Hide" : "Reveal"}
|
||||
className="shrink-0 rounded-lg border border-white/10 p-2 text-white/50 transition hover:bg-white/5 hover:text-white"
|
||||
>
|
||||
{shown ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={copy}
|
||||
title="Copy"
|
||||
className="shrink-0 rounded-lg border border-white/10 p-2 text-white/50 transition hover:bg-white/5 hover:text-white"
|
||||
>
|
||||
{copied ? <Check className="h-3.5 w-3.5 text-emerald-400" /> : <Copy className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function WebhookManager({ initialEndpoints }: { initialEndpoints: WebhookEndpointDTO[] }) {
|
||||
const router = useRouter()
|
||||
const [url, setUrl] = useState("")
|
||||
const [description, setDescription] = useState("")
|
||||
const [allEvents, setAllEvents] = useState(true)
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set())
|
||||
const [creating, setCreating] = useState(false)
|
||||
const [busyId, setBusyId] = useState<string | null>(null)
|
||||
|
||||
function toggleEvent(id: string) {
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) next.delete(id)
|
||||
else next.add(id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
async function handleCreate(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
const trimmed = url.trim()
|
||||
if (!trimmed) return
|
||||
setCreating(true)
|
||||
try {
|
||||
await createWebhookEndpoint({
|
||||
url: trimmed,
|
||||
description: description.trim() || undefined,
|
||||
events: allEvents ? [] : Array.from(selected),
|
||||
})
|
||||
setUrl("")
|
||||
setDescription("")
|
||||
setAllEvents(true)
|
||||
setSelected(new Set())
|
||||
toast.success("Webhook endpoint created")
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Failed to create webhook")
|
||||
} finally {
|
||||
setCreating(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function withBusy(id: string, fn: () => Promise<void>) {
|
||||
setBusyId(id)
|
||||
try {
|
||||
await fn()
|
||||
} finally {
|
||||
setBusyId(null)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTest(ep: WebhookEndpointDTO) {
|
||||
await withBusy(ep.id, async () => {
|
||||
try {
|
||||
const res = await sendTestWebhook(ep.id)
|
||||
if (res.ok) toast.success(`Test delivered (HTTP ${res.responseStatus})`)
|
||||
else toast.error(`Test failed: ${res.error ?? "no response"}`)
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Test failed")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function handleToggle(ep: WebhookEndpointDTO) {
|
||||
await withBusy(ep.id, async () => {
|
||||
try {
|
||||
await updateWebhookEndpoint(ep.id, { status: ep.status === "active" ? "disabled" : "active" })
|
||||
toast.success(ep.status === "active" ? "Webhook disabled" : "Webhook enabled")
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Update failed")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function handleRotate(ep: WebhookEndpointDTO) {
|
||||
if (!confirm("Rotate the signing secret? The current secret stops working immediately.")) return
|
||||
await withBusy(ep.id, async () => {
|
||||
try {
|
||||
await rotateWebhookSecret(ep.id)
|
||||
toast.success("Signing secret rotated")
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Rotate failed")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async function handleDelete(ep: WebhookEndpointDTO) {
|
||||
if (!confirm(`Delete webhook for ${ep.url}? This cannot be undone.`)) return
|
||||
await withBusy(ep.id, async () => {
|
||||
try {
|
||||
await deleteWebhookEndpoint(ep.id)
|
||||
toast.success("Webhook deleted")
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Delete failed")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Create form */}
|
||||
<form
|
||||
onSubmit={handleCreate}
|
||||
className="space-y-4 rounded-xl border border-white/[0.06] bg-[#16161f] p-6"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white">Add an endpoint</h3>
|
||||
<p className="mt-0.5 text-xs text-white/40">
|
||||
We'll POST a signed JSON payload to this URL whenever a subscribed event happens.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="url"
|
||||
required
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder="https://hooks.zapier.com/hooks/catch/…"
|
||||
className={inputClass}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
maxLength={200}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Description (optional) — e.g. Zapier: new tenant → Slack"
|
||||
className={inputClass}
|
||||
/>
|
||||
|
||||
<div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-4">
|
||||
<label className="flex cursor-pointer items-center gap-2.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allEvents}
|
||||
onChange={(e) => setAllEvents(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-white/20 bg-white/5 text-indigo-500 focus:ring-indigo-500"
|
||||
/>
|
||||
<span className="text-sm font-medium text-white">Send all events</span>
|
||||
</label>
|
||||
|
||||
{!allEvents && (
|
||||
<div className="mt-3 grid gap-2 border-t border-white/[0.06] pt-3 sm:grid-cols-2">
|
||||
{WEBHOOK_EVENTS.map((ev) => (
|
||||
<label key={ev.id} className="flex cursor-pointer items-start gap-2.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.has(ev.id)}
|
||||
onChange={() => toggleEvent(ev.id)}
|
||||
className="mt-0.5 h-4 w-4 rounded border-white/20 bg-white/5 text-indigo-500 focus:ring-indigo-500"
|
||||
/>
|
||||
<span>
|
||||
<code className="text-xs font-mono text-indigo-300">{ev.id}</code>
|
||||
<span className="block text-[11px] text-white/40">{ev.label}</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={creating || !url.trim() || (!allEvents && selected.size === 0)}
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-500 disabled:opacity-50"
|
||||
>
|
||||
{creating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
|
||||
Add endpoint
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Endpoints list */}
|
||||
<div className="rounded-xl border border-white/[0.06] bg-[#16161f]">
|
||||
<div className="border-b border-white/[0.06] px-6 py-4">
|
||||
<h3 className="text-sm font-semibold text-white">
|
||||
Endpoints <span className="text-white/30">({initialEndpoints.length})</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{initialEndpoints.length === 0 ? (
|
||||
<div className="px-6 py-10 text-center text-sm text-white/40">
|
||||
No endpoints yet. Add one above to start receiving events.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-white/[0.06]">
|
||||
{initialEndpoints.map((ep) => {
|
||||
const busy = busyId === ep.id
|
||||
const disabled = ep.status === "disabled"
|
||||
return (
|
||||
<li key={ep.id} className="space-y-3 px-6 py-4">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Webhook className="h-4 w-4 shrink-0 text-white/30" />
|
||||
<p className="truncate text-sm font-medium text-white">{ep.url}</p>
|
||||
{disabled && (
|
||||
<span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-white/40">
|
||||
Disabled
|
||||
</span>
|
||||
)}
|
||||
{ep.source === "zapier" && (
|
||||
<span className="rounded-full border border-orange-500/20 bg-orange-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-orange-300">
|
||||
Zapier
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 pl-6 text-xs text-white/40">
|
||||
<span>{eventsSummary(ep.events)}</span>
|
||||
<span>Last success {formatDate(ep.last_success_at)}</span>
|
||||
{ep.failure_count > 0 && (
|
||||
<span className="text-red-400">{ep.failure_count} recent failure{ep.failure_count > 1 ? "s" : ""}</span>
|
||||
)}
|
||||
</div>
|
||||
{ep.description && (
|
||||
<p className="mt-1 pl-6 text-xs text-white/30">{ep.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleTest(ep)}
|
||||
disabled={busy}
|
||||
title="Send test event"
|
||||
className="inline-flex items-center gap-1.5 rounded-lg border border-white/10 px-2.5 py-1.5 text-xs font-medium text-white/70 transition hover:bg-white/5 disabled:opacity-50"
|
||||
>
|
||||
{busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Send className="h-3.5 w-3.5" />}
|
||||
Test
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleToggle(ep)}
|
||||
disabled={busy}
|
||||
title={disabled ? "Enable" : "Disable"}
|
||||
className="rounded-lg border border-white/10 p-2 text-white/50 transition hover:bg-white/5 hover:text-white disabled:opacity-50"
|
||||
>
|
||||
<Power className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRotate(ep)}
|
||||
disabled={busy}
|
||||
title="Rotate signing secret"
|
||||
className="rounded-lg border border-white/10 p-2 text-white/50 transition hover:bg-white/5 hover:text-white disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(ep)}
|
||||
disabled={busy}
|
||||
title="Delete"
|
||||
className="rounded-lg border border-red-500/20 p-2 text-red-400 transition hover:bg-red-500/10 disabled:opacity-50"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SecretField secret={ep.secret} />
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user