data_porter 0.2.0 → 0.5.0

data/app/assets/stylesheets/data_porter/base.css

@@ -0,0 +1,56 @@
+:root {
+  --dp-primary: #4f46e5;
+  --dp-primary-hover: #4338ca;
+  --dp-primary-light: #eef2ff;
+  --dp-success: #059669;
+  --dp-success-light: #ecfdf5;
+  --dp-success-border: #a7f3d0;
+  --dp-warning: #d97706;
+  --dp-warning-light: #fffbeb;
+  --dp-warning-border: #fde68a;
+  --dp-danger: #dc2626;
+  --dp-danger-hover: #b91c1c;
+  --dp-danger-light: #fef2f2;
+  --dp-danger-border: #fecaca;
+  --dp-info: #2563eb;
+  --dp-info-light: #eff6ff;
+  --dp-info-border: #bfdbfe;
+  --dp-purple: #7c3aed;
+  --dp-purple-light: #f5f3ff;
+  --dp-purple-border: #ddd6fe;
+  --dp-gray-50: #f9fafb;
+  --dp-gray-100: #f3f4f6;
+  --dp-gray-200: #e5e7eb;
+  --dp-gray-300: #d1d5db;
+  --dp-gray-400: #9ca3af;
+  --dp-gray-500: #6b7280;
+  --dp-gray-600: #4b5563;
+  --dp-gray-700: #374151;
+  --dp-gray-800: #1f2937;
+  --dp-gray-900: #111827;
+  --dp-radius-sm: 0.375rem;
+  --dp-radius-md: 0.5rem;
+  --dp-radius-lg: 0.75rem;
+  --dp-radius-xl: 1rem;
+  --dp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --dp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --dp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
+}
+
+.data-porter {
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
+  color: var(--dp-gray-800);
+  max-width: 1100px;
+  margin: 2rem auto;
+  padding: 0 1.5rem;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+.dp-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.025em;
+  color: var(--dp-gray-900);
+}

data/app/assets/stylesheets/data_porter/cards.css

@@ -0,0 +1,60 @@
+.dp-summary-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.dp-card {
+  padding: 1.25rem;
+  border-radius: var(--dp-radius-lg);
+  border: 1px solid var(--dp-gray-200);
+  text-align: center;
+  background: white;
+  box-shadow: var(--dp-shadow-sm);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.dp-card:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--dp-shadow-md);
+}
+
+.dp-card strong {
+  display: block;
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+  letter-spacing: -0.025em;
+}
+
+.dp-card span {
+  font-size: 0.8rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dp-card--complete {
+  border-color: var(--dp-success-border);
+  background: var(--dp-success-light);
+}
+.dp-card--complete strong { color: var(--dp-success); }
+
+.dp-card--partial {
+  border-color: var(--dp-warning-border);
+  background: var(--dp-warning-light);
+}
+.dp-card--partial strong { color: var(--dp-warning); }
+
+.dp-card--missing {
+  border-color: var(--dp-danger-border);
+  background: var(--dp-danger-light);
+}
+.dp-card--missing strong { color: var(--dp-danger); }
+
+.dp-card--duplicate {
+  border-color: var(--dp-gray-300);
+  background: var(--dp-gray-50);
+}
+.dp-card--duplicate strong { color: var(--dp-gray-500); }

data/app/assets/stylesheets/data_porter/layout.css

@@ -0,0 +1,147 @@
+.dp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--dp-gray-200);
+}
+
+.dp-header__actions { display: flex; align-items: center; gap: 0.75rem; }
+
+.dp-form {
+  max-width: 520px;
+  background: white;
+  padding: 2rem;
+  border: 1px solid var(--dp-gray-200);
+  border-radius: var(--dp-radius-lg);
+  box-shadow: var(--dp-shadow-md);
+}
+
+.dp-field { margin-bottom: 1.5rem; }
+
+.dp-label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--dp-gray-700);
+}
+
+.dp-select, .dp-file-input {
+  display: block;
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid var(--dp-gray-300);
+  border-radius: var(--dp-radius-md);
+  font-size: 0.9375rem;
+  background: white;
+  color: var(--dp-gray-800);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  appearance: none;
+}
+
+.dp-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+}
+
+.dp-select:focus, .dp-file-input:focus {
+  outline: none;
+  border-color: var(--dp-primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
+}
+
+.dp-actions { display: flex; gap: 0.75rem; margin: 2rem 0; }
+
+.dp-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.625rem 1.25rem;
+  border-radius: var(--dp-radius-md);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  line-height: 1.25;
+}
+
+.dp-btn:active { transform: scale(0.98); }
+.dp-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }
+
+.dp-btn .dp-spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 0.5em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: dp-spin 0.6s linear infinite;
+  vertical-align: -0.125em;
+}
+
+@keyframes dp-spin {
+  to { transform: rotate(360deg); }
+}
+
+.dp-btn--primary { background: var(--dp-primary); color: white; box-shadow: var(--dp-shadow-sm); }
+.dp-btn--primary:hover { background: var(--dp-primary-hover); box-shadow: var(--dp-shadow-md); }
+
+.dp-btn--secondary { background: white; color: var(--dp-gray-700); border-color: var(--dp-gray-300); box-shadow: var(--dp-shadow-sm); }
+.dp-btn--secondary:hover { background: var(--dp-gray-50); border-color: var(--dp-gray-400); }
+
+.dp-btn--danger { background: var(--dp-danger); color: white; box-shadow: var(--dp-shadow-sm); }
+.dp-btn--danger:hover { background: var(--dp-danger-hover); box-shadow: var(--dp-shadow-md); }
+
+.dp-btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
+
+.dp-link { color: var(--dp-primary); text-decoration: none; font-weight: 500; transition: color 0.15s ease; }
+.dp-link:hover { color: var(--dp-primary-hover); text-decoration: underline; }
+
+.dp-nav { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--dp-gray-200); }
+.dp-empty { text-align: center; padding: 3rem 1rem; color: var(--dp-gray-400); font-size: 0.9375rem; }
+
+.dp-empty-state {
+  text-align: center;
+  padding: 4rem 2rem;
+  background: white;
+  border: 2px dashed var(--dp-gray-300);
+  border-radius: var(--dp-radius-xl);
+}
+
+.dp-empty-state__icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.6; }
+.dp-empty-state__text { font-size: 1.125rem; color: var(--dp-gray-500); margin: 0 0 1.5rem; }
+
+.dp-import-details {
+  background: white;
+  padding: 1.5rem;
+  border: 1px solid var(--dp-gray-200);
+  border-radius: var(--dp-radius-lg);
+  margin-bottom: 2rem;
+}
+
+.dp-details-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem 1.5rem;
+  margin: 0;
+  font-size: 0.9375rem;
+}
+
+.dp-details-grid dt {
+  font-weight: 600;
+  color: var(--dp-gray-500);
+}
+
+.dp-details-grid dd {
+  margin: 0;
+  color: var(--dp-gray-800);
+}

