Waiver Signing

Component File: src/features/tools/components/WaiverSigning.tsx Route / navigation: Path /tools, Zustand toolsTool = sign-waivers. See ../tools/00-TOOLS-HUB.md. Access Level: Employee, Volunteer (self-service) Last Updated: April 3, 2026

> Implementation Note: The active waiver signing flow uses Supabase tables, functions, and shared client hooks.

Overview

The Waiver Signing component allows employees and volunteers to review and electronically sign required waivers. It displays waivers applicable to the authenticated user's role, tracks signature status, and provides a batch signing interface for efficiency. In the unified waiver system, this component remains intentionally limited to internal signers; event attendees use the public event waiver flow instead.

UI Features

Main Features

Back Navigation:
Return to Tools Hub button
Header:
Title: "Sign Waivers"
Subtitle: "Review and sign required waivers for your role"
Status Banner:
All Signed (green) - When all waivers are complete
No Waivers Required (blue) - When no waivers apply
Pending Signature (amber) - With count and "Sign All Waivers" button

Waiver Lists

Unsigned Waivers Section:

Card for each pending waiver
Red file icon indicating action needed
Waiver name and filename
Entity badge (when viewing all entities)
"Pending" badge
"View" button to preview

Signed Waivers Section:

Card for each completed waiver
Green checkmark icon
Waiver name
Signature details (signed by, date)
"Signed" badge
View button (ghost style)

View Waiver Dialog

Waiver title and filename
PDF preview placeholder (production would show actual PDF)
Close button

Sign All Waivers Dialog

List of waivers being signed
Full Legal Name input (required)
Date of Signature input
Electronic Signature Agreement notice
Cancel and Sign buttons

Data Requirements

Waiver Interface

interface Waiver {
  id: string;
  name: string;
  fileName: string;
  fileUrl: string;
  requiredFor: ('employee' | 'volunteer' | 'event_attendee')[];
  entityId: string;
  uploadedAt: string;
}

WaiverSignature Interface

interface WaiverSignature {
  id: string;
  waiverId: string;
  signedByName: string;
  signedAt: string;
  organizationId: string;
  userId?: string;
  volunteerId?: string;
  personnelId?: string;
  registrationId?: string;
  eventId?: string;
}

Data Mutations

Sign Waivers: Create signature records for selected waivers

Relationship to Event Attendee Waivers

Event attendees do not use this tool
Event attendee signatures are captured through PublicWaiverSigning
Those public signatures now also write to waiver_signatures so admin auditing stays unified
Public event checkout and checklist flows must pass registration, checklist, and token query params when opening /waivers/sign/:waiverId links.
PublicWaiverSigning is token-required for public attendees. Links missing token (or with invalid/expired token) are rejected.

Authentication & Authorization

Required Permissions

User must be authenticated
User must have employee or volunteer role
Can only sign waivers assigned to their role
Event-attendee-only waivers are excluded from this surface

Role-Based Access

Employee: Sees waivers with requiredFor including 'employee'
Volunteer: Sees waivers with requiredFor including 'volunteer'
Event Attendee: Uses the public event waiver route, not this tool
Admin: Cannot sign via this interface (administrative function)

Business Logic & Validations

Frontend Validations

Full name required (must include first and last name)
Signature date required
Cannot sign already-signed waivers
Signing is blocked if the waiver PDF is missing

Backend Validations (Rails)

User must be active
Waiver must be active and not expired
User role must match waiver requirements
Prevent duplicate signatures
Validate signature name matches user profile (optional)

Business Rules

Waivers filtered by user's current role
Batch signing creates individual signature records
Signature is legally binding electronic signature
Signed waivers cannot be unsigned by user
Entity filter applies when viewing "All" organizations
event_attendee waivers remain hidden in this tool even though the shared type now supports them

State Management

Local State

signatures - List of user's signatures
viewOpen - View waiver dialog visibility
signOpen - Sign dialog visibility
selectedWaiver - Waiver being viewed
signatureForm - Form data (fullName, signatureDate)

Global State (Zustand Store)

selectedEntity - Current organization filter (from useAppStore)
setToolsTool - Navigation function (from useAppStore)

Dependencies

Internal Dependencies

useAppStore - Zustand global state
useAuth - Current user authentication
fetchWaivers, fetchWaiverSignatures - Waiver data from Supabase
Shared waiver types now support event_attendee, but this screen filters to employee / volunteer
signMultipleWaivers - Batch signing function
createNotificationForOrgAdmins - Notification creation
UI components (Card, Button, Badge, Dialog, Input, Label, Separator)

External Libraries

lucide-react - Icons
sonner - Toast notifications

Error Handling

Error Scenarios

1. Network Error: Show toast "Unable to load waivers", retry 2. Validation Error: Show inline error for name field 3. Sign Failed: Show toast "Failed to sign waivers" 4. PDF Load Failed: Show placeholder with error message

Loading States

Initial load: Skeleton cards
PDF preview: Loading spinner in preview area
Signing: Disable button, show spinner

Migration Notes

Phase 1: API Integration

1. Create waiver list endpoint filtered by user role 2. Implement signature creation endpoint 3. Add user role detection from auth context

Phase 2: PDF Preview

1. Implement secure PDF serving 2. Add PDF viewer component (react-pdf or similar) 3. Handle large file streaming

Phase 3: Compliance

1. Add audit logging for signatures 2. Implement signature verification 3. Add timestamp server integration (optional)

Security Considerations

Electronic signatures must comply with E-SIGN Act
Store signature metadata (IP address, timestamp, user agent)
PDF files served via signed URLs with expiration
Audit trail for all signature events

Ready to Get Started?

See how Alignmint can simplify your nonprofit's operations. Schedule a free demo with our team and we'll walk you through everything.

Schedule Your Free Demo Log In to Alignmint

Questions? Email us at steven@getalignmint.org