@visns-studio/visns-components 5.14.0 → 5.14.2

package/README.md

@@ -2312,6 +2312,247 @@ The QrCode component fetches QR code data from the specified URL and displays it
 }
 ```
 
+### Enhanced OCR Template Component
+
+#### OcrTemplateEnhanced (v5.14.0+)
+
+The Enhanced OCR Template component provides a modern, guided journey experience for creating OCR document processing templates. This component transforms the basic OCR template functionality into a comprehensive 5-step workflow for automated document processing.
+
+```jsx
+import { OcrTemplateEnhanced } from '@visns-studio/visns-components';
+
+<OcrTemplateEnhanced 
+  id="customer_job_template"
+  data={formData}
+  setData={setFormData}
+  routeParams={routeParams}
+  urlParam="id"
+  onSave={handleOcrTemplateSave}
+/>
+```
+
+**Key Features:**
+
+1. **Guided Journey UX**: 5-step workflow with visual progress tracking
+2. **Smart Data Categorization**: Automatic classification of extracted data
+3. **Template Matching**: Create unique document signatures for automated detection
+4. **Intelligent Filename Generation**: Dynamic filename templates with empty variable handling
+5. **Automated Processing Setup**: Configure watch and destination folders
+6. **Auto-Resume**: Automatically jumps to latest completed step for existing templates
+
+#### Workflow Overview
+
+The Enhanced OCR Template follows a structured 5-step journey:
+
+**Step 1: Upload Document**
+- Compact drag-and-drop interface for PDF, JPG, PNG files (up to 10MB)
+- Real-time processing feedback with progress indicators
+- File preview with metadata display
+
+**Step 2: Select Data for Template**
+- Intelligent data categorization into 5 groups:
+  - 📞 Contact Information (email, phone, names, addresses)
+  - 💰 Financial Data (amounts, prices, costs, currency symbols)
+  - 📅 Dates & Times (dates, timestamps, various formats)
+  - 🔢 Identifiers (IDs, invoice numbers, references, codes)
+  - 📄 Other Data (miscellaneous key-value pairs)
+- Empty categories automatically hidden
+- Card-based selection with confidence scoring
+
+**Step 3: Define Template Signature**
+- Select text patterns that uniquely identify the document type
+- Used by OCR system to automatically match documents to templates
+- Guidance for creating effective document fingerprints
+
+**Step 4: Craft Filename Template**
+- Design filename patterns using selected variables
+- Smart variable handling: empty variables automatically removed
+- Real-time preview of generated filenames
+- Template validation and suggestions
+
+**Step 5: Setup Automation Folders**
+- Configure watch folder for continuous monitoring
+- Set destination folder for processed files
+- Visual workflow preview showing the automation pipeline
+
+#### Integration in GenericDetail
+
+The Enhanced OCR Template automatically replaces the original when using `type: 'ocrTemplate'`:
+
+```javascript
+{
+  id: 'document_processor',
+  type: 'ocrTemplate',
+  label: 'Document OCR Processing' // Label automatically hidden
+}
+```
+
+#### Smart Data Categorization
+
+The component uses enhanced pattern recognition for intelligent data classification:
+
+```javascript
+// Enhanced categorization patterns
+const categories = {
+  contact: {
+    patterns: [
+      /email|e-mail|mail/i,
+      /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/,
+      /phone|tel|mobile|cell|fax/i,
+      /^[\+]?[\d\s\-\(\)]{7,15}$/,
+      /name|client|customer|company|organisation/i,
+      /address|street|city|state|country|zip/i
+    ],
+    confidence: 0.8-0.95
+  },
+  financial: {
+    patterns: [
+      /amount|price|cost|total|sum|value|fee|charge/i,
+      /[$€£¥₹]/,
+      /^\d+[.,]\d{2}$/,
+      /^\d+\.?\d*$/
+    ],
+    confidence: 0.85
+  },
+  // ... other categories
+};
+```
+
+#### Filename Template Logic
+
+The filename generation intelligently handles empty variables:
+
+```javascript
+// Template examples with smart variable handling
+template: "{{invoice_number}}_{{date}}_{{amount}}"
+
+// With all values: "INV001_2025-01-15_1500.00"
+// Missing amount: "INV001_2025-01-15" (amount automatically removed)
+// Missing date: "INV001_1500.00" (date automatically removed)
+
+// Smart cleanup
+// Multiple separators: "Company__Invoice" → "Company_Invoice"  
+// Leading/trailing: "_Invoice_" → "Invoice"
+// Adjacent empty variables: "{{a}}_{{empty}}_{{c}}" → "value_a_value_c"
+```
+
+#### Automated Processing Workflow
+
+Once configured, the system provides fully automated document processing:
+
+```
+1. New documents → Watch Folder
+2. System detects & processes using template signature  
+3. OCR extracts data using selected variables
+4. Generate filename using template pattern
+5. Move processed files → Destination Folder
+```
+
+#### API Integration
+
+The component integrates with backend OCR processing:
+
+```javascript
+// OCR Analysis Endpoint
+POST /ajax/ocr/analyzeFile
+Content-Type: multipart/form-data
+
+{
+  file: [uploaded document],
+  template_id: [template identifier]
+}
+
+// Response
+{
+  keyValuePairs: {
+    "invoice_number": "INV-001",
+    "amount": "1500.00", 
+    "date": "2025-01-15",
+    "client_name": "ACME Corp"
+  },
+  allText: [
+    "INVOICE INV-001",
+    "Date: 2025-01-15",
+    "Amount: $1,500.00",
+    "Client: ACME Corp"
+  ]
+}
+```
+
+#### Auto-Resume Functionality
+
+The component automatically detects existing template progress and jumps to the appropriate step:
+
+- **Fully completed template**: Jump to Step 5 (Setup Automation Folders)
+- **Partially completed**: Jump to next incomplete step
+- **New template**: Start at Step 1 (Upload Document)
+
+Shows "↻ Resumed" badge when auto-jumping occurs.
+
+#### Navigation Features
+
+- **Smart Step Access**: Users can navigate to any completed step
+- **Visual Progress**: Clear indication of completed vs pending steps
+- **Manual Override**: Auto-jump only occurs once, then full manual control
+- **Breadcrumb Navigation**: Previous/Next buttons with logical flow control
+
+#### Advanced Features
+
+**Template Suggestions**: Automatically generated based on detected document patterns
+```javascript
+// Auto-detected patterns
+{
+  name: "Invoice Template",
+  filename: "INV_{{invoice_number}}_{{date}}",
+  description: "Standard invoice naming convention"
+}
+```
+
+**Confidence Scoring**: Each extracted data field includes accuracy assessment
+- **High (80%+)**: Green badge, reliable data
+- **Medium (60-79%)**: Yellow badge, moderate confidence  
+- **Low (<60%)**: Red badge, requires verification
+
+**Responsive Design**: Optimized for desktop and mobile with adaptive layouts
+
+#### Styling Customization
+
+The component uses CSS modules with customizable variables:
+
+```scss
+.ocrTemplateContainer {
+  --primary-color: #007bff;
+  --success-color: #28a745;
+  --warning-color: #ffc107;
+  min-height: 500px; // Compact design
+}
+```
+
+#### Migration from Original OCR Template
+
+The Enhanced OCR Template is a drop-in replacement requiring no configuration changes:
+
+```javascript
+// Before (original)
+case 'ocrTemplate':
+  return renderOcrTemplate(id);
+
+// After (enhanced) - automatic replacement
+case 'ocrTemplate':
+  return (
+    <OcrTemplateEnhanced 
+      id={id}
+      data={data}
+      setData={setData}
+      routeParams={routeParams}
+      urlParam={urlParam}
+      onSave={handleOcrTemplateSave}
+    />
+  );
+```
+
+All existing data structures and API endpoints remain compatible.
+
 #### AuditLogs and AuditLog
 
 The AuditLogs component displays a table of system activity logs, showing who made changes, what was changed, and when the changes occurred.

package/package.json

@@ -24,13 +24,13 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.23.5",
+        "framer-motion": "^12.23.6",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.525.0",
         "moment": "^2.30.1",
-        "motion": "^12.23.5",
+        "motion": "^12.23.6",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -88,7 +88,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.14.0",
+    "version": "5.14.2",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [