From 76491dcb238c6e403a0e1d3bfa5387f80cb63be8 Mon Sep 17 00:00:00 2001
From: Rafael Batista <rafael@devbatista.com>
Date: Thu, 16 Apr 2026 15:05:13 -0300
Subject: [PATCH 1/3] ajuste do onboarding

---
 app/assets/stylesheets/css/app.css            | 504 +++++++++++++-----
 app/controllers/app/budgets_controller.rb     |   2 +
 app/controllers/app/dashboard_controller.rb   |   6 +-
 .../app/order_services_controller.rb          |   1 -
 .../controllers/onboarding_tour_controller.js |  31 ++
 app/models/user_onboarding_progress.rb        |   1 +
 .../dashboard/_onboarding_checklist.html.erb  |   2 +-
 .../app/dashboard/_onboarding_tour.html.erb   |  12 +-
 app/views/layouts/application.html.erb        |   2 +-
 app/views/layouts/partials/_sidebar.html.erb  |   2 +-
 10 files changed, 418 insertions(+), 145 deletions(-)

diff --git a/app/assets/stylesheets/css/app.css b/app/assets/stylesheets/css/app.css
index c9420a2..8ae41e2 100644
--- a/app/assets/stylesheets/css/app.css
+++ b/app/assets/stylesheets/css/app.css
@@ -15,7 +15,7 @@ File: app.css
 
 
 