data/app/assets/stylesheets/data_porter/mapping.css

@@ -0,0 +1,79 @@
+.dp-mapping-form {
+  max-width: 700px;
+  background: white;
+  padding: 2rem;
+  border: 1px solid var(--dp-gray-200);
+  border-radius: var(--dp-radius-lg);
+  box-shadow: var(--dp-shadow-md);
+}
+
+.dp-mapping-template {
+  margin-bottom: 1.5rem;
+}
+
+.dp-mapping-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.dp-mapping-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--dp-gray-50);
+  border: 1px solid var(--dp-gray-200);
+  border-radius: var(--dp-radius-md);
+  transition: border-color 0.15s ease;
+}
+
+.dp-mapping-row:hover {
+  border-color: var(--dp-gray-300);
+}
+
+.dp-mapping-row__header {
+  flex: 1;
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--dp-gray-800);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dp-mapping-row__arrow {
+  color: var(--dp-gray-400);
+  font-size: 1.125rem;
+  flex-shrink: 0;
+}
+
+.dp-mapping-row__select {
+  flex: 1;
+}
+
+.dp-mapping-row--duplicate {
+  border-color: #f59e0b;
+  background: #fffbeb;
+}
+
+.dp-mapping-required-warning,
+.dp-mapping-duplicate-warning {
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  border-radius: var(--dp-radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.dp-mapping-required-warning {
+  background: #fef2f2;
+  border: 1px solid #fca5a5;
+  color: #991b1b;
+}
+
+.dp-mapping-duplicate-warning {
+  background: #fffbeb;
+  border: 1px solid #fcd34d;
+  color: #92400e;
+}

data/app/assets/stylesheets/data_porter/modal.css

@@ -0,0 +1,49 @@
+.dp-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
+.dp-modal--open { display: flex; }
+.dp-modal__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); }
+.dp-modal__content {
+  position: relative;
+  background: white;
+  border-radius: var(--dp-radius-xl);
+  box-shadow: var(--dp-shadow-lg), 0 25px 50px -12px rgba(0,0,0,0.15);
+  width: 100%;
+  max-width: 520px;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: dp-modal-in 0.2s ease-out;
+}
+
+@keyframes dp-modal-in {
+  from { opacity: 0; transform: scale(0.95) translateY(10px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.dp-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 0; }
+.dp-modal__title { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--dp-gray-900); }
+.dp-modal__close { background: none; border: none; font-size: 1.5rem; color: var(--dp-gray-400); cursor: pointer; padding: 0.25rem; line-height: 1; border-radius: var(--dp-radius-sm); transition: color 0.15s ease, background 0.15s ease; }
+.dp-modal__close:hover { color: var(--dp-gray-700); background: var(--dp-gray-100); }
+.dp-modal__body { padding: 1.5rem; }
+.dp-modal__footer { display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 0.5rem; border-top: 1px solid var(--dp-gray-100); margin-top: 0.5rem; padding-top: 1.5rem; }
+
+.dp-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1.5rem;
+  border: 2px dashed var(--dp-gray-300);
+  border-radius: var(--dp-radius-lg);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background 0.15s ease;
+  text-align: center;
+}
+
+.dp-dropzone:hover, .dp-dropzone--dragover { border-color: var(--dp-primary); background: var(--dp-primary-light); }
+.dp-dropzone--has-file { border-color: var(--dp-success); background: var(--dp-success-light); border-style: solid; }
+.dp-dropzone__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
+.dp-dropzone__content { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
+.dp-dropzone__icon { font-size: 2rem; opacity: 0.5; }
+.dp-dropzone__text { font-size: 0.9375rem; color: var(--dp-gray-600); }
+.dp-dropzone__text strong { color: var(--dp-primary); }
+.dp-dropzone__hint { font-size: 0.8rem; color: var(--dp-gray-400); }
+.dp-dropzone__selected { font-size: 0.875rem; font-weight: 600; color: var(--dp-success); margin-top: 0.5rem; }

data/app/assets/stylesheets/data_porter/preview.css

@@ -0,0 +1,24 @@
+.dp-preview-table {
+  overflow-x: auto;
+  margin-bottom: 2rem;
+  border-radius: var(--dp-radius-lg);
+  border: 1px solid var(--dp-gray-200);
+  box-shadow: var(--dp-shadow-sm);
+}
+
+.dp-preview-table .dp-table {
+  margin-bottom: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.dp-row--complete { background: var(--dp-success-light); }
+.dp-row--partial { background: var(--dp-warning-light); }
+.dp-row--missing { background: var(--dp-danger-light); }
+
+.dp-errors {
+  color: var(--dp-danger);
+  font-size: 0.8rem;
+  font-weight: 500;
+}

data/app/assets/stylesheets/data_porter/progress.css

@@ -0,0 +1,62 @@
+.dp-progress-container {
+  margin: 2rem 0;
+  padding: 2rem;
+  background: white;
+  border: 1px solid var(--dp-gray-200);
+  border-radius: var(--dp-radius-lg);
+  box-shadow: var(--dp-shadow-sm);
+  text-align: center;
+}
+
+.dp-progress-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--dp-gray-500);
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dp-progress {
+  background: var(--dp-gray-100);
+  border-radius: 9999px;
+  overflow: hidden;
+  height: 1.5rem;
+  border: 1px solid var(--dp-gray-200);
+}
+
+.dp-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--dp-primary), #818cf8, var(--dp-primary));
+  background-size: 200% 100%;
+  animation: dp-gradient-flow 3s ease infinite;
+  border-radius: 9999px;
+  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  min-width: 2.25rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.dp-progress-bar::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
+  animation: dp-shimmer 2s infinite;
+}
+
+@keyframes dp-gradient-flow {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+
+@keyframes dp-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}

