From 73df72ab97c04261b207a8d532ff7ca53ee293f4 Mon Sep 17 00:00:00 2001
From: Scott Pouliot <spouliot@scppowdercoating.com>
Date: Tue, 28 Apr 2026 21:37:53 -0400
Subject: [PATCH] Add dismiss button to progress widget completion state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shows an × button in the top-right of the completion card so users can
permanently hide the widget once they've seen the success message. Dismissal
is stored in localStorage (same pattern as the collapse state) so it persists
across page loads without requiring a DB migration. The widget hides itself
on the next load before any layout is shown, avoiding a flash.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Dashboard/_ShopProgressWidget.cshtml      | 19 +++++++++----
 .../wwwroot/js/shop-progress-widget.js        | 28 +++++++++++++++----
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/PowderCoating.Web/Views/Dashboard/_ShopProgressWidget.cshtml b/src/PowderCoating.Web/Views/Dashboard/_ShopProgressWidget.cshtml
index 10386b4..5b05155 100644
--- a/src/PowderCoating.Web/Views/Dashboard/_ShopProgressWidget.cshtml
+++ b/src/PowderCoating.Web/Views/Dashboard/_ShopProgressWidget.cshtml
@@ -19,12 +19,19 @@
     <div id="shopProgressBody">
         @if (Model.AllDone)
         {
-            <div class="px-4 py-4 text-center">
-                <div class="fw-semibold mb-1" style="font-size:1rem;color:var(--pcl-ink);">Your shop is fully set up 🎉</div>
-                <div class="text-muted mb-3" style="font-size:0.85rem;">You're ready to run everything from here.</div>
-                <a href="@Url.Action("Create", "Jobs")" class="btn btn-primary btn-sm">
-                    Create job <i class="bi bi-arrow-right ms-1"></i>
-                </a>
+            <div class="px-4 py-4 d-flex align-items-center justify-content-between gap-3">
+                <div>
+                    <div class="fw-semibold mb-1" style="font-size:1rem;color:var(--pcl-ink);">Your shop is fully set up 🎉</div>
+                    <div class="text-muted mb-3" style="font-size:0.85rem;">You're ready to run everything from here.</div>
+                    <a href="@Url.Action("Create", "Jobs")" class="btn btn-primary btn-sm">
+                        Create job <i class="bi bi-arrow-right ms-1"></i>
+                    </a>
+                </div>
+                <button id="shopProgressDismiss" type="button"
+                        class="btn btn-link btn-sm text-muted p-0 flex-shrink-0 align-self-start"
+                        title="Dismiss" style="font-size:1.1rem;line-height:1;">
+                    <i class="bi bi-x-lg"></i>
+                </button>
             </div>
         }
         else
diff --git a/src/PowderCoating.Web/wwwroot/js/shop-progress-widget.js b/src/PowderCoating.Web/wwwroot/js/shop-progress-widget.js
index d28de78..6c83542 100644
--- a/src/PowderCoating.Web/wwwroot/js/shop-progress-widget.js
+++ b/src/PowderCoating.Web/wwwroot/js/shop-progress-widget.js
@@ -1,11 +1,20 @@
 (function () {
-    var STORAGE_KEY = 'shopProgressCollapsed';
+    var STORAGE_KEY   = 'shopProgressCollapsed';
+    var DISMISSED_KEY = 'shopProgressDismissed';
     var widget = document.getElementById('shopProgressWidget');
     if (!widget) return;
 
-    var body     = document.getElementById('shopProgressBody');
-    var toggle   = document.getElementById('shopProgressToggle');
-    var chevron  = document.getElementById('shopProgressChevron');
+    // Hide permanently if user dismissed the completion state
+    try {
+        if (localStorage.getItem(DISMISSED_KEY) === '1') {
+            widget.style.display = 'none';
+            return;
+        }
+    } catch (e) { }
+
+    var body    = document.getElementById('shopProgressBody');
+    var toggle  = document.getElementById('shopProgressToggle');
+    var chevron = document.getElementById('shopProgressChevron');
 
     function setCollapsed(collapsed) {
         body.style.display = collapsed ? 'none' : '';
@@ -14,7 +23,7 @@
         try { localStorage.setItem(STORAGE_KEY, collapsed ? '1' : '0'); } catch (e) { }
     }
 
-    // Restore on load
+    // Restore collapse state on load
     try {
         if (localStorage.getItem(STORAGE_KEY) === '1') setCollapsed(true);
     } catch (e) { }
@@ -22,4 +31,13 @@
     toggle.addEventListener('click', function () {
         setCollapsed(body.style.display === 'none' ? false : true);
     });
+
+    // Dismiss button — completion state only
+    var dismiss = document.getElementById('shopProgressDismiss');
+    if (dismiss) {
+        dismiss.addEventListener('click', function () {
+            widget.style.display = 'none';
+            try { localStorage.setItem(DISMISSED_KEY, '1'); } catch (e) { }
+        });
+    }
 }());