@visns-studio/visns-components 5.14.0 → 5.14.2

package/src/components/generic/GenericDashboard.jsx

@@ -8,7 +8,7 @@ import Popup from 'reactjs-popup';
 import dayjs from 'dayjs';
 import parse from 'html-react-parser';
 import { createSwapy } from 'swapy';
-import { X, Minus, Plus, Star, Trash2 } from 'lucide-react';
+import { X, Minus, Plus, Star, Trash2, Eye, RotateCcw, Clock, Database, BarChart3, AlertCircle } from 'lucide-react';
 import { confirmDialog } from '../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
@@ -18,6 +18,34 @@ import styles from '../styles/GenericDashboard.module.scss';
 
 const toSnakeCase = (str) => str.replace(/[\s-]+/g, '_').toLowerCase();
 
+// Helper function to format dates for display in Australian format
+const formatDateForDisplay = (dateString) => {
+    if (!dateString || dateString === 'Invalid Date' || dateString === 'null' || dateString === 'undefined') {
+        return '';
+    }
+    
+    // Try to parse the date
+    const date = dayjs(dateString);
+    
+    // Check if the parsed date is valid
+    if (!date.isValid()) {
+        // If it's already in DD/MM/YYYY format, return as is
+        if (typeof dateString === 'string' && /^\d{2}\/\d{2}\/\d{4}/.test(dateString)) {
+            return dateString;
+        }
+        // Return original value if we can't parse it
+        return dateString;
+    }
+    
+    // Format with time if the original string includes time
+    if (typeof dateString === 'string' && dateString.includes(':')) {
+        return date.format('DD/MM/YYYY hh:mm A');
+    }
+    
+    // Default to date only
+    return date.format('DD/MM/YYYY');
+};
+
 const renderProgressBar = (value, options = {}) => {
     const percentage = parseFloat(value) || 0;
     const { showPercentage = true, color = 'primary' } = options;
@@ -83,13 +111,27 @@ const renderStatusMessage = (status, messages) => {
             padding: '4px 8px',
             backgroundColor: '#f8f9fa',
             borderRadius: '4px',
-            border: '1px solid #e9ecef'
+            border: '1px solid #e9ecef',
+            fontFamily: 'inherit'
         }}>
             {message}
         </div>
     );
 };
 