data/app/assets/stylesheets/data_porter/table.css

@@ -0,0 +1,51 @@
+.dp-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-bottom: 1.5rem;
+  background: white;
+  border: 1px solid var(--dp-gray-200);
+  border-radius: var(--dp-radius-lg);
+  overflow: hidden;
+  box-shadow: var(--dp-shadow-sm);
+}
+
+.dp-table th,
+.dp-table td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+}
+
+.dp-table th {
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--dp-gray-500);
+  background: var(--dp-gray-50);
+  border-bottom: 1px solid var(--dp-gray-200);
+}
+
+.dp-table td {
+  font-size: 0.875rem;
+  color: var(--dp-gray-700);
+  border-bottom: 1px solid var(--dp-gray-100);
+}
+
+.dp-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.dp-table tbody tr {
+  transition: background-color 0.15s ease;
+}
+
+.dp-table tbody tr:hover {
+  background: var(--dp-gray-50);
+}
+
+.dp-table__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}

data/app/controllers/data_porter/imports_controller.rb

@@ -2,29 +2,27 @@
 
 module DataPorter
   class ImportsController < DataPorter.configuration.parent_controller.constantize
-    before_action :set_import, only: %i[show parse confirm cancel dry_run]
+    layout "data_porter/application"
+
+    before_action :set_import, only: %i[show parse confirm cancel dry_run update_mapping status destroy]
+    before_action :load_targets, only: %i[index new create]
 
     def index
       @imports = DataPorter::DataImport.order(created_at: :desc)
