CSV Transaction Imports (#708)

Introduces a basic CSV import module for bulk-importing account transactions.

Changes include:

- User can load a CSV
- User can configure the column mappings for a CSV
- Imported CSV shows invalid cells
- User can clean up their data directly in the UI
- User can see a preview of the import rows and confirm import
- Layout refactor + Import nav stepper
- System test stability improvements

app/controllers/accounts_controller.rb

@@ -1,4 +1,6 @@
 class AccountsController < ApplicationController
+  layout "with_sidebar"
+
   include Filterable
   before_action :set_account, only: %i[ show update destroy sync ]
 
@@ -48,7 +50,7 @@ class AccountsController < ApplicationController
         end
       end
     else
-      render "edit", status: :unprocessable_entity
+      render "show", status: :unprocessable_entity
     end
   end
 
@@ -84,11 +86,11 @@ class AccountsController < ApplicationController
 
   private
 
-  def set_account
-    @account = Current.family.accounts.find(params[:id])
-  end
+    def set_account
+      @account = Current.family.accounts.find(params[:id])
+    end
 
-  def account_params
-    params.require(:account).permit(:name, :accountable_type, :balance, :start_date, :currency, :subtype, :is_active)
-  end
+    def account_params
+      params.require(:account).permit(:name, :accountable_type, :balance, :start_date, :currency, :subtype, :is_active)
+    end
 end

app/controllers/imports_controller.rb

@@ -0,0 +1,102 @@
+require "ostruct"
+
+class ImportsController < ApplicationController
+  before_action :set_import, except: %i[ index new create ]
+
+  def index
+    @imports = Current.family.imports
+    render layout: "with_sidebar"
+  end
+
+  def new
+    @import = Import.new
+  end
+
+  def edit
+  end
+
+  def update
+    account = Current.family.accounts.find(params[:import][:account_id])
+
+    @import.update! account: account
+    redirect_to load_import_path(@import), notice: t(".import_updated")
+  end
+
+  def create
+    account = Current.family.accounts.find(params[:import][:account_id])
+    @import = Import.create!(account: account)
+
+    redirect_to load_import_path(@import), notice: t(".import_created")
+  end
+
+  def destroy
+    @import.destroy!
+    redirect_to imports_url, notice: t(".import_destroyed"), status: :see_other
+  end
+
+  def load
+  end
+
+  def load_csv
+    if @import.update(import_params)
+      redirect_to configure_import_path(@import), notice: t(".import_loaded")
+    else
+      flash.now[:error] = @import.errors.full_messages.to_sentence
+      render :load, status: :unprocessable_entity
+    end
+  end
+
+  def configure
+    unless @import.loaded?
+      redirect_to load_import_path(@import), alert: t(".invalid_csv")
+    end
+  end
+
+  def update_mappings
+    @import.update! import_params(@import.expected_fields.map(&:key))
+    redirect_to clean_import_path(@import), notice: t(".column_mappings_saved")
+  end
+
+  def clean
+    unless @import.loaded?
+      redirect_to load_import_path(@import), alert: t(".invalid_csv")
+    end
+  end
+
+  def update_csv
+    update_params = import_params[:csv_update]
+
+    @import.update_csv! \
+      row_idx: update_params[:row_idx],
+      col_idx: update_params[:col_idx],
+      value: update_params[:value]
+
+    render :clean
+  end
+
+  def confirm
+    unless @import.cleaned?
+      redirect_to clean_import_path(@import), alert: t(".invalid_data")
+    end
+  end
+
+  def publish
+    if @import.valid?
+      @import.publish_later
+      redirect_to imports_path, notice: t(".import_published")
+    else
+      flash.now[:error] = t(".invalid_data")
+      render :confirm, status: :unprocessable_entity
+    end
+  end
+
+  private
+
+    def set_import
+      @import = Current.family.imports.find(params[:id])
+    end
+
+    def import_params(permitted_mappings = nil)
+      params.require(:import).permit(:raw_csv_str, column_mappings: permitted_mappings, csv_update: [ :row_idx, :col_idx, :value ])
+    end
+end

app/controllers/pages_controller.rb

@@ -1,4 +1,6 @@
 class PagesController < ApplicationController
+  layout "with_sidebar"
+
   include Filterable
 
   def dashboard

app/controllers/settings/billings_controller.rb

@@ -1,4 +1,4 @@
-class Settings::BillingsController < ApplicationController
+class Settings::BillingsController < SettingsController
   def edit
   end
 

app/controllers/settings/hostings_controller.rb

@@ -1,4 +1,4 @@
-class Settings::HostingsController < ApplicationController
+class Settings::HostingsController < SettingsController
   before_action :verify_hosting_mode
 
   def show

app/controllers/settings/notifications_controller.rb

@@ -1,4 +1,4 @@
-class Settings::NotificationsController < ApplicationController
+class Settings::NotificationsController < SettingsController
   def edit
   end
 

app/controllers/settings/preferences_controller.rb

@@ -1,4 +1,4 @@
-class Settings::PreferencesController < ApplicationController
+class Settings::PreferencesController < SettingsController
   def edit
   end
 
@@ -14,11 +14,12 @@ class Settings::PreferencesController < ApplicationController
       redirect_to settings_preferences_path, notice: t(".success")
     else
       redirect_to settings_preferences_path, notice: t(".success")
-      render :edit, status: :unprocessable_entity
+      render :show, status: :unprocessable_entity
     end
   end
 
   private
+
     def preference_params
       params.require(:user).permit(family_attributes: [ :id, :currency ])
     end

app/controllers/settings/profiles_controller.rb

@@ -1,4 +1,4 @@
-class Settings::ProfilesController < ApplicationController
+class Settings::ProfilesController < SettingsController
   def show
   end
 

app/controllers/settings/securities_controller.rb

@@ -1,4 +1,4 @@
-class Settings::SecuritiesController < ApplicationController
+class Settings::SecuritiesController < SettingsController
   def edit
   end
 

app/controllers/settings_controller.rb

@@ -0,0 +1,3 @@
+class SettingsController < ApplicationController
+  layout "with_sidebar"
+end

app/controllers/transactions/categories/deletions_controller.rb

@@ -1,4 +1,6 @@
 class Transactions::Categories::DeletionsController < ApplicationController
+  layout "with_sidebar"
+
   before_action :set_category
   before_action :set_replacement_category, only: :create
 

app/controllers/transactions/categories_controller.rb

@@ -1,4 +1,6 @@
 class Transactions::CategoriesController < ApplicationController
+  layout "with_sidebar"
+
   before_action :set_category, only: %i[ edit update ]
   before_action :set_transaction, only: :create
 

app/controllers/transactions/merchants_controller.rb

@@ -1,4 +1,6 @@
 class Transactions::MerchantsController < ApplicationController
+  layout "with_sidebar"
+
   before_action :set_merchant, only: %i[ edit update destroy ]
 
   def index

app/controllers/transactions/rules_controller.rb

@@ -1,4 +1,6 @@
 class Transactions::RulesController < ApplicationController
+  layout "with_sidebar"
+
   def index
   end
 end

app/controllers/transactions_controller.rb

@@ -1,4 +1,6 @@
 class TransactionsController < ApplicationController
+  layout "with_sidebar"
+
   before_action :set_transaction, only: %i[ show edit update destroy ]
 
   def index

app/helpers/application_helper.rb

@@ -51,6 +51,11 @@ module ApplicationHelper
     end
   end
 
+  def return_to_path(params, fallback = root_path)
+    uri = URI.parse(params[:return_to] || fallback)
+    uri.relative? ? uri.path : root_path
+  end
+
   def trend_styles(trend)
     fallback = { bg_class: "bg-gray-500/5", text_class: "text-gray-500", symbol: "", icon: "minus" }
     return fallback if trend.nil? || trend.direction.flat?

app/helpers/imports_helper.rb

@@ -0,0 +1,19 @@
+module ImportsHelper
+  def table_corner_class(row_idx, col_idx, rows, cols)
+    return "rounded-tl-xl" if row_idx == 0 && col_idx == 0
+    return "rounded-tr-xl" if row_idx == 0 && col_idx == cols.size - 1
+    return "rounded-bl-xl" if row_idx == rows.size - 1 && col_idx == 0
+    return "rounded-br-xl" if row_idx == rows.size - 1 && col_idx == cols.size - 1
+    ""
+  end
+
+  def nav_steps(import = Import.new)
+    [
+      { name: "Select", complete: import.persisted?, path: import.persisted? ? edit_import_path(import) : new_import_path },
+      { name: "Import", complete: import.loaded?, path: import.persisted? ? load_import_path(import) : nil },
+      { name: "Setup", complete: import.configured?, path: import.persisted? ? configure_import_path(import) : nil },
+      { name: "Clean", complete: import.cleaned?, path: import.persisted? ? clean_import_path(import) : nil },
+      { name: "Confirm", complete: import.complete?, path: import.persisted? ? confirm_import_path(import) : nil }
+    ]
+  end
+end

app/jobs/import_job.rb

@@ -0,0 +1,7 @@
+class ImportJob < ApplicationJob
+  queue_as :default
+
+  def perform(import)
+    import.publish
+  end
+end

app/models/account.rb

@@ -9,6 +9,7 @@ class Account < ApplicationRecord
   has_many :balances, dependent: :destroy
   has_many :valuations, dependent: :destroy
   has_many :transactions, dependent: :destroy
+  has_many :imports, dependent: :destroy
 
   monetize :balance
 

app/models/family.rb

@@ -2,6 +2,7 @@ class Family < ApplicationRecord
   has_many :users, dependent: :destroy
   has_many :accounts, dependent: :destroy
   has_many :transactions, through: :accounts
+  has_many :imports, through: :accounts
   has_many :transaction_categories, dependent: :destroy, class_name: "Transaction::Category"
   has_many :transaction_merchants, dependent: :destroy, class_name: "Transaction::Merchant"
 

app/models/import.rb

@@ -0,0 +1,161 @@
+class Import < ApplicationRecord
+  belongs_to :account
+
+  validate :raw_csv_must_be_parsable
+
+  before_save :initialize_csv, if: :should_initialize_csv?
+
+  enum :status, { pending: "pending", complete: "complete", importing: "importing", failed: "failed" }, validate: true
+
+  store_accessor :column_mappings, :define_column_mapping_keys
+
+  scope :ordered, -> { order(created_at: :desc) }
+
+  def publish_later
+    ImportJob.perform_later(self)
+  end
+
+  def loaded?
+    raw_csv_str.present?
+  end
+
+  def configured?
+    csv.present?
+  end
+
+  def cleaned?
+    loaded? && configured? && csv.valid?
+  end
+
+  def csv
+    get_normalized_csv_with_validation
+  end
+
+  def available_headers
+    get_raw_csv.table.headers
+  end
+
+  def get_selected_header_for_field(field)
+    column_mappings&.dig(field) || field.key
+  end
+
+  def update_csv!(row_idx:, col_idx:, value:)
+    updated_csv = csv.update_cell(row_idx.to_i, col_idx.to_i, value)
+    update! normalized_csv_str: updated_csv.to_s
+  end
+
+  # Type-specific methods (potential STI inheritance in future when more import types added)
+  def publish
+    update!(status: "importing")
+
+    transaction do
+      generate_transactions.each do |txn|
+        txn.save!
+      end
+    end
+
+    update!(status: "complete")
+  rescue => e
+    update!(status: "failed")
+    Rails.logger.error("Import with id #{id} failed: #{e}")
+  end
+
+  def dry_run
+    generate_transactions
+  end
+
+  def expected_fields
+    @expected_fields ||= create_expected_fields
+  end
+
+  private
+
+    def get_normalized_csv_with_validation
+      return nil if normalized_csv_str.nil?
+
+      csv = Import::Csv.new(normalized_csv_str)
+
+      expected_fields.each do |field|
+        csv.define_validator(field.key, field.validator) if field.validator
+      end
+
+      csv
+    end
+
+    def get_raw_csv
+      return nil if raw_csv_str.nil?
+      Import::Csv.new(raw_csv_str)
+    end
+
+    def should_initialize_csv?
+      raw_csv_str_changed? || column_mappings_changed?
+    end
+
+    def initialize_csv
+      generated_csv = generate_normalized_csv(raw_csv_str)
+      self.normalized_csv_str = generated_csv.table.to_s
+    end
+
+    # Uses the user-provided raw CSV + mappings to generate a normalized CSV for the import
+    def generate_normalized_csv(csv_str)
+      Import::Csv.create_with_field_mappings(csv_str, expected_fields, column_mappings)
+    end
+
+    def update_csv(row_idx, col_idx, value)
+      updated_csv = csv.update_cell(row_idx.to_i, col_idx.to_i, value)
+      update! normalized_csv_str: updated_csv.to_s
+    end
+
+    def generate_transactions
+      transactions = []
+
+      csv.table.each do |row|
+        category = account.family.transaction_categories.find_or_initialize_by(name: row["category"])
+        txn = account.transactions.build \
+          name: row["name"] || "Imported transaction",
+          date: Date.iso8601(row["date"]),
+          category: category,
+          amount: BigDecimal(row["amount"]) * -1 # User inputs amounts with opposite signage of our internal representation
+
+        transactions << txn
+      end
+
+      transactions
+    end
+
+    def create_expected_fields
+      date_field = Import::Field.new \
+        key: "date",
+        label: "Date",
+        validator: ->(value) { Import::Field.iso_date_validator(value) }
+
+      name_field = Import::Field.new \
+        key: "name",
+        label: "Name"
+
+      category_field = Import::Field.new \
+        key: "category",
+        label: "Category"
+
+      amount_field = Import::Field.new \
+        key: "amount",
+        label: "Amount",
+        validator: ->(value) { Import::Field.bigdecimal_validator(value) }
+
+      [ date_field, name_field, category_field, amount_field ]
+    end
+
+    def define_column_mapping_keys
+      expected_fields.each do |field|
+        field.key.to_sym
+      end
+    end
+
+    def raw_csv_must_be_parsable
+      begin
+        CSV.parse(raw_csv_str || "")
+      rescue CSV::MalformedCSVError
+        errors.add(:raw_csv_str, "is not a valid CSV format")
+      end
+    end
+end

app/models/import/csv.rb

@@ -0,0 +1,74 @@
+class Import::Csv
+  def self.parse_csv(csv_str)
+    CSV.parse((csv_str || "").strip, headers: true, converters: [ ->(str) { str.strip } ])
+  end
+
+  def self.create_with_field_mappings(raw_csv_str, fields, field_mappings)
+    raw_csv = self.parse_csv(raw_csv_str)
+
+    generated_csv_str = CSV.generate headers: fields.map { |f| f.key }, write_headers: true do |csv|
+      raw_csv.each do |row|
+        row_values = []
+
+        fields.each do |field|
+          # Finds the column header name the user has designated for the expected field
+          mapped_field_key = field_mappings[field.key] if field_mappings
+          mapped_header = mapped_field_key || field.key
+
+          row_values << row.fetch(mapped_header, "")
+        end
+
+        csv << row_values
+      end
+    end
+
+    new(generated_csv_str)
+  end
+
+  attr_reader :csv_str
+
+  def initialize(csv_str, column_validators: nil)
+    @csv_str = csv_str
+    @column_validators = column_validators || {}
+  end
+
+  def table
+    @table ||= self.class.parse_csv(csv_str)
+  end
+
+  def update_cell(row_idx, col_idx, value)
+    copy = table.by_col_or_row
+    copy[row_idx][col_idx] = value
+    copy
+  end
+
+  def valid?
+    table.each_with_index.all? do |row, row_idx|
+      row.each_with_index.all? do |cell, col_idx|
+        cell_valid?(row_idx, col_idx)
+      end
+    end
+  end
+
+  def cell_valid?(row_idx, col_idx)
+    value = table.dig(row_idx, col_idx)
+    header = table.headers[col_idx]
+    validator = get_validator_by_header(header)
+    validator.call(value)
+  end
+
+  def define_validator(header_key, validator = nil, &block)
+    header = table.headers.find { |h| h.strip == header_key }
+    raise "Cannot define validator for header #{header_key}: header does not exist in CSV" if header.nil?
+
+    column_validators[header] = validator || block
+  end
+
+  private
+
+    attr_accessor :column_validators
+
+    def get_validator_by_header(header)
+      column_validators&.dig(header) || ->(_v) { true }
+    end
+end

app/models/import/field.rb

@@ -0,0 +1,32 @@
+class Import::Field
+  def self.iso_date_validator(value)
+    Date.iso8601(value)
+    true
+  rescue
+    false
+  end
+
+  def self.bigdecimal_validator(value)
+    BigDecimal(value)
+    true
+  rescue
+    false
+  end
+
+  attr_reader :key, :label, :validator
+
+  def initialize(key:, label:, validator: nil)
+    @key = key.to_s
+    @label = label
+    @validator = validator
+  end
+
+  def define_validator(validator = nil, &block)
+    @validator = validator || block
+  end
+
+  def validate(value)
+    return true if validator.nil?
+    validator.call(value)
+  end
+end

app/views/imports/_empty.html.erb

@@ -0,0 +1,9 @@
+<div class="flex justify-center items-center py-20">
+  <div class="text-center flex flex-col items-center max-w-[300px]">
+    <p class="text-gray-900 mb-1 font-medium text-sm"><%= t(".message") %></p>
+    <%= link_to new_import_path(enable_type_selector: true), class: "w-fit flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
+      <%= lucide_icon("plus", class: "w-5 h-5") %>
+      <span><%= t(".new") %></span>
+    <% end %>
+  </div>
+</div>

app/views/imports/_form.html.erb

@@ -0,0 +1,7 @@
+<%= form_with model: @import do |form| %>
+  <div class="mb-4">
+    <%= form.collection_select :account_id, Current.family.accounts.alphabetically, :id, :name, { prompt: t(".select_account"), label: t(".account"), required: true } %>
+  </div>
+
+  <%= form.submit t(".next"), class: "px-4 py-2 block w-full rounded-lg bg-gray-900 text-white text-sm font-medium" %>
+<% end %>

app/views/imports/_import.html.erb

@@ -0,0 +1,61 @@
+<div id="<%= dom_id import %>" class="flex items-center justify-between mx-4 py-5 border-b last:border-b-0 border-alpha-black-50">
+  <div>
+
+    <div class="flex items-center gap-1 mb-1">
+      <p class="text-sm text-gray-900">
+        <%= t(".label", account: import.account.name) %>
+      </p>
+
+      <% if import.pending? %>
+        <span class="px-1 py text-xs rounded-full bg-gray-500/5 text-gray-500 border border-alpha-black-50">
+          <%= t(".in_progress") %>
+        </span>
+      <% elsif import.importing? %>
+       <span class="px-1 py text-xs animate-pulse rounded-full bg-orange-500/5 text-orange-500 border border-alpha-black-50">
+          <%= t(".uploading") %>
+       </span>
+      <% elsif import.failed? %>
+       <span class="px-1 py text-xs rounded-full bg-red-500/5 text-red-500 border border-alpha-black-50">
+          <%= t(".failed") %>
+       </span>
+      <% elsif import.complete? %>
+       <span class="px-1 py text-xs rounded-full bg-green-500/5 text-green-500 border border-alpha-black-50">
+          <%= t(".complete") %>
+       </span>
+      <% end %>
+    </div>
+
+    <% if import.complete? %>
+      <p class="text-xs text-gray-500"><%= t(".completed_on", datetime: import.updated_at.strftime("%Y-%m-%d")) %></p>
+    <% else %>
+      <p class="text-xs text-gray-500"><%= t(".started_on", datetime: import.created_at.strftime("%Y-%m-%d")) %></p>
+    <% end %>
+  </div>
+
+  <% if import.complete? %>
+    <div class="w-7 h-7 bg-green-500/5 flex items-center justify-center rounded-full">
+      <%= lucide_icon("check", class: "text-green-500 w-4 h-4") %>
+    </div>
+  <% else %>
+    <%= contextual_menu do %>
+      <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
+        <%= link_to edit_import_path(import),
+                    class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg" do %>
+          <%= lucide_icon "pencil-line", class: "w-5 h-5 text-gray-500" %>
+
+          <span><%= t(".edit") %></span>
+        <% end %>
+
+        <%= button_to import_path(import),
+                      method: :delete,
+                      class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
+                      data: { turbo_confirm: true } do %>
+          <%= lucide_icon "trash-2", class: "w-5 h-5" %>
+
+          <span><%= t(".delete") %></span>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+
+</div>

app/views/imports/_nav_step.html.erb

@@ -0,0 +1,18 @@
+<% is_current = request.path == step[:path] %>
+<% text_class = if is_current
+                  "text-gray-900"
+                else
+                  step[:complete] ? "text-green-600" : "text-gray-500"
+                end %>
+<% step_class = if is_current
+                  "bg-gray-900 text-white"
+                else
+                  step[:complete] ? "bg-green-600/10 border-alpha-black-25" : "bg-gray-50"
+                end %>
+
+<div class="flex items-center gap-2 text-sm font-medium <%= text_class %>">
+  <span class="<%= step_class %> w-7 h-7 rounded-full shrink-0 inline-flex items-center justify-center border border-transparent">
+    <%= step[:complete] && !is_current ? lucide_icon("check", class: "w-4 h-4") : step_idx + 1 %>
+  </span>
+  <span><%= step[:name] %></span>
+</div>

app/views/imports/_sample_table.html.erb

@@ -0,0 +1,22 @@
+<!--TODO: Once we have more styled tables for reference, refactor and DRY this up -->
+<div class="grid grid-cols-4 border border-alpha-black-200 rounded-md shadow-xs text-sm bg-white">
+  <div class="bg-gray-25 px-3 py-2.5 border-b border-b-alpha-black-200 font-medium rounded-tl-md">Date</div>
+  <div class="bg-gray-25 px-3 py-2.5 border-b border-b-alpha-black-200 font-medium">Name</div>
+  <div class="bg-gray-25 px-3 py-2.5 border-b border-b-alpha-black-200 font-medium">Category</div>
+  <div class="bg-gray-25 px-3 py-2.5 border-b border-b-alpha-black-200 font-medium rounded-tr-md">Amount</div>
+
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200">2024-01-01</div>
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200">Amazon</div>
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200">Shopping</div>
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200">-24.99</div>
+
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200">2024-03-01</div>
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200">Spotify</div>
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200"></div>
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200">-16.32</div>
+
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200 rounded-bl-md">2023-01-06</div>
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200">Acme</div>
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200">Income</div>
+  <div class="px-3 py-2.5 border-b border-b-alpha-black-200 rounded-br-md">151.22</div>
+</div>

app/views/imports/_type_selector.html.erb

@@ -0,0 +1,90 @@
+<div class="p-4 space-y-4 max-w-[420px]">
+
+  <div class="space-y-2">
+    <div class="flex justify-between items-center">
+      <h2 class="font-medium text-gray-900"><%= t(".import_transactions") %></h2>
+      <button data-action="modal#close">
+        <%= lucide_icon("x", class: "w-5 h-5 text-gray-900") %>
+      </button>
+    </div>
+
+    <p class="text-gray-500 text-sm"><%= t(".description") %></p>
+  </div>
+
+  <div class="rounded-xl bg-gray-25 p-1">
+    <h3 class="uppercase text-gray-500 text-xs font-medium px-3 py-1.5"><%= t(".sources") %></h3>
+    <ul class="bg-white border border-alpha-black-25 rounded-lg shadow-xs">
+      <li>
+        <% if Current.family.imports.pending.present? %>
+          <%= link_to edit_import_path(Current.family.imports.pending.ordered.first), class: "flex items-center gap-3 p-4 group cursor-pointer", data: { turbo: false } do %>
+            <div class="bg-orange-500/5 rounded-md w-8 h-8 flex items-center justify-center">
+              <%= lucide_icon("loader", class: "w-5 h-5 text-orange-500") %>
+            </div>
+            <span class="text-sm text-gray-900 group-hover:text-gray-700">
+              <%= t(".resume_latest_import") %>
+            </span>
+            <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500 ml-auto") %>
+          <% end %>
+
+          <div class="pl-14 pr-3">
+            <div class="h-px bg-alpha-black-50"></div>
+          </div>
+          </li>
+        <% end %>
+        <li>
+          <%= link_to new_import_path, class: "flex items-center gap-3 p-4 group cursor-pointer", data: { turbo: false } do %>
+            <div class="bg-indigo-500/5 rounded-md w-8 h-8 flex items-center justify-center">
+              <%= lucide_icon("file-spreadsheet", class: "w-5 h-5 text-indigo-500") %>
+            </div>
+            <span class="text-sm text-gray-900 group-hover:text-gray-700">
+              <%= t(".import_from_csv") %>
+            </span>
+            <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500 ml-auto") %>
+          <% end %>
+
+          <div class="pl-14 pr-3">
+            <div class="h-px bg-alpha-black-50"></div>
+          </div>
+        </li>
+        <li>
+          <div class="flex items-center gap-3 p-4 group cursor-not-allowed">
+            <%= image_tag("mint-logo.jpeg", alt: "Mint logo", class: "w-8 h-8 rounded-md") %>
+            <span class="text-sm text-gray-900 group-hover:text-gray-700">
+              <%= t(".import_from_mint") %>
+            </span>
+            <span class="bg-indigo-500/5 rounded-full px-1.5 py-0.5 border border-alpha-black-25 uppercase text-xs font-medium text-indigo-500"><%= t(".soon") %></span>
+            <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-300 ml-auto") %>
+          </div>
+
+          <div class="pl-14 pr-3">
+            <div class="h-px bg-alpha-black-50"></div>
+          </div>
+        </li>
+        <li>
+          <div class="flex items-center gap-3 p-4 group cursor-not-allowed">
+            <%= image_tag("empower-logo.jpeg", alt: "Mint logo", class: "w-8 h-8 border border-alpha-black-100 rounded-md") %>
+            <span class="text-sm text-gray-900 group-hover:text-gray-700">
+              <%= t(".import_from_empower") %>
+            </span>
+            <span class="bg-indigo-500/5 rounded-full px-1.5 py-0.5 border border-alpha-black-25 uppercase text-xs font-medium text-indigo-500"><%= t(".soon") %></span>
+            <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-300 ml-auto") %>
+          </div>
+
+          <div class="pl-14 pr-3">
+            <div class="h-px bg-alpha-black-50"></div>
+          </div>
+        </li>
+        <li>
+          <div class="flex items-center gap-3 p-4 group cursor-not-allowed">
+            <%= image_tag("apple-logo.png", alt: "Mint logo", class: "w-8 h-8 rounded-md") %>
+            <span class="text-sm text-gray-900 group-hover:text-gray-700">
+              <%= t(".import_from_apple") %>
+            </span>
+            <span class="bg-indigo-500/5 rounded-full px-1.5 py-0.5 border border-alpha-black-25 uppercase text-xs font-medium text-indigo-500"><%= t(".soon") %></span>
+            <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-300 ml-auto") %>
+          </div>
+        </li>
+        </ul>
+  </div>
+
+</div>

app/views/imports/clean.html.erb

@@ -0,0 +1,49 @@
+<%= content_for :return_to_path, return_to_path(params, imports_path) %>
+
+<div class="mx-auto max-w-screen-md w-full py-24">
+  <h1 class="sr-only"><%= t(".clean_import") %></h1>
+
+  <div class="text-center space-y-2 max-w-[400px] mx-auto mb-8">
+    <h2 class="text-3xl text-gray-900 font-medium"><%= t(".clean_and_edit") %></h2>
+    <p class="text-gray-500 text-sm"><%= t(".clean_description") %></p>
+  </div>
+
+  <div class="bg-gray-25 rounded-xl p-1 mb-6">
+    <div
+      class="grid items-center uppercase text-xs font-medium text-gray-500 py-3"
+      style="grid-template-columns: repeat(<%= @import.expected_fields.size %>, 1fr);">
+      <% @import.expected_fields.each do |field| %>
+        <div class="px-5"><%= field.label %></div>
+      <% end %>
+    </div>
+
+    <div class="bg-white border border-alpha-black-200 rounded-xl shadow-xs divide-y divide-alpha-black-200">
+      <% @import.csv.table.each_with_index do |row, row_index| %>
+        <div
+          class="grid divide-x divide-alpha-black-200"
+          style="grid-template-columns: repeat(<%= @import.expected_fields.size %>, 1fr);">
+          <% row.fields.each_with_index do |value, col_index| %>
+            <%= form_with model: @import,
+                          builder: ActionView::Helpers::FormBuilder,
+                          url: clean_import_url(@import),
+                          method: :patch,
+                          data: { turbo: false, controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } do |form| %>
+              <%= form.fields_for :csv_update do |ff| %>
+                <%= ff.hidden_field :row_idx, value: row_index %>
+                <%= ff.hidden_field :col_idx, value: col_index %>
+                <%= ff.text_field :value, value: value,
+                                  id: "cell-#{row_index}-#{col_index}",
+                                  class: "#{@import.csv.cell_valid?(row_index, col_index) ? "focus:border-transparent border-transparent" : "border-red-500"} border px-4 py-3.5 text-sm w-full bg-transparent focus:ring-gray-900 focus:ring-2 focus-visible:outline-none #{table_corner_class(row_index, col_index, @import.csv.table, row.fields)}",
+                                  data: { "auto-submit-form-target" => "auto" } %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <% if @import.csv.valid? %>
+    <%= link_to "Next", confirm_import_path(@import), class: "px-4 py-2 block w-60 text-center mx-auto rounded-lg bg-gray-900 text-white text-sm font-medium", data: { turbo: false } %>
+  <% end %>
+</div>

app/views/imports/configure.html.erb

@@ -0,0 +1,24 @@
+<%= content_for :return_to_path, return_to_path(params, imports_path) %>
+
+<div class="mx-auto max-w-[400px] w-full py-24 space-y-4">
+  <h1 class="sr-only"><%= t(".configure_title") %></h1>
+
+  <div class="text-center space-y-2">
+    <h2 class="text-3xl text-gray-900 font-medium"><%= t(".configure_subtitle") %></h2>
+    <p class="text-gray-500 text-sm"><%= t(".configure_description") %></p>
+  </div>
+
+  <%= form_with model: @import, url: configure_import_path(@import) do |form| %>
+    <div class="mb-4 space-y-4">
+      <%= form.fields_for :column_mappings do |mappings| %>
+        <% @import.expected_fields.each do |field| %>
+          <%= mappings.select field.key,
+                              options_for_select(@import.available_headers, @import.get_selected_header_for_field(field)),
+                              label: field.label %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <%= form.submit t(".next"), class: "px-4 py-2 block w-full rounded-lg bg-gray-900 text-white text-sm font-medium", data: { turbo_confirm: (@import.column_mappings? ? { title: t(".confirm_title"), body: t(".confirm_body"), accept: t(".confirm_accept") } : nil) } %>
+  <% end %>
+</div>

app/views/imports/confirm.html.erb

@@ -0,0 +1,16 @@
+<%= content_for :return_to_path, return_to_path(params, imports_path) %>
+
+<div class="mx-auto max-w-screen-md w-full py-24">
+  <h1 class="sr-only"><%= t(".confirm_title") %></h1>
+
+  <div class="text-center space-y-2 max-w-[400px] mx-auto mb-8">
+    <h2 class="text-3xl text-gray-900 font-medium"><%= t(".confirm_subtitle") %></h2>
+    <p class="text-gray-500 text-sm"><%= t(".confirm_description") %></p>
+  </div>
+
+  <div class="mb-8 space-y-4">
+    <%= render partial: "imports/transactions/transaction_group", collection: @import.dry_run.group_by(&:date) %>
+  </div>
+
+  <%= button_to "Import " + @import.csv.table.size.to_s + " transactions", confirm_import_path(@import), method: :patch, class: "px-4 py-2 block w-60 text-center mx-auto rounded-lg bg-gray-900 text-white text-sm font-medium", data: { turbo: false } %>
+</div>

app/views/imports/edit.html.erb

@@ -0,0 +1,10 @@
+<%= content_for :return_to_path, return_to_path(params, imports_path) %>
+
+<div class="mx-auto max-w-[400px] w-full py-56">
+  <h1 class="sr-only"><%= t(".edit_title") %></h1>
+  <div class="space-y-2 mb-6 text-center">
+    <p class="text-3xl font-medium text-gray-900"><%= t(".header_text") %></p>
+    <p class="text-gray-500 text-sm"><%= t(".description_text") %></p>
+  </div>
+  <%= render "form", import: @import %>
+</div>

app/views/imports/index.html.erb

@@ -0,0 +1,30 @@
+<% content_for :sidebar do %>
+  <%= render "settings/nav" %>
+<% end %>
+
+<div class="space-y-4">
+  <div class="flex items-center justify-between">
+    <h1 class="text-xl font-medium text-gray-900"><%= t(".title") %></h1>
+    <%= link_to new_import_path(enable_type_selector: true), class: "flex text-white text-sm font-medium items-center gap-1 bg-gray-900 rounded-lg p-2 pr-3", data: { turbo_frame: "modal" } do %>
+      <%= lucide_icon("plus", class: "w-5 h-5") %>
+      <span><%= t(".new") %></span>
+    <% end %>
+  </div>
+  <div class="bg-white shadow-xs border border-alpha-black-25 rounded-xl p-4">
+    <% if @imports.empty? %>
+      <%= render partial: "imports/empty" %>
+    <% else %>
+      <div class="rounded-xl bg-gray-25 p-1">
+        <h2 class="uppercase px-4 py-2 text-gray-500 text-xs"><%= t(".imports") %> · <%= @imports.size %></h2>
+
+        <div class="border border-alpha-gray-100 rounded-lg bg-white shadow-xs">
+          <%= render @imports.ordered %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  <div class="flex justify-between gap-4">
+    <%= previous_setting("Rules", transaction_rules_path) %>
+    <%= next_setting("What's new", changelog_path) %>
+  </div>
+</div>

app/views/imports/load.html.erb

@@ -0,0 +1,39 @@
+<%= content_for :return_to_path, return_to_path(params, imports_path) %>
+
+<div class="mx-auto max-w-[450px] w-full py-24 space-y-4">
+  <h1 class="sr-only"><%= t(".load_title") %></h1>
+
+  <div class="text-center space-y-2">
+    <h2 class="text-3xl text-gray-900 font-medium"><%= t(".subtitle") %></h2>
+    <p class="text-gray-500 text-sm"><%= t(".description") %></p>
+  </div>
+
+  <%= form_with model: @import, url: load_import_path(@import) do |form| %>
+    <div>
+      <%= form.text_area :raw_csv_str,
+                         rows: 10,
+                         required: true,
+                         placeholder: "Paste your CSV file contents here",
+                         class: "rounded-md w-full border text-sm border-alpha-black-100 bg-white placeholder:text-gray-400 p-4" %>
+    </div>
+
+    <%= form.submit t(".next"), class: "px-4 py-2 block w-full rounded-lg bg-gray-900 text-white text-sm font-medium", data: { turbo_confirm: (@import.raw_csv_str? ? { title: t(".confirm_title"), body: t(".confirm_body"), accept: t(".confirm_accept") } : nil) } %>
+  <% end %>
+
+  <div class="bg-alpha-black-25 rounded-xl p-1">
+    <div class="text-gray-500 p-2 mb-2">
+      <div class="flex gap-2 mb-2">
+        <%= lucide_icon("info", class: "w-5 h-5 shrink-0") %>
+        <p class="text-sm"><%= t(".instructions") %></p>
+      </div>
+
+      <ul class="list-disc text-sm pl-10">
+        <li><%= t(".requirement1") %></li>
+        <li><%= t(".requirement2") %></li>
+      </ul>
+    </div>
+
+    <%= render partial: "imports/sample_table" %>
+
+  </div>
+</div>

app/views/imports/new.html.erb

@@ -0,0 +1,16 @@
+<%= content_for :return_to_path, return_to_path(params, imports_path) %>
+
+<% if params[:enable_type_selector].present? %>
+  <%= modal do %>
+    <%= render "type_selector" %>
+  <% end %>
+<% end %>
+
+<div class="mx-auto max-w-[400px] w-full py-56">
+  <h1 class="sr-only">New import</h1>
+  <div class="space-y-2 mb-6 text-center">
+    <p class="text-3xl font-medium text-gray-900"><%= t(".header_text") %></p>
+    <p class="text-gray-500 text-sm"><%= t(".description_text") %></p>
+  </div>
+  <%= render "form", import: @import %>
+</div>

app/views/imports/show.html.erb

@@ -0,0 +1,15 @@
+<div class="mx-auto md:w-2/3 w-full flex">
+  <div class="mx-auto">
+    <% if notice.present? %>
+      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
+    <% end %>
+
+    <%= render @import %>
+
+    <%= link_to "Edit this import", edit_import_path(@import), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <div class="inline-block ml-2">
+      <%= button_to "Destroy this import", import_path(@import), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
+    </div>
+    <%= link_to "Back to imports", imports_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  </div>
+</div>

app/views/imports/transactions/_transaction.html.erb

@@ -0,0 +1,12 @@
+<%# locals: (transaction:) %>
+<div class="text-gray-900 flex items-center gap-6 py-4 text-sm font-medium px-4">
+  <%= render partial: "transactions/transaction_name", locals: { name: transaction.name } %>
+
+  <div class="w-48">
+    <%= render partial: "transactions/categories/badge", locals: { category: transaction.category } %>
+  </div>
+
+  <div class="ml-auto">
+    <%= content_tag :p, format_money(-transaction.amount), class: ["whitespace-nowrap", BigDecimal(transaction.amount).negative? ? "text-green-600" : "text-red-600"] %>
+  </div>
+</div>

app/views/imports/transactions/_transaction_group.html.erb

@@ -0,0 +1,13 @@
+<%# locals: (transaction_group:) %>
+<% date = transaction_group[0] %>
+<% transactions = transaction_group[1] %>
+
+<div class="bg-gray-25 rounded-xl p-1 w-full">
+  <div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-gray-500">
+    <h4><%= date.strftime("%b %d, %Y") %> &middot; <%= transactions.size %></h4>
+    <span><%= format_money -transactions.sum { |t| t.amount } %></span>
+  </div>
+  <div class="bg-white shadow-xs rounded-md border border-alpha-black-25 divide-y divide-alpha-black-50">
+    <%= render partial: "imports/transactions/transaction", collection: transactions %>
+  </div>
+</div>

app/views/layouts/application.html.erb

@@ -1,52 +1,39 @@
 <!DOCTYPE html>
-<html class="h-full bg-gray-25">
+<html class="h-full">
   <head>
     <title><%= content_for(:title) || "Maybe" %></title>
+
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+
+    <%= javascript_importmap_tags %>
+    <%= hotwire_livereload_tags if Rails.env.development? %>
+    <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
+
     <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="Maybe">
-    <%= csrf_meta_tags %>
-    <%= csp_meta_tag %>
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/site.webmanifest">
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffffff">
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="theme-color" content="#ffffff">
-    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
-    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-    <%= javascript_importmap_tags %>
-    <%= hotwire_livereload_tags if Rails.env.development? %>
-    <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
+
     <%= yield :head %>
   </head>
+
   <body class="h-full">
     <div id="notification-tray" class="fixed z-50 space-y-1 top-6 right-6"></div>
     <%= safe_join(flash.map { |type, message| notification(message, type: type) }) %>
-    <div class="flex h-full">
-      <div class="p-6 pb-20 w-[368px] shrink-0 h-full overflow-y-auto">
-        <% if content_for?(:sidebar) %>
-          <%= yield :sidebar %>
-        <% else %>
-          <%= render "layouts/sidebar" %>
-        <% end %>
-      </div>
-      <main class="grow px-20 pt-6 pb-32 h-full overflow-y-auto">
-        <%= yield %>
-      </main>
-    </div>
+
+    <%= content_for?(:content) ? yield(:content) : yield %>
+
     <%= turbo_frame_tag "modal" %>
     <%= render "shared/confirm_modal" %>
-    <%= render "shared/upgrade_notification" %>
+
     <% if self_hosted? %>
-      <div class="flex items-center py-0.5 px-0.5 gap-1 fixed bottom-2 right-2 shadow-xs border border-alpha-black-50 rounded-md bg-white">
-        <p class="text-xs text-gray-500 pl-2">Self-hosted Maybe: <%= Maybe.version.to_release_tag %></p>
-        <%= link_to settings_hosting_path, class: "flex gap-1 items-center hover:bg-gray-50 rounded-md p-2" do %>
-          <%= lucide_icon("settings", class: "w-4 h-4 text-gray-500 shrink-0") %>
-        <% end %>
-      </div>
+    <%= render "shared/app_version" %>
     <% end %>
   </body>
 </html>

app/views/layouts/auth.html.erb

@@ -1,61 +1,31 @@
-<!DOCTYPE html>
-<html class="h-full bg-white">
-  <head>
-    <title>Maybe</title>
-    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="apple-mobile-web-app-title" content="Maybe">
+<%= content_for :content do %>
+  <div class="flex flex-col justify-center min-h-full px-6 py-12">
+    <div class="sm:mx-auto sm:w-full sm:max-w-md">
+      <%= render "shared/logo" %>
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/site.webmanifest">
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffffff">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="theme-color" content="#ffffff">
+      <h2 class="mt-6 text-3xl font-semibold tracking-tight text-center font-display">
+        <%= content_for?(:header_title) ? yield(:header_title).html_safe : t(".your_account") %>
+      </h2>
 
-    <%= csrf_meta_tags %>
-    <%= csp_meta_tag %>
-    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
-
-    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-    <%= javascript_importmap_tags %>
-
-    <%= hotwire_livereload_tags if Rails.env.development? %>
-    <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
-  </head>
-
-  <body class="h-full">
-    <div class="flex flex-col justify-center min-h-full px-6 py-12">
-
-      <div class="sm:mx-auto sm:w-full sm:max-w-md">
-        <%= render "shared/logo" %>
-
-        <h2 class="mt-6 text-3xl font-semibold tracking-tight text-center font-display">
-          <%= content_for?(:header_title) ? yield(:header_title).html_safe : t(".your_account") %>
-        </h2>
-
-        <% if controller_name == "sessions" %>
+      <% if controller_name == "sessions" %>
         <p class="mt-2 text-sm text-center text-gray-600">
           <%= t(".or") %> <%= link_to t(".sign_up"), new_registration_path, class: "font-medium text-gray-600 hover:text-gray-400 transition" %>
         </p>
-        <% elsif controller_name == "registrations" %>
+      <% elsif controller_name == "registrations" %>
         <p class="mt-2 text-sm text-center text-gray-600">
           <%= t(".or") %> <%= link_to t(".sign_in"), new_session_path, class: "font-medium text-gray-600 hover:text-gray-400 transition" %>
         </p>
-        <% end %>
-
-      </div>
-
-      <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-lg">
-        <%= yield %>
-      </div>
-
-      <div class="p-8 mt-2 text-center">
-        <p class="mt-6 text-sm text-black"><%= link_to t(".privacy_policy"), "/privacy", class: "font-medium text-gray-600 hover:text-gray-400 transition" %> &bull; <%= link_to t(".terms_of_service"), "/terms", class: "font-medium text-gray-600 hover:text-gray-400 transition" %></p>
-      </div>
-
+      <% end %>
     </div>
-  </body>
-</html>
+
+    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-lg">
+      <%= yield %>
+    </div>
+
+    <div class="p-8 mt-2 text-center">
+      <p class="mt-6 text-sm text-black"><%= link_to t(".privacy_policy"), "/privacy", class: "font-medium text-gray-600 hover:text-gray-400 transition" %> &bull; <%= link_to t(".terms_of_service"), "/terms", class: "font-medium text-gray-600 hover:text-gray-400 transition" %></p>
+    </div>
+  </div>
+<% end %>
+
+<%= render template: "layouts/application" %>

app/views/layouts/imports.html.erb

@@ -0,0 +1,34 @@
+<%= content_for :content do %>
+  <div class="flex items-center justify-between p-8">
+    <%= link_to root_path do %>
+      <%= image_tag "logo.svg", alt: "Maybe", class: "h-[22px]" %>
+    <% end %>
+    <nav>
+      <div>
+        <ul class="flex items-center gap-2">
+          <% nav_steps(@import).each_with_index do |step, idx| %>
+            <li class="group flex items-center gap-2">
+              <% if step[:path].present? %>
+                <%= link_to step[:path], class: "flex items-center gap-3" do %>
+                  <%= render partial: "nav_step", locals: { step: step, step_idx: idx } %>
+                <% end %>
+              <% else %>
+                <%= render partial: "nav_step", locals: { step: step, step_idx: idx } %>
+              <% end %>
+              <% if idx < nav_steps.size %>
+                <div class="h-px bg-alpha-black-200 w-12 group-last:hidden"></div>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    </nav>
+    <%= link_to content_for(:return_to_path) do %>
+      <%= lucide_icon("x", class: "text-gray-500 w-5 h-5") %>
+    <% end %>
+  </div>
+
+  <%= yield %>
+<% end %>
+
+<%= render template: "layouts/application" %>

app/views/layouts/with_sidebar.html.erb

@@ -0,0 +1,18 @@
+<%= content_for :content do %>
+  <div class="flex h-full bg-gray-25">
+    <div class="p-6 pb-20 w-[368px] shrink-0 h-full overflow-y-auto">
+      <% if content_for?(:sidebar) %>
+        <%= yield :sidebar %>
+      <% else %>
+        <%= render "layouts/sidebar" %>
+      <% end %>
+    </div>
+    <main class="grow px-20 pt-6 pb-32 h-full overflow-y-auto">
+      <%= yield %>
+    </main>
+  </div>
+
+  <%= render "shared/upgrade_notification" %>
+<% end %>
+
+<%= render template: "layouts/application" %>

app/views/pages/changelog.html.erb

@@ -9,7 +9,7 @@
     </div>
   </div>
   <div class="flex justify-between gap-4">
-    <%= previous_setting("Rules", transaction_rules_path) %>
+    <%= previous_setting("Imports", imports_path) %>
     <%= next_setting("Feedback", feedback_path) %>
   </div>
 </div>

app/views/settings/_nav.html.erb

@@ -55,6 +55,9 @@
     <li>
       <%= sidebar_link_to t(".rules_label"), transaction_rules_path, icon: "list-checks" %>
     </li>
+    <li>
+      <%= sidebar_link_to t(".imports_label"), imports_path, icon: "download" %>
+    </li>
   </ul>
 </section>
 <section class="space-y-2">

app/views/shared/_app_version.html.erb

@@ -0,0 +1,6 @@
+<div class="flex items-center py-0.5 px-0.5 gap-1 fixed bottom-2 right-2 shadow-xs border border-alpha-black-50 rounded-md bg-white">
+  <p class="text-xs text-gray-500 pl-2">Version: <%= Maybe.version.to_release_tag %></p>
+  <%= link_to settings_hosting_path, class: "flex gap-1 items-center hover:bg-gray-50 rounded-md p-2" do %>
+    <%= lucide_icon("settings", class: "w-4 h-4 text-gray-500 shrink-0") %>
+  <% end %>
+</div>

app/views/transactions/index.html.erb

@@ -6,16 +6,28 @@
         <%= contextual_menu do %>
           <div class="w-48 p-1 text-sm leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
             <%= link_to transaction_categories_path,
-                  class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg font-normal" do %>
+                        class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg font-normal" do %>
               <%= lucide_icon "tags", class: "w-5 h-5 text-gray-500" %>
               <span class="text-black"><%= t(".edit_categories") %></span>
             <% end %>
+
+            <%= link_to imports_path,
+                        class: "block w-full py-2 px-3 space-x-2 text-gray-900 hover:bg-gray-50 flex items-center rounded-lg font-normal" do %>
+              <%= lucide_icon "hard-drive-upload", class: "w-5 h-5 text-gray-500" %>
+              <span class="text-black"><%= t(".edit_imports") %></span>
+            <% end %>
           </div>
+
+        <% end %>
+
+        <%= link_to new_import_path(enable_type_selector: true), class: "rounded-lg bg-gray-50 border border-gray-200 flex items-center gap-1 justify-center px-3 py-2", data: { turbo_frame: "modal" } do %>
+          <%= lucide_icon("download", class: "text-gray-500 w-4 h-4") %>
+          <p class="text-sm font-medium text-gray-900"><%= t(".import") %></p>
         <% end %>
 
         <%= link_to new_transaction_path, class: "rounded-lg bg-gray-900 text-white flex items-center gap-1 justify-center hover:bg-gray-700 px-3 py-2", data: { turbo_frame: :modal } do %>
           <%= lucide_icon("plus", class: "w-5 h-5") %>
-          <p>New transaction</p>
+          <p class="text-sm font-medium">New transaction</p>
         <% end %>
       </div>
     </div>

app/views/transactions/rules/index.html.erb

@@ -10,6 +10,6 @@
   </div>
   <div class="flex justify-between gap-4">
     <%= previous_setting("Merchants", transaction_merchants_path) %>
-    <%= next_setting("What's New", changelog_path) %>
+    <%= next_setting("Imports", imports_path) %>
   </div>
 </div>