Now I can see the Release Letter implementation patterns. Let me create an updated comprehensive plan based on what I learned:

UPDATED IMPLEMENTATION PLAN: Designated Signatory for Clickthrough NDA

Key Insights from Release Letter (Conditional Access)

From the Release Letter implementations, I've identified the core patterns:

Lender Side (Document Preview):

• Modal-based document preview (ConditionalAccessDocumentPreview)
• Signatory information captured and appended to PDF
• Clear statement: "Terms of the above document have been accepted on behalf of the signatory below, who confirms they are an authorized signatory of the entity listed."
• No close button in modal (user must make explicit action)
• Clean typography (removed red coloring, kept professional black)
• Signatory details prominently displayed

Sponsor Side (Management):

• DataTable showing all documents/records
• Icons positioned closely together for compact UI
• "Conditional Access" label with action icons (Download, Access Report, etc.)
• Multiple signatories can be shown in a single record
• Sorting and filtering capabilities

PHASE 1: Lender-Side (NDA Acceptor Flow)

New Component: nda-signatory-form.tsx

• Embedded within the NDA document viewer (modal-based)

• Form fields matching Release Letter pattern:

  • Signatory Name (required)
  • Entity Name (required)
  • Email (required)
  • Additional Emails (optional, repeating)
  • Signing Date (auto-filled, read-only)
• Professional statement above form: "By clicking 'Accept' you agree to be bound by the terms outlined in the NDA. Terms of the above document have been accepted on behalf of the signatory below, who confirms they are an authorized signatory of the entity listed."

• Button layout:

  • "Accept" (primary, blue) - only enabled when form complete
  • "Decline" (secondary, red) - always available
  • "Download" (tertiary, gray) - always available
• No close button in modal (follow Release Letter pattern)

Update Component: nda-document-viewer.tsx

• Restructure layout:

  • PDF document viewer at top
  • Divider
  • Signatory form section
  • Action buttons at bottom
• Remove simple button layout, integrate form
• State management: form validation, button enabling, submission
• Styling: Modern Minimal with proper spacing (gap-6 between sections)

PHASE 2: Sponsor-Side Configuration

Update Component: click-through-settings.tsx

• Add new toggle section after "Automatically Enable Click Through for New Institution?":

  • Designated Signatory Enforcement

    • Toggle: "Require Designated Signatories for this deal?"
    • Help text: "When enabled, only pre-authorized signatories can accept the NDA"

• Update institution customization table:

  • Add column: "Signatories" (shows count badge, e.g., "3 Active")
  • Update "ACTION" column to include "Manage Signatories" button
  • Add enforcement checkbox per institution

New Component: signatory-management-modal.tsx

• Modal for managing authorized signatories (triggered from table action)

• Two sections:

  1. Authorized Signatories List (DataTable pattern similar to Release Letter)

     • Columns: Name | Email | Entity | Status | Actions
     • Compact icon spacing (gap-0) for Edit/Deactivate actions
     • Empty state messaging
     • Sortable/filterable

  2. Add New Signatory (form below or collapsible)

     • Name, Email, Entity fields
     • Status toggle (Active/Inactive)
     • "Add Signatory" button
• No close button in modal (consistent with Release Letter)

PHASE 3: Audit Log Enhancement

Update Component: audit-logs-modal.tsx

• Extend columns to include signatory details:

  • STATUS (Accepted/Pending/Declined)
  • SIGNATORY NAME (from captured form)
  • EMAIL (signatory email)
  • ENTITY (signatory entity)
  • INSTITUTION
  • DATE & TIME
  • DOCUMENT

• Row expansion:

  • Show additional emails if provided
  • Show authorization validation status (whether signatory was pre-authorized)
  • Show full acceptance record

• Filtering/Sorting:

  • Sort by Status, Date, Signatory Name
  • Filter by Institution, Status, Entity

• Export Logs:

  • Button in header (right side, consistent with sponsor settings)
  • CSV format includes all columns + signatory detail
  • Timestamp of export

Data Model

Design Details (Modern Minimal)

Colors:

• Primary Action: Blue (#2563EB)
• Decline/Destructive: Red (#EF4444)
• Success/Accepted: Green (#10B981)
• Pending: Yellow (#F59E0B)
• Text: Black (#000000) - no red text coloring
• Borders: Gray (#D1D5DB)

Typography:

• Headings: font-semibold, text-lg
• Labels: font-semibold, text-sm
• Body: font-normal, text-base
• Helper text: font-normal, text-sm, text-gray-600

Spacing:

• Form sections: gap-6
• Form fields: gap-4
• Table rows: py-3, px-4
• Icons in table: gap-0 (almost touching)
• Modal padding: p-6

Modal Pattern:

• No close button (X button in top right removed)
• Center aligned
• Backdrop blur
• Rounded-lg corners

Implementation Sequence

1. Lender Form Component

   • Create nda-signatory-form.tsx with validation
   • Update nda-document-viewer.tsx to integrate form
   • Test form submission flow

2. Signatory Management Modal

   • Create signatory-management-modal.tsx
   • Update click-through-settings.tsx with enforcement toggle and table action
   • Implement CRUD operations

3. Audit Log Enhancement

   • Update audit-logs-modal.tsx with new columns
   • Add row expansion for detail view
   • Implement export functionality

4. Integration & Testing

   • Connect form submission to audit trail
   • Validate against authorized signatories
   • End-to-end flow testing

Shall I proceed with Phase 1 implementation (Lender-side signatory form and document viewer updates)?

Now I'll implement all three phases. Let me start by creating the new components and updating existing ones:

Now let me update the click-through settings and audit logs components:

Let me read the file to check the current state and complete the edit:

Now let me update the audit logs modal with enhanced signatory columns:

Now let me update the demo page to show both lender and sponsor views:

I've successfully implemented all three phases of the Designated Signatory for Clickthrough NDA feature. Here's what was built:

Phase 1 - Lender Side (NDA Acceptor):

• Created nda-signatory-form.tsx with required fields (Signatory Name, Entity Name, Email) and optional Additional Emails
• Added form validation that keeps Accept button disabled until all required fields are complete
• Integrated authorization checkbox confirmation
• Updated nda-document-viewer.tsx to embed the signatory form replacing simple buttons
• Added professional warning message about accepting on behalf of institution

Phase 2 - Sponsor Side (Configuration):

• Updated click-through-settings.tsx with "Require Designated Signatories" enforcement toggle
• Added Signatories column to institution table showing active signatory count badges
• Created signatory-management-modal.tsx for managing authorized signatories per institution with CRUD operations
• Added compact action icons (Upload, Users, Audit Logs) following Release Letter pattern

Phase 3 - Audit Log Enhancement:

• Enhanced audit-logs-modal.tsx with new columns: Signatory Name, Email, Entity (replacing generic Name)
• Added sample audit log data showing accepted records with full signatory details
• Updated table structure to display signatory information captured at acceptance

The demo page now toggles between Sponsor Settings (configuration view) and Lender View (document acceptance with signatory form), demonstrating the complete end-to-end flow of the Designated Signatory feature.