From f5e41f7efe5b18b99bb82655d51b268a82191e1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Fri, 3 Apr 2026 17:51:14 +0200
Subject: [PATCH] fix(ux): improve empty-state messaging for tickets #49 and
 #57
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#49 — upgrade MyVacationsClient account-not-linked inline text to a
prominent centred amber card with icon, heading, and admin-action guidance.

#57 — replace vague AI suggestions hint with actionable copy explaining
the Step 3 dependency before the user wonders why the list is empty.

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 apps/web/src/components/projects/ProjectWizard.tsx  |  2 +-
 .../src/components/vacations/MyVacationsClient.tsx  | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/projects/ProjectWizard.tsx b/apps/web/src/components/projects/ProjectWizard.tsx
index 88e0c94..79aaaf7 100644
--- a/apps/web/src/components/projects/ProjectWizard.tsx
+++ b/apps/web/src/components/projects/ProjectWizard.tsx
@@ -730,7 +730,7 @@ function ReqSuggestions({
 
   if (!req.requiredSkills.length) {
     return (
-      <p className="text-xs text-amber-600">Add required skills in Step 3 to see suggestions.</p>
+      <p className="text-xs text-amber-600">No skills defined for this demand yet. Go back to Step 3 and add required skills — the AI will then suggest matching resources here.</p>
     );
   }
 
diff --git a/apps/web/src/components/vacations/MyVacationsClient.tsx b/apps/web/src/components/vacations/MyVacationsClient.tsx
index 88294ce..e2c5390 100644
--- a/apps/web/src/components/vacations/MyVacationsClient.tsx
+++ b/apps/web/src/components/vacations/MyVacationsClient.tsx
@@ -74,8 +74,17 @@ export function MyVacationsClient() {
       </div>
 
       {!resourceId && (
-        <div className="rounded-xl bg-amber-50 border border-amber-200 p-4 text-sm text-amber-700">
-          Your account is not linked to a resource. Please contact an administrator.
+        <div className="rounded-xl border border-amber-200 bg-amber-50 dark:bg-amber-950/20 dark:border-amber-800 p-8 flex flex-col items-center text-center gap-3">
+          <svg className="h-10 w-10 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+          </svg>
+          <div>
+            <p className="text-sm font-semibold text-amber-800 dark:text-amber-300">Account not linked to a resource</p>
+            <p className="text-sm text-amber-700 dark:text-amber-400 mt-1">
+              Your user account has not been connected to a resource record yet. Vacation tracking requires this link.<br />
+              Please ask an administrator to open your resource profile and link it to your account.
+            </p>
+          </div>
         </div>
       )}