rails_onboarding 0.6.1

data/app/views/rails_onboarding/admin/dashboard/index.html.erb

@@ -0,0 +1,224 @@
+<% content_for :page_title, "Dashboard" %>
+
+<% content_for :header_actions do %>
+  <div class="admin-header-filters">
+    <%= form_with url: admin_dashboard_path, method: :get, class: "admin-filter-form" do |f| %>
+      <%= f.select :date_range,
+          options_for_select([
+            ['Last 7 days', '7'],
+            ['Last 30 days', '30'],
+            ['Last 90 days', '90'],
+            ['All time', 'all']
+          ], @date_range),
+          {},
+          class: "admin-select",
+          onchange: "this.form.submit()" %>
+    <% end %>
+  </div>
+<% end %>
+
+<!-- Overview Stats -->
+<div class="admin-stats-grid">
+  <div class="admin-stat-card">
+    <div class="admin-stat-icon">👥</div>
+    <div class="admin-stat-content">
+      <div class="admin-stat-label">Total Users</div>
+      <div class="admin-stat-value"><%= number_with_delimiter(@total_users) %></div>
+    </div>
+  </div>
+
+  <div class="admin-stat-card">
+    <div class="admin-stat-icon">🚀</div>
+    <div class="admin-stat-content">
+      <div class="admin-stat-label">Onboarding Started</div>
+      <div class="admin-stat-value"><%= number_with_delimiter(@onboarding_started) %></div>
+      <div class="admin-stat-change">
+        <%= (@total_users.zero? ? 0 : (@onboarding_started.to_f / @total_users * 100).round(1)) %>% of users
+      </div>
+    </div>
+  </div>
+
+  <div class="admin-stat-card">
+    <div class="admin-stat-icon">✅</div>
+    <div class="admin-stat-content">
+      <div class="admin-stat-label">Completed</div>
+      <div class="admin-stat-value"><%= number_with_delimiter(@onboarding_completed) %></div>
+      <div class="admin-stat-change <%= @completion_rate >= 50 ? 'onboarding-positive' : 'onboarding-negative' %>">
+        <%= @completion_rate %>% completion rate
+      </div>
+    </div>
+  </div>
+
+  <div class="admin-stat-card">
+    <div class="admin-stat-icon">⏱️</div>
+    <div class="admin-stat-content">
+      <div class="admin-stat-label">Avg. Time to Complete</div>
+      <div class="admin-stat-value"><%= @avg_completion_time %> hrs</div>
+      <div class="admin-stat-change">
+        <%= @recent_completions %> in selected period
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Charts Row -->
+<div class="admin-charts-grid">
+  <!-- Completion Trend -->
+  <div class="admin-card">
+    <div class="admin-card-header">
+      <h3 class="admin-card-title">Daily Completions (Last 7 Days)</h3>
+    </div>
+    <div class="admin-card-body">
+      <% if @daily_completions && @daily_completions.any? %>
+        <div class="admin-chart-container">
+          <div class="admin-bar-chart">
+            <%# max_count is the bar-height divisor; clamp to >= 1 so a week
+                with zero completions (max == 0) doesn't divide by zero. %>
+            <% max_count = [@daily_completions.map { |d| d[:count] }.max.to_i, 1].max %>
+            <% @daily_completions.each do |day| %>
+              <div class="admin-bar-item">
+                <div class="admin-bar" style="--admin-bar-height: <%= (day[:count].to_f / max_count * 100).round %>%">
+                  <span class="admin-bar-value"><%= day[:count] %></span>
+                </div>
+                <div class="admin-bar-label"><%= day[:date] %></div>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      <% else %>
+        <p class="admin-empty-state">No completion data available</p>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Step Funnel -->
+  <div class="admin-card">
+    <div class="admin-card-header">
+      <h3 class="admin-card-title">Onboarding Funnel</h3>
+    </div>
+    <div class="admin-card-body">
+      <% if @step_funnel && @step_funnel.any? %>
+        <div class="admin-funnel">
+          <% @step_funnel.each_with_index do |step, index| %>
+            <div class="admin-funnel-step">
+              <div class="admin-funnel-label">
+                <span class="admin-funnel-step-name"><%= step[:title] %></span>
+                <span class="admin-funnel-stats">
+                  <%= number_with_delimiter(step[:users]) %> users (<%= step[:percentage] %>%)
+                </span>
+              </div>
+              <div class="admin-funnel-track">
+                <div class="admin-funnel-bar" style="--admin-funnel-width: <%= step[:percentage] %>%"></div>
+              </div>
+              <% if index < @step_funnel.length - 1 %>
+                <div class="admin-funnel-arrow">↓</div>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <p class="admin-empty-state">No funnel data available</p>
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<!-- Bottom Row -->
+<div class="admin-bottom-grid">
+  <!-- Milestone Stats -->
+  <% if defined?(RailsOnboarding::Milestone) %>
+    <div class="admin-card">
+      <div class="admin-card-header">
+        <h3 class="admin-card-title">Top Milestones</h3>
+      </div>
+      <div class="admin-card-body">
+        <% if @top_milestones && @top_milestones.any? %>
+          <div class="admin-list">
+            <% @top_milestones.each do |milestone| %>
+              <div class="admin-list-item">
+                <div class="admin-list-content">
+                  <div class="admin-list-title"><%= milestone[:title] %></div>
+                  <div class="admin-list-meta"><%= milestone[:name] %></div>
+                </div>
+                <div class="admin-list-value">
+                  <span class="admin-badge"><%= number_with_delimiter(milestone[:count]) %> achieved</span>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <p class="admin-empty-state">No milestone data available</p>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <!-- A/B Tests Summary -->
+  <% if defined?(RailsOnboarding::AbTest) %>
+    <div class="admin-card">
+      <div class="admin-card-header">
+        <h3 class="admin-card-title">A/B Tests</h3>
+        <%= link_to "View All", admin_ab_tests_path, class: "admin-card-action" %>
+      </div>
+      <div class="admin-card-body">
+        <div class="admin-ab-summary">
+          <div class="admin-ab-stat">
+            <div class="admin-ab-stat-value"><%= @active_tests || 0 %></div>
+            <div class="admin-ab-stat-label">Active Tests</div>
+          </div>
+          <div class="admin-ab-stat">
+            <div class="admin-ab-stat-value"><%= @total_tests || 0 %></div>
+            <div class="admin-ab-stat-label">Total Tests</div>
+          </div>
+        </div>
+        <%= link_to "Manage A/B Tests", admin_ab_tests_path, class: "admin-btn admin-btn-primary admin-btn-block" %>
+      </div>
+    </div>
+  <% end %>
+
+  <!-- Recent Activity -->
+  <% if defined?(RailsOnboarding::AnalyticsEvent) %>
+    <div class="admin-card">
+      <div class="admin-card-header">
+        <h3 class="admin-card-title">Recent Activity</h3>
+      </div>
+      <div class="admin-card-body">
+        <% if @recent_events && @recent_events.any? %>
+          <div class="admin-timeline">
+            <% @recent_events.first(5).each do |event| %>
+              <div class="admin-timeline-item">
+                <div class="admin-timeline-dot"></div>
+                <div class="admin-timeline-content">
+                  <div class="admin-timeline-title"><%= event.event_type.humanize %></div>
+                  <div class="admin-timeline-meta">
+                    User <%= event.user_id %> • <%= time_ago_in_words(event.created_at) %> ago
+                  </div>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <p class="admin-empty-state">No recent activity</p>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<% if @analytics_error %>
+  <div class="admin-alert admin-alert-warning">
+    <strong>Analytics Error:</strong> <%= @analytics_error %>
+  </div>
+<% end %>
+
+<% if @milestone_error %>
+  <div class="admin-alert admin-alert-warning">
+    <strong>Milestone Error:</strong> <%= @milestone_error %>
+  </div>
+<% end %>
+
+<% if @ab_test_error %>
+  <div class="admin-alert admin-alert-warning">
+    <strong>A/B Test Error:</strong> <%= @ab_test_error %>
+  </div>
+<% end %>

