DOCX Export Progress Bar Design

Overview

Add a progress modal to the Weekly Reports DOCX export feature, showing detailed percentage progress with step-based status text.

Requirements

• Show progress during DOCX export (1-5 seconds depending on image count)
• Display current step and percentage (0-100%)
• Modal overlay blocks interaction during export
• Show error state with retry option if export fails
• Match existing BaseExportModal styling

Component Design

ExportProgressModal

Location: src/components/shared/ExportModal/ExportProgressModal.tsx

Props:

interface ExportProgressModalProps {
  isOpen: boolean;
  progress: number;           // 0-100
  currentStep: string;        // e.g., "Processing images..."
  currentDetail?: string;     // e.g., "3 of 5"
  error?: string | null;      // Error message if failed
  onRetry?: () => void;       // Retry callback
  onCancel: () => void;       // Cancel/close callback
}

Visual layout:

• Centered modal card (max-w-md)
• Header with title "Exporting Report"
• Progress bar with percentage label
• Step text below progress bar
• Detail text (optional, for "3 of 5" style info)
• Error state replaces progress with error message + Retry/Cancel buttons
• Cancel button in footer (disabled during active export, enabled on error)

Export Steps & Progress Weights

Step	Weight	Progress Range	Status Text
Loading libraries	10%	0-10%	"Loading export libraries..."
Building document structure	15%	10-25%	"Building document..."
Processing observations	60%	25-85%	"Processing images... (3/5)"
Packing to DOCX	10%	85-95%	"Generating file..."
Triggering download	5%	95-100%	"Starting download..."

Service Integration

Progress callback type:

type ProgressCallback = (progress: number, step: string, detail?: string) => void;

Updated method signature:

static async exportAsDOCX(
  report: WeeklyReport,
  onProgress?: ProgressCallback
): Promise<void>

The callback is optional to maintain backward compatibility.

UI Integration

Pages using DOCX export will add:

1. Progress state management
2. Updated export handler that passes callback
3. Retry handler for error recovery
4. ExportProgressModal component render

Files to Change

Create:

• src/components/shared/ExportModal/ExportProgressModal.tsx

Modify:

• src/features/weekly-reports/services/weeklyReportService.ts - Add progress callback support
• src/app/(admin)/(pages)/report-template/index.tsx - Add progress modal
• src/app/(admin)/(pages)/report-template/edit/[id].tsx - Add progress modal