fix: merge conflicts

apps/remix/app/components/general/billing-plans.tsx

@@ -42,7 +42,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { ZCreateOrganisationFormSchema } from '../dialogs/organisation-create-dialog';
 
-const MotionCard = motion(Card);
+const MotionCard = motion.create(Card);
 
 export type BillingPlansProps = {
   plans: InternalClaimPlans;
@@ -101,7 +101,7 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
               <CardContent className="flex h-full flex-col p-6">
                 <CardTitle>{price.product.name}</CardTitle>
 
-                <div className="text-muted-foreground mt-2 text-lg font-medium">
+                <div className="mt-2 text-lg font-medium text-muted-foreground">
                   {price.friendlyPrice + ' '}
                   <span className="text-xs">
                     {interval === 'monthlyPrice' ? (
@@ -112,12 +112,12 @@ export const BillingPlans = ({ plans }: BillingPlansProps) => {
                   </span>
                 </div>
 
-                <div className="text-muted-foreground mt-1.5 text-sm">
+                <div className="mt-1.5 text-sm text-muted-foreground">
                   {price.product.description}
                 </div>
 
                 {price.product.features && price.product.features.length > 0 && (
-                  <div className="text-muted-foreground mt-4">
+                  <div className="mt-4 text-muted-foreground">
                     <div className="text-sm font-medium">Includes:</div>
 
                     <ul className="mt-1 divide-y text-sm">
@@ -261,7 +261,7 @@ const BillingDialog = ({
                     <Building2Icon className="h-4 w-4" />
                     <Trans>Update current organisation</Trans>
                   </Label>
-                  <p className="text-muted-foreground text-sm">
+                  <p className="text-sm text-muted-foreground">
                     <Trans>
                       Upgrade <strong>{organisation.name}</strong> to {planName}
                     </Trans>
@@ -276,7 +276,7 @@ const BillingDialog = ({
                     <PlusIcon className="h-4 w-4" />
                     <Trans>Create separate organisation</Trans>
                   </Label>
-                  <p className="text-muted-foreground text-sm">
+                  <p className="text-sm text-muted-foreground">
                     <Trans>
                       Create a new organisation with {planName} plan. Keep your current organisation
                       on it's current plan

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -13,7 +13,7 @@ import { trpc } from '@documenso/trpc/react';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -151,7 +151,7 @@ export const DirectTemplatePageView = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <PDFViewerLazy
             key={template.id}
             envelopeItem={template.envelopeItems[0]}
             token={directTemplateRecipient.token}

apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx

@@ -30,7 +30,7 @@ import { DocumentReadOnlyFields } from '@documenso/ui/components/document/docume
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 
 import { DocumentSigningAttachmentsPopover } from '~/components/general/document-signing/document-signing-attachments-popover';
 import { DocumentSigningAutoSign } from '~/components/general/document-signing/document-signing-auto-sign';
@@ -187,7 +187,7 @@ export const DocumentSigningPageViewV1 = ({
 
         <div className="mt-1.5 flex flex-wrap items-center justify-between gap-y-2 sm:mt-2.5 sm:gap-y-0">
           <div className="max-w-[50ch]">
-            <span className="text-muted-foreground truncate" title={senderName}>
+            <span className="truncate text-muted-foreground" title={senderName}>
               {senderName} {senderEmail}
             </span>{' '}
             <span className="text-muted-foreground">
@@ -245,7 +245,7 @@ export const DocumentSigningPageViewV1 = ({
           <div className="flex-1">
             <Card className="rounded-xl before:rounded-xl" gradient>
               <CardContent className="p-2">
-                <PDFViewer
+                <PDFViewerLazy
                   key={document.envelopeItems[0].id}
                   envelopeItem={document.envelopeItems[0]}
                   token={recipient.token}
@@ -260,9 +260,9 @@ export const DocumentSigningPageViewV1 = ({
             className="group/document-widget fixed bottom-6 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-4 md:sticky md:bottom-[unset] md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
-            <div className="border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">
+            <div className="flex w-full flex-col rounded-xl border border-border bg-widget px-4 py-4 md:py-6">
               <div className="flex items-center justify-between gap-x-2">
-                <h3 className="text-foreground text-xl font-semibold md:text-2xl">
+                <h3 className="text-xl font-semibold text-foreground md:text-2xl">
                   {match(recipient.role)
                     .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
                     .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
@@ -305,25 +305,25 @@ export const DocumentSigningPageViewV1 = ({
                   .with({ isExpanded: true }, () => (
                     <Button
                       variant="outline"
-                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      className="h-8 w-8 bg-background p-0 md:hidden dark:bg-foreground"
                       onClick={() => setIsExpanded(false)}
                     >
-                      <LucideChevronDown className="text-muted-foreground dark:text-background h-5 w-5" />
+                      <LucideChevronDown className="h-5 w-5 text-muted-foreground dark:text-background" />
                     </Button>
                   ))
                   .otherwise(() => (
                     <Button
                       variant="outline"
-                      className="bg-background dark:bg-foreground h-8 w-8 p-0 md:hidden"
+                      className="h-8 w-8 bg-background p-0 md:hidden dark:bg-foreground"
                       onClick={() => setIsExpanded(true)}
                     >
-                      <LucideChevronUp className="text-muted-foreground dark:text-background h-5 w-5" />
+                      <LucideChevronUp className="h-5 w-5 text-muted-foreground dark:text-background" />
                     </Button>
                   ))}
               </div>
 
               <div className="hidden group-data-[expanded]/document-widget:block md:block">
-                <p className="text-muted-foreground mt-2 text-sm">
+                <p className="mt-2 text-sm text-muted-foreground">
                   {match(recipient.role)
                     .with(RecipientRole.VIEWER, () => (
                       <Trans>Please mark as viewed to complete.</Trans>
@@ -340,7 +340,7 @@ export const DocumentSigningPageViewV1 = ({
                     .otherwise(() => null)}
                 </p>
 
-                <hr className="border-border mb-8 mt-4" />
+                <hr className="mb-8 mt-4 border-border" />
               </div>
 
               <div className="-mx-2 hidden px-2 group-data-[expanded]/document-widget:block md:block">

apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx

@@ -34,7 +34,7 @@ import { DocumentSigningRejectDialog } from './document-signing-reject-dialog';
 import { useRequiredEnvelopeSigningContext } from './envelope-signing-provider';
 
 const EnvelopeSignerPageRenderer = lazy(
-  async () => import('../envelope-signing/envelope-signer-page-renderer'),
+  async () => import('~/components/general/envelope-signing/envelope-signer-page-renderer'),
 );
 
 export const DocumentSigningPageViewV2 = () => {
@@ -71,7 +71,7 @@ export const DocumentSigningPageViewV2 = () => {
   }, [recipientFieldsRemaining, selectedAssistantRecipientFields, currentEnvelopeItem]);
 
   return (
-    <div className="dark:bg-background min-h-screen w-screen bg-gray-50">
+    <div className="min-h-screen w-screen bg-gray-50 dark:bg-background">
       <SignFieldEmailDialog.Root />
       <SignFieldTextDialog.Root />
       <SignFieldNumberDialog.Root />
@@ -86,9 +86,9 @@ export const DocumentSigningPageViewV2 = () => {
       {/* Main Content Area */}
       <div className="flex h-[calc(100vh-4rem)] w-screen">
         {/* Left Section - Step Navigation */}
-        <div className="embed--DocumentWidgetContainer bg-background border-border hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r py-4 lg:flex">
+        <div className="embed--DocumentWidgetContainer hidden w-80 flex-shrink-0 flex-col overflow-y-auto border-r border-border bg-background py-4 lg:flex">
           <div className="px-4">
-            <h3 className="text-foreground flex items-end justify-between text-sm font-semibold">
+            <h3 className="flex items-end justify-between text-sm font-semibold text-foreground">
               {match(recipient.role)
                 .with(RecipientRole.VIEWER, () => <Trans>View Document</Trans>)
                 .with(RecipientRole.SIGNER, () => <Trans>Sign Document</Trans>)
@@ -96,7 +96,7 @@ export const DocumentSigningPageViewV2 = () => {
                 .with(RecipientRole.ASSISTANT, () => <Trans>Assist Document</Trans>)
                 .otherwise(() => null)}
 
-              <span className="text-muted-foreground bg-muted/50 ml-2 rounded border px-2 py-0.5 text-xs">
+              <span className="ml-2 rounded border bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground">
                 <Plural
                   value={recipientFieldsRemaining.length}
                   one="1 Field Remaining"
@@ -105,11 +105,11 @@ export const DocumentSigningPageViewV2 = () => {
               </span>
             </h3>
 
-            <div className="bg-muted relative my-4 h-[4px] rounded-md">
+            <div className="relative my-4 h-[4px] rounded-md bg-muted">
               <motion.div
                 layout="size"
                 layoutId="document-flow-container-step"
-                className="bg-documenso absolute inset-y-0 left-0"
+                className="absolute inset-y-0 left-0 bg-documenso"
                 style={{
                   width: `${100 - (100 / requiredRecipientFields.length) * (recipientFieldsRemaining.length ?? 0)}%`,
                 }}
@@ -126,7 +126,7 @@ export const DocumentSigningPageViewV2 = () => {
           {/* Quick Actions. */}
           {!isDirectTemplate && (
             <div className="embed--Actions space-y-3 px-4">
-              <h4 className="text-foreground text-sm font-semibold">
+              <h4 className="text-sm font-semibold text-foreground">
                 <Trans>Actions</Trans>
               </h4>
 
@@ -173,7 +173,7 @@ export const DocumentSigningPageViewV2 = () => {
                     <Button
                       variant="ghost"
                       size="sm"
-                      className="hover:text-destructive w-full justify-start"
+                      className="w-full justify-start hover:text-destructive"
                     >
                       <BanIcon className="mr-2 h-4 w-4" />
                       <Trans>Reject Document</Trans>
@@ -235,7 +235,7 @@ export const DocumentSigningPageViewV2 = () => {
                 />
               ) : (
                 <div className="flex flex-col items-center justify-center py-32">
-                  <p className="text-foreground text-sm">
+                  <p className="text-sm text-foreground">
                     <Trans>No documents found</Trans>
                   </p>
                 </div>
@@ -250,7 +250,7 @@ export const DocumentSigningPageViewV2 = () => {
                 <a
                   href="https://documenso.com"
                   target="_blank"
-                  className="bg-primary text-primary-foreground fixed bottom-0 right-0 z-40 hidden cursor-pointer rounded-tl px-2 py-1 text-xs font-medium opacity-60 hover:opacity-100 lg:block"
+                  className="fixed bottom-0 right-0 z-40 hidden cursor-pointer rounded-tl bg-primary px-2 py-1 text-xs font-medium text-primary-foreground opacity-60 hover:opacity-100 lg:block"
                 >
                   <span>Powered by</span>
                   <BrandingLogo className="ml-2 inline-block h-[14px]" />

apps/remix/app/components/general/document/document-certificate-qr-view.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { lazy, useEffect, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { type DocumentData, DocumentStatus, type EnvelopeItem, EnvelopeType } from '@prisma/client';
@@ -21,12 +21,15 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 
 import { EnvelopeDownloadDialog } from '~/components/dialogs/envelope-download-dialog';
 
 import { EnvelopeRendererFileSelector } from '../envelope-editor/envelope-file-selector';
-import EnvelopeGenericPageRenderer from '../envelope-editor/envelope-generic-page-renderer';
+
+const EnvelopeGenericPageRenderer = lazy(
+  async () => import('~/components/general/envelope-editor/envelope-generic-page-renderer'),
+);
 
 export type DocumentCertificateQRViewProps = {
   documentId: number;
@@ -120,7 +123,7 @@ export const DocumentCertificateQRView = ({
           <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
             <div className="space-y-1">
               <h1 className="text-xl font-medium">{title}</h1>
-              <div className="text-muted-foreground flex flex-col gap-0.5 text-sm">
+              <div className="flex flex-col gap-0.5 text-sm text-muted-foreground">
                 <p>
                   <Trans>{recipientCount} recipients</Trans>
                 </p>
@@ -146,7 +149,7 @@ export const DocumentCertificateQRView = ({
           </div>
 
           <div className="mt-12 w-full">
-            <PDFViewer
+            <PDFViewerLazy
               key={envelopeItems[0].id}
               envelopeItem={envelopeItems[0]}
               token={token}
@@ -179,7 +182,7 @@ const DocumentCertificateQrV2 = ({
       <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
         <div className="space-y-1">
           <h1 className="text-xl font-medium">{title}</h1>
-          <div className="text-muted-foreground flex flex-col gap-0.5 text-sm">
+          <div className="flex flex-col gap-0.5 text-sm text-muted-foreground">
             <p>
               <Trans>{recipientCount} recipients</Trans>
             </p>

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -27,7 +27,7 @@ import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/ad
 import type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
@@ -440,7 +440,7 @@ export const DocumentEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <PDFViewerLazy
             key={document.envelopeItems[0].id}
             envelopeItem={document.envelopeItems[0]}
             token={undefined}

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx

@@ -50,7 +50,7 @@ import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 import { EnvelopeRecipientSelector } from './envelope-recipient-selector';
 
 const EnvelopeEditorFieldsPageRenderer = lazy(
-  async () => import('./envelope-editor-fields-page-renderer'),
+  async () => import('~/components/general/envelope-editor/envelope-editor-fields-page-renderer'),
 );
 
 const detectFormFieldsInDocument = async (params: {
@@ -286,7 +286,7 @@ export const EnvelopeEditorFieldsPage = () => {
           {envelope.recipients.length === 0 && (
             <Alert
               variant="neutral"
-              className="border-border bg-background mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border"
+              className="mb-4 flex max-w-[800px] flex-row items-center justify-between space-y-0 rounded-sm border border-border bg-background"
             >
               <div className="flex flex-col gap-1">
                 <AlertTitle>
@@ -312,11 +312,11 @@ export const EnvelopeEditorFieldsPage = () => {
             />
           ) : (
             <div className="flex flex-col items-center justify-center py-32">
-              <FileTextIcon className="text-muted-foreground h-10 w-10" />
-              <p className="text-foreground mt-1 text-sm">
+              <FileTextIcon className="h-10 w-10 text-muted-foreground" />
+              <p className="mt-1 text-sm text-foreground">
                 <Trans>No documents found</Trans>
               </p>
-              <p className="text-muted-foreground mt-1 text-sm">
+              <p className="mt-1 text-sm text-muted-foreground">
                 <Trans>Please upload a document to continue</Trans>
               </p>
             </div>
@@ -326,10 +326,10 @@ export const EnvelopeEditorFieldsPage = () => {
 
       {/* Right Section - Form Fields Panel */}
       {currentEnvelopeItem && envelope.recipients.length > 0 && (
-        <div className="bg-background border-border sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l py-4">
+        <div className="sticky top-0 h-full w-80 flex-shrink-0 overflow-y-auto border-l border-border bg-background py-4">
           {/* Recipient selector section. */}
           <section className="px-4">
-            <h3 className="text-foreground mb-2 text-sm font-semibold">
+            <h3 className="mb-2 text-sm font-semibold text-foreground">
               <Trans>Selected Recipient</Trans>
             </h3>
 
@@ -361,7 +361,7 @@ export const EnvelopeEditorFieldsPage = () => {
 
           {/* Add fields section. */}
           <section className="px-4">
-            <h3 className="text-foreground mb-2 text-sm font-semibold">
+            <h3 className="mb-2 text-sm font-semibold text-foreground">
               <Trans>Add Fields</Trans>
             </h3>
 
@@ -503,25 +503,25 @@ export const EnvelopeEditorFieldsPage = () => {
                 {searchParams.get('devmode') && (
                   <>
                     <div className="px-4">
-                      <h3 className="text-foreground mb-3 text-sm font-semibold">
+                      <h3 className="mb-3 text-sm font-semibold text-foreground">
                         <Trans>Developer Mode</Trans>
                       </h3>
 
-                      <div className="bg-muted/50 border-border text-foreground space-y-2 rounded-md border p-3 text-sm">
+                      <div className="space-y-2 rounded-md border border-border bg-muted/50 p-3 text-sm text-foreground">
                         <p>
-                          <span className="text-muted-foreground min-w-12">Pos X:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">Pos X:&nbsp;</span>
                           {selectedField.positionX.toFixed(2)}
                         </p>
                         <p>
-                          <span className="text-muted-foreground min-w-12">Pos Y:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">Pos Y:&nbsp;</span>
                           {selectedField.positionY.toFixed(2)}
                         </p>
                         <p>
-                          <span className="text-muted-foreground min-w-12">Width:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">Width:&nbsp;</span>
                           {selectedField.width.toFixed(2)}
                         </p>
                         <p>
-                          <span className="text-muted-foreground min-w-12">Height:&nbsp;</span>
+                          <span className="min-w-12 text-muted-foreground">Height:&nbsp;</span>
                           {selectedField.height.toFixed(2)}
                         </p>
                       </div>
@@ -531,7 +531,7 @@ export const EnvelopeEditorFieldsPage = () => {
                   </>
                 )}
 
-                <div className="[&_label]:text-foreground/70 px-4 [&_label]:text-xs">
+                <div className="px-4 [&_label]:text-xs [&_label]:text-foreground/70">
                   <h3 className="text-sm font-semibold">
                     {t(FieldSettingsTypeTranslations[selectedField.type])}
                   </h3>

apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx

@@ -23,7 +23,9 @@ import { Separator } from '@documenso/ui/primitives/separator';
 
 import { EnvelopeRendererFileSelector } from './envelope-file-selector';
 
-const EnvelopeGenericPageRenderer = lazy(async () => import('./envelope-generic-page-renderer'));
+const EnvelopeGenericPageRenderer = lazy(
+  async () => import('~/components/general/envelope-editor/envelope-generic-page-renderer'),
+);
 
 // Todo: Envelopes - Dynamically import faker
 export const EnvelopeEditorPreviewPage = () => {
@@ -232,11 +234,11 @@ export const EnvelopeEditorPreviewPage = () => {
               />
             ) : (
               <div className="flex flex-col items-center justify-center py-32">
-                <FileTextIcon className="text-muted-foreground h-10 w-10" />
-                <p className="text-foreground mt-1 text-sm">
+                <FileTextIcon className="h-10 w-10 text-muted-foreground" />
+                <p className="mt-1 text-sm text-foreground">
                   <Trans>No documents found</Trans>
                 </p>
-                <p className="text-muted-foreground mt-1 text-sm">
+                <p className="mt-1 text-sm text-muted-foreground">
                   <Trans>Please upload a document to continue</Trans>
                 </p>
               </div>

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -171,7 +171,7 @@ export default function EnvelopeSignerPageRenderer() {
 
     const handleFieldGroupClick = (e: KonvaEventObject<Event>) => {
       const currentTarget = e.currentTarget as Konva.Group;
-      const target = e.target;
+      const target = e.target as Konva.Shape;
 
       const { width: fieldWidth, height: fieldHeight } = fieldGroup.getClientRect();
 

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -18,7 +18,7 @@ import { cn } from '@documenso/ui/lib/utils';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { DocumentFlowFormContainer } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
+import { PDFViewerLazy } from '@documenso/ui/primitives/pdf-viewer/lazy';
 import { Stepper } from '@documenso/ui/primitives/stepper';
 import { AddTemplateFieldsFormPartial } from '@documenso/ui/primitives/template-flow/add-template-fields';
 import type { TAddTemplateFieldsFormSchema } from '@documenso/ui/primitives/template-flow/add-template-fields.types';
@@ -312,7 +312,7 @@ export const TemplateEditForm = ({
         gradient
       >
         <CardContent className="p-2">
-          <PDFViewer
+          <PDFViewerLazy
             key={template.envelopeItems[0].id}
             envelopeItem={template.envelopeItems[0]}
             token={undefined}

apps/remix/app/components/general/webhook-logs-sheet.tsx

@@ -0,0 +1,198 @@
+import { useMemo, useState } from 'react';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import { WebhookCallStatus } from '@prisma/client';
+import { RotateCwIcon } from 'lucide-react';
+import { createCallable } from 'react-call';
+
+import { toFriendlyWebhookEventName } from '@documenso/lib/universal/webhook/to-friendly-webhook-event-name';
+import { trpc } from '@documenso/trpc/react';
+import type { TFindWebhookCallsResponse } from '@documenso/trpc/server/webhook-router/find-webhook-calls.types';
+import { CopyTextButton } from '@documenso/ui/components/common/copy-text-button';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+import { Sheet, SheetContent, SheetTitle } from '@documenso/ui/primitives/sheet';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type WebhookLogsSheetProps = {
+  webhookCall: TFindWebhookCallsResponse['data'][number];
+};
+
+export const WebhookLogsSheet = createCallable<WebhookLogsSheetProps, string | null>(
+  ({ call, webhookCall: initialWebhookCall }) => {
+    const { t } = useLingui();
+    const { toast } = useToast();
+
+    const [webhookCall, setWebhookCall] = useState(initialWebhookCall);
+
+    const [activeTab, setActiveTab] = useState<'request' | 'response'>('request');
+
+    const { mutateAsync: resendWebhookCall, isPending: isResending } =
+      trpc.webhook.calls.resend.useMutation({
+        onSuccess: (result) => {
+          toast({ title: t`Webhook successfully sent` });
+
+          setWebhookCall(result);
+        },
+        onError: () => {
+          toast({ title: t`Something went wrong` });
+        },
+      });
+
+    const generalWebhookDetails = useMemo(() => {
+      return [
+        {
+          header: t`Status`,
+          value: webhookCall.status === WebhookCallStatus.SUCCESS ? t`Success` : t`Failed`,
+        },
+        {
+          header: t`Event`,
+          value: toFriendlyWebhookEventName(webhookCall.event),
+        },
+        {
+          header: t`Sent`,
+          value: new Date(webhookCall.createdAt).toLocaleString(),
+        },
+        {
+          header: t`Response Code`,
+          value: webhookCall.responseCode,
+        },
+        {
+          header: t`Destination`,
+          value: webhookCall.url,
+        },
+      ];
+    }, [webhookCall]);
+
+    return (
+      <Sheet open={true} onOpenChange={(value) => (!value ? call.end(null) : null)}>
+        <SheetContent position="right" size="lg" className="max-w-2xl overflow-y-auto">
+          <SheetTitle>
+            <h2 className="text-lg font-semibold">
+              <Trans>Webhook Details</Trans>
+            </h2>
+            <p className="text-muted-foreground font-mono text-xs">{webhookCall.id}</p>
+          </SheetTitle>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto">
+            <div className="mt-6">
+              <div className="flex items-end justify-between">
+                <h4 className="text-muted-foreground mb-3 text-xs font-semibold uppercase tracking-wider">
+                  <Trans>Details</Trans>
+                </h4>
+
+                <Button
+                  onClick={() =>
+                    resendWebhookCall({
+                      webhookId: webhookCall.webhookId,
+                      webhookCallId: webhookCall.id,
+                    })
+                  }
+                  tabIndex={-1}
+                  loading={isResending}
+                  size="sm"
+                  className="mb-2"
+                >
+                  {!isResending && <RotateCwIcon className="mr-2 h-3.5 w-3.5" />}
+                  <Trans>Resend</Trans>
+                </Button>
+              </div>
+              <div className="border-border overflow-hidden rounded-lg border">
+                <table className="w-full text-left text-sm">
+                  <tbody className="divide-border bg-muted/30 divide-y">
+                    {generalWebhookDetails.map(({ header, value }, index) => (
+                      <tr key={index}>
+                        <td className="text-muted-foreground border-border w-1/3 border-r px-4 py-2 font-mono text-xs">
+                          {header}
+                        </td>
+                        <td className="text-foreground break-all px-4 py-2 font-mono text-xs">
+                          {value}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {/* Payload Tabs */}
+            <div className="py-6">
+              <div className="border-border mb-4 flex items-center gap-4 border-b">
+                <button
+                  onClick={() => setActiveTab('request')}
+                  className={cn(
+                    'relative pb-2 text-sm font-medium transition-colors',
+                    activeTab === 'request'
+                      ? 'text-foreground after:bg-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5'
+                      : 'text-muted-foreground hover:text-foreground',
+                  )}
+                >
+                  <Trans>Request</Trans>
+                </button>
+
+                <button
+                  onClick={() => setActiveTab('response')}
+                  className={cn(
+                    'relative pb-2 text-sm font-medium transition-colors',
+                    activeTab === 'response'
+                      ? 'text-foreground after:bg-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5'
+                      : 'text-muted-foreground hover:text-foreground',
+                  )}
+                >
+                  <Trans>Response</Trans>
+                </button>
+              </div>
+
+              <div className="group relative">
+                <div className="absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100">
+                  <CopyTextButton
+                    value={JSON.stringify(
+                      activeTab === 'request' ? webhookCall.requestBody : webhookCall.responseBody,
+                      null,
+                      2,
+                    )}
+                    onCopySuccess={() => toast({ title: t`Copied to clipboard` })}
+                  />
+                </div>
+                <pre className="bg-muted/50 border-border text-foreground overflow-x-auto rounded-lg border p-4 font-mono text-xs leading-relaxed">
+                  {JSON.stringify(
+                    activeTab === 'request' ? webhookCall.requestBody : webhookCall.responseBody,
+                    null,
+                    2,
+                  )}
+                </pre>
+              </div>
+
+              {activeTab === 'response' && (
+                <div className="mt-6">
+                  <h4 className="text-muted-foreground mb-3 text-xs font-semibold uppercase tracking-wider">
+                    <Trans>Response Headers</Trans>
+                  </h4>
+                  <div className="border-border overflow-hidden rounded-lg border">
+                    <table className="w-full text-left text-sm">
+                      <tbody className="divide-border bg-muted/30 divide-y">
+                        {Object.entries(webhookCall.responseHeaders as Record<string, string>).map(
+                          ([key, value]) => (
+                            <tr key={key}>
+                              <td className="text-muted-foreground border-border w-1/3 border-r px-4 py-2 font-mono text-xs">
+                                {key}
+                              </td>
+                              <td className="text-foreground break-all px-4 py-2 font-mono text-xs">
+                                {value as string}
+                              </td>
+                            </tr>
+                          ),
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  },
+);