-body {
+body {
 
 	font-size: 14px;
 
@@ -27,15 +27,15 @@ body {
 
 	overflow-x: hidden;
 
-	font-family: Roboto, sans-serif
-
-}
-
-html.page-pending .wrapper,
-html.page-pending .page-footer {
-	opacity: 0;
-	visibility: hidden;
-}
+	font-family: Roboto, sans-serif
+
+}
+
+html.page-pending .wrapper,
+html.page-pending .page-footer {
+	opacity: 0;
+	visibility: hidden;
+}
 
 
 
@@ -519,7 +519,7 @@ input[type="file"].form-control.bg-dark::file-selector-button {
 
 
 
-.metismenu .has-arrow:after {
+.metismenu .has-arrow:after {
 
 	position: absolute;
 
@@ -5624,132 +5624,364 @@ payment-methods { align-items: stretch; }
 #knowledgeBaseModalBody li {
   margin-bottom: 0.4em;
 }
-#knowledgeBaseModalBody p {
-  margin-bottom: 1em;
-}
-
-/* Calendar page - technician filter */
-.calendar-filter-card {
-  background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
-  border: 1px solid #d9e2ec;
-}
-
-.calendar-tech-filter-group {
-  flex-wrap: nowrap;
-}
-
-.calendar-tech-filter-icon {
-  border-right: 0;
-  min-height: 38px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.calendar-tech-filter-group > .select2-container {
-  flex: 1 1 auto;
-  width: 1% !important;
-}
-
-.calendar-tech-filter-group > .select2-container .select2-selection {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.calendar-filter-card .select2-container--bootstrap-5 .select2-selection {
-  min-height: 38px;
-}
-
-.calendar-filter-card .select2-container--bootstrap-5 .select2-selection--multiple {
-  min-height: 38px;
-  max-height: 112px;
-  overflow-y: auto;
-  padding: 4px 6px;
-  border-color: #b6c2cf;
-}
-
-.calendar-filter-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
+#knowledgeBaseModalBody p {
+  margin-bottom: 1em;
+}
+
+/* Calendar page - technician filter */
+.calendar-filter-card {
+  background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
+  border: 1px solid #d9e2ec;
+}
+
+.calendar-tech-filter-group {
+  flex-wrap: nowrap;
+}
+
+.calendar-tech-filter-icon {
+  border-right: 0;
+  min-height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.calendar-tech-filter-group > .select2-container {
+  flex: 1 1 auto;
+  width: 1% !important;
+}
+
+.calendar-tech-filter-group > .select2-container .select2-selection {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.calendar-filter-card .select2-container--bootstrap-5 .select2-selection {
+  min-height: 38px;
+}
+
+.calendar-filter-card .select2-container--bootstrap-5 .select2-selection--multiple {
+  min-height: 38px;
+  max-height: 112px;
+  overflow-y: auto;
+  padding: 4px 6px;
+  border-color: #b6c2cf;
+}
+
+.calendar-filter-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.calendar-filter-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
+  margin: 0;
+  padding: 2px 8px;
+  border: 1px solid #bfd7ff;
+  background: #eaf2ff;
+  color: #24416b;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.calendar-filter-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
+  margin-right: 6px;
+  color: #24416b;
+}
+
+.calendar-filter-card .select2-container--bootstrap-5.select2-container--focus .select2-selection {
+  border-color: #86b7fe;
+  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
+}
+
+.audit-date-group .form-control {
+  background-color: #0f1a26;
+  color: #e8edf3;
+  border-color: #4a5562;
+}
+
+.audit-date-group .form-control::placeholder {
+  color: #a8b3bf;
+  opacity: 1;
+}
+
+.audit-date-group .input-group-text {
+  background-color: #132235;
+  border-color: #4a5562;
+  color: #e8edf3;
+  cursor: pointer;
+}
+
+.logs-filters-bar {
+  background: rgba(12, 21, 32, 0.85);
+  border: 1px solid rgba(124, 136, 149, 0.25);
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.logs-filter-input {
+  min-height: 40px;
+}
+
+.logs-filter-input.form-select,
+.logs-filter-input.form-control {
+  background-color: #0f1a26;
+  color: #e8edf3;
+  border-color: #4a5562;
+}
+
+.logs-filter-input.form-select:focus,
+.logs-filter-input.form-control:focus {
+  border-color: #6ea8fe;
+  box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.2);
+}
+
+.logs-filter-addon {
+  background-color: #132235;
+  border-color: #4a5562;
+  color: #9fb2c5;
+}
+
+.logs-apply-btn {
+  min-width: 150px;
+}
+
+.logs-clear-btn {
+  min-width: 90px;
+}
+
+/* Onboarding tour (Intro.js) */
+.introjs-tooltip {
+  position: relative;
+}
+
+.introjs-tooltip .introjs-tooltip-header {
+  position: relative;
+  padding-right: 72px;
+}
+
+.introjs-tooltip .introjs-skipbutton {
+  position: absolute !important;
+  top: 8px !important;
+  right: 10px !important;
+  left: auto !important;
+  display: inline-block !important;
+  width: auto !important;
+  height: auto !important;
+  line-height: 1.2 !important;
+  padding: 4px 9px !important;
+  border-radius: 999px !important;
+  text-align: center !important;
+  text-decoration: none !important;
+  z-index: 10 !important;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding {
+  min-width: 320px;
+  max-width: 372px;
+  border: 1px solid #d8e1ed;
+  border-radius: 16px;
+  background: #f8faff;
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
+  padding: 14px 16px 14px;
+  position: relative;
+  overflow: hidden;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-tooltip-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+  position: static !important;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-tooltip-title {
+  margin: 0;
+  color: #1f2937;
+  font-size: 0.9rem;
+  font-weight: 800;
+  line-height: 1.35;
+  letter-spacing: 0.01em;
+  padding-right: 72px;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-tooltiptext {
+  color: #4b5563;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  font-weight: 500;
+  padding: 0 0 6px;
+  margin: 0;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-progress {
+  background: #e3e9f2;
+  border-radius: 999px;
+  height: 8px;
+  margin: 10px 0 14px;
+  overflow: hidden;
+  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-progressbar {
+  background: linear-gradient(90deg, #3f8bd2 0%, #2d79bc 100%);
+  border-radius: 999px;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-tooltipbuttons {
+  border-top: 1px solid #dfe6f0;
+  margin-top: 6px;
+  padding-top: 12px;
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
   align-items: center;
-  margin: 0;
-  padding: 0;
-}
-
-.calendar-filter-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
-  margin: 0;
-  padding: 2px 8px;
-  border: 1px solid #bfd7ff;
-  background: #eaf2ff;
-  color: #24416b;
-  border-radius: 999px;
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.calendar-filter-card .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
-  margin-right: 6px;
-  color: #24416b;
-}
-
-.calendar-filter-card .select2-container--bootstrap-5.select2-container--focus .select2-selection {
-  border-color: #86b7fe;
-  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
-}
-
-.audit-date-group .form-control {
-  background-color: #0f1a26;
-  color: #e8edf3;
-  border-color: #4a5562;
-}
-
-.audit-date-group .form-control::placeholder {
-  color: #a8b3bf;
-  opacity: 1;
-}
-
-.audit-date-group .input-group-text {
-  background-color: #132235;
-  border-color: #4a5562;
-  color: #e8edf3;
-  cursor: pointer;
-}
-
-.logs-filters-bar {
-  background: rgba(12, 21, 32, 0.85);
-  border: 1px solid rgba(124, 136, 149, 0.25);
-  border-radius: 12px;
-  padding: 12px;
-}
-
-.logs-filter-input {
-  min-height: 40px;
-}
-
-.logs-filter-input.form-select,
-.logs-filter-input.form-control {
-  background-color: #0f1a26;
-  color: #e8edf3;
-  border-color: #4a5562;
-}
-
-.logs-filter-input.form-select:focus,
-.logs-filter-input.form-control:focus {
-  border-color: #6ea8fe;
-  box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.2);
+  justify-content: flex-start;
+  gap: 8px;
 }
-
-.logs-filter-addon {
-  background-color: #132235;
-  border-color: #4a5562;
-  color: #9fb2c5;
-}
-
-.logs-apply-btn {
-  min-width: 150px;
-}
-
-.logs-clear-btn {
-  min-width: 90px;
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-button {
+  float: none !important;
+  flex: 0 0 auto;
+  margin: 0 !important;
+  min-width: auto;
+  border-radius: 10px;
+  border: 1px solid #cbd7e8;
+  background: #f3f7ff;
+  color: #22374f;
+  font-size: 0.82rem;
+  font-weight: 700;
+  text-shadow: none;
+  box-shadow: none;
+  padding: 8px 14px;
+  line-height: 1.2;
+  transition: all 0.16s ease;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 0.2rem rgba(63, 139, 210, 0.2);
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-button:hover {
+  background: #eaf2fe;
+  border-color: #b8cbe5;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-nextbutton,
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-donebutton {
+  order: 2;
+  margin-left: auto !important;
+  margin-right: 0 !important;
+  min-width: auto;
+  background: #2f7ec1;
+  border-color: #2f7ec1;
+  color: #fff;
+  box-shadow: 0 3px 10px rgba(47, 126, 193, 0.2);
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-nextbutton:hover,
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-donebutton:hover {
+  background: #276da8;
+  border-color: #276da8;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-prevbutton {
+  order: 1;
+  margin-right: auto !important;
+  background: #edf2fa;
+  border-color: #c8d4e5;
+  color: #6e7f97;
 }
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-skipbutton {
+  position: absolute !important;
+  top: 10px !important;
+  right: 12px !important;
+  left: auto !important;
+  float: none !important;
+  margin: 0 !important;
+  display: inline-block !important;
+  align-items: center !important;
+  color: #6b7280 !important;
+  font-weight: 700 !important;
+  font-size: 0.76rem !important;
+  letter-spacing: 0.015em !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+  padding: 4px 9px !important;
+  border: 1px solid #d5dfed !important;
+  border-radius: 999px !important;
+  background: #f3f7ff !important;
+  line-height: 1.2 !important;
+  text-decoration: none !important;
+  box-shadow: none !important;
+  opacity: 1 !important;
+  transition: all 0.16s ease !important;
+  z-index: 5 !important;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-skipbutton:hover {
+  color: #2f7ec1 !important;
+  border-color: #b8cae3 !important;
+  background: #eaf2ff !important;
+  text-decoration: none !important;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-skipbutton:focus {
+  outline: none !important;
+  box-shadow: 0 0 0 0.2rem rgba(63, 139, 210, 0.18) !important;
+  color: #2f7ec1 !important;
+}
+
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-disabled,
+.introjs-tooltip.introjs-tooltip-onboarding .introjs-disabled:hover {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+@media (max-width: 576px) {
+  .introjs-tooltip .introjs-tooltip-header {
+    padding-right: 64px;
+  }
+
+  .introjs-tooltip .introjs-skipbutton {
+    top: 8px !important;
+    right: 8px !important;
+    font-size: 0.72rem !important;
+    padding: 4px 8px !important;
+  }
+
+  .introjs-tooltip.introjs-tooltip-onboarding {
+    min-width: 280px;
+    max-width: 320px;
+    padding: 14px;
+  }
+
+  .introjs-tooltip.introjs-tooltip-onboarding .introjs-tooltip-title {
+    font-size: 0.84rem;
+    padding-right: 64px;
+  }
+
+  .introjs-tooltip.introjs-tooltip-onboarding .introjs-button {
+    font-size: 0.8rem;
+    padding: 8px 12px;
+    min-width: auto;
+  }
+
+  .introjs-tooltip.introjs-tooltip-onboarding .introjs-nextbutton,
+  .introjs-tooltip.introjs-tooltip-onboarding .introjs-donebutton {
+    min-width: auto;
+  }
+
+  .introjs-tooltip.introjs-tooltip-onboarding .introjs-skipbutton {
+    top: 9px !important;
+    right: 10px !important;
+    font-size: 0.72rem !important;
+    padding: 4px 8px !important;
+  }
+}
diff --git a/app/controllers/app/budgets_controller.rb b/app/controllers/app/budgets_controller.rb
index 615977d..f1b4104 100644
--- a/app/controllers/app/budgets_controller.rb
+++ b/app/controllers/app/budgets_controller.rb
@@ -27,6 +27,7 @@ def create
     @budget = base_scope.new(budget_params)
 
     if @budget.save
+      mark_onboarding_step("created_budget")
       redirect_to app_budgets_path, notice: "Orçamento criado com sucesso."
     else
       @budget.service_items.build if @budget.service_items.empty?
@@ -73,6 +74,7 @@ def send_for_approval
   def approve
     already_linked = @budget.order_service.present?
     @budget.approve_and_create_order_service!(approver_role: :gestor)
+    mark_onboarding_step("created_first_work_order")
     notice = already_linked ? "Orçamento já aprovado. OS vinculada mantida como pendente." : "Orçamento aprovado pelo gestor e OS criada como pendente."
     redirect_to app_budget_path(@budget), notice: notice
   rescue ActiveRecord::RecordInvalid => e
diff --git a/app/controllers/app/dashboard_controller.rb b/app/controllers/app/dashboard_controller.rb
index 1d6e136..1b8ec14 100644
--- a/app/controllers/app/dashboard_controller.rb
+++ b/app/controllers/app/dashboard_controller.rb
@@ -2,7 +2,8 @@ class App::DashboardController < ApplicationController
   ONBOARDING_STEP_PATHS = {
     "created_technician" => :app_technicians_path,
     "created_customer" => :app_clients_path,
-    "created_first_work_order" => :app_order_services_path,
+    "created_budget" => :app_budgets_path,
+    "created_first_work_order" => :app_budgets_path,
     "moved_work_order_status" => :app_order_services_path,
     "viewed_reports" => :app_reports_path
   }.freeze
@@ -184,7 +185,8 @@ def onboarding_checklist_steps
     [
       { key: "created_technician", label: "Cadastrar técnico", path: app_technicians_path },
       { key: "created_customer", label: "Cadastrar cliente", path: app_clients_path },
-      { key: "created_first_work_order", label: "Criar primeira ordem de serviço", path: app_order_services_path },
+      { key: "created_budget", label: "Criar primeiro orçamento", path: app_budgets_path },
+      { key: "created_first_work_order", label: "Aprovar orçamento para gerar a primeira OS", path: app_budgets_path },
       { key: "moved_work_order_status", label: "Atualizar status da ordem de serviço", path: app_order_services_path },
       { key: "viewed_reports", label: "Visualizar relatórios", path: app_reports_path }
     ]
diff --git a/app/controllers/app/order_services_controller.rb b/app/controllers/app/order_services_controller.rb
index 847dc00..a0af163 100644
--- a/app/controllers/app/order_services_controller.rb
+++ b/app/controllers/app/order_services_controller.rb
@@ -62,7 +62,6 @@ def create
     @order_service.created_without_budget = true
 
     if @order_service.update(order_service_params_with_auto_schedule_status)
-      mark_onboarding_step("created_first_work_order")
       redirect_to app_order_service_url(@order_service), notice: "Ordem de serviço criada com sucesso."
     else
       set_other_resources
diff --git a/app/javascript/controllers/onboarding_tour_controller.js b/app/javascript/controllers/onboarding_tour_controller.js
index 5c25904..585e653 100644
--- a/app/javascript/controllers/onboarding_tour_controller.js
+++ b/app/javascript/controllers/onboarding_tour_controller.js
@@ -50,16 +50,20 @@ export default class extends Controller {
       if (!stepKey) return
 
       this.persistLastSeen(stepKey)
+      this.enforceSkipButtonLayout()
     })
 
+    this.intro.onafterchange(() => this.enforceSkipButtonLayout())
     this.intro.onexit(() => this.clearAutoStartParam())
     this.intro.oncomplete(() => this.clearAutoStartParam())
 
     const resumeIndex = this.findResumeIndex(progress?.last_seen_step, builtSteps)
     this.intro.start()
+    this.enforceSkipButtonLayout()
 
     if (resumeIndex > 0) {
       this.intro.goToStep(resumeIndex + 1)
+      this.enforceSkipButtonLayout()
     }
   }
 
@@ -151,4 +155,31 @@ export default class extends Controller {
     url.searchParams.delete("resume_onboarding")
     window.history.replaceState({}, "", url.toString())
   }
+
+  enforceSkipButtonLayout() {
+    window.requestAnimationFrame(() => {
+      const tooltip = document.querySelector(".introjs-tooltip")
+      const skipButton = document.querySelector(".introjs-skipbutton")
+      const title = document.querySelector(".introjs-tooltip .introjs-tooltip-title")
+
+      if (!tooltip || !skipButton) return
+
+      tooltip.style.position = "relative"
+      skipButton.style.position = "absolute"
+      skipButton.style.top = "10px"
+      skipButton.style.right = "12px"
+      skipButton.style.left = "auto"
+      skipButton.style.width = "auto"
+      skipButton.style.height = "auto"
+      skipButton.style.lineHeight = "1.2"
+      skipButton.style.padding = "4px 9px"
+      skipButton.style.margin = "0"
+      skipButton.style.display = "inline-block"
+      skipButton.style.borderRadius = "999px"
+      skipButton.style.textDecoration = "none"
+      skipButton.style.zIndex = "20"
+
+      if (title) title.style.paddingRight = "72px"
+    })
+  }
 }
diff --git a/app/models/user_onboarding_progress.rb b/app/models/user_onboarding_progress.rb
index 3597cc5..06c19b8 100644
--- a/app/models/user_onboarding_progress.rb
+++ b/app/models/user_onboarding_progress.rb
@@ -2,6 +2,7 @@ class UserOnboardingProgress < ApplicationRecord
   STEP_KEYS = %w[
     created_technician
     created_customer
+    created_budget
     created_first_work_order
     moved_work_order_status
     viewed_reports
diff --git a/app/views/app/dashboard/_onboarding_checklist.html.erb b/app/views/app/dashboard/_onboarding_checklist.html.erb
index 483d190..8d2f827 100644
--- a/app/views/app/dashboard/_onboarding_checklist.html.erb
+++ b/app/views/app/dashboard/_onboarding_checklist.html.erb
@@ -10,7 +10,7 @@
       <div class="card-header d-flex align-items-center justify-content-between">
         <h6 class="mb-0" data-onboarding-checklist-target="titleLabel">Primeiros passos</h6>
         <div class="d-flex align-items-center gap-2">
-          <span class="badge bg-light text-dark border" data-onboarding-checklist-target="progressLabel">0/5</span>
+          <span class="badge bg-light text-dark border" data-onboarding-checklist-target="progressLabel">0/6</span>
           <button
             type="button"
             class="btn btn-sm btn-outline-secondary"
diff --git a/app/views/app/dashboard/_onboarding_tour.html.erb b/app/views/app/dashboard/_onboarding_tour.html.erb
index 9718e15..89cd100 100644
--- a/app/views/app/dashboard/_onboarding_tour.html.erb
+++ b/app/views/app/dashboard/_onboarding_tour.html.erb
@@ -12,11 +12,17 @@
       title: "Cadastre os clientes",
       description: "Nesta área você registra os clientes e mantém o histórico centralizado."
     },
+    {
+      key: "created_budget",
+      selector: "#onboarding-tour-budgets-menu",
+      title: "Crie o primeiro orçamento",
+      description: "Aqui você monta orçamentos, envia para aprovação e acompanha o status."
+    },
     {
       key: "created_first_work_order",
-      selector: "#onboarding-tour-order-services-menu",
-      title: "Crie a primeira OS",
-      description: "Use Ordens de Serviço para abrir, acompanhar e concluir atendimentos."
+      selector: "#onboarding-tour-budgets-menu",
+      title: "Aprove para gerar a primeira OS",
+      description: "Ao aprovar um orçamento, o sistema gera automaticamente a primeira ordem de serviço."
     },
     {
       key: "moved_work_order_status",
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index a902eeb..84cae9d 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -25,9 +25,9 @@
   <link href="<%= asset_path('css/bootstrap.min.css') %>" rel="stylesheet">
   <link href="<%= asset_path('css/bootstrap-extended.css') %>" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+  <%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css" %>
   <link href="<%= asset_path('css/app.css') %>" rel="stylesheet">
   <link href="<%= asset_path('css/icons.css') %>" rel="stylesheet">
-  <%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css" %>
   <!-- Theme Style CSS -->
   <link rel="stylesheet" href="<%= asset_path('css/dark-theme.css') %>" />
   <link rel="stylesheet" href="<%= asset_path('css/semi-dark.css') %>" />
diff --git a/app/views/layouts/partials/_sidebar.html.erb b/app/views/layouts/partials/_sidebar.html.erb
index 3da847b..c000cf3 100644
--- a/app/views/layouts/partials/_sidebar.html.erb
+++ b/app/views/layouts/partials/_sidebar.html.erb
@@ -23,7 +23,7 @@
     <% end %>
 
     <% if current_user.gestor? || current_user.admin? %>
-    <li class="list-group-item <%= active_menu_class(app_budgets_path) %>">
+    <li id="onboarding-tour-budgets-menu" class="list-group-item <%= active_menu_class(app_budgets_path) %>">
       <%= link_to app_budgets_path do %>
       <div class="parent-icon"><i class='bx bx-receipt'></i></div>
       <div class="menu-title">Orçamentos</div>

From eeaa8a106e6af0bd09d7ef1fb8c5e6be5addf383 Mon Sep 17 00:00:00 2001
From: Rafael Batista <rafael@devbatista.com>
Date: Thu, 16 Apr 2026 15:20:58 -0300
Subject: [PATCH 2/3] ajuste guiado

---
 app/assets/stylesheets/css/app.css            | 36 +++++++++-
 app/controllers/app/dashboard_controller.rb   | 21 ------
 .../controllers/onboarding_tour_controller.js | 26 ++++++-
 .../onboarding_welcome_controller.js          | 16 +----
 .../app/dashboard/_onboarding_tour.html.erb   | 69 +++++++++++++------
 .../_onboarding_welcome_modal.html.erb        | 19 +++--
 app/views/layouts/partials/_sidebar.html.erb  |  8 +--
 7 files changed, 122 insertions(+), 73 deletions(-)

diff --git a/app/assets/stylesheets/css/app.css b/app/assets/stylesheets/css/app.css
index 8ae41e2..913b6a3 100644
--- a/app/assets/stylesheets/css/app.css
+++ b/app/assets/stylesheets/css/app.css
@@ -5944,7 +5944,7 @@ payment-methods { align-items: stretch; }
   cursor: not-allowed;
 }
 
-@media (max-width: 576px) {
+@media (max-width: 576px) {
   .introjs-tooltip .introjs-tooltip-header {
     padding-right: 64px;
   }
@@ -5983,5 +5983,35 @@ payment-methods { align-items: stretch; }
     right: 10px !important;
     font-size: 0.72rem !important;
     padding: 4px 8px !important;
-  }
-}
+  }
+}
+
+/* Onboarding welcome modal (Dashboard) */
+.onboarding-welcome-modal-dialog {
+  max-width: 520px;
+}
+
+.onboarding-welcome-modal-content {
+  border: 1px solid #d8e1ed;
+  border-radius: 16px;
+  background: #f8faff;
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
+}
+
+.onboarding-welcome-modal-header,
+.onboarding-welcome-modal-footer {
+  border-color: #dfe6f0;
+}
+
+.onboarding-welcome-modal-title {
+  color: #1f2937;
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.onboarding-welcome-modal-subtitle {
+  color: #4b5563;
+  font-size: 0.92rem;
+  line-height: 1.45;
+  font-weight: 600;
+}
diff --git a/app/controllers/app/dashboard_controller.rb b/app/controllers/app/dashboard_controller.rb
index 1b8ec14..03f61d8 100644
--- a/app/controllers/app/dashboard_controller.rb
+++ b/app/controllers/app/dashboard_controller.rb
@@ -1,13 +1,4 @@
 class App::DashboardController < ApplicationController
-  ONBOARDING_STEP_PATHS = {
-    "created_technician" => :app_technicians_path,
-    "created_customer" => :app_clients_path,
-    "created_budget" => :app_budgets_path,
-    "created_first_work_order" => :app_budgets_path,
-    "moved_work_order_status" => :app_order_services_path,
-    "viewed_reports" => :app_reports_path
-  }.freeze
-
   def index
     authorize! :read, :dashboard
 
@@ -156,7 +147,6 @@ def initialize_default_dashboard_variables
   def set_onboarding_welcome_modal
     @onboarding_progress = current_user.user_onboarding_progress
     @show_onboarding_welcome_modal = onboarding_welcome_eligible?
-    @onboarding_start_path = next_onboarding_step_path
     @show_onboarding_checklist = !current_user.tecnico?
     @onboarding_checklist_steps = onboarding_checklist_steps
   end
@@ -170,17 +160,6 @@ def onboarding_welcome_eligible?
     !@onboarding_progress.finished_all_steps?
   end
 
-  def next_onboarding_step_path
-    completed_steps = @onboarding_progress&.completed_steps || {}
-
-    next_step = UserOnboardingProgress::STEP_KEYS.find do |step_key|
-      completed_steps.fetch(step_key, false) != true
-    end
-
-    route_name = ONBOARDING_STEP_PATHS[next_step] || :app_dashboard_path
-    send(route_name)
-  end
-
   def onboarding_checklist_steps
     [
       { key: "created_technician", label: "Cadastrar técnico", path: app_technicians_path },
diff --git a/app/javascript/controllers/onboarding_tour_controller.js b/app/javascript/controllers/onboarding_tour_controller.js
index 585e653..85a2a30 100644
--- a/app/javascript/controllers/onboarding_tour_controller.js
+++ b/app/javascript/controllers/onboarding_tour_controller.js
@@ -9,6 +9,9 @@ export default class extends Controller {
 
   connect() {
     this.intro = null
+    this.persistableStepKeys = []
+    this.onWelcomeStarted = this.onWelcomeStarted.bind(this)
+    window.addEventListener("onboarding-welcome:started", this.onWelcomeStarted)
 
     if (!this.autoStartValue) return
 
@@ -18,18 +21,27 @@ export default class extends Controller {
   }
 
   disconnect() {
+    window.removeEventListener("onboarding-welcome:started", this.onWelcomeStarted)
+
     if (!this.intro) return
 
     this.intro.exit()
     this.intro = null
   }
 
+  onWelcomeStarted() {
+    this.startTour().catch((error) => {
+      console.warn("[OnboardingTour] failed to start from welcome", error)
+    })
+  }
+
   async startTour() {
     if (typeof window.introJs === "undefined") return
 
     await this.resumeIfRequested()
 
     const progress = await this.fetchProgress()
+    this.persistableStepKeys = Array.isArray(progress?.step_keys) ? progress.step_keys : []
     const builtSteps = this.buildSteps()
     if (builtSteps.length === 0) return
 
@@ -49,7 +61,10 @@ export default class extends Controller {
       const stepKey = targetElement?.dataset?.onboardingTourStepKey
       if (!stepKey) return
 
-      this.persistLastSeen(stepKey)
+      const persistStepKey = targetElement?.dataset?.onboardingTourPersistStepKey || stepKey
+      if (this.persistableStepKeys.includes(persistStepKey)) {
+        this.persistLastSeen(persistStepKey)
+      }
       this.enforceSkipButtonLayout()
     })
 
@@ -102,6 +117,9 @@ export default class extends Controller {
         if (!element) return null
 
         element.dataset.onboardingTourStepKey = step.key
+        if (step.persist_step_key) {
+          element.dataset.onboardingTourPersistStepKey = step.persist_step_key
+        }
 
         return {
           element,
@@ -116,7 +134,11 @@ export default class extends Controller {
   findResumeIndex(lastSeenStep, steps) {
     if (!lastSeenStep) return 0
 
-    const idx = steps.findIndex((step) => step.element?.dataset?.onboardingTourStepKey === lastSeenStep)
+    const idx = steps.findIndex((step) => {
+      const visibleStepKey = step.element?.dataset?.onboardingTourStepKey
+      const persistStepKey = step.element?.dataset?.onboardingTourPersistStepKey
+      return visibleStepKey === lastSeenStep || persistStepKey === lastSeenStep
+    })
     if (idx < 0) return 0
 
     return Math.min(idx + 1, Math.max(steps.length - 1, 0))
diff --git a/app/javascript/controllers/onboarding_welcome_controller.js b/app/javascript/controllers/onboarding_welcome_controller.js
index 45f4cce..15d9eeb 100644
--- a/app/javascript/controllers/onboarding_welcome_controller.js
+++ b/app/javascript/controllers/onboarding_welcome_controller.js
@@ -2,10 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["modal", "startButton", "dismissButton"]
-  static values = {
-    autoShow: Boolean,
-    startPath: String
-  }
+  static values = { autoShow: Boolean }
 
   connect() {
     this.modalInstance = null
@@ -43,15 +40,8 @@ export default class extends Controller {
 
     await this.sendOperation("resume")
     this.hideModal()
-
-    this.dispatch("started")
-
-    if (this.hasStartPathValue && this.startPathValue) {
-      const url = new URL(this.startPathValue, window.location.origin)
-      url.searchParams.set("onboarding_tour", "1")
-      window.location.href = url.toString()
-      return
-    }
+    // Wait for the modal animation/backdrop teardown, then start the dashboard tour in place.
+    window.setTimeout(() => this.dispatch("started"), 220)
 
     this.setButtonsDisabled(false)
   }
diff --git a/app/views/app/dashboard/_onboarding_tour.html.erb b/app/views/app/dashboard/_onboarding_tour.html.erb
index 89cd100..76c1529 100644
--- a/app/views/app/dashboard/_onboarding_tour.html.erb
+++ b/app/views/app/dashboard/_onboarding_tour.html.erb
@@ -1,40 +1,69 @@
 <%
   tour_steps = [
     {
-      key: "created_technician",
-      selector: "#onboarding-tour-technicians-menu",
-      title: "Cadastre os técnicos",
-      description: "Aqui você cadastra os técnicos que vão receber as ordens de serviço."
+      key: "dashboard_menu",
+      selector: "#onboarding-tour-dashboard-menu",
+      title: "Dashboard",
+      description: "Aqui você acompanha os principais números da operação: usuários, orçamentos, ordens e visão geral do dia."
     },
     {
-      key: "created_customer",
+      key: "clients_menu",
+      persist_step_key: "created_customer",
       selector: "#onboarding-tour-clients-menu",
-      title: "Cadastre os clientes",
-      description: "Nesta área você registra os clientes e mantém o histórico centralizado."
+      title: "Clientes",
+      description: "Nesta tela você consulta os clientes cadastrados e pode incluir, editar ou remover registros quando precisar."
     },
     {
-      key: "created_budget",
+      key: "budgets_menu",
+      persist_step_key: "created_budget",
       selector: "#onboarding-tour-budgets-menu",
-      title: "Crie o primeiro orçamento",
-      description: "Aqui você monta orçamentos, envia para aprovação e acompanha o status."
+      title: "Orçamentos",
+      description: "Aqui você monta propostas, envia para aprovação e acompanha cada orçamento por status."
     },
     {
-      key: "created_first_work_order",
-      selector: "#onboarding-tour-budgets-menu",
-      title: "Aprove para gerar a primeira OS",
-      description: "Ao aprovar um orçamento, o sistema gera automaticamente a primeira ordem de serviço."
+      key: "technicians_menu",
+      persist_step_key: "created_technician",
+      selector: "#onboarding-tour-technicians-menu",
+      title: "Técnicos",
+      description: "Neste menu você gerencia a equipe técnica: cadastro, ajustes de dados e manutenção dos profissionais ativos."
     },
     {
-      key: "moved_work_order_status",
+      key: "order_services_menu",
+      persist_step_key: "moved_work_order_status",
       selector: "#onboarding-tour-order-services-menu",
-      title: "Atualize os status",
-      description: "Depois de criar a OS, atualize os status para manter a operação rastreável."
+      title: "Ordens de Serviço",
+      description: "Área para controlar as OS: criação, agendamento, andamento e atualização de status da execução."
     },
     {
-      key: "viewed_reports",
+      key: "reports_menu",
+      persist_step_key: "viewed_reports",
       selector: "#onboarding-tour-reports-menu",
-      title: "Acompanhe os relatórios",
-      description: "Aqui você visualiza indicadores de volume, produtividade e desempenho."
+      title: "Relatórios",
+      description: "Aqui você gera análises de desempenho, incluindo indicadores de orçamentos e ordens concluídas."
+    },
+    {
+      key: "financial_menu",
+      selector: "#onboarding-tour-financial-menu",
+      title: "Financeiro",
+      description: "Neste módulo você visualiza valores, totais e indicadores financeiros ligados a orçamentos e ordens."
+    },
+    {
+      key: "calendar_menu",
+      selector: "#onboarding-tour-calendar-menu",
+      title: "Calendário",
+      description: "Visão de agenda geral das ordens para facilitar organização diária, distribuição e planejamento da equipe."
+    },
+    {
+      key: "configurations_menu",
+      selector: "#onboarding-tour-configurations-menu",
+      title: "Configurações",
+      description: "Aqui você ajusta preferências da empresa e também dados do seu perfil para personalizar o sistema."
+    },
+    {
+      key: "support_menu",
+      selector: "#onboarding-tour-support-menu",
+      title: "Suporte",
+      description: "Canal para abrir chamados, consultar a base de conhecimento e resolver dúvidas sobre uso do sistema."
     }
   ]
 %>
diff --git a/app/views/app/dashboard/_onboarding_welcome_modal.html.erb b/app/views/app/dashboard/_onboarding_welcome_modal.html.erb
index 2f796f7..7b06fc3 100644
--- a/app/views/app/dashboard/_onboarding_welcome_modal.html.erb
+++ b/app/views/app/dashboard/_onboarding_welcome_modal.html.erb
@@ -1,7 +1,6 @@
 <div
   data-controller="onboarding-welcome"
   data-onboarding-welcome-auto-show-value="<%= @show_onboarding_welcome_modal %>"
-  data-onboarding-welcome-start-path-value="<%= @onboarding_start_path %>"
 >
   <div
     class="modal fade"
@@ -11,18 +10,18 @@
     data-bs-backdrop="static"
     data-bs-keyboard="false"
   >
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">Bem-vindo ao CatalystOps</h5>
+    <div class="modal-dialog modal-dialog-centered onboarding-welcome-modal-dialog">
+      <div class="modal-content onboarding-welcome-modal-content">
+        <div class="modal-header onboarding-welcome-modal-header">
+          <h5 class="modal-title onboarding-welcome-modal-title">Bem-vindo ao CatalystOps</h5>
         </div>
-        <div class="modal-body">
-          <p class="mb-0">Em 2 minutos você configura o básico e já começa a operar.</p>
+        <div class="modal-body onboarding-welcome-modal-body">
+          <p class="mb-0 onboarding-welcome-modal-subtitle">Em 2 minutos você configura o básico e já começa a operar.</p>
         </div>
-        <div class="modal-footer">
+        <div class="modal-footer onboarding-welcome-modal-footer">
           <button
             type="button"
-            class="btn btn-outline-secondary"
+            class="btn btn-outline-secondary onboarding-welcome-modal-skip"
             data-action="onboarding-welcome#dismiss"
             data-onboarding-welcome-target="dismissButton"
           >
@@ -30,7 +29,7 @@
           </button>
           <button
             type="button"
-            class="btn btn-primary"
+            class="btn btn-primary onboarding-welcome-modal-start"
             data-action="onboarding-welcome#start"
             data-onboarding-welcome-target="startButton"
           >
diff --git a/app/views/layouts/partials/_sidebar.html.erb b/app/views/layouts/partials/_sidebar.html.erb
index c000cf3..0c99a7d 100644
--- a/app/views/layouts/partials/_sidebar.html.erb
+++ b/app/views/layouts/partials/_sidebar.html.erb
@@ -59,7 +59,7 @@
     <% end %>
 
     <% if can?(:read, :financial) %>
-    <li class="list-group-item <%= active_menu_class(app_financial_index_path) %>">
+    <li id="onboarding-tour-financial-menu" class="list-group-item <%= active_menu_class(app_financial_index_path) %>">
       <%= link_to app_financial_index_path do %>
       <div class="parent-icon"><i class='bx bx-line-chart'></i></div>
       <div class="menu-title">Financeiro</div>
@@ -68,7 +68,7 @@
     <% end %>
     
     <% if can?(:read, :calendar) %>
-    <li class="list-group-item <%= active_menu_class(app_calendar_index_path) %>">
+    <li id="onboarding-tour-calendar-menu" class="list-group-item <%= active_menu_class(app_calendar_index_path) %>">
       <%= link_to app_calendar_index_path do %>
       <div class="parent-icon"><i class='bx bx-calendar'></i></div>
       <div class="menu-title">Calendário</div>
@@ -76,7 +76,7 @@
     </li>
     <% end %>
 
-    <li class="list-group-item <%= active_menu_class(app_configurations_path) %>">
+    <li id="onboarding-tour-configurations-menu" class="list-group-item <%= active_menu_class(app_configurations_path) %>">
       <%= link_to app_configurations_path do %>
       <div class="parent-icon"><i class='bx bx-wrench'></i></div>
       <div class="menu-title">Configuração</div>
@@ -84,7 +84,7 @@
     </li>
 
     <% if can?(:read, :support) || can?(:read, :knowledge_base) %>
-    <li class="list-group-item <%= active_support_menu_class %>">
+    <li id="onboarding-tour-support-menu" class="list-group-item <%= active_support_menu_class %>">
       <%= link_to (can?(:read, :support) ? app_support_index_path(section: 'overview') : app_knowledge_base_index_path), class: "has-arrow" do %>
         <div class="parent-icon"><i class="bx bx-support"></i></div>
         <div class="menu-title">Suporte</div>

From 143c137c3f1f66c5618c6c278a5f800d6a4f94ce Mon Sep 17 00:00:00 2001
From: Rafael Batista <rafael@devbatista.com>
Date: Thu, 16 Apr 2026 15:27:09 -0300
Subject: [PATCH 3/3] ajustando guia

---
 app/controllers/app/dashboard_controller.rb                   | 2 ++
 app/javascript/controllers/onboarding_checklist_controller.js | 1 -
 app/views/app/dashboard/_onboarding_checklist.html.erb        | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/controllers/app/dashboard_controller.rb b/app/controllers/app/dashboard_controller.rb
index 03f61d8..39ee718 100644
--- a/app/controllers/app/dashboard_controller.rb
+++ b/app/controllers/app/dashboard_controller.rb
@@ -156,6 +156,8 @@ def onboarding_welcome_eligible?
     return true if @onboarding_progress.nil?
     return false if @onboarding_progress.dismissed_at.present?
     return false if @onboarding_progress.finished_at.present?
+    return false if @onboarding_progress.last_seen_step.present?
+    return false if @onboarding_progress.completed_steps_count.positive?
 
     !@onboarding_progress.finished_all_steps?
   end
diff --git a/app/javascript/controllers/onboarding_checklist_controller.js b/app/javascript/controllers/onboarding_checklist_controller.js
index 052430b..39c0788 100644
--- a/app/javascript/controllers/onboarding_checklist_controller.js
+++ b/app/javascript/controllers/onboarding_checklist_controller.js
@@ -102,7 +102,6 @@ export default class extends Controller {
       this.detailsExpanded = false
       this.summaryTarget.classList.remove("d-none")
     } else {
-      this.detailsExpanded = true
       this.summaryTarget.classList.add("d-none")
     }
 
diff --git a/app/views/app/dashboard/_onboarding_checklist.html.erb b/app/views/app/dashboard/_onboarding_checklist.html.erb
index 8d2f827..75e321a 100644
--- a/app/views/app/dashboard/_onboarding_checklist.html.erb
+++ b/app/views/app/dashboard/_onboarding_checklist.html.erb
@@ -17,7 +17,7 @@
             data-onboarding-checklist-target="toggleButton"
             data-action="onboarding-checklist#toggleDetails"
           >
-            Ocultar
+            Ver checklist
           </button>
         </div>
       </div>