data/app/views/rails_onboarding/admin/flows/_form.html.erb

@@ -0,0 +1,147 @@
+<%= form_with model: @flow, url: @flow[:id] ? admin_flow_path(@flow[:id]) : admin_flows_path, method: @flow[:id] ? :patch : :post, class: "admin-form", data: { controller: "flow-editor" } do |f| %>
+
+  <!-- Basic Info -->
+  <div class="admin-card">
+    <div class="admin-card-header">
+      <h3 class="admin-card-title">Flow Information</h3>
+    </div>
+    <div class="admin-card-body">
+      <div class="admin-form-group">
+        <%= f.label :name, "Flow Name", class: "admin-label" %>
+        <%= f.text_field :name, class: "admin-input", placeholder: "e.g., SaaS Onboarding", required: true %>
+      </div>
+
+      <div class="admin-form-group">
+        <%= f.label :description, "Description", class: "admin-label" %>
+        <%= f.text_area :description, class: "admin-textarea", rows: 3, placeholder: "Describe this onboarding flow..." %>
+      </div>
+    </div>
+  </div>
+
+  <!-- Steps Configuration -->
+  <div class="admin-card" data-flow-editor-target="stepsContainer">
+    <div class="admin-card-header">
+      <h3 class="admin-card-title">Onboarding Steps</h3>
+      <button type="button" class="admin-btn admin-btn-sm admin-btn-primary" data-action="click->flow-editor#addStep">
+        + Add Step
+      </button>
+    </div>
+    <div class="admin-card-body">
+      <div id="steps-list" class="admin-steps-list">
+        <% steps = @flow[:steps] || [] %>
+        <% if steps.any? %>
+          <% steps.each_with_index do |step, index| %>
+            <div class="admin-step-item" data-step-index="<%= index %>">
+              <div class="admin-step-handle">
+                <span class="admin-step-drag-icon">⋮⋮</span>
+                <span class="admin-step-number"><%= index + 1 %></span>
+              </div>
+
+              <div class="admin-step-content">
+                <div class="admin-form-row">
+                  <div class="admin-form-group">
+                    <%= label_tag "flow_steps_#{index}_name", "Step Name", class: "admin-label admin-label-sm" %>
+                    <%= text_field_tag "flow[steps][#{index}][name]", step[:name], class: "admin-input admin-input-sm", placeholder: "welcome", required: true %>
+                  </div>
+
+                  <div class="admin-form-group">
+                    <%= label_tag "flow_steps_#{index}_title", "Display Title", class: "admin-label admin-label-sm" %>
+                    <%= text_field_tag "flow[steps][#{index}][title]", step[:title], class: "admin-input admin-input-sm", placeholder: "Welcome", required: true %>
+                  </div>
+
+                  <div class="admin-form-group admin-form-group-sm">
+                    <%= label_tag "flow_steps_#{index}_icon", "Icon", class: "admin-label admin-label-sm" %>
+                    <%= select_tag "flow[steps][#{index}][icon]",
+                        options_for_select(@available_icons.map { |icon| [icon, icon] }, step[:icon]),
+                        class: "admin-select admin-select-sm" %>
+                  </div>
+
+                  <div class="admin-form-group admin-form-group-checkbox">
+                    <%= label_tag "flow_steps_#{index}_skippable", class: "admin-checkbox-label" do %>
+                      <%= check_box_tag "flow[steps][#{index}][skippable]", "1", step[:skippable], class: "admin-checkbox" %>
+                      <span>Skippable</span>
+                    <% end %>
+                  </div>
+                </div>
+
+                <div class="admin-form-group">
+                  <%= label_tag "flow_steps_#{index}_description", "Description (optional)", class: "admin-label admin-label-sm" %>
+                  <%= text_area_tag "flow[steps][#{index}][description]", step[:description], class: "admin-textarea admin-textarea-sm", rows: 2 %>
+                </div>
+
+                <%= hidden_field_tag "flow[steps][#{index}][order]", index %>
+              </div>
+
+              <div class="admin-step-actions">
+                <button type="button" class="admin-btn admin-btn-sm admin-btn-icon admin-btn-danger" data-action="click->flow-editor#removeStep">
+                  🗑️
+                </button>
+              </div>
+            </div>
+          <% end %>
+        <% else %>
+          <p class="admin-text-muted">No steps added yet. Click "Add Step" to get started.</p>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="admin-form-actions">
+    <%= f.submit @flow[:id] ? "Update Flow" : "Create Flow", class: "admin-btn admin-btn-primary" %>
+    <%= link_to "Cancel", admin_flows_path, class: "admin-btn admin-btn-secondary" %>
+  </div>
+<% end %>
+
+<!-- Step Template (hidden, used by JavaScript) -->
+<template id="step-template">
+  <div class="admin-step-item" data-step-index="__INDEX__">
+    <div class="admin-step-handle">
+      <span class="admin-step-drag-icon">⋮⋮</span>
+      <span class="admin-step-number">__NUMBER__</span>
+    </div>
+
+    <div class="admin-step-content">
+      <div class="admin-form-row">
+        <div class="admin-form-group">
+          <label class="admin-label admin-label-sm">Step Name</label>
+          <input type="text" name="flow[steps][__INDEX__][name]" class="admin-input admin-input-sm" placeholder="step_name" required>
+        </div>
+
+        <div class="admin-form-group">
+          <label class="admin-label admin-label-sm">Display Title</label>
+          <input type="text" name="flow[steps][__INDEX__][title]" class="admin-input admin-input-sm" placeholder="Step Title" required>
+        </div>
+
+        <div class="admin-form-group admin-form-group-sm">
+          <label class="admin-label admin-label-sm">Icon</label>
+          <select name="flow[steps][__INDEX__][icon]" class="admin-select admin-select-sm">
+            <% @available_icons.each do |icon| %>
+              <option value="<%= icon %>"><%= icon %></option>
+            <% end %>
+          </select>
+        </div>
+
+        <div class="admin-form-group admin-form-group-checkbox">
+          <label class="admin-checkbox-label">
+            <input type="checkbox" name="flow[steps][__INDEX__][skippable]" value="1" class="admin-checkbox">
+            <span>Skippable</span>
+          </label>
+        </div>
+      </div>
+
+      <div class="admin-form-group">
+        <label class="admin-label admin-label-sm">Description (optional)</label>
+        <textarea name="flow[steps][__INDEX__][description]" class="admin-textarea admin-textarea-sm" rows="2"></textarea>
+      </div>
+
+      <input type="hidden" name="flow[steps][__INDEX__][order]" value="__INDEX__">
+    </div>
+
+    <div class="admin-step-actions">
+      <button type="button" class="admin-btn admin-btn-sm admin-btn-icon admin-btn-danger" data-action="click->flow-editor#removeStep">
+        🗑️
+      </button>
+    </div>
+  </div>
+</template>

