Merge main

Author: Oli0li

.tool-versions

@@ -1 +1,2 @@
 ruby 3.4.6
+nodejs 24.9.0

Gemfile

@@ -9,6 +9,7 @@ gem "azure_file_shares"
 gem "bcrypt", "~> 3.1.7"
 gem "bootsnap", require: false
 gem "csv"
+gem "herb", "~> 0.8.0"
 gem "image_processing", "~> 1.14"
 gem "importmap-rails"
 gem "jbuilder"
@@ -21,6 +22,7 @@ gem "propshaft"
 gem "puma", ">= 5.0"
 gem "rack-attack"
 gem "rails", "~> 8.0.4"
+gem "reactionview", "~> 0.1.6"
 gem "requestjs-rails"
 gem "scout_apm"
 gem "scout_apm_logging", "~> 2.1"

Gemfile.lock

@@ -88,19 +88,19 @@ GEM
       activesupport (>= 6.0.0)
     ast (2.4.3)
     aws-eventstream (1.4.0)
-    aws-partitions (1.1177.0)
-    aws-sdk-core (3.235.0)
+    aws-partitions (1.1181.0)
+    aws-sdk-core (3.237.0)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.992.0)
       aws-sigv4 (~> 1.9)
       base64
       bigdecimal
       jmespath (~> 1, >= 1.6.1)
       logger
-    aws-sdk-kms (1.115.0)
+    aws-sdk-kms (1.117.0)
       aws-sdk-core (~> 3, >= 3.234.0)
       aws-sigv4 (~> 1.5)
-    aws-sdk-s3 (1.201.0)
+    aws-sdk-s3 (1.203.1)
       aws-sdk-core (~> 3, >= 3.234.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.5)
@@ -117,7 +117,7 @@ GEM
     benchmark (0.5.0)
     bigdecimal (3.3.1)
     bindex (0.8.1)
-    bootsnap (1.18.6)
+    bootsnap (1.19.0)
       msgpack (~> 1.2)
     brakeman (7.1.1)
       racc
@@ -212,6 +212,12 @@ GEM
       rake (>= 13)
     googleapis-common-protos-types (1.22.0)
       google-protobuf (~> 4.26)
+    herb (0.8.0)
+    herb (0.8.0-aarch64-linux-gnu)
+    herb (0.8.0-aarch64-linux-musl)
+    herb (0.8.0-arm-linux-gnu)
+    herb (0.8.0-arm-linux-musl)
+    herb (0.8.0-x86_64-linux-musl)
     hotwire-spark (0.1.13)
       listen
       rails (>= 7.0.0)
@@ -436,6 +442,9 @@ GEM
       erb
       psych (>= 4.0.0)
       tsort
+    reactionview (0.1.6)
+      actionview (>= 7.0)
+      herb (>= 0.7.5, < 1.0.0)
     regexp_parser (2.11.3)
     reline (0.6.2)
       io-console (~> 0.5)
@@ -615,6 +624,7 @@ DEPENDENCIES
   dotenv-rails
   factory_bot_rails
   faker
+  herb (~> 0.8.0)
   hotwire-spark
   image_processing (~> 1.14)
   importmap-rails
@@ -631,6 +641,7 @@ DEPENDENCIES
   rack-mini-profiler
   rails (~> 8.0.4)
   rails-controller-testing
+  reactionview (~> 0.1.6)
   requestjs-rails
   rspec-rails
   rubocop-rails-omakase

app/views/import_reports/show.html.erb

@@ -8,7 +8,7 @@
 
 <div style="min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 2rem 0;">
   <div style="max-width: 1000px; margin: 0 auto; padding: 0 1rem;">
-    
+
     <!-- Header Section -->
     <div style="margin-bottom: 2rem;">
       <div style="display: flex; align-items: center; justify-content: between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;">
@@ -36,7 +36,7 @@
           <% end %>
         </div>
       </div>
-      
+
       <!-- Breadcrumb -->
       <nav style="font-size: 0.875rem; color: #6b7280;">
         <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
@@ -51,11 +51,11 @@
 
     <!-- Main Content -->
     <div id="<%= dom_id @import_report %>">
-      
+
       <!-- Import Details Section -->
       <div style="margin-bottom: 2rem;">
         <div style="background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid #e5e7eb;">
-          
+
           <!-- Card Header -->
           <div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); padding: 2rem; color: white;">
             <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
@@ -66,11 +66,11 @@
             </div>
             <p style="margin: 0; opacity: 0.9; font-size: 0.875rem;">Import operation information and statistics</p>
           </div>
-          
+
           <!-- Card Body -->
           <div style="padding: 2rem;">
             <div style="display: grid; gap: 1.5rem;">
-              
+
               <!-- Status -->
               <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
                 <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
@@ -104,7 +104,7 @@
                   <% end %>
                 </div>
               </div>
-              
+
               <!-- Import Type -->
               <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
                 <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
@@ -117,7 +117,7 @@
                   <%= @import_report.import_type.humanize %>
                 </div>
               </div>