-      @targets = DataPorter::Registry.available
     end
 
     def new
       @import = DataPorter::DataImport.new
-      @targets = DataPorter::Registry.available
     end
 
     def create
-      @import = DataPorter::DataImport.new(import_params)
-      @import.user = current_user if respond_to?(:current_user, true)
-      @import.status = :pending
+      build_import
 
-      if @import.save
-        DataPorter::ParseJob.perform_later(@import.id)
+      if valid_source_for_target? && valid_file_presence? && @import.save
+        enqueue_after_create
         redirect_to import_path(@import)
       else
-        @targets = DataPorter::Registry.available
-        render :new
+        render :new, status: :unprocessable_entity
       end
     end
 
@@ -32,6 +30,7 @@ module DataPorter
       @target = @import.target_class
       @records = @import.records
       @grouped = @records.group_by(&:status)
+      load_mapping_data if @import.mapping?
     end
 
     def parse
@@ -40,7 +39,15 @@ module DataPorter
       redirect_to import_path(@import)
     end
 
+    def update_mapping
+      save_column_mapping
+      save_template_if_requested
+      DataPorter::ParseJob.perform_later(@import.id)
+      redirect_to import_path(@import)
+    end
+
     def confirm
+      @import.update!(status: :pending)
       DataPorter::ImportJob.perform_later(@import.id)
       redirect_to import_path(@import)
     end
@@ -51,18 +58,97 @@ module DataPorter
     end
 
     def dry_run
+      @import.update!(status: :pending)
       DataPorter::DryRunJob.perform_later(@import.id)
       redirect_to import_path(@import)
     end
 
+    def status
+      progress = @import.config["progress"] || {}
+      render json: { status: @import.status, progress: progress }
+    end
+
+    def destroy
+      @import.file.purge if @import.file.attached?
+      @import.destroy!
+      redirect_to imports_path
+    end
+
     private
 
     def set_import
       @import = DataPorter::DataImport.find(params[:id])
     end
 
+    def load_targets
+      @targets = DataPorter::Registry.available
+    end
+
+    def build_import
+      @import = DataPorter::DataImport.new(import_params)
+      @import.user = current_user if respond_to?(:current_user, true)
+      @import.status = :pending
+    end
+
     def import_params
       params.require(:data_import).permit(:target_key, :source_type, :file, config: {})
     end
+
+    def valid_source_for_target?
+      target = DataPorter::Registry.find(@import.target_key)
+      allowed = target._sources || DataPorter.configuration.enabled_sources
+      return true if allowed.map(&:to_s).include?(@import.source_type.to_s)
+
+      @import.errors.add(:source_type, "#{@import.source_type} is not available for this target")
+      false
+    end
+
+    def valid_file_presence?
+      return true unless %w[csv json xlsx].include?(@import.source_type)
+      return true if @import.file.attached?
+
+      @import.errors.add(:file, "must be attached for #{@import.source_type.upcase} imports")
+      false
+    end
+
+    def enqueue_after_create
+      if @import.file_based?
+        DataPorter::ExtractHeadersJob.perform_later(@import.id)
+      else
+        DataPorter::ParseJob.perform_later(@import.id)
+      end
+    end
+
+    def load_mapping_data
+      target = @import.target_class
+      columns = target._columns || []
+      @file_headers = @import.config["file_headers"] || []
+      @target_columns = columns.map { |c| [c.label, c.name.to_s, c.required] }
+      @default_mapping = (target._csv_mappings || {}).transform_values(&:to_s)
+      @templates = load_templates
+    end
+
+    def load_templates
+      return [] unless defined?(DataPorter::MappingTemplate)
+
+      DataPorter::MappingTemplate.for_target(@import.target_key)
+    end
+
+    def save_column_mapping
+      mapping = params.require(:column_mapping).permit!.to_h
+      merged = (@import.config || {}).merge("column_mapping" => mapping)
+      @import.update!(config: merged, status: :pending)
+    end
+
+    def save_template_if_requested
+      return unless params[:save_template] == "1"
+      return unless defined?(DataPorter::MappingTemplate)
+
+      mapping = params.require(:column_mapping).permit!.to_h
+      DataPorter::MappingTemplate.find_or_initialize_by(
+        target_key: @import.target_key,
+        name: params[:template_name].presence || "Default"
+      ).update!(mapping: mapping)
+    end
   end
 end