data/app/views/rails_onboarding/admin/flows/edit.html.erb

@@ -0,0 +1,7 @@
+<% content_for :page_title, "Edit Flow: #{@flow[:name]}" %>
+
+<% content_for :header_actions do %>
+  <%= link_to "← Back to Flows", admin_flows_path, class: "admin-btn admin-btn-secondary" %>
+<% end %>
+
+<%= render 'form' %>

data/app/views/rails_onboarding/admin/flows/index.html.erb

@@ -0,0 +1,125 @@
+<% content_for :page_title, "Onboarding Flows" %>
+
+<% content_for :header_actions do %>
+  <%= link_to "New Flow", new_admin_flow_path, class: "admin-btn admin-btn-primary" %>
+<% end %>
+
+<% if @active_flow %>
+  <div class="admin-alert admin-alert-info">
+    <strong>Active Flow:</strong> <%= @active_flow[:name] %>
+    <span class="admin-badge"><%= @active_flow[:steps]&.length || 0 %> steps</span>
+  </div>
+<% end %>
+
+<!-- Flows List -->
+<div class="admin-flows-grid">
+  <% if @flows && @flows.any? %>
+    <% @flows.each do |flow| %>
+      <div class="admin-flow-card <%= flow[:active] ? 'admin-flow-active' : '' %>">
+        <div class="admin-flow-header">
+          <h3 class="admin-flow-title">
+            <%= flow[:name] %>
+            <% if flow[:active] %>
+              <span class="admin-badge admin-badge-success">Active</span>
+            <% end %>
+          </h3>
+          <p class="admin-flow-description"><%= flow[:description] %></p>
+        </div>
+
+        <div class="admin-flow-body">
+          <div class="admin-flow-stats">
+            <div class="admin-flow-stat">
+              <div class="admin-flow-stat-value"><%= flow[:steps]&.length || 0 %></div>
+              <div class="admin-flow-stat-label">Steps</div>
+            </div>
+            <div class="admin-flow-stat">
+              <div class="admin-flow-stat-value">
+                <%= flow[:updated_at] ? time_ago_in_words(flow[:updated_at]) : 'N/A' %>
+              </div>
+              <div class="admin-flow-stat-label">Last Modified</div>
+            </div>
+          </div>
+
+          <div class="admin-flow-steps-preview">
+            <% if flow[:steps] && flow[:steps].any? %>
+              <div class="admin-flow-steps-list">
+                <% flow[:steps].first(4).each_with_index do |step, index| %>
+                  <div class="admin-flow-step-badge">
+                    <%= step[:icon] %> <%= step[:title] %>
+                  </div>
+                <% end %>
+                <% if flow[:steps].length > 4 %>
+                  <div class="admin-flow-step-more">
+                    +<%= flow[:steps].length - 4 %> more
+                  </div>
+                <% end %>
+              </div>
+            <% else %>
+              <p class="admin-text-muted">No steps configured</p>
+            <% end %>
+          </div>
+        </div>
+
+        <div class="admin-flow-actions">
+          <%= link_to "View", admin_flow_path(flow[:id]), class: "admin-btn admin-btn-sm admin-btn-secondary" %>
+          <%= link_to "Edit", edit_admin_flow_path(flow[:id]), class: "admin-btn admin-btn-sm admin-btn-secondary" %>
+          <%= link_to "Preview", preview_admin_flow_path(flow[:id]), class: "admin-btn admin-btn-sm admin-btn-secondary", target: "_blank" %>
+
+          <% unless flow[:active] %>
+            <%= button_to "Activate",
+                activate_admin_flow_path(flow[:id]),
+                method: :post,
+                class: "admin-btn admin-btn-sm admin-btn-success",
+                data: { confirm: "Activate this flow? This will deactivate the current flow." } %>
+          <% end %>
+
+          <%= button_to "Duplicate",
+              duplicate_admin_flow_path(flow[:id]),
+              method: :post,
+              class: "admin-btn admin-btn-sm admin-btn-secondary" %>
+
+          <% unless flow[:active] %>
+            <%= button_to "Delete",
+                admin_flow_path(flow[:id]),
+                method: :delete,
+                class: "admin-btn admin-btn-sm admin-btn-danger",
+                data: { confirm: "Are you sure you want to delete this flow?" } %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="admin-empty-state-large">
+      <div class="admin-empty-icon">📋</div>
+      <h3>No Flows Created</h3>
+      <p>Create your first onboarding flow to get started.</p>
+      <%= link_to "Create Flow", new_admin_flow_path, class: "admin-btn admin-btn-primary" %>
+    </div>
+  <% end %>
+</div>
+
+<!-- Pagination -->
+<% if @pagy.count.positive? %>
+  <div class="admin-pagination">
+    <%= raw @pagy.info_tag(item_name: "flows") %>
+    <%= raw @pagy.series_nav if @pagy.pages > 1 %>
+  </div>
+<% end %>
+
+<!-- Templates Section -->
+<% if @templates && @templates.any? %>
+  <div class="admin-section">
+    <h2 class="admin-section-title">Pre-built Templates</h2>
+    <p class="admin-section-description">Start with a template designed for your use case</p>
+
+    <div class="admin-templates-grid">
+      <% @templates.each do |template| %>
+        <div class="admin-template-card">
+          <h4 class="admin-template-title"><%= template[:name] %></h4>
+          <p class="admin-template-description"><%= template[:description] %></p>
+          <%= link_to "Use Template", new_admin_flow_path(template: template[:id]), class: "admin-btn admin-btn-sm admin-btn-primary" %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/rails_onboarding/admin/flows/new.html.erb