-              
+
               <!-- Started At -->
               <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
                 <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
@@ -130,7 +130,7 @@
                   <%= @import_report.started_at&.strftime('%B %d, %Y at %I:%M %p') || "Not started" %>
                 </div>
               </div>
-              
+
               <!-- Completed At -->
               <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
                 <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
@@ -143,7 +143,7 @@
                   <%= @import_report.completed_at&.strftime('%B %d, %Y at %I:%M %p') || "Not completed" %>
                 </div>
               </div>
-              
+
               <!-- Created -->
               <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
                 <div style="font-weight: 600; color: #374151; display: flex; align-items: center; gap: 0.5rem;">
@@ -156,7 +156,7 @@
                   <%= @import_report.created_at.strftime('%B %d, %Y at %I:%M %p') %>
                 </div>
               </div>
-              
+
               <!-- Summary Stats -->
               <% if @import_report.summary_stats.present? %>
                 <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 0.5rem; border-left: 4px solid #3b82f6;">
@@ -171,7 +171,7 @@
                   </div>
                 </div>
               <% end %>
-              
+
             </div>
           </div>
         </div>
@@ -180,7 +180,7 @@
       <!-- Import Errors Section -->
       <div style="margin-bottom: 2rem;">
         <div style="background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); overflow: hidden; border: 1px solid #e5e7eb;">
-          
+
           <!-- Card Header -->
           <div style="background: linear-gradient(135deg, <%= @import_errors.any? ? '#dc2626 0%, #b91c1c 100%' : '#10b981 0%, #059669 100%' %>); padding: 2rem; color: white;">
             <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
@@ -203,15 +203,15 @@
                   </p>
                 </div>
               </div>
-              
+
               <div style="display: flex; gap: 0.75rem; align-items: center;">
                 <div style="background: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;">
                   Total: <%= @import_errors.count %>
                 </div>
               </div>
             </div>
           </div>
-          
+
           <!-- Table Content -->
           <div style="padding: 0;">
             <% if @import_errors.any? %>
@@ -311,116 +311,116 @@
     transform: translateY(-2px) !important;
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25) !important;
   }
-  
+
   /* Responsive design */
   @media (max-width: 768px) {
     /* Container adjustments */
     div[style*="max-width: 1000px"] {
       padding: 0 1rem !important;
       margin: 0 auto !important;
     }
-    
+
     /* Page padding adjustments */
     div[style*="min-height: 100vh"] {
       padding: 1rem 0 !important;
     }
-    
+
     /* Header adjustments */
     div[style*="justify-content: between"] {
       flex-direction: column !important;
       align-items: flex-start !important;
       gap: 1rem !important;
     }
-    
+
     /* Title adjustments */
     h1 {
       font-size: 1.75rem !important;
     }
-    
+
     /* Card adjustments - prevent overflow */
     div[style*="border-radius: 1rem"] {
       border-radius: 0.5rem !important;
       margin: 0 !important;
       max-width: 100% !important;
       box-sizing: border-box !important;
     }
-    
+
     /* Grid adjustments */
     div[style*="grid-template-columns: 1fr 2fr"] {
       grid-template-columns: 1fr !important;
       gap: 0.5rem !important;
     }
-    
+
     /* Card padding adjustments */
     div[style*="padding: 2rem"] {
       padding: 1.5rem 1rem !important;
     }
-    
+
     /* Table adjustments */
     th, td {
       padding: 0.75rem 0.5rem !important;
       font-size: 0.875rem !important;
     }
-    
+
     /* Make tables more responsive */
     .table-container {
       margin: 0 !important;
       padding: 0 !important;
     }
-    
+
     /* Ensure table fits */
     table {
       min-width: 100% !important;
       width: 100% !important;
     }
   }
-  
+
   @media (max-width: 640px) {
     /* Very small screen adjustments */
     div[style*="max-width: 1000px"] {
       padding: 0 0.5rem !important;
     }
-    
+
     /* Ensure no overflow */
     * {
       max-width: 100% !important;
       box-sizing: border-box !important;
     }
-    
+
     /* Remove border radius on very small screens */
     div[style*="border-radius: 1rem"] {
       border-radius: 0.25rem !important;
       margin: 0 !important;
     }
-    
+
     /* More compact padding */
     div[style*="padding: 2rem"] {
       padding: 1rem 0.75rem !important;
     }
-    
+
     div[style*="padding: 1.5rem"] {
       padding: 1rem !important;
     }
-    
+
     /* More compact table */
     th, td {
       padding: 0.5rem 0.25rem !important;
       font-size: 0.75rem !important;
       word-wrap: break-word !important;
       word-break: break-word !important;
     }
-    
+
     /* Prevent horizontal scroll */
     body, html {
       overflow-x: hidden !important;
     }
-    
+
     /* Ensure cards don't exceed viewport */
     div[style*="background: white"] {
       max-width: calc(100vw - 1rem) !important;
       overflow: hidden !important;
     }
-    
+
     /* Better pre formatting for small screens */
     pre {
       font-size: 0.625rem !important;