@visns-studio/visns-components 5.14.0 → 5.14.2

package/src/components/styles/GenericDashboard.module.scss

@@ -417,6 +417,9 @@
     font-size: 13px;
     color: #555;
     text-align: center;
+    vertical-align: middle;
+    max-width: 200px;
+    word-wrap: break-word;
 }
 
 .table-container th {
@@ -436,6 +439,46 @@
     text-align: left;
     font-weight: bold;
     padding-left: 20px;
+    width: 15%;
+    min-width: 120px;
+}
+
+// Template column styling
+.table-container th:nth-child(2),
+.table-container td:nth-child(2) {
+    width: 20%;
+    min-width: 140px;
+}
+
+// Processed At column styling  
+.table-container th:nth-child(3),
+.table-container td:nth-child(3) {
+    width: 20%;
+    min-width: 160px;
+    font-family: monospace;
+    font-size: 12px;
+}
+
+// Status column styling
+.table-container th:nth-child(4),
+.table-container td:nth-child(4) {
+    width: 20%;
+    min-width: 180px;
+}
+
+// File size column styling
+.table-container th:nth-child(5),
+.table-container td:nth-child(5) {
+    width: 15%;
+    min-width: 100px;
+}
+
+// Actions column styling
+.table-container th:nth-child(6),
+.table-container td:nth-child(6) {
+    width: 15%;
+    min-width: 120px;
+    text-align: center;
 }
 
 .table-container td:last-child {
@@ -446,12 +489,205 @@
     border-right: none;
 }
 
+// Additional status column styling
+.table-container td:nth-child(4) {
+    font-style: italic;
+    color: #666;
+}
+
+// Additional file size column styling  
+.table-container td:nth-child(5) {
+    font-family: monospace;
+    color: #888;
+    text-align: right;
+    padding-right: 20px;
+}
+
+// Additional actions column styling
+.table-container td:nth-child(6) {
+    text-align: center;
+    padding: 8px;
+}
+
+// Improve responsive behavior
+@media (max-width: 768px) {
+    .table-container {
+        font-size: 12px;
+    }
+    
+    .table-container th,
+    .table-container td {
+        padding: 8px 10px;
+    }
+    
+    .table-container td {
+        max-width: 120px;
+    }
+}
+
 // Indicates that the widget is in edit mode with a glowing dashed border.
 .editModeWidget {
     border: 2px dashed var(--primary-color);
     box-shadow: 0 0 10px var(--primary-color);
 }
 
+// Global modal styling improvements (for Popup component modals)
+:global(.modalwrap) {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    background: rgba(var(--dark-rgb, 0, 0, 0), 0.75) !important;
+    backdrop-filter: blur(6px) !important;
+    z-index: 10000 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 20px !important;
+    box-sizing: border-box !important;
+    
+    .modal {
+        background: var(--background-color, #ffffff) !important;
+        border-radius: 16px !important;
+        box-shadow: 0 25px 80px rgba(var(--dark-rgb, 0, 0, 0), 0.4) !important;
+        max-width: 95vw !important;
+        max-height: 90vh !important;
+        width: 1200px !important;
+        display: flex !important;
+        flex-direction: column !important;
+        overflow: hidden !important;
+        animation: modalFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        margin: 0 !important;
+        position: relative !important;
+        border: 1px solid rgba(var(--primary-rgb, 0, 123, 255), 0.1) !important;
+    }
+}
+
+:global(.modal__header) {
+    background: linear-gradient(135deg, var(--primary-color, #007bff) 0%, var(--secondary-color, #6c757d) 100%) !important;
+    color: var(--light-color, #ffffff) !important;
+    padding: 24px 28px !important;
+    border-radius: 16px 16px 0 0 !important;
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    border-bottom: 1px solid rgba(var(--light-rgb, 255, 255, 255), 0.1) !important;
+    
+    h1 {
+        margin: 0 !important;
+        font-size: 20px !important;
+        font-weight: 600 !important;
+        color: var(--light-color, #ffffff) !important;
+        text-shadow: 0 1px 2px rgba(var(--dark-rgb, 0, 0, 0), 0.1) !important;
+    }
+}
+
+:global(.modal__close) {
+    background: rgba(var(--light-rgb, 255, 255, 255), 0.2) !important;
+    border: none !important;
+    color: var(--light-color, #ffffff) !important;
+    width: 32px !important;
+    height: 32px !important;
+    border-radius: 50% !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+    transition: background-color 0.2s !important;
+    
+    &:hover {
+        background: rgba(var(--light-rgb, 255, 255, 255), 0.3) !important;
+    }
+}
+
+:global(.modal__content) {
+    max-height: 70vh !important;
+    overflow-y: auto !important;
+    padding: 25px !important;
+    flex: 1 !important;
+    
+    .table-container {
+        margin-top: 0 !important;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+        
+        table {
+            font-size: 13px !important;
+        }
+        
+        th {
+            background: var(--item-color, #f8f9fa) !important;
+            color: var(--paragraph-color, #333) !important;
+            font-weight: 600 !important;
+            padding: 12px 15px !important;
+            font-size: 12px !important;
+            text-transform: uppercase !important;
+            letter-spacing: 0.5px !important;
+            border-bottom: 1px solid rgba(var(--primary-rgb, 0, 123, 255), 0.1) !important;
+        }
+        
+        td {
+            padding: 12px 15px !important;
+            vertical-align: middle !important;
+            color: var(--paragraph-color, #555) !important;
+            border-bottom: 1px solid rgba(var(--item-color-rgb, 234, 236, 240), 0.5) !important;
+        }
+        
+        tbody tr {
+            transition: background-color 0.15s ease !important;
+            
+            &:hover {
+                background-color: rgba(var(--primary-rgb, 0, 123, 255), 0.05) !important;
+            }
+        }
+    }
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+// Responsive modal behavior
+@media (max-width: 768px) {
+    .modalwrap {
+        padding: 10px;
+        
+        .modal {
+            width: 100%;
+            max-height: 95vh;
+            
+            .modal__header {
+                padding: 15px 20px;
+                
+                h1 {
+                    font-size: 18px;
+                }
+            }
+            
+            .modal__content {
+                padding: 20px;
+                
+                .table-container {
+                    font-size: 12px;
+                    
+                    th, td {
+                        padding: 8px 10px;
+                    }
+                }
+            }
+        }
+    }
+}
+
 // Container for the edit mode toggle button.
 .editButtonContainer {
     position: fixed;

package/src/index.js

@@ -70,6 +70,7 @@ import GenericQuote from './components/generic/GenericQuote';
 import GenericReport from './components/generic/GenericReport';
 import GenericSort from './components/generic/GenericSort';
 import NotificationList from './components/generic/NotificationList';
+import OcrTemplateEnhanced from './components/generic/OcrTemplateEnhanced';
 import StagePopupModal from './components/generic/StagePopupModal';
 
 /** Proposal Components */
@@ -132,6 +133,7 @@ export {
     Navigation,
     Notification,
     NotificationList,
+    OcrTemplateEnhanced,
     Profile,
     ProposalTemplateSectionManager,
     ProposalTemplatePreview,