@visns-studio/visns-components 5.14.0 → 5.14.2

package/src/components/generic/OcrTemplateEnhanced.jsx

@@ -0,0 +1,1321 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { toast } from 'react-toastify';
+import { 
+    FileText, 
+    Upload, 
+    User, 
+    DollarSign, 
+    Calendar, 
+    Hash,
+    CheckCircle, 
+    Circle, 
+    Loader,
+    X,
+    Eye,
+    Settings,
+    AlertTriangle,
+    Info,
+    ArrowRight,
+    ArrowLeft,
+    Play,
+    Pause,
+    RotateCcw,
+    Zap,
+    Target,
+    MapPin,
+    BookOpen,
+    Lightbulb,
+    Wand2,
+    ClipboardList,
+    FolderOpen,
+    CheckCircle2,
+    AlertCircle,
+    HelpCircle,
+    ChevronRight,
+    ChevronDown,
+    Sparkles
+} from 'lucide-react';
+import fetchUtil from '../../utils/fetchUtil';
+import styles from './OcrTemplateEnhanced.module.scss';
+
+const OcrTemplateEnhanced = ({ 
+    id, 
+    data, 
+    setData, 
+    routeParams, 
+    urlParam,
+    onSave 
+}) => {
+    const [dragActive, setDragActive] = useState(false);
+    const [processing, setProcessing] = useState(false);
+    const [processingStage, setProcessingStage] = useState({
+        upload: 'pending',
+        ocr: 'pending',
+        analysis: 'pending'
+    });
+    const [uploadProgress, setUploadProgress] = useState(0);
+    const [currentStep, setCurrentStep] = useState(1);
+    const [completedSteps, setCompletedSteps] = useState(new Set());
+    const [showStepDetails, setShowStepDetails] = useState({});
+    const [hasAutoJumped, setHasAutoJumped] = useState(false);
+    const fileInputRef = useRef(null);
+
+    const ocrTemplateBuilder = data[id] || {};
+    const listOfKeys = ocrTemplateBuilder?.keyValuePairs || {};
+
+    // Define the guided journey steps
+    const journeySteps = [
+        {
+            id: 1,
+            title: "Upload Document",
+            description: "Upload PDF, JPG, or PNG documents for OCR analysis and template detection",
+            icon: Upload,
+            component: "upload",
+            isCompleted: () => !!ocrTemplateBuilder.uploadedFile,
+            canProceed: () => !!ocrTemplateBuilder.uploadedFile
+        },
+        {
+            id: 2,
+            title: "Select Data for Template",
+            description: "Choose key-value pairs to use in your filename template creation",
+            icon: ClipboardList,
+            component: "dataReview",
+            isCompleted: () => ocrTemplateBuilder?.selectedKey?.length > 0,
+            canProceed: () => ocrTemplateBuilder?.selectedKey?.length > 0
+        },
+        {
+            id: 3,
+            title: "Define Template Signature",
+            description: "Select variables that uniquely identify this document type for template matching",
+            icon: BookOpen,
+            component: "titleSelection",
+            isCompleted: () => ocrTemplateBuilder?.selectedTitle?.length > 0,
+            canProceed: () => true // Optional step
+        },
+        {
+            id: 4,
+            title: "Craft Filename Template",
+            description: "Design the filename pattern using selected variables for automated file renaming",
+            icon: Wand2,
+            component: "templateBuilder",
+            isCompleted: () => !!ocrTemplateBuilder?.dynamicFilename && ocrTemplateBuilder.dynamicFilename.length > 0,
+            canProceed: () => !!ocrTemplateBuilder?.dynamicFilename
+        },
+        {
+            id: 5,
+            title: "Setup Automation Folders",
+            description: "Configure watch folder for new files and destination folder for processed documents",
+            icon: FolderOpen,
+            component: "folderConfig",
+            isCompleted: () => !!(data?.content?.watchFolder && data?.content?.destinationFolder),
+            canProceed: () => true
+        }
+    ];
+
+    // Update completed steps when data changes
+    React.useEffect(() => {
+        const newCompletedSteps = new Set();
+        journeySteps.forEach(step => {
+            if (step.isCompleted()) {
+                newCompletedSteps.add(step.id);
+            }
+        });
+        setCompletedSteps(newCompletedSteps);
+
+        // Auto-advance to next step if current step is completed
+        const currentStepData = journeySteps.find(s => s.id === currentStep);
+        if (currentStepData?.isCompleted() && currentStep < journeySteps.length) {
+            const nextIncompleteStep = journeySteps.find(s => s.id > currentStep && !newCompletedSteps.has(s.id));
+            if (nextIncompleteStep) {
+                setCurrentStep(nextIncompleteStep.id);
+            }
+        }
+    }, [ocrTemplateBuilder, data, currentStep]);
+
+    // Initial step detection - jump to latest completed step on load (only once)
+    React.useEffect(() => {
+        // Only run if we haven't auto-jumped yet and have template data
+        const hasTemplateData = ocrTemplateBuilder && Object.keys(ocrTemplateBuilder).length > 0;
+        
+        if (!hasAutoJumped && hasTemplateData && currentStep === 1) {
+            // Calculate completed steps
+            const completedStepIds = journeySteps
+                .filter(step => step.isCompleted())
+                .map(step => step.id);
+            
+            if (completedStepIds.length > 0) {
+                // Find the furthest step we should go to
+                const highestCompletedStep = Math.max(...completedStepIds);
+                let targetStep = 1;
+                
+                if (highestCompletedStep === journeySteps.length) {
+                    // All steps completed - go to final step
+                    targetStep = journeySteps.length;
+                } else {
+                    // Go to next incomplete step or the furthest completed step
+                    const nextIncompleteStep = journeySteps.find(s => s.id > highestCompletedStep && !completedStepIds.includes(s.id));
+                    targetStep = nextIncompleteStep ? nextIncompleteStep.id : highestCompletedStep;
+                }
+                
+                // Only change if we're not already there
+                if (targetStep !== currentStep) {
+                    setCurrentStep(targetStep);
+                    setHasAutoJumped(true); // Mark that we've auto-jumped
+                }
+            }
+        }
+    }, [ocrTemplateBuilder, journeySteps, hasAutoJumped, currentStep]);
+
+    // Manual navigation function to prevent auto-jump interference
+    const navigateToStep = (stepId) => {
+        setCurrentStep(stepId);
+        setHasAutoJumped(true); // Prevent future auto-jumping after manual navigation
+    };
+
+    // Enhanced smart categorization utility
+    const categorizeData = useCallback((keyValuePairs) => {
+        const categories = {
+            contact: [],
+            financial: [],
+            dates: [],
+            identifiers: [],
+            other: []
+        };
+
+        Object.entries(keyValuePairs).forEach(([key, value]) => {
+            const keyLower = key.toLowerCase();
+            const valueStr = String(value).toLowerCase();
+            let categorized = false;
+
+            // Enhanced Contact Detection
+            if (/email|e-mail|mail/i.test(key) || /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/.test(valueStr)) {
+                categories.contact.push({ key, value, confidence: 0.95 });
+                categorized = true;
+            } else if (/phone|tel|mobile|cell|fax|contact/i.test(key) || /^[\+]?[\d\s\-\(\)]{7,15}$/.test(valueStr)) {
+                categories.contact.push({ key, value, confidence: 0.9 });
+                categorized = true;
+            } else if (/name|client|customer|person|company|organisation|organization|vendor|supplier/i.test(key)) {
+                categories.contact.push({ key, value, confidence: 0.85 });
+                categorized = true;
+            } else if (/address|street|city|state|country|zip|postal|location/i.test(key)) {
+                categories.contact.push({ key, value, confidence: 0.8 });
+                categorized = true;
+            }
+
+            // Enhanced Financial Detection
+            if (!categorized && (/amount|price|cost|total|sum|value|fee|charge|payment|invoice|bill|tax|vat|gst/i.test(key) || 
+                /[$€£¥₹]/.test(valueStr) || /^\d+[.,]\d{2}$/.test(valueStr) || 
+                (/^\d+\.?\d*$/.test(valueStr) && parseFloat(valueStr) > 0))) {
+                categories.financial.push({ key, value, confidence: 0.85 });
+                categorized = true;
+            }
+
+            // Enhanced Date Detection
+            if (!categorized && (/date|time|year|month|day|created|modified|due|expiry|start|end|period/i.test(key) || 
+                isDateString(valueStr) || /^\d{1,2}[\/\-\.]\d{1,2}[\/\-\.]\d{2,4}$/.test(valueStr) ||
+                /^\d{4}[\/\-\.]\d{1,2}[\/\-\.]\d{1,2}$/.test(valueStr))) {
+                categories.dates.push({ key, value, confidence: 0.9 });
+                categorized = true;
+            }
+
+            // Enhanced Identifier Detection
+            if (!categorized && (/id|number|ref|reference|code|invoice|contract|order|ticket|case|job|project|account|transaction/i.test(key) ||
+                /^[A-Z]{2,4}\d{3,}$/.test(valueStr) || /^INV[-_]?\d+/i.test(valueStr) || 
+                /^[A-Z0-9]{6,}$/.test(valueStr) || /^\d{6,}$/.test(valueStr))) {
+                categories.identifiers.push({ key, value, confidence: 0.8 });
+                categorized = true;
+            }
+
+            // Everything else goes to other with lower confidence
+            if (!categorized) {
+                categories.other.push({ key, value, confidence: 0.4 });
+            }
+        });
+
+        // Filter out empty categories
+        const filteredCategories = {};
+        Object.entries(categories).forEach(([categoryName, items]) => {
+            if (items.length > 0) {
+                filteredCategories[categoryName] = items;
+            }
+        });
+
+        return filteredCategories;
+    }, []);
+
+    const isDateString = (str) => {
+        const date = new Date(str);
+        return !isNaN(date.getTime()) && str.length > 6;
+    };
+
+    // Generate template suggestions based on detected data
+    const generateTemplateSuggestions = useCallback((extractedData) => {
+        const suggestions = [];
+        const keys = Object.keys(extractedData);
+
+        if (keys.some(k => /invoice/i.test(k)) && keys.some(k => /date/i.test(k))) {
+            suggestions.push({
+                id: 'invoice',
+                name: "Invoice Template",
+                filename: "INV_{{invoice_number}}_{{date}}",
+                description: "Standard invoice naming convention"
+            });
+        }
+
+        if (keys.some(k => /contract/i.test(k)) && keys.some(k => /client|customer/i.test(k))) {
+            suggestions.push({
+                id: 'contract',
+                name: "Contract Template",
+                filename: "CONTRACT_{{client_name}}_{{contract_number}}",
+                description: "Legal document naming convention"
+            });
+        }
+
+        if (keys.some(k => /quote|estimate/i.test(k))) {
+            suggestions.push({
+                id: 'quote',
+                name: "Quote Template",
+                filename: "QUOTE_{{quote_number}}_{{company_name}}",
+                description: "Quote document naming"
+            });
+        }
+
+        return suggestions;
+    }, []);
+
+    // Enhanced file upload handler
+    const handleFileUpload = async (files) => {
+        if (!files || files.length === 0) return;
+
+        const file = files[0];
+        
+        // Validate file type and size
+        const allowedTypes = ['application/pdf', 'image/jpeg', 'image/png', 'image/jpg'];
+        if (!allowedTypes.includes(file.type)) {
+            toast.error('Please upload a PDF, JPG, or PNG file');
+            return;
+        }
+
+        if (file.size > 10 * 1024 * 1024) { // 10MB limit
+            toast.error('File size must be less than 10MB');
+            return;
+        }
+
+        setProcessing(true);
+        setProcessingStage({ upload: 'processing', ocr: 'pending', analysis: 'pending' });
+
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('template_id', routeParams[urlParam]);
+
+            // Simulate upload progress
+            setUploadProgress(0);
+            const progressInterval = setInterval(() => {
+                setUploadProgress(prev => Math.min(prev + 10, 90));
+            }, 200);
+
+            setProcessingStage({ upload: 'completed', ocr: 'processing', analysis: 'pending' });
+
+            const response = await fetchUtil({
+                url: '/ajax/ocr/analyzeFile',
+                method: 'POST',
+                data: formData,
+            });
+
+            clearInterval(progressInterval);
+            setUploadProgress(100);
+
+            setProcessingStage({ upload: 'completed', ocr: 'completed', analysis: 'processing' });
+
+            const result = response.data;
+            
+            setData(prevState => ({
+                ...prevState,
+                [id]: {
+                    ...prevState[id],
+                    ...result,
+                    uploadedFile: {
+                        name: file.name,
+                        size: file.size,
+                        type: file.type
+                    }
+                }
+            }));
+
+            setProcessingStage({ upload: 'completed', ocr: 'completed', analysis: 'completed' });
+            toast.success('File processed successfully!');
+
+        } catch (error) {
+            console.error(error);
+            toast.error('Something went wrong. Please try again.');
+            setProcessingStage({ upload: 'pending', ocr: 'pending', analysis: 'pending' });
+        } finally {
+            setProcessing(false);
+            setUploadProgress(0);
+        }
+    };
+
+    // Drag and drop handlers
+    const handleDrag = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.type === "dragenter" || e.type === "dragover") {
+            setDragActive(true);
+        } else if (e.type === "dragleave") {
+            setDragActive(false);
+        }
+    }, []);
+
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+            handleFileUpload(e.dataTransfer.files);
+        }
+    }, []);
+
+    const handleInputChange = (e) => {
+        handleFileUpload(e.target.files);
+    };
+
+    const handleKeyToggle = (key) => {
+        const selectedKeys = ocrTemplateBuilder?.selectedKey || [];
+        const newSelectedKeys = selectedKeys.includes(key)
+            ? selectedKeys.filter(k => k !== key)
+            : [...selectedKeys, key];
+
+        setData(prevState => ({
+            ...prevState,
+            [id]: {
+                ...prevState[id],
+                selectedKey: newSelectedKeys
+            }
+        }));
+    };
+
+    const handleTitleToggle = (title) => {
+        const selectedTitles = ocrTemplateBuilder?.selectedTitle || [];
+        const newSelectedTitles = selectedTitles.includes(title)
+            ? selectedTitles.filter(t => t !== title)
+            : [...selectedTitles, title];
+
+        setData(prevState => ({
+            ...prevState,
+            [id]: {
+                ...prevState[id],
+                selectedTitle: newSelectedTitles
+            }
+        }));
+    };
+
+    const applyTemplate = (template) => {
+        setData(prevState => ({
+            ...prevState,
+            [id]: {
+                ...prevState[id],
+                dynamicFilename: template.filename
+            }
+        }));
+        toast.success(`Applied ${template.name}`);
+    };
+
+    // Generate actual filename preview by replacing variables with real values
+    const generatePreviewFilename = (template, keyValuePairs) => {
+        if (!template) return '';
+        
+        let preview = template;
+        
+        // Replace variables with actual values, but only if they have values
+        Object.entries(keyValuePairs).forEach(([key, value]) => {
+            const regex = new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, 'gi');
+            
+            // Only replace if value exists and is not empty/null/undefined
+            if (value && String(value).trim() !== '') {
+                const cleanValue = String(value).replace(/[^\w\s-_.]/g, '');
+                preview = preview.replace(regex, cleanValue);
+            } else {
+                // Remove the variable and any adjacent separators for empty values
+                preview = preview.replace(new RegExp(`[_\\-\\s]*\\{\\{\\s*${key}\\s*\\}\\}[_\\-\\s]*`, 'gi'), '');
+            }
+        });
+        
+        // Highlight any remaining unreplaced variables (variables not in keyValuePairs)
+        preview = preview.replace(/\{\{[^}]+\}\}/g, match => `⚠️${match}`);
+        
+        // Clean up multiple separators and trim
+        preview = preview
+            .replace(/[_\-\s]+/g, '_')  // Replace multiple separators with single underscore
+            .replace(/^[_\-\s]+|[_\-\s]+$/g, '')  // Remove leading/trailing separators
+            .replace(/_{2,}/g, '_');  // Replace multiple underscores with single
+        
+        return preview || 'filename_preview';
+    };
+
+    // Validate template and return warning message if issues found
+    const validateTemplate = (template, selectedKeys) => {
+        if (!template) return null;
+        
+        // Check for invalid characters
+        const invalidChars = /[<>:"/\\|?*]/g;
+        if (invalidChars.test(template.replace(/\{\{[^}]+\}\}/g, ''))) {
+            return 'Template contains invalid filename characters: < > : " / \\ | ? *';
+        }
+        
+        // Check for unreferenced variables
+        const templateVars = (template.match(/\{\{([^}]+)\}\}/g) || [])
+            .map(match => match.replace(/[{}]/g, '').trim());
+        const invalidVars = templateVars.filter(varName => !selectedKeys.includes(varName));
+        
+        if (invalidVars.length > 0) {
+            return `Template references undefined variables: ${invalidVars.join(', ')}`;
+        }
+        
+        // Check for extremely long templates
+        if (template.length > 200) {
+            return 'Template is very long and may cause filename issues';
+        }
+        
+        // Check if template starts/ends with separators
+        if (/^[_\-\s]|[_\-\s]$/.test(template)) {
+            return 'Template should not start or end with separators (_ - space)';
+        }
+        
+        return null;
+    };
+
+    // Processing Step Component
+    const ProcessingStep = ({ status, title, description, progress }) => (
+        <div className={`${styles.processingStep} ${styles[status]}`}>
+            <div className={styles.stepIcon}>
+                {status === 'completed' && <CheckCircle size={20} />}
+                {status === 'processing' && <Loader size={20} className={styles.spinning} />}
+                {status === 'pending' && <Circle size={20} />}
+            </div>
+            <div className={styles.stepContent}>
+                <h4>{title}</h4>
+                <p>{description}</p>
+                {progress !== undefined && (
+                    <div className={styles.progressBar}>
+                        <div 
+                            className={styles.progressFill} 
+                            style={{ width: `${progress}%` }} 
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+
+    // Data Card Component
+    const DataCard = ({ keyName, value, confidence, selected, onToggle, category }) => (
+        <div 
+            className={`${styles.dataCard} ${selected ? styles.selected : ''} ${styles[category]}`}
+            onClick={onToggle}
+        >
+            <div className={styles.cardHeader}>
+                <span className={styles.keyName}>{keyName}</span>
+                <div className={styles.cardMeta}>
+                    <span className={`${styles.confidence} ${styles[getConfidenceLevel(confidence)]}`}>
+                        {Math.round(confidence * 100)}%
+                    </span>
+                    <CheckCircle 
+                        size={16} 
+                        className={selected ? styles.selectedIcon : styles.unselectedIcon} 
+                    />
+                </div>
+            </div>
+            <div className={styles.cardValue}>{String(value).slice(0, 100)}</div>
+        </div>
+    );
+
+    const getConfidenceLevel = (confidence) => {
+        if (confidence >= 0.8) return 'high';
+        if (confidence >= 0.6) return 'medium';
+        return 'low';
+    };
+
+    // Data Section Component
+    const DataSection = ({ title, icon, children, count }) => (
+        <div className={styles.dataSection}>
+            <div className={styles.sectionHeader}>
+                <div className={styles.sectionTitle}>
+                    {icon}
+                    <h3>{title}</h3>
+                    <span className={styles.count}>({count})</span>
+                </div>
+            </div>
+            <div className={styles.sectionContent}>
+                {children}
+            </div>
+        </div>
+    );
+
+    const categorizedData = Object.keys(listOfKeys).length > 0 ? categorizeData(listOfKeys) : null;
+    const templateSuggestions = Object.keys(listOfKeys).length > 0 ? generateTemplateSuggestions(listOfKeys) : [];
+
+    // Step 1: Upload Component
+    const renderUploadStep = () => {
+        return (
+            <div className={styles.uploadSection}>
+                <div 
+                    className={`${styles.dropZone} ${dragActive ? styles.dragActive : ''}`}
+                    onDragEnter={handleDrag}
+                    onDragLeave={handleDrag}
+                    onDragOver={handleDrag}
+                    onDrop={handleDrop}
+                    onClick={() => fileInputRef.current?.click()}
+                >
+                    <div className={styles.uploadIcon}>
+                        <Upload size={48} />
+                    </div>
+                    <h3>Drop document here or click to browse</h3>
+                    <p>Supports PDF, JPG, PNG files up to 10MB</p>
+                    
+                    <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept=".pdf,.jpg,.jpeg,.png"
+                        onChange={handleInputChange}
+                        style={{ display: 'none' }}
+                    />
+                </div>
+
+                {/* Uploaded File Preview */}
+                {ocrTemplateBuilder.uploadedFile && (
+                    <div className={styles.filePreview}>
+                        <div className={styles.fileInfo}>
+                            <FileText size={24} />
+                            <div>
+                                <span className={styles.fileName}>
+                                    {ocrTemplateBuilder.uploadedFile.name}
+                                </span>
+                                <span className={styles.fileSize}>
+                                    {(ocrTemplateBuilder.uploadedFile.size / 1024).toFixed(1)} KB
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* Processing Feedback */}
+                {processing && (
+                    <div className={styles.processingContainer}>
+                        <h3>Analyzing Document for Templates...</h3>
+                        <div className={styles.processingSteps}>
+                            <ProcessingStep 
+                                status={processingStage.upload}
+                                title="Uploading Document"
+                                description="Preparing file for analysis..."
+                                progress={processingStage.upload === 'processing' ? uploadProgress : undefined}
+                            />
+                            <ProcessingStep 
+                                status={processingStage.ocr}
+                                title="OCR Analysis"
+                                description="Extracting text and detecting templates..."
+                            />
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    // Step 2: Data Review Component
+    const renderDataReviewStep = () => {
+        if (!categorizedData) {
+            return (
+                <div className={styles.emptyState}>
+                    <AlertCircle size={48} />
+                    <h3>No Data Extracted Yet</h3>
+                    <p>Please complete Step 1 first by uploading a document.</p>
+                </div>
+            );
+        }
+
+        return (
+            <div className={styles.dataOrganizer}>
+                <div className={styles.extractedDataSections}>
+                    {categorizedData.contact && categorizedData.contact.length > 0 && (
+                        <DataSection 
+                            title="Contact Information" 
+                            icon={<User size={20} />}
+                            count={categorizedData.contact.length}
+                        >
+                            {categorizedData.contact.map(item => (
+                                <DataCard
+                                    key={item.key}
+                                    keyName={item.key}
+                                    value={item.value}
+                                    confidence={item.confidence}
+                                    category="contact"
+                                    selected={ocrTemplateBuilder?.selectedKey?.includes(item.key)}
+                                    onToggle={() => handleKeyToggle(item.key)}
+                                />
+                            ))}
+                        </DataSection>
+                    )}
+
+                    {categorizedData.financial && categorizedData.financial.length > 0 && (
+                        <DataSection 
+                            title="Financial Data" 
+                            icon={<DollarSign size={20} />}
+                            count={categorizedData.financial.length}
+                        >
+                            {categorizedData.financial.map(item => (
+                                <DataCard
+                                    key={item.key}
+                                    keyName={item.key}
+                                    value={item.value}
+                                    confidence={item.confidence}
+                                    category="financial"
+                                    selected={ocrTemplateBuilder?.selectedKey?.includes(item.key)}
+                                    onToggle={() => handleKeyToggle(item.key)}
+                                />
+                            ))}
+                        </DataSection>
+                    )}
+
+                    {categorizedData.dates && categorizedData.dates.length > 0 && (
+                        <DataSection 
+                            title="Dates & Times" 
+                            icon={<Calendar size={20} />}
+                            count={categorizedData.dates.length}
+                        >
+                            {categorizedData.dates.map(item => (
+                                <DataCard
+                                    key={item.key}
+                                    keyName={item.key}
+                                    value={item.value}
+                                    confidence={item.confidence}
+                                    category="dates"
+                                    selected={ocrTemplateBuilder?.selectedKey?.includes(item.key)}
+                                    onToggle={() => handleKeyToggle(item.key)}
+                                />
+                            ))}
+                        </DataSection>
+                    )}
+
+                    {categorizedData.identifiers && categorizedData.identifiers.length > 0 && (
+                        <DataSection 
+                            title="Identifiers" 
+                            icon={<Hash size={20} />}
+                            count={categorizedData.identifiers.length}
+                        >
+                            {categorizedData.identifiers.map(item => (
+                                <DataCard
+                                    key={item.key}
+                                    keyName={item.key}
+                                    value={item.value}
+                                    confidence={item.confidence}
+                                    category="identifiers"
+                                    selected={ocrTemplateBuilder?.selectedKey?.includes(item.key)}
+                                    onToggle={() => handleKeyToggle(item.key)}
+                                />
+                            ))}
+                        </DataSection>
+                    )}
+
+                    {categorizedData.other && categorizedData.other.length > 0 && (
+                        <DataSection 
+                            title="Other Data" 
+                            icon={<FileText size={20} />}
+                            count={categorizedData.other.length}
+                        >
+                            {categorizedData.other.map(item => (
+                                <DataCard
+                                    key={item.key}
+                                    keyName={item.key}
+                                    value={item.value}
+                                    confidence={item.confidence}
+                                    category="other"
+                                    selected={ocrTemplateBuilder?.selectedKey?.includes(item.key)}
+                                    onToggle={() => handleKeyToggle(item.key)}
+                                />
+                            ))}
+                        </DataSection>
+                    )}
+                </div>
+
+                {ocrTemplateBuilder?.selectedKey?.length > 0 && (
+                    <div className={styles.selectionSummary}>
+                        <CheckCircle2 size={20} />
+                        <span>Selected {ocrTemplateBuilder.selectedKey.length} variables for template building</span>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    // Step 3: Title Selection Component
+    const renderTitleSelectionStep = () => {
+        if (!ocrTemplateBuilder.allText) {
+            return (
+                <div className={styles.emptyState}>
+                    <AlertCircle size={48} />
+                    <h3>No Text Extracted</h3>
+                    <p>Please complete Step 1 first by uploading a document.</p>
+                </div>
+            );
+        }
+
+        return (
+            <div className={styles.documentTextSection}>
+                <div className={styles.titleSelectionHeader}>
+                    <BookOpen size={24} />
+                    <div>
+                        <h3>Create Template Signature</h3>
+                        <p>Select text lines that will help identify this document type in future processing</p>
+                    </div>
+                </div>
+
+                <div style={{ 
+                    background: '#e3f2fd', 
+                    padding: '0.75rem', 
+                    borderRadius: '6px', 
+                    marginBottom: '1rem',
+                    fontSize: '0.875rem',
+                    color: '#1565c0'
+                }}>
+                    <strong>💡 Template Matching Tips:</strong> Choose unique text patterns that appear consistently in this document type. 
+                    Good examples: "INVOICE", document headers, company names, or specific field labels. 
+                    Avoid variable content like dates or amounts.
+                </div>
+                
+                <div className={styles.textLinesGrid}>
+                    {ocrTemplateBuilder.allText.map((line, index) => (
+                        <div 
+                            key={index}
+                            className={`${styles.textLine} ${
+                                ocrTemplateBuilder?.selectedTitle?.includes(line) ? styles.selected : ''
+                            }`}
+                            onClick={() => handleTitleToggle(line)}
+                        >
+                            <CheckCircle 
+                                size={16} 
+                                className={ocrTemplateBuilder?.selectedTitle?.includes(line) ? 
+                                    styles.selectedIcon : styles.unselectedIcon
+                                } 
+                            />
+                            <span>{line}</span>
+                        </div>
+                    ))}
+                </div>
+
+                {ocrTemplateBuilder?.selectedTitle?.length > 0 && (
+                    <div className={styles.selectionSummary}>
+                        <CheckCircle2 size={20} />
+                        <span>Selected {ocrTemplateBuilder.selectedTitle.length} signature elements for template matching</span>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    // Step 4: Template Builder Component
+    const renderTemplateBuilderStep = () => {
+        if (!ocrTemplateBuilder?.selectedKey?.length) {
+            return (
+                <div className={styles.emptyState}>
+                    <AlertCircle size={48} />
+                    <h3>No Variables Selected</h3>
+                    <p>Please complete Step 2 first by selecting data variables.</p>
+                </div>
+            );
+        }
+
+        return (
+            <div className={styles.templateBuilder}>
+                {/* Template Suggestions */}
+                {templateSuggestions.length > 0 && (
+                    <div className={styles.templateSuggestions}>
+                        <div className={styles.suggestionHeader}>
+                            <Sparkles size={20} />
+                            <h3>Smart Template Suggestions</h3>
+                        </div>
+                        <div className={styles.suggestionGrid}>
+                            {templateSuggestions.map(template => (
+                                <div 
+                                    key={template.id}
+                                    className={styles.templateSuggestion}
+                                    onClick={() => applyTemplate(template)}
+                                >
+                                    <Wand2 size={16} />
+                                    <h4>{template.name}</h4>
+                                    <p>{template.description}</p>
+                                    <code>{template.filename}</code>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {/* Custom Template Editor */}
+                <div className={styles.customTemplate}>
+                    <div className={styles.templateHeader}>
+                        <Settings size={20} />
+                        <h3>Filename Template Designer</h3>
+                    </div>
+                    
+                    <div className={styles.availableVariables}>
+                        <div className={styles.variableHeader}>
+                            <h4>Available Variables</h4>
+                            <div className={styles.quickActions}>
+                                <button 
+                                    className={styles.quickBtn}
+                                    onClick={() => {
+                                        const allVars = ocrTemplateBuilder.selectedKey.map(key => `{{${key}}}`).join('_');
+                                        setData(prevState => ({
+                                            ...prevState,
+                                            [id]: {
+                                                ...prevState[id],
+                                                dynamicFilename: allVars
+                                            }
+                                        }));
+                                    }}
+                                    title="Use all variables"
+                                >
+                                    <Zap size={14} />
+                                    Select All
+                                </button>
+                                <button 
+                                    className={styles.quickBtn}
+                                    onClick={() => {
+                                        setData(prevState => ({
+                                            ...prevState,
+                                            [id]: {
+                                                ...prevState[id],
+                                                dynamicFilename: ''
+                                            }
+                                        }));
+                                    }}
+                                    title="Clear template"
+                                >
+                                    <RotateCcw size={14} />
+                                    Clear
+                                </button>
+                            </div>
+                        </div>
+                        <p className={styles.variableHelp}>Click variables to add them to your template, or use quick actions above</p>
+                        <div className={styles.variableChips}>
+                            {ocrTemplateBuilder.selectedKey.map(key => (
+                                <span 
+                                    key={key}
+                                    className={styles.variableChip}
+                                    onClick={() => {
+                                        const currentFilename = ocrTemplateBuilder?.dynamicFilename || '';
+                                        const cursorPosition = document.querySelector(`input[value="${currentFilename}"]`)?.selectionStart || currentFilename.length;
+                                        const before = currentFilename.slice(0, cursorPosition);
+                                        const after = currentFilename.slice(cursorPosition);
+                                        const newFilename = `${before}{{${key}}}${after}`;
+                                        
+                                        setData(prevState => ({
+                                            ...prevState,
+                                            [id]: {
+                                                ...prevState[id],
+                                                dynamicFilename: newFilename
+                                            }
+                                        }));
+                                    }}
+                                    title={`Insert {{${key}}} - Value: ${listOfKeys[key]}`}
+                                >
+                                    {key}
+                                    <span className={styles.variableValue}>
+                                        {String(listOfKeys[key]).slice(0, 20)}
+                                        {String(listOfKeys[key]).length > 20 ? '...' : ''}
+                                    </span>
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className={styles.templateField}>
+                        <label>File Name Template</label>
+                        <p className={styles.fieldDescription}>
+                            💡 Variables with no values will be automatically removed from the filename.
+                            Use underscores (_) or hyphens (-) as separators.
+                        </p>
+                        <input
+                            type="text"
+                            value={ocrTemplateBuilder?.dynamicFilename || ''}
+                            onChange={(e) => setData(prevState => ({
+                                ...prevState,
+                                [id]: {
+                                    ...prevState[id],
+                                    dynamicFilename: e.target.value
+                                }
+                            }))}
+                            placeholder="Enter filename template (e.g., DOC_{{key1}}_{{key2}})"
+                        />
+                    </div>
+
+                    {/* Enhanced Preview & Validation */}
+                    {ocrTemplateBuilder?.dynamicFilename && (
+                        <div className={styles.templatePreview}>
+                            <h4>Real Filename Preview</h4>
+                            <div className={styles.previewContainer}>
+                                <div className={styles.previewBox}>
+                                    <span className={styles.previewLabel}>Generated filename:</span>
+                                    <code className={styles.generatedFilename}>
+                                        {generatePreviewFilename(ocrTemplateBuilder.dynamicFilename, listOfKeys)}
+                                    </code>
+                                </div>
+                                {validateTemplate(ocrTemplateBuilder.dynamicFilename, ocrTemplateBuilder.selectedKey) && (
+                                    <div className={styles.validationMessage}>
+                                        <AlertTriangle size={16} className={styles.validationIcon} />
+                                        {validateTemplate(ocrTemplateBuilder.dynamicFilename, ocrTemplateBuilder.selectedKey)}
+                                    </div>
+                                )}
+                                <div className={styles.templateStats}>
+                                    <span>Variables used: {(ocrTemplateBuilder.dynamicFilename.match(/\{\{[^}]+\}\}/g) || []).length}</span>
+                                    <span>Template length: {ocrTemplateBuilder.dynamicFilename.length} chars</span>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    // Step 5: Folder Configuration Component
+    const renderFolderConfigStep = () => {
+        return (
+            <div className={styles.folderConfigSection}>
+                <div className={styles.folderHeader}>
+                    <FolderOpen size={24} />
+                    <div>
+                        <h3>Setup Automated Processing</h3>
+                        <p>Configure folders for continuous document monitoring and processing</p>
+                    </div>
+                </div>
+
+                <div style={{ 
+                    background: '#f0f8f4', 
+                    padding: '1rem', 
+                    borderRadius: '8px', 
+                    marginBottom: '1.5rem',
+                    border: '1px solid #d4edda'
+                }}>
+                    <h4 style={{ margin: '0 0 0.5rem 0', color: '#155724', fontSize: '0.9rem' }}>
+                        🔄 Automated Workflow
+                    </h4>
+                    <div style={{ fontSize: '0.8rem', color: '#155724', lineHeight: '1.4' }}>
+                        <strong>1.</strong> New documents → Watch Folder<br/>
+                        <strong>2.</strong> System detects & processes using this template<br/>
+                        <strong>3.</strong> Processed files → Destination Folder (with generated filenames)
+                    </div>
+                </div>
+
+                <div className={styles.folderConfiguration}>
+                    <div className={styles.templateField}>
+                        <label>
+                            <Eye size={16} />
+                            Watch Folder (Input)
+                        </label>
+                        <p className={styles.fieldDescription}>
+                            📂 The system continuously monitors this folder for new PDF documents. 
+                            Any file dropped here will be automatically processed using this template.
+                        </p>
+                        <input
+                            type="text"
+                            value={data?.content?.watchFolder || ''}
+                            onChange={(e) => setData(prevState => ({
+                                ...prevState,
+                                content: {
+                                    ...prevState.content,
+                                    watchFolder: e.target.value
+                                }
+                            }))}
+                            placeholder="e.g., /documents/incoming/ or C:\Documents\Watch\"
+                        />
+                    </div>
+
+                    <div className={styles.templateField}>
+                        <label>
+                            <ArrowRight size={16} />
+                            Destination Folder (Output)
+                        </label>
+                        <p className={styles.fieldDescription}>
+                            📁 After processing, files are automatically moved here with the filename generated from your template. 
+                            Original files are removed from the watch folder.
+                        </p>
+                        <input
+                            type="text"
+                            value={data?.content?.destinationFolder || ''}
+                            onChange={(e) => setData(prevState => ({
+                                ...prevState,
+                                content: {
+                                    ...prevState.content,
+                                    destinationFolder: e.target.value
+                                }
+                            }))}
+                            placeholder="e.g., /documents/processed/ or C:\Documents\Processed\"
+                        />
+                    </div>
+                </div>
+
+                {data?.content?.watchFolder && data?.content?.destinationFolder && (
+                    <div className={styles.workflowPreview}>
+                        <div className={styles.workflowHeader}>
+                            <Settings size={20} />
+                            <h4>🔄 Automated Processing Workflow</h4>
+                        </div>
+                        <div className={styles.workflowSteps}>
+                            <div className={styles.workflowStep}>
+                                <Eye size={16} />
+                                <span>Watch: {data.content.watchFolder}</span>
+                            </div>
+                            <ArrowRight size={16} className={styles.workflowArrow} />
+                            <div className={styles.workflowStep}>
+                                <Wand2 size={16} />
+                                <span>OCR + Template Match</span>
+                            </div>
+                            <ArrowRight size={16} className={styles.workflowArrow} />
+                            <div className={styles.workflowStep}>
+                                <FileText size={16} />
+                                <span>Rename: {ocrTemplateBuilder?.dynamicFilename || 'No template set'}</span>
+                            </div>
+                            <ArrowRight size={16} className={styles.workflowArrow} />
+                            <div className={styles.workflowStep}>
+                                <CheckCircle2 size={16} />
+                                <span>Move to: {data.content.destinationFolder}</span>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    // Journey Navigation Component
+    const JourneyProgress = () => (
+        <div className={styles.journeyProgress}>
+            <div className={styles.progressHeader}>
+                <div className={styles.progressTitle}>
+                    <MapPin size={20} />
+                    <h2>OCR Template Setup Journey</h2>
+                </div>
+                <div className={styles.progressStats}>
+                    <span>{completedSteps.size} of {journeySteps.length} steps completed</span>
+                    {hasAutoJumped && completedSteps.size > 0 && (
+                        <span style={{ 
+                            marginLeft: '0.5rem', 
+                            fontSize: '0.7rem', 
+                            background: '#e8f5e8', 
+                            color: '#155724',
+                            padding: '0.2rem 0.5rem',
+                            borderRadius: '8px'
+                        }}>
+                            ↻ Resumed
+                        </span>
+                    )}
+                </div>
+            </div>
+            
+            <div className={styles.progressSteps}>
+                {journeySteps.map((step, index) => {
+                    const isActive = currentStep === step.id;
+                    const isCompleted = completedSteps.has(step.id);
+                    const canAccess = index === 0 || isCompleted || completedSteps.has(journeySteps[index - 1].id);
+                    const IconComponent = step.icon;
+                    
+                    return (
+                        <div 
+                            key={step.id}
+                            className={`${styles.progressStep} ${isActive ? styles.active : ''} ${isCompleted ? styles.completed : ''} ${!canAccess ? styles.disabled : ''}`}
+                            onClick={() => canAccess && navigateToStep(step.id)}
+                        >
+                            <div className={styles.stepIcon}>
+                                {isCompleted ? (
+                                    <CheckCircle2 size={20} />
+                                ) : (
+                                    <IconComponent size={20} />
+                                )}
+                            </div>
+                            <div className={styles.stepInfo}>
+                                <span className={styles.stepNumber}>Step {step.id}</span>
+                                <span className={styles.stepTitle}>{step.title}</span>
+                            </div>
+                            {index < journeySteps.length - 1 && (
+                                <ChevronRight size={16} className={styles.stepArrow} />
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+
+    // Step Instructions Component
+    const StepInstructions = ({ step }) => (
+        <div className={styles.stepInstructions}>
+            <div className={styles.instructionHeader}>
+                <div className={styles.instructionIcon}>
+                    <step.icon size={24} />
+                </div>
+                <div className={styles.instructionText}>
+                    <h3>{step.title}</h3>
+                    <p>{step.description}</p>
+                </div>
+                <div className={styles.instructionToggle}>
+                    <button 
+                        className={styles.helpBtn}
+                        onClick={() => setShowStepDetails(prev => ({
+                            ...prev,
+                            [step.id]: !prev[step.id]
+                        }))}
+                    >
+                        <HelpCircle size={16} />
+                        {showStepDetails[step.id] ? 'Hide Help' : 'Show Help'}
+                    </button>
+                </div>
+            </div>
+            
+            {showStepDetails[step.id] && (
+                <div className={styles.detailedInstructions}>
+                    {getDetailedInstructions(step)}
+                </div>
+            )}
+        </div>
+    );
+
+    // Detailed instructions for each step
+    const getDetailedInstructions = (step) => {
+        switch (step.id) {
+            case 1:
+                return (
+                    <div className={styles.instructionDetails}>
+                        <div className={styles.instructionPoint}>
+                            <Info size={16} />
+                            <span>Supported formats: PDF, JPG, PNG files up to 10MB</span>
+                        </div>
+                        <div className={styles.instructionPoint}>
+                            <Target size={16} />
+                            <span>Best results: Clear text, good contrast, minimal skew</span>
+                        </div>
+                        <div className={styles.instructionPoint}>
+                            <Lightbulb size={16} />
+                            <span>System will analyze for multiple templates and auto-split if detected</span>
+                        </div>
+                    </div>
+                );
+            case 2:
+                return (
+                    <div className={styles.instructionDetails}>
+                        <div className={styles.instructionPoint}>
+                            <Eye size={16} />
+                            <span>Review extracted data organized by intelligent categories</span>
+                        </div>
+                        <div className={styles.instructionPoint}>
+                            <CheckCircle size={16} />
+                            <span>Select key-value pairs that will be useful for filename templates</span>
+                        </div>
+                        <div className={styles.instructionPoint}>
+                            <Sparkles size={16} />
+                            <span>Choose identifiers, dates, and reference numbers for unique filenames</span>
+                        </div>
+                    </div>
+                );
+            case 3:
+                return (
+                    <div className={styles.instructionDetails}>
+                        <div className={styles.instructionPoint}>
+                            <BookOpen size={16} />
+                            <span>Choose a combination of variables that uniquely identify this document type</span>
+                        </div>
+                        <div className={styles.instructionPoint}>
+                            <Info size={16} />
+                            <span>This signature helps the OCR system automatically match future documents to this template</span>
+                        </div>
+                        <div className={styles.instructionPoint}>
+                            <Target size={16} />
+                            <span>Best practice: Use 2-3 distinctive variables like document headers, format patterns, or field combinations</span>
+                        </div>
+                    </div>
+                );
+            case 4:
+                return (
+                    <div className={styles.instructionDetails}>
+                        <div className={styles.instructionPoint}>
+                            <Wand2 size={16} />
+                            <span>Design filename patterns using variables like {{invoice_number}}_{{date}}</span>
+                        </div>
+                        <div className={styles.instructionPoint}>
+                            <Zap size={16} />
+                            <span>Variables with no values are automatically skipped in the final filename</span>
+                        </div>
+                        <div className={styles.instructionPoint}>
+                            <Eye size={16} />
+                            <span>Preview shows the exact filename that will be generated for this document</span>
+                        </div>
+                    </div>
+                );
+            case 5:
+                return (
+                    <div className={styles.instructionDetails}>
+                        <div className={styles.instructionPoint}>
+                            <FolderOpen size={16} />
+                            <span>Watch folder: System continuously monitors this folder for new documents to process</span>
+                        </div>
+                        <div className={styles.instructionPoint}>
+                            <ArrowRight size={16} />
+                            <span>Destination folder: Processed files are automatically moved here with generated filenames</span>
+                        </div>
+                        <div className={styles.instructionPoint}>
+                            <Settings size={16} />
+                            <span>Once configured, the system will automatically process new files using this template</span>
+                        </div>
+                    </div>
+                );
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <div className={styles.ocrTemplateContainer}>
+            {/* Journey Progress Header */}
+            <JourneyProgress />
+            
+            {/* Current Step Instructions */}
+            <StepInstructions step={journeySteps.find(s => s.id === currentStep)} />
+            {/* Step Content */}
+            <div className={styles.stepContent}>
+                {currentStep === 1 && renderUploadStep()}
+                {currentStep === 2 && renderDataReviewStep()}
+                {currentStep === 3 && renderTitleSelectionStep()}
+                {currentStep === 4 && renderTemplateBuilderStep()}
+                {currentStep === 5 && renderFolderConfigStep()}
+            </div>
+
+            {/* Navigation Controls */}
+            <div className={styles.journeyNavigation}>
+                <button 
+                    className={styles.navBtn}
+                    onClick={() => navigateToStep(Math.max(1, currentStep - 1))}
+                    disabled={currentStep === 1}
+                >
+                    <ArrowLeft size={16} />
+                    Previous Step
+                </button>
+                
+                <div className={styles.stepIndicator}>
+                    Step {currentStep} of {journeySteps.length}
+                </div>
+                
+                <button 
+                    className={styles.navBtn}
+                    onClick={() => navigateToStep(Math.min(journeySteps.length, currentStep + 1))}
+                    disabled={currentStep === journeySteps.length}
+                >
+                    Next Step
+                    <ArrowRight size={16} />
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default OcrTemplateEnhanced;