@@ -0,0 +1,7 @@
+<% content_for :page_title, "Create New Flow" %>
+
+<% content_for :header_actions do %>
+  <%= link_to "← Back to Flows", admin_flows_path, class: "admin-btn admin-btn-secondary" %>
+<% end %>
+
+<%= render 'form' %>

data/app/views/rails_onboarding/admin/flows/preview.html.erb

@@ -0,0 +1,40 @@
+<div class="onboarding-step-wrapper">
+  <div class="admin-alert admin-alert-info admin-alert-preview">
+    <strong>Preview Mode:</strong> "<%= @flow.name %>" - <%= @steps.length %> step<%= 's' unless @steps.length == 1 %>.
+    This is a read-only walkthrough; the buttons below don't affect any real onboarding progress.
+    <%= link_to "Back to flow", admin_flow_path(@flow), class: "admin-card-action" %>
+  </div>
+
+  <% if @steps.any? %>
+    <% @steps.each_with_index do |step, index| %>
+      <div class="step-content">
+        <div class="step-header">
+          <% if step[:icon] %>
+            <span class="step-icon"><%= step[:icon] %></span>
+          <% end %>
+          <h2 class="step-title">
+            <%= step[:title] %>
+            <span class="admin-text-muted">(<%= index + 1 %> of <%= @steps.length %>)</span>
+          </h2>
+        </div>
+
+        <div class="step-body">
+          <% if step[:description].present? %>
+            <p class="step-description"><%= step[:description] %></p>
+          <% end %>
+
+          <p>
+            <code><%= step[:name] %></code>
+            <% if step[:skippable] %>
+              <span class="admin-badge admin-badge-warning">Skippable</span>
+            <% end %>
+          </p>
+        </div>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="step-content">
+      <p class="admin-empty-state">This flow has no steps configured yet.</p>
+    </div>
+  <% end %>
+</div>

