# MSA Document Preview Feature

## Overview
Customers can now preview the Master Service Agreement (MSA) document before signing it. This feature allows them to see exactly how the final document will look with their information filled in.

## User Flow

### Step 1: Review Terms
- Customer reads the key terms and conditions
- Clicks "Next" to proceed

### Step 2: Fill Information
- Customer enters/verifies their company information:
  - Company Name
  - Registration Number
  - Contact Person
  - Physical Address
  - Postal Address (optional)
  - Telephone
  - Email
  - Signing Location
- Data is saved to the backend
- Clicks "Next" to proceed

### Step 3: Sign Agreement
- **NEW: Preview Button** - Customer can click "Preview Document" to see the final MSA
- Customer draws their signature
- Customer accepts terms and conditions
- Clicks "Sign Agreement" to finalize

## Preview Modal Features

### Display
- Full document preview with professional formatting
- Shows all customer information as it will appear in the PDF
- Displays agreement terms and conditions
- Shows signature (if already provided)
- Status badge (Draft/Signed)

### Actions
- **Download PDF** - Downloads the current version of the document
- **Close** - Returns to signing modal

### Preview Content
1. **Document Header**
   - Title: "MASTER SERVICES AGREEMENT"
   - Document Number
   - Creation Date

2. **Customer Information**
   - Company Name
   - Registration Number
   - Physical Address
   - Postal Address (if provided)
   - Telephone
   - Email
   - Contact Person

3. **Agreement Terms**
   - Service Provision
   - Payment Terms
   - Service Levels
   - Duration
   - Governing Law

4. **Signature Section** (if signature exists)
   - Customer Signature Image
   - Signing Location
   - Signature Date

5. **Status Badge**
   - Shows current document status

## Technical Implementation

### Frontend Component
**File:** `afinet-portal/src/components/modals/msa-signing-modal.jsx`

**New State:**
- `showPreview` - Controls preview modal visibility
- `previewData` - Stores preview data from API

**New Functions:**
- `handlePreview()` - Fetches preview data and opens modal
- `handleDownloadPreview()` - Downloads PDF version

**New UI:**
- Preview button on Step 3
- Full-screen preview modal with document formatting
- Download PDF button in preview

### Backend API

**Endpoint:** `GET /api/msa/{id}/preview`

**Response:**
```json
{
  "msa": {
    "id": 1,
    "document_number": "MSA-2024-001",
    "status": "draft",
    "created_at": "2024-03-06T10:00:00Z",
    "signed_at": null
  },
  "customer_data": {
    "customer_name": "Company Name",
    "customer_registration_number": "1234/2020",
    "customer_physical_address": "123 Street, City",
    "customer_postal_address": "P.O. Box 123",
    "customer_telephone": "+263...",
    "customer_email": "email@company.com",
    "customer_contact_person": "John Doe",
    "signing_location": "Harare"
  },
  "signature_url": "https://..."
}
```

**Download Endpoint:** `GET /api/msa/{id}/download`
- Returns PDF file as blob
- Filename: `MSA_{document_number}.pdf`

## Benefits

1. **Transparency** - Customers see exactly what they're signing
2. **Accuracy** - Customers can verify their information before finalizing
3. **Confidence** - Reduces anxiety about signing legal documents
4. **Convenience** - Can download and review offline if needed
5. **Professional** - Shows document in clean, formatted layout

## Usage Notes

- Preview is available at Step 3 (signing step)
- Preview shows current state of document (with or without signature)
- Download generates PDF from current data
- Preview modal overlays the signing modal (higher z-index)
- All data must be saved before preview is accurate

## Future Enhancements

Potential improvements:
- Add preview button at Step 2 (after filling data)
- Show PDF viewer instead of HTML preview
- Add print functionality
- Email preview to customer
- Compare versions if document is updated