property-management-network/app/(dashboard)/settings/integrations/page.tsx

import { redirect } from "next/navigation"
import { getSessionUser } from "@/lib/session"
import { getAccountContext } from "@/lib/account"
import { listProviders, listConnections } from "@/lib/accounting"
import { listEsignAdapters, listEsignConnections } from "@/lib/esign"
import { AccountingIntegrations } from "@/components/dashboard/accounting-integrations"
import { EsignIntegrations } from "@/components/dashboard/esign-integrations"

export const metadata = { title: "Integrations" }
export const dynamic = "force-dynamic"

export default async function IntegrationsPage({
  searchParams,
}: {
  searchParams: Promise<{ connected?: string; error?: string }>
}) {
  const user = await getSessionUser()
  if (!user) redirect("/login")
  const ctx = await getAccountContext(user.id)
  const sp = await searchParams

  const providers = listProviders()
  const connections = ctx.isOwner ? await listConnections(ctx.ownerId) : []

  const esignAdapters = listEsignAdapters()
  const esignConnections = ctx.isOwner ? await listEsignConnections(ctx.ownerId) : []
  const appUrl = (process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000").replace(/\/+$/, "")
  // DocuSign vs Dropbox Sign flash messages are keyed by provider id, so a single
  // connected/error param drives whichever card the user just acted on.
  const esignFlash = { connected: sp.connected, error: sp.error }

  return (
    <div className="max-w-3xl mx-auto space-y-8">
      <div className="space-y-4">
        <div>
          <h2 className="text-lg font-bold text-white">E-signature</h2>
          <p className="text-sm text-white/40 mt-0.5">
            Connect your own DocuSign or Dropbox Sign account to send leases for signature.
          </p>
        </div>
        <EsignIntegrations
          adapters={esignAdapters}
          connections={esignConnections}
          isOwner={ctx.isOwner}
          flash={esignFlash}
          webhookUrl={`${appUrl}/api/esign/dropbox_sign/webhook`}
        />
      </div>

      <div className="space-y-4">
        <div>
          <h2 className="text-lg font-bold text-white">Accounting</h2>
          <p className="text-sm text-white/40 mt-0.5">
            Connect your accounting software to automatically push rent income and expenses into your books.
          </p>
        </div>
        <AccountingIntegrations
          providers={providers}
          connections={connections}
          isOwner={ctx.isOwner}
          flash={{ connected: sp.connected, error: sp.error }}
        />
      </div>
    </div>
  )
}