From 38e8169067030284f1de1ac14d1632170e8dcf8e Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 20:37:31 +0200
Subject: [PATCH] feat(goals/show): status-aware chart variants for empty +
 no-target-date

Empty state (goal with zero contributions) was rendering a flat-at-$0
saved series and a flat-at-$0 projection that looked broken to anyone
opening a freshly created goal. Now show.html.erb branches on
@goal.goal_contributions.empty? and renders a piggy-bank + "Add a
contribution" CTA card before the chart card. Brand-new goals get a
clean inline call-to-action instead of a misleading line at zero.

No-target-date goals (target_amount set, target_date null) used to
render a standalone "Set a target date" prompt card and hide history
entirely. Now they render the chart with the saved history + the
target horizontal line (no projection segment, no projection legend
item), plus a secondary "Set target date" callout below the chart
linking into the edit modal. History is informative even without a
deadline.

Locale: new goals.show.empty.{heading,body,cta}.
---
 app/views/goals/show.html.erb     | 39 ++++++++++++++++++++-----------
 config/locales/views/goals/en.yml |  4 ++++
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/app/views/goals/show.html.erb b/app/views/goals/show.html.erb
index 95b353c2b..ecc343cad 100644
--- a/app/views/goals/show.html.erb
+++ b/app/views/goals/show.html.erb
@@ -204,21 +204,22 @@
           </div>
         <% end %>
       </div>
-    <% elsif @goal.target_date.nil? %>
-      <%# No-target-date prompt %>
+    <% elsif @goal.goal_contributions.empty? %>
+      <%# No contributions yet: render an inline "add your first" CTA card
+          instead of a flat-at-$0 chart that looks broken. %>
       <div class="bg-container rounded-xl shadow-border-xs p-5 flex flex-col items-center justify-center text-center">
         <div class="w-16 h-16 rounded-full bg-surface-inset inline-flex items-center justify-center text-secondary mb-3">
-          <%= icon("calendar-plus", size: "2xl") %>
+          <%= icon("piggy-bank", size: "2xl") %>
         </div>
-        <h2 class="text-lg font-semibold text-primary"><%= t(".no_target_date.heading") %></h2>
-        <p class="text-sm text-secondary mt-1 max-w-md"><%= t(".no_target_date.body") %></p>
+        <h2 class="text-lg font-semibold text-primary"><%= t(".empty.heading") %></h2>
+        <p class="text-sm text-secondary mt-1 max-w-md"><%= t(".empty.body") %></p>
         <div class="mt-4">
           <%= render DS::Link.new(
-            text: t(".no_target_date.cta"),
-            variant: "outline",
+            text: t(".empty.cta"),
+            variant: "primary",
             size: "sm",
-            href: edit_goal_path(@goal),
-            icon: "calendar-plus",
+            href: new_goal_contribution_path(@goal),
+            icon: "plus",
             frame: :modal
           ) %>
         </div>
@@ -236,10 +237,12 @@
               <svg width="18" height="6" class="text-primary"><line x1="0" y1="3" x2="18" y2="3" stroke="currentColor" stroke-width="2" /></svg>
               <%= t(".projection.legend_saved") %>
             </span>
-            <span class="inline-flex items-center gap-1.5">
-              <svg width="18" height="6"><line x1="0" y1="3" x2="18" y2="3" stroke="<%= projection_color %>" stroke-width="2" stroke-dasharray="3 3" /></svg>
-              <%= t(".projection.legend_projection") %>
-            </span>
+            <% unless @goal.target_date.nil? %>
+              <span class="inline-flex items-center gap-1.5">
+                <svg width="18" height="6"><line x1="0" y1="3" x2="18" y2="3" stroke="<%= projection_color %>" stroke-width="2" stroke-dasharray="3 3" /></svg>
+                <%= t(".projection.legend_projection") %>
+              </span>
+            <% end %>
           </div>
         </div>
         <div class="flex-1 min-h-[200px]"
@@ -247,6 +250,16 @@
              data-goal-projection-chart-data-value="<%= @goal.projection_payload.to_json %>"
              data-goal-projection-chart-aria-label-value="<%= t("goals.show.projection.aria_label", name: @goal.name) %>"
              data-goal-projection-chart-aria-description-value="<%= strip_tags(@stats[:projection_summary]) %>"></div>
+        <% if @goal.target_date.nil? %>
+          <div class="mt-3 flex items-center gap-2 text-xs text-secondary">
+            <span class="text-subdued"><%= icon("calendar-plus", size: "sm") %></span>
+            <span class="flex-1"><%= t(".no_target_date.body") %></span>
+            <%= link_to t(".no_target_date.cta"),
+                       edit_goal_path(@goal),
+                       data: { turbo_frame: :modal },
+                       class: "font-medium text-primary underline-offset-2 hover:underline" %>
+          </div>
+        <% end %>
       </div>
     <% end %>
   </section>
diff --git a/config/locales/views/goals/en.yml b/config/locales/views/goals/en.yml
index 529d56d51..c40ecde16 100644
--- a/config/locales/views/goals/en.yml
+++ b/config/locales/views/goals/en.yml
@@ -153,6 +153,10 @@ en:
         heading: Add a target date
         body: Set a deadline to project a finish line and track required pace.
         cta: Set target date
+      empty:
+        heading: No contributions yet
+        body: Track your progress by adding your first contribution.
+        cta: Add a contribution
       source:
         initial: Initial
         manual: Manual