From 06dd4d3bd93222a7a3515850bc3f2875c2b2fa81 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 15:04:13 +0100
Subject: [PATCH] refactor: streamline GoalStats layout and improve user
 guidance for goal tracking

---
 components/dashboard/GoalStats.tsx | 50 ++++++++++++++----------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/components/dashboard/GoalStats.tsx b/components/dashboard/GoalStats.tsx
index f6303aa..291d61c 100644
--- a/components/dashboard/GoalStats.tsx
+++ b/components/dashboard/GoalStats.tsx
@@ -25,9 +25,9 @@ export default function GoalStats({ goalCounts, siteId, dateRange }: GoalStatsPr
         </h3>
       </div>
 
-      <div className="space-y-2 flex-1 min-h-[200px]">
-        {hasData ? (
-          list.map((row) => (
+      {hasData ? (
+        <div className="space-y-2 flex-1 min-h-[200px]">
+          {list.map((row) => (
             <div
               key={row.event_name}
               className="flex items-center justify-between py-2 px-3 rounded-lg bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
@@ -39,30 +39,28 @@ export default function GoalStats({ goalCounts, siteId, dateRange }: GoalStatsPr
                 {formatNumber(row.count)}
               </span>
             </div>
-          ))
-        ) : (
-          <div className="h-full flex flex-col items-center justify-center text-center px-6 py-8">
-            <div className="max-w-sm w-full rounded-xl border-2 border-dashed border-neutral-200 dark:border-neutral-700 p-8 flex flex-col items-center gap-4">
-              <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
-                <BookOpenIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
-              </div>
-              <h4 className="font-semibold text-neutral-900 dark:text-white">
-                Need help tracking goals?
-              </h4>
-              <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                Add <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs font-mono">pulse.track(&apos;event_name&apos;)</code> where actions happen on your site, then see counts here. Check our guide for step-by-step instructions.
-              </p>
-              <Link
-                href="/installation"
-                className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded"
-              >
-                Read documentation
-                <ArrowRightIcon className="w-4 h-4" />
-              </Link>
-            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="flex-1 min-h-[200px] flex flex-col items-center justify-center text-center px-6 py-8 gap-4">
+          <div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
+            <BookOpenIcon className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
           </div>
-        )}
-      </div>
+          <h4 className="font-semibold text-neutral-900 dark:text-white">
+            Need help tracking goals?
+          </h4>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
+            Add <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-xs font-mono">pulse.track(&apos;event_name&apos;)</code> where actions happen on your site, then see counts here. Check our guide for step-by-step instructions.
+          </p>
+          <Link
+            href="/installation"
+            className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded"
+          >
+            Read documentation
+            <ArrowRightIcon className="w-4 h-4" />
+          </Link>
+        </div>
+      )}
     </div>
   )
 }