+const renderStatusText = (status) => {
+    // Simple text rendering without any special styling to avoid progress bar appearance
+    return (
+        <span style={{
+            fontFamily: 'inherit',
+            fontSize: '14px',
+            color: '#333'
+        }}>
+            {status || 'Unknown'}
+        </span>
+    );
+};
+
 const checkCondition = (rowData, condition) => {
     if (!condition || !rowData) return false;
     
@@ -112,6 +154,106 @@ const renderCellContent = (value, column, widget, rowData = {}) => {
     const columnFormatting = widget.columnFormatting || {};
     const formatting = columnFormatting[column];
     
+    // Handle status column FIRST - render as plain text instead of progress bar
+    if (column === 'status' || column === 'processing_status' || column.toLowerCase().includes('status')) {
+        return renderStatusText(value);
+    }
+    
+    // Handle action buttons with icons and CSS tooltips
+    if (column === 'actions' && Array.isArray(value)) {
+        return (
+            <div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
+                {value.map((action, index) => {
+                    const IconComponent = getActionIcon(action.action);
+                    return (
+                        <div
+                            key={index}
+                            className={`tooltip-container-${index}`}
+                            style={{ position: 'relative', display: 'inline-block' }}
+                            onMouseEnter={(e) => {
+                                const tooltip = e.currentTarget.querySelector('.tooltip-text');
+                                if (tooltip) {
+                                    tooltip.style.opacity = '1';
+                                    tooltip.style.visibility = 'visible';
+                                }
+                                const button = e.currentTarget.querySelector('button');
+                                if (button) {
+                                    button.style.backgroundColor = '#f8f9fa';
+                                    button.style.transform = 'translateY(-1px)';
+                                    button.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
+                                }
+                            }}
+                            onMouseLeave={(e) => {
+                                const tooltip = e.currentTarget.querySelector('.tooltip-text');
+                                if (tooltip) {
+                                    tooltip.style.opacity = '0';
+                                    tooltip.style.visibility = 'hidden';
+                                }
+                                const button = e.currentTarget.querySelector('button');
+                                if (button) {
+                                    button.style.backgroundColor = '#fff';
+                                    button.style.transform = 'translateY(0)';
+                                    button.style.boxShadow = 'none';
+                                }
+                            }}
+                        >
+                            <button
+                                onClick={() => handleActionClick(action, rowData)}
+                                style={{
+                                    padding: '6px',
+                                    borderRadius: '4px',
+                                    border: '1px solid #dee2e6',
+                                    cursor: 'pointer',
+                                    backgroundColor: '#fff',
+                                    color: getActionIconColor(action.action),
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontSize: '14px',
+                                    fontFamily: 'inherit',
+                                    transition: 'all 0.2s ease'
+                                }}
+                            >
+                                <IconComponent size={14} />
+                            </button>
+                            <div className="tooltip-text" style={{
+                                position: 'absolute',
+                                bottom: '125%',
+                                left: '50%',
+                                transform: 'translateX(-50%)',
+                                backgroundColor: '#333',
+                                color: '#fff',
+                                padding: '6px 8px',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                                fontFamily: 'inherit',
+                                whiteSpace: 'nowrap',
+                                opacity: '0',
+                                visibility: 'hidden',
+                                transition: 'opacity 0.3s, visibility 0.3s',
+                                zIndex: '1000',
+                                pointerEvents: 'none'
+                            }}>
+                                {action.label}
+                                <div style={{
+                                    position: 'absolute',
+                                    top: '100%',
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    width: 0,
+                                    height: 0,
+                                    borderLeft: '4px solid transparent',
+                                    borderRight: '4px solid transparent',
+                                    borderTop: '4px solid #333'
+                                }} />
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    }
+    
     if (formatting && formatting.type === 'progressBar') {
         return renderProgressBar(value, formatting);
     }
@@ -127,9 +269,280 @@ const renderCellContent = (value, column, widget, rowData = {}) => {
         }
     }
     
+    // Handle date columns - format for Australian display
+    const isDateColumn = column.toLowerCase().includes('date') || 
+                        column.toLowerCase().includes('_at') || 
+                        column === 'processed_at' || 
+                        column === 'failed_at' || 
+                        column === 'timestamp';
+    
+    if (isDateColumn && value && value !== 'Invalid Date') {
+        const formattedDate = formatDateForDisplay(value);
+        return <span style={{ fontFamily: 'inherit' }}>{formattedDate}</span>;
+    }
+    
+    // Ensure consistent font family for all cell content
+    if (typeof value === 'string' || typeof value === 'number') {
+        return <span style={{ fontFamily: 'inherit' }}>{value}</span>;
+    }
+    
     return value;
 };
 
+const getActionButtonColor = (className) => {
+    if (className?.includes('btn-info')) return '#17a2b8';
+    if (className?.includes('btn-warning')) return '#ffc107';
+    if (className?.includes('btn-danger')) return '#dc3545';
+    if (className?.includes('btn-success')) return '#28a745';
+    return '#6c757d'; // default
+};
+
+const getActionIcon = (actionType) => {
+    switch (actionType) {
+        case 'viewLogs':
+            return Eye;
+        case 'retry':
+            return RotateCcw;
+        default:
+            return Eye; // default icon
+    }
+};
+
+const getActionIconColor = (actionType) => {
+    switch (actionType) {
+        case 'viewLogs':
+            return '#17a2b8'; // info color
+        case 'retry':
+            return '#ffc107'; // warning color
+        default:
+            return '#6c757d'; // default
+    }
+};
+
+const handleActionClick = (action, rowData) => {
+    switch (action.action) {
+        case 'viewLogs':
+            // Open logs in a modal
+            openLogsModal(action.url, rowData);
+            break;
+        case 'retry':
+            // Handle retry action
+            if (confirm('Are you sure you want to retry processing this document?')) {
+                fetch(action.url, {
+                    method: action.method || 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    alert(data.message || 'Action completed');
+                    // Optionally refresh the widget data
+                    window.location.reload();
+                })
+                .catch(error => {
+                    console.error('Action failed:', error);
+                    alert('Action failed. Please try again.');
+                });
+            }
+            break;
+        default:
+            console.log('Unknown action:', action.action);
+    }
+};
+
+const openLogsModal = async (url, rowData) => {
+    try {
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+            }
+        });
+        
+        const data = await response.json();
+        
+        // Create and open logs modal
+        const modalHtml = createLogsModalContent(data, rowData);
+        showModal('Document Processing Logs', modalHtml);
+        
+    } catch (error) {
+        console.error('Failed to fetch logs:', error);
+        alert('Failed to load logs. Please try again.');
+    }
+};
+
+const createLogsModalContent = (data, rowData) => {
+    const { document, logs, summary } = data;
+    
+    return `
+        <div style="max-height: 70vh; overflow-y: auto;">
+            <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
+                <h4 style="margin: 0 0 10px 0; color: #333;">Document Information</h4>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; font-size: 14px;">
+                    <div><strong>File:</strong> ${document.filename}</div>
+                    <div><strong>Status:</strong> <span style="color: ${getStatusColor(document.status)}">${document.status}</span></div>
+                    <div><strong>Template:</strong> ${document.template}</div>
+                    <div><strong>Processing Time:</strong> ${summary.processing_time}</div>
+                </div>
+            </div>
+            
+            <div style="background: #fff3cd; padding: 10px; border-radius: 6px; margin-bottom: 15px; font-size: 14px;">
+                <strong>Summary:</strong> ${summary.total_logs} logs | 
+                <span style="color: #dc3545;">${summary.errors} errors</span> | 
+                <span style="color: #fd7e14;">${summary.warnings} warnings</span>
+            </div>
+            
+            <div style="max-height: 400px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 6px;">
+                ${logs.map(log => `
+                    <div style="padding: 12px; border-bottom: 1px solid #eee; ${getLogBackgroundColor(log.level)}">
+                        <div style="display: flex; justify-content: between; align-items: flex-start; margin-bottom: 8px;">
+                            <div style="flex: 1;">
+                                <span style="background: ${getLogLevelColor(log.level)}; color: white; padding: 2px 8px; border-radius: 12px; font-size: 11px; text-transform: uppercase;">${log.level}</span>
+                                <span style="color: #6c757d; font-size: 12px; margin-left: 10px;">${log.stage}</span>
+                            </div>
+                            <div style="font-size: 11px; color: #6c757d;">${log.timestamp}</div>
+                        </div>
+                        <div style="font-size: 14px; margin-bottom: 5px;">${log.message}</div>
+                        ${log.execution_time_ms ? `<div style="font-size: 12px; color: #6c757d; display: flex; align-items: center; gap: 8px;">
+                            <span style="display: inline-flex; align-items: center; gap: 4px;">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <circle cx="12" cy="12" r="10"/>
+                                    <polyline points="12,6 12,12 16,14"/>
+                                </svg>
+                                ${log.execution_time_ms}ms
+                            </span>
+                            <span style="display: inline-flex; align-items: center; gap: 4px;">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+                                    <polyline points="3.29,7 12,12 20.71,7"/>
+                                    <line x1="12" y1="22" x2="12" y2="12"/>
+                                </svg>
+                                ${log.memory_usage_mb}MB
+                            </span>
+                        </div>` : ''}
+                        ${log.details && Object.keys(log.details).length > 0 ? `
+                            <details style="margin-top: 8px;">
+                                <summary style="font-size: 12px; color: #007bff; cursor: pointer;">View Details</summary>
+                                <pre style="background: #f8f9fa; padding: 8px; border-radius: 4px; font-size: 11px; margin-top: 5px; white-space: pre-wrap;">${JSON.stringify(log.details, null, 2)}</pre>
+                            </details>
+                        ` : ''}
+                        ${log.stack_trace ? `
+                            <details style="margin-top: 8px;">
+                                <summary style="font-size: 12px; color: #dc3545; cursor: pointer;">Stack Trace</summary>
+                                <pre style="background: #f8d7da; padding: 8px; border-radius: 4px; font-size: 11px; margin-top: 5px; white-space: pre-wrap;">${log.stack_trace}</pre>
+                            </details>
+                        ` : ''}
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+    `;
+};
+
+const getStatusColor = (status) => {
+    switch (status) {
+        case 'completed': return '#28a745';
+        case 'failed': return '#dc3545';
+        case 'processing': return '#007bff';
+        case 'pending': return '#6c757d';
+        default: return '#6c757d';
+    }
+};
+
+const getLogLevelColor = (level) => {
+    switch (level.toLowerCase()) {
+        case 'error': return '#dc3545';
+        case 'warning': return '#fd7e14';
+        case 'info': return '#007bff';
+        case 'debug': return '#6c757d';
+        default: return '#6c757d';
+    }
+};
+
+const getLogBackgroundColor = (level) => {
+    switch (level.toLowerCase()) {
+        case 'error': return 'background-color: #f8d7da;';
+        case 'warning': return 'background-color: #fff3cd;';
+        default: return '';
+    }
+};
+
+const showModal = (title, content) => {
+    // Remove any existing modal
+    const existingModal = document.getElementById('logs-modal');
+    if (existingModal) {
+        existingModal.remove();
+    }
+    
+    // Create modal HTML
+    const modalHtml = `
+        <div id="logs-modal" style="
+            position: fixed; 
+            top: 0; 
+            left: 0; 
+            width: 100%; 
+            height: 100%; 
+            background: rgba(0,0,0,0.5); 
+            z-index: 10000; 
+            display: flex; 
+            align-items: center; 
+            justify-content: center;
+        ">
+            <div style="
+                background: white; 
+                border-radius: 8px; 
+                max-width: 90vw; 
+                max-height: 90vh; 
+                width: 1000px; 
+                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+                display: flex;
+                flex-direction: column;
+            ">
+                <div style="
+                    padding: 20px; 
+                    border-bottom: 1px solid #dee2e6; 
+                    display: flex; 
+                    justify-content: space-between; 
+                    align-items: center;
+                    flex-shrink: 0;
+                ">
+                    <h2 style="margin: 0; color: #333; font-size: 18px;">${title}</h2>
+                    <button onclick="document.getElementById('logs-modal').remove()" style="
+                        background: none; 
+                        border: none; 
+                        font-size: 24px; 
+                        cursor: pointer; 
+                        color: #6c757d;
+                        padding: 0;
+                        width: 30px;
+                        height: 30px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    ">&times;</button>
+                </div>
+                <div style="padding: 20px; overflow: hidden; flex: 1;">
+                    ${content}
+                </div>
+            </div>
+        </div>
+    `;
+    
+    // Add modal to page
+    document.body.insertAdjacentHTML('beforeend', modalHtml);
+    
+    // Close modal when clicking outside
+    document.getElementById('logs-modal').addEventListener('click', (e) => {
+        if (e.target.id === 'logs-modal') {
+            e.target.remove();
+        }
+    });
+};
+
+
 function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
     const swapy = useRef(null);
     const container = useRef(null);
@@ -141,8 +554,6 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
     const [data, setData] = useState({});
     const [dropdowns, setDropdowns] = useState({});
     const [filters, setFilters] = useState({});
-    const [modalShow, setModalShow] = useState(false);
-    const [modalContent, setModalContent] = useState(null);
     const [editMode, setEditMode] = useState(false);
     const [showAddWidgetModal, setShowAddWidgetModal] = useState(false);
     const [selectedAddWidgetId, setSelectedAddWidgetId] = useState('');
@@ -165,15 +576,15 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
     const getDefaultDate = (defaultValue) => {
         switch (defaultValue) {
             case 'startOfMonth':
-                return dayjs().startOf('month').format('YYYY-MM-DD');
+                return dayjs().startOf('month').format('YYYY-MM-DD'); // Keep YYYY-MM-DD for HTML date inputs
             case 'endOfMonth':
-                return dayjs().endOf('month').format('YYYY-MM-DD');
+                return dayjs().endOf('month').format('YYYY-MM-DD'); // Keep YYYY-MM-DD for HTML date inputs
             default:
                 return '';
         }
     };
 
-    // Initialize filters based on each widget’s filters.
+    // Initialize filters based on each widget's filters.
     useEffect(() => {
         const initialFilters = {};
         dashboardSetting.widgets.forEach((widget) => {
@@ -352,14 +763,6 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         }
     }, [dashboardSetting]);
 
-    const openModal = (widgetId) => {
-        setModalContent(widgetId);
-        setModalShow(true);
-    };
-
-    const closeModal = () => {
-        setModalShow(false);
-    };
 
     const handleFilterChange = (widgetId, key, value) => {
         setFilters((prevFilters) => ({
@@ -1252,6 +1655,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                                                                       ) => (
                                                                           <td
                                                                               key={`table-data-${rowIndex}-${columnIndex}`}
+                                                                              style={{ fontFamily: 'inherit' }}
                                                                           >
                                                                               {renderCellContent(
                                                                                   row[column],
@@ -1493,17 +1897,6 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                     </div>
                     {renderFilters(widget)}
                     <div>{renderWidget(widget)}</div>
-                    {widget.modal && (
-                        <div className={styles.widgetAction}>
-                            <button
-                                className={`${styles.btn} ${styles.dmore}`}
-                                onClick={() => openModal(widget.id)}
-                            >
-                                View all{' '}
-                                <span>({data[widget.id]?.length || 0})</span>
-                            </button>
-                        </div>
-                    )}
                     {editMode && (
                         <div className={styles.widgetTools}>
                             <div className={styles.resizeTools}>
@@ -1568,35 +1961,6 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
             )}
             <div className={styles.grid} ref={container}>
                 {renderWidgets()}
-                <Popup open={modalShow} onClose={closeModal} closeOnDocumentClick={false}>
-                    <div className="modalwrap top--modal modalWide">
-                        <div className="modal">
-                            <div className="modal__header">
-                                <h1>
-                                    {
-                                        dashboardSetting.modalTitles?.[
-                                            modalContent
-                                        ]
-                                    }
-                                </h1>
-                                <button
-                                    className="modal__close"
-                                    onClick={closeModal}
-                                >
-                                    <X strokeWidth={1} size={24} />
-                                </button>
-                            </div>
-                            <div className="modal__content">
-                                {modalContent &&
-                                    renderWidget(
-                                        dashboardSetting.widgets.find(
-                                            (w) => w.id === modalContent
-                                        )
-                                    )}
-                            </div>
-                        </div>
-                    </div>
-                </Popup>
                 <Popup
                     open={showAddWidgetModal}
                     onClose={() => setShowAddWidgetModal(false)}

package/src/components/generic/GenericDetail.jsx

@@ -64,6 +64,7 @@ import {
     X as CircleX,
 } from 'lucide-react';
 import { confirmDialog } from '../utils/ConfirmDialog';
+import OcrTemplateEnhanced from './OcrTemplateEnhanced';
 
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
@@ -1435,7 +1436,16 @@ function GenericDetail({
             case 'link':
                 return renderLink();
             case 'ocrTemplate':
-                return renderOcrTemplate(id);
+                return (
+                    <OcrTemplateEnhanced 
+                        id={id}
+                        data={data}
+                        setData={setData}
+                        routeParams={routeParams}
+                        urlParam={urlParam}
+                        onSave={handleOcrTemplateSave}
+                    />
+                );
             case 'options':
                 return renderOptions();
             case 'password':
@@ -2613,15 +2623,19 @@ function GenericDetail({
                                                                                 className={
                                                                                     item.size ===
                                                                                     'full'
-                                                                                        ? `${styles['fw-grid-item']} ${styles.notecolor}`
+                                                                                        ? item.type === 'ocrTemplate' 
+                                                                                            ? styles['fw-grid-item']
+                                                                                            : `${styles['fw-grid-item']} ${styles.notecolor}`
                                                                                         : null
                                                                                 }
                                                                             >
-                                                                                <strong>
-                                                                                    {item.label
-                                                                                        ? `${item.label}:`
-                                                                                        : null}
-                                                                                </strong>{' '}
+                                                                                {item.type !== 'ocrTemplate' && (
+                                                                                    <strong>
+                                                                                        {item.label
+                                                                                            ? `${item.label}:`
+                                                                                            : null}
+                                                                                    </strong>
+                                                                                )}{item.type !== 'ocrTemplate' ? ' ' : ''}
                                                                                 {item
                                                                                     .href
                                                                                     ?.url &&