data/app/views/rails_onboarding/admin/flows/show.html.erb

@@ -0,0 +1,114 @@
+<% content_for :page_title, @flow[:name] %>
+
+<% content_for :header_actions do %>
+  <%= link_to "← Back to Flows", admin_flows_path, class: "admin-btn admin-btn-secondary" %>
+  <%= link_to "Edit", edit_admin_flow_path(@flow[:id]), class: "admin-btn admin-btn-primary" %>
+<% end %>
+
+<div class="admin-flow-detail-grid">
+  <!-- Flow Info -->
+  <div class="admin-card">
+    <div class="admin-card-header">
+      <h3 class="admin-card-title">Flow Information</h3>
+      <% if @flow[:active] %>
+        <span class="admin-badge admin-badge-success">Active</span>
+      <% end %>
+    </div>
+    <div class="admin-card-body">
+      <dl class="admin-dl">
+        <dt>Name</dt>
+        <dd><%= @flow[:name] %></dd>
+
+        <dt>Description</dt>
+        <dd><%= @flow[:description] || 'No description' %></dd>
+
+        <dt>Total Steps</dt>
+        <dd><%= @steps.length %></dd>
+
+        <dt>Created</dt>
+        <dd><%= @flow[:created_at] ? @flow[:created_at].strftime('%B %d, %Y') : 'N/A' %></dd>
+
+        <dt>Last Modified</dt>
+        <dd><%= @flow[:updated_at] ? @flow[:updated_at].strftime('%B %d, %Y') : 'N/A' %></dd>
+      </dl>
+    </div>
+    <div class="admin-card-footer">
+      <% unless @flow[:active] %>
+        <%= button_to "Activate Flow", activate_admin_flow_path(@flow[:id]), method: :post, class: "admin-btn admin-btn-success" %>
+      <% end %>
+      <%= link_to "Preview Flow", preview_admin_flow_path(@flow[:id]), class: "admin-btn admin-btn-secondary", target: "_blank" %>
+    </div>
+  </div>
+
+  <!-- Performance Stats -->
+  <% if @flow_stats && @flow_stats.any? %>
+    <div class="admin-card">
+      <div class="admin-card-header">
+        <h3 class="admin-card-title">Performance Metrics</h3>
+      </div>
+      <div class="admin-card-body">
+        <div class="admin-stats-list">
+          <% @flow_stats.each do |step_name, stats| %>
+            <div class="admin-stat-item">
+              <div class="admin-stat-label"><%= step_name.humanize %></div>
+              <div class="admin-stat-values">
+                <span class="admin-badge"><%= stats[:started] %> started</span>
+                <span class="admin-badge admin-badge-success"><%= stats[:completed] %> completed</span>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<!-- Steps List -->
+<div class="admin-card">
+  <div class="admin-card-header">
+    <h3 class="admin-card-title">Onboarding Steps</h3>
+    <span class="admin-badge"><%= @steps.length %> steps</span>
+  </div>
+  <div class="admin-card-body">
+    <% if @steps.any? %>
+      <div class="admin-flow-steps-detail">
+        <% @steps.each_with_index do |step, index| %>
+          <div class="admin-flow-step-detail">
+            <div class="admin-flow-step-number"><%= index + 1 %></div>
+            <div class="admin-flow-step-info">
+              <h4 class="admin-flow-step-title">
+                <%= step[:icon] %> <%= step[:title] %>
+              </h4>
+              <p class="admin-flow-step-meta">
+                <code><%= step[:name] %></code>
+                <% if step[:skippable] %>
+                  <span class="admin-badge admin-badge-sm admin-badge-warning">Skippable</span>
+                <% end %>
+              </p>
+              <% if step[:description].present? %>
+                <p class="admin-flow-step-description"><%= step[:description] %></p>
+              <% end %>
+            </div>
+            <% if @flow_stats && @flow_stats[step[:name].to_s] %>
+              <div class="admin-flow-step-stats">
+                <div class="admin-stat-mini">
+                  <div class="admin-stat-mini-value"><%= @flow_stats[step[:name].to_s][:started] %></div>
+                  <div class="admin-stat-mini-label">Started</div>
+                </div>
+                <div class="admin-stat-mini">
+                  <div class="admin-stat-mini-value"><%= @flow_stats[step[:name].to_s][:completed] %></div>
+                  <div class="admin-stat-mini-label">Completed</div>
+                </div>
+              </div>
+            <% end %>
+          </div>
+          <% if index < @steps.length - 1 %>
+            <div class="admin-flow-step-arrow">→</div>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <p class="admin-empty-state">No steps configured</p>
+    <% end %>
+  </div